Jump to content
  • 0

Верстаю макет

Mr.Black

Asked by Mr.Black,

 Share

Question

Mr.Black Explorer

Mr.Black

Posted
Posted

Верстал свой первый макет ,но у меня появилось несколько ошибок

№. 1 и 2 : http://s55.radikal.ru/i150/1010/47/0e953dcc9071.jpg

№. 3 : http://i050.radikal.ru/1010/b5/ea3d27653ce6.jpg

Кому не лень, подскажите как решить .

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Сайт</title>
  <style type="text/css">
  * 
{
	margin: 0;
	padding: 0;
}

  body {
	font: Arial, Helvetica, sans-serif; 
	background-image: url("C:/Users/Admin/Desktop/Сайт Верстка/bg.png"); 
	 }

   #head {
   margin-top:50px;
   width:100%;
   margin-left:100px;
   } 



   #profil {
   margin-left:125px;
   position: absolute;
   } 

   #speedbar {

	height:34px;
	border:0px #0F0 solid;
	top:200px;
	left:60px;
	margin-bottom:80px;
	position: absolute;

   }

   #spedbark {
	background: url("C:/Users/Admin/Desktop/Сайт Верстка/spedbark.png") no-repeat; 
	position:absolute;
	width:171px;
	height:50px;
   text-decoration: none; 
   }

	#spedbark:hover {
	background: url("C:/Users/Admin/Desktop/Сайт Верстка/spedbark_h.png") no-repeat;
	text-decoration: none; 
   }

   #spedbark_text {
	width:171px;
	color:#000000;
	font-size:17px;
	text-shadow:  black 0 0 3em;
	}

   #block {
	width:204px;

   }

   #left_bar {
	width:204px;
	border: 0px   #F00 solid;
	float:left;
	margin-top:0px;
	margin-left:25px;
	margin-right:25px;
	}

	#right_bar {
	width:204px;
	border: 0px   #F00 solid;
	float:right;
	margin-top:0px;
	margin-left:25px;
	margin-right:25px;
	}

	#conteiner {
	margin-top:130px;
	width:100%;

	}

	#menu {
	background:  url("C:/Users/Admin/Desktop/Сайт Верстка/menu.png") no-repeat;
	width:202px;
	position:absolute;
	padding-top:7px;
	border:1px #FFF solid;
	}

	#menu_ser {

	background:#efefef;
	border:2px #FFF solid;
	padding-top:35px;
	padding-left:14px;
	padding-right:14px;
	padding-bottom:3px;
	font-size:12px;
	font-family:Tahoma, Geneva, sans-serif;;

	}
	.d1, .d2, .d3 { 
	display: block; 
	line-height: 1px; 
	height: 1px;


	}
	.d2, .d3, .dialog-round div {
	border: 2px solid #FFF; /* Параметры рамки */
	border-top: none; border-bottom: none; /* Убираем границу сверху и снизу */
	font-family:Tahoma, Geneva, sans-serif;
	background:#efefef;
	font-size:12px;
	}
	.d1 { margin: 0 3px; background: #FFF; }
	.d2 { margin: 0 1px; border-width: 2px; background: #FFF; }
	.d3 { margin: 0 1px; height: 1px; }
	.dialog-round div { padding: 5px 10px; }


	#content {
	width:500px;
	border: 1px   #F00 solid;
	margin-left:250px;
	margin-right:250px;
	}


   </style>
 </head>
  <body>
  <div id="head" >
  <span id="logo">
  <img src="C:/Users/Admin/Desktop/Сайт Верстка/logo.png" style="margin-top:35px;" />
  </span>
  <span id="profil"	>
   <img src="C:/Users/Admin/Desktop/Сайт Верстка/Profil.png" />
  </span>
  </div>
  <div id="speedbar">
  <img src="C:/Users/Admin/Desktop/Сайт Верстка/speedbar.png"  style="position:absolute;padding-top:1px;" />
   <p><a href="#" id="spedbark" style="padding-top:15px;" align="center"   ><span id="spedbark_text" >Главная страница</span></a></p>
	<p><a href="#" id="spedbark" style="margin-left:175px;padding-top:15px;" align="center"><span id="spedbark_text"  >Каталох файлов</span></a></p>
	  <p><a href="#" id="spedbark" style="margin-left:350px;padding-top:15px;" align="center" ><span id="spedbark_text" align="center" >Шаблоны для Ucoz</span></a></p>
	  <p><a href="#" id="spedbark" style="margin-left:525px;padding-top:15px;" align="center" ><span id="spedbark_text" align="center" ><font color="red" >Ваша ссылка</font></span></a></p>
   <p><a href="#" id="spedbark" style="margin-left:700px;padding-top:15px;" align="center"" ><span id="spedbark_text" align="center" >Форум сайта</span></a></p>
	  </div>



	<div id="conteiner">
	 <div id="left_bar"> 


   <div id="block" style="margin-bottom:20px;" >
   <div id="menu" align="center" ><img src="C:/Users/Admin/Desktop/Сайт Верстка/menu_site.png"   /></div>
   <div class="dialog-round">
   <span class="d1"></span><span class="d2"></span><span class="d3"></span>
   <div  style="padding-top:35px;">
   Верстка by Mr.Black
   </div>
   <span class="d3"></span><span class="d2"></span><span class="d1"></span>
  </div>
  </div>

	<div id="block" style="margin-bottom:20px;" >
   <div id="menu" align="center" ><img src="C:/Users/Admin/Desktop/Сайт Верстка/best_file.png"   /></div>
   <div class="dialog-round">
   <span class="d1"></span><span class="d2"></span><span class="d3"></span>
   <div  style="padding-top:35px;">
   <img src="C:/Users/Admin/Desktop/Сайт Верстка/img_best.png"   />
   <center>
   Кол-скачиваний: [457]<br>
   Коментариев: [15]
   </center>
   </div>
   <span class="d3"></span><span class="d2"></span><span class="d1"></span>
  </div>
  </div>  
	</div>
   <div id="content"> 
   kkuyuk
  </div>
   <div id="right_bar"> 
  <div id="block" style="margin-bottom:20px;" >
   <div id="menu" align="center" ><img src="C:/Users/Admin/Desktop/Сайт Верстка/menu_site.png"   /></div>
   <div class="dialog-round">
   <span class="d1"></span><span class="d2"></span><span class="d3"></span>
   <div  style="padding-top:35px;">
   Верстка by Mr.Black
   </div>
   <span class="d3"></span><span class="d2"></span><span class="d1"></span>
  </div>
  </div>

	<div id="block" style="margin-bottom:20px;" >
   <div id="menu" align="center" ><img src="C:/Users/Admin/Desktop/Сайт Верстка/best_file.png"   /></div>
   <div class="dialog-round">
   <span class="d1"></span><span class="d2"></span><span class="d3"></span>
   <div  style="padding-top:35px;">
   <img src="C:/Users/Admin/Desktop/Сайт Верстка/img_best.png"   />
   <center>
   Кол-скачиваний: [457]<br>
   Коментариев: [15]
   </center>
   </div>
   <span class="d3"></span><span class="d2"></span><span class="d1"></span>
  </div>
  </div>  

  </div>
	</html>

Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0
Mr.Black Explorer

Mr.Black

Posted
  • Author
Posted

Спасибо помогло осталась только 1 проблема

Третий контейнер почемута зависит от висоти второго как исправить????

http://s004.radikal.ru/i206/1010/2a/6f972623d28b.jpg

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Сайт</title>
  <style type="text/css">
  * 
{
	margin: 0;
	padding: 0;

}

  body {
	font: Arial, Helvetica, sans-serif; 
	background-image: url("C:/Users/Admin/Desktop/Сайт Верстка/bg.png"); 
	}

   #site {
	border: 0px   #F00 solid;
	width:1000px;

	}

   #head {
   margin-top:50px;
   margin-left:5px;
   } 

  #logo {

   fload:left;
   position: absolute;
   margin-left:100px;
   } 



   #speedbar {


	border:0px #0F0 solid;
	margin-top:60px;
	margin-left:65px;
	margin-bottom:80px;
	position: absolute;

   }

   #spedbark {
	background: url("C:/Users/Admin/Desktop/Сайт Верстка/spedbark.png") no-repeat; 
	position:absolute;
	width:171px;
	height:50px;
	text-decoration: none; 
   }

	#spedbark:hover {
	background: url("C:/Users/Admin/Desktop/Сайт Верстка/spedbark_h.png") no-repeat;
	text-decoration: none; 
   }

   #spedbark_text {
	width:171px;
	color:#000000;
	font-size:17px;
	text-shadow:  black 0 0 3em;
	}

   #block {
	width:204px;

   }

   #left_bar {
	width:204px;
	border: 0px   #F00 solid;
	float:left;
	margin-top:0px;
	margin-left:25px;
	margin-right:25px;
	}

	#right_bar {
	width:204px;
	border: 0px   #F00 solid;
	float:right;
	margin-top:0px;
	margin-right:25px;

	}

	#conteiner {
	margin-top:130px;
	width:100%;

	}

	#menu {
	background:  url("C:/Users/Admin/Desktop/Сайт Верстка/menu.png") no-repeat;
	width:202px;
	position:absolute;
	padding-top:7px;
	border:1px #FFF solid;
	}

	#menu_ser {

	background:#efefef;
	border:2px #FFF solid;
	padding-top:35px;
	padding-left:14px;
	padding-right:14px;
	padding-bottom:3px;
	font-size:12px;
	font-family:Tahoma, Geneva, sans-serif;;

	}
	.d1, .d2, .d3 { 
	display: block; 
	line-height: 1px; 
	height: 1px;


	}
	.d2, .d3, .dialog-round div {
	border: 2px solid #FFF; /* Параметры рамки */
	border-top: none; border-bottom: none; /* Убираем границу сверху и снизу */
	font-family:Tahoma, Geneva, sans-serif;
	background:#efefef;
	font-size:12px;
	}
	.d1 { margin: 0 3px; background: #FFF; }
	.d2 { margin: 0 1px; border-width: 2px; background: #FFF; }
	.d3 { margin: 0 1px; height: 1px; }
	.dialog-round div { padding: 5px 10px; }


	#content {

	border: 0px   #F00 solid;
	margin-left:250px;
	margin-right:250px;
	}


   </style>
 </head>
  <body>
  <center>
	<div id="site"> 
  <div id="head" >
  <span id="logo">
  <img src="C:/Users/Admin/Desktop/Сайт Верстка/logo.png" style="margin-top:35px;" />
  </span>

  <span   style="margin-left:350px;"  >
   <img src="C:/Users/Admin/Desktop/Сайт Верстка/Profil.png" />
  </span>
  </div>

  <div id="speedbar" >
  <img src="C:/Users/Admin/Desktop/Сайт Верстка/speedbar.png"  style="position:absolute;padding-top:1px;"  />
   <p><a href="#" id="spedbark" style="padding-top:15px;" align="center"   ><span id="spedbark_text" >Главная страница</span></a></p>
	<p><a href="#" id="spedbark" style="margin-left:175px;padding-top:15px;" align="center"><span id="spedbark_text"  >Каталох файлов</span></a></p>
	  <p><a href="#" id="spedbark" style="margin-left:350px;padding-top:15px;" align="center" ><span id="spedbark_text" align="center" >Шаблоны для Ucoz</span></a></p>
	  <p><a href="#" id="spedbark" style="margin-left:525px;padding-top:15px;" align="center" ><span id="spedbark_text" align="center" ><font color="red" >Ваша ссылка</font></span></a></p>
   <p><a href="#" id="spedbark" style="margin-left:700px;padding-top:15px;" align="center"" ><span id="spedbark_text" align="center" >Форум сайта</span></a></p>
	  </div>




	<div id="conteiner">
	 <div id="left_bar"> 


   <div id="block" style="margin-bottom:20px;" >
   <div id="menu" align="center" ><img src="C:/Users/Admin/Desktop/Сайт Верстка/menu_site.png"   /></div>
   <div class="dialog-round">
   <span class="d1"></span><span class="d2"></span><span class="d3"></span>
   <div  style="padding-top:35px;">
   Верстка by Mr.Black
   </div>
   <span class="d3"></span><span class="d2"></span><span class="d1"></span>
  </div>
  </div>

	<div id="block" style="margin-bottom:20px;" >
   <div id="menu" align="center" ><img src="C:/Users/Admin/Desktop/Сайт Верстка/best_file.png"   /></div>
   <div class="dialog-round">
   <span class="d1"></span><span class="d2"></span><span class="d3"></span>
   <div  style="padding-top:35px;">
   <img src="C:/Users/Admin/Desktop/Сайт Верстка/img_best.png"   />
   <center>
   Кол-скачиваний: [457]<br>
   Коментариев: [15]
   </center>
   </div>
   <span class="d3"></span><span class="d2"></span><span class="d1"></span>
  </div>
  </div>  
	</div>
   <div id="content"> 
   ЗДесь будет контент
  </div>

   <div id="right_bar"> 

  <div id="block" style="margin-bottom:20px;" >
   <div id="menu" align="center" ><img src="C:/Users/Admin/Desktop/Сайт Верстка/menu_site.png"   /></div>
   <div class="dialog-round">
   <span class="d1"></span><span class="d2"></span><span class="d3"></span>
   <div  style="padding-top:35px;">
   Верстка by Mr.Black
   </div>
   <span class="d3"></span><span class="d2"></span><span class="d1"></span>
  </div>
  </div>

	<div id="block" style="margin-bottom:20px;" >
   <div id="menu" align="center" ><img src="C:/Users/Admin/Desktop/Сайт Верстка/best_file.png"   /></div>
   <div class="dialog-round">
   <span class="d1"></span><span class="d2"></span><span class="d3"></span>
   <div  style="padding-top:35px;">
   <img src="C:/Users/Admin/Desktop/Сайт Верстка/img_best.png"   />
   <center>
   Кол-скачиваний: [457]<br>
   Коментариев: [15]
   </center>
   </div>
   <span class="d3"></span><span class="d2"></span><span class="d1"></span>
  </div>
  </div>  
  </div>
  </div>
	</div>
</center>
	</body>
	</html>

Link to comment
Share on other sites
  • 0
Нет Explorer

Нет

Posted
Posted

Mr.Black, чтобы решить конкретно ту проблему, что на скринах, нужно у блока «#content» убрать «margin-left: 250px; margin-right: 250px;» и добавить «float: left». А чтобы таких проблем больше не возникало, нужно изучить, что такое float.

Link to comment
Share on other sites
  • 0
Нет Explorer

Нет

Posted
Posted (edited)

Mr.Black, я смотрю на ваш сайт и вижу, что центральный блок больше никуда не съезжает. Очевидно, изменения есть у меня в FF. В IE лучше вообще не открывать. Чтобы сайт выглядел нормально везде, его нужно сверстать заново, предварительно изучив HTML и CSS. Быстрых решений тут нет.

Edited by Нет
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