Jump to content
  • 0

Вопросы от офомлению сайта

Kenzo

Asked by Kenzo,

 Share

Question

Kenzo Explorer

Kenzo

Posted
Posted

Работаю сейчас с этой страницей:

http://preview.4kings.su/

Сделал одну кнопку, а как сделать еще такую же, рядом но с другим изображением?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>4kings</title>
<style type="text/css">
  A.rollover {
	background: url(http://Preview.4kings.su/images/Lineage-II-1-icon.png);
	display: block;
	width: 128px;
	height: 128px;
   }
   A.rollover:hover {
	background: url(http://Preview.4kings.su/images/Lineage-II-2-icon.png);

</style> 
</head>
<body>
<div align="center"><img src="http://preview.4kings.su/images/4klogo.jpg" alt="" /></div>
<div align="center"><a href="http://4kings.su/" title="4kings Community" class="rollover"> </a></div>

</body>
</html>

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0
Kenzo Explorer

Kenzo

Posted
  • Author
Posted (edited)

Получалось, но изображения стоят друг под другом, почему они не стоят в одной строчке!? Ка это сделать?

P.s. адм, поправте пожалуйста название темы на "Вопросы от по оформлению сайта

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>4kings</title>
<style type="text/css">
 A.rollover {
	background: url(http://Preview.4kings.su/images/Lineage-II-1-icon.png);
	display: block;
	width: 128px;
	height: 128px;
   }
   A.rollover:hover {
	background: url(http://Preview.4kings.su/images/Lineage-II-2-icon.png);
</style> 

<style type="text/css">
  A.newimage {
	background: url(http://Preview.4kings.su/images/Warcraft-3-Frozen-Throne-1-icon.png);
	display: block;
	width: 128px;
	height: 128px;
   }
   A.newimage:hover {
	background: url(http://Preview.4kings.su/images/Warcraft-3-Frozen-Throne-2-icon.png);
</style>

</head>

<body>
<div align="center">
<img src="http://preview.4kings.su/images/4klogo.jpg" alt="" />
<a href="http://4kings.su/" title="4kings Community" class="rollover"> </a><a href="http://4kings.su/" title="4kings Community" class="newimage"> </a>

</div>

</body>
</html>

Edited by Kenzo
Link to comment
Share on other sites
  • 0
DrHorror Explorer

DrHorror

Posted
Posted (edited)

Попробуй изменить код так


<div align="center">
         <div style="width: 450px;">
                    <img alt="" src="http://preview.4kings.su/images/4klogo.jpg">
                    <br>
                    <a class="rollover" target="_blank" title="Lineage 2" href="http://4kings.su/"> </a>
                    <a class="newimage" target="_blank" title="Warcraft 3" href="http://4kings.su/"> </a>
          </div>
</div>

и у класса A.rollover добавить свойство margin-left: 110px;

float: left; оставь

Edited by DrHorror
Link to comment
Share on other sites
  • 0
mynameisharry Explorer

mynameisharry

Posted
Posted (edited)

Посмотрел код страницы. Убери пару строк в коде. Плюс конечно внутренними стиелями для элементов не надо заморачиваться. То есть в div добавлять style. Вроде как вымирает эта система внедрения графического представления к элементам. Надо всё в одном месте писать, а точнее в твоём случае в теге style, вложенном в head. :) ИМХО

<style type="text/css">
 A.rollover {
	background: url(http://Preview.4kings.su/images/Lineage-II-1-icon.png);
	display: block;
	width: 128px;
	height: 128px;
	float: left;
	margin-left: 110px; 
   }
   A.rollover:hover {
	background: url(http://Preview.4kings.su/images/Lineage-II-2-icon.png);
   A.newimage {
	background: url(http://Preview.4kings.su/images/Warcraft-3-Frozen-Throne-1-icon.png);
	display: block;
	width: 128px;
	height: 128px;
	float: left; 
   }
   A.newimage:hover {
	background: url(http://Preview.4kings.su/images/Warcraft-3-Frozen-Throne-2-icon.png);
</style>

Edited by mynameisharry
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept