Как лучше сверстать?

Maximilian · February 8, 2011

Подскажите пожалуйста новичку, как лучше реализовать даную схему сайта? Где использовать таблицы, а где блоки? Потому что не знаю с чего начать. На таблицах как-то не круто, а на блоках непонятно как сделать.

Спасибо.

Edited February 8, 2011 by Maximilian

Maximilian · February 17, 2011

Скрипт будет работать. Но просто если JS отключён, что теперь довольно редко, то сайт в ослах показываться не будет. Шанс довольно небольшой, но даже он вероятен. Ну а недоброжелателей, которые отключат JS и будут писать заметки о неработающих сайтов, много.
.contacts {
	  position: relative;
	  top: -40px;
   }
Если честно, то не проверял. Но по идеи должно работать

Работает, но проблемма в том, что при уменьшении размера окна текст наползает друг на друга - это можно как-то решить. Но всёравно спасибо. И чем плохо если задать 3 дива и туда всё впихнуть?

Edited February 17, 2011 by Maximilian

SelenIT · February 17, 2011

Мне в <menu> нравится, что он означает не обезличенный список произвольного смысла, а именно навигационный элемент. Или есть другие соображения за и против?

У меня на чаше весов "против" авторитет HTML5-докторов (в лице Тома Ледбеттера), утверждающих

We thought it best to clarify that <menu> is to be used for a list of commands and is an interactive element and more likely to be used exclusively in Web Applications.

и отсутствие в спеке упоминаний, что это именно навигационный элемент. По спеке, навигационные блоки выделяются в <nav> (внутри кот. может быть что угодно по смыслу, лишь бы со ссылками), а обезличенный список команд, имхо, немногим лучше обезличенного произвольного списка (хотя формально ссылка и явл. командой). Плюс у меня есть небольшие опасения, не будут ли поисковики игнорировать/пессимизировать ссылки в <menu> (как нечто локально-интерфейсно-украшательное, т.е. явно второстепенное — хотя это лишь мои догадки).

Был бы весьма рад выслушать еще аргументы за (и в рассеивание моих опасений)!

Maximilian · February 18, 2011

Попробовал на дивах сделать, вроде нормально но как сделать так, чтобы блок с адресом и телефоном выровнять по центру и по вертикали в самый низ (чтобы был на одной строке с "Название сайта"). Напрашивается весь неадер поместить в див и относительно него выровнять всё по низу. Цвет я задал для лучего визуального восприятия, в финальной версии "сайта" его не будет.

<!DOCTYPE html>
<html>
<head>
	<title>Заглавие</title>
	<meta charset=utf-8 />
	<style type="text/css">
body {
   font-size: small;
   font-family: 'Trebuchet MS', sans-serif;
   font-weight: normal;

}


.logo {
   background-color: #fc0;
   float: left;
   width: 250px;
   font-size: 250%;
}

.bricks {
   clear: left;
}
li {
   position: relative;
   float: right;
   margin: 5px;
   list-style-type: none;
}
.contacts {
   background-color: #c0c0c0;
   float: left;
   width: 350px;
}
	</style>

</head>


<body>
<header>
	<div class="logo">Название сайта</div> 
	<div class="contacts">Адрес: ул. Шевченко 20. <br> Телефон: 23-23-45 </div>
	<div>
	<nav>

		   <li><a href="">?</a></li>
		   <li><a href="">Ссылка</a></li>	
		   <li><a href="">Ссылка2</a></li>	
		   <li><a href="">Ссылка3</a></li>	
		   <li><a href="">Ссылка4</a></li> 
	</nav>
	</div>
</header>

<div class="bricks">
	Блоки
</div>
<footer>
<hr>
	<address class="email"><a href="mailto:mail@mail.ru">mail@mail.ru</a></address>
	<p class="horror">© 2001</p>
</footer>
</body>
</html>

Edited February 18, 2011 by Maximilian

Maximilian · February 20, 2011

Переделал всё по новой, но не получается навигацию (там где ссылки, мероприятия, новости ...) разместить на одной строке с телефоном и лого. Подскажите как это сделать, плиз.

<html>
   <head>
	  <title>Название сайта</title>
	<meta charset=utf-8 />
	<style type="text/css">
	   body{
		  font-size: small;
		  font-family: 'Trebuchet MS', sans-serif;
		  font-weight: normal;
	   }
	   div{
		  margin-bottom: 0px;
		  margin-left: 0px;
		  margin-right: 0px;
		  margin-top: 0px;
	   }
	   li {
		  position: relative;
		  float: right;
		  margin-right: 5px;
		  list-style-type: none;
	   }
	   #top-stripe{
		  background-color: #000000;
		  height: 10px;
		  left: 10%;
		  position: relative;
		  width: 80%;
	   }
	   #layout {
		  max-width: 1650px;
		  margin-top: -7px;
	   }
	   #header{
			   background-color: #c0a0c1;
		  position: relative;
		  padding-bottom: 20px;
						 padding-left: 10px;
						 padding-right: 10px;
						 padding-top: 10px;
		  min-height: 30px;
	   }
	   #logo{
					font-size: 150%;
		  float: left;
		  width: 300px;
	   }
	   #contact{
					position: relative;
					margin: 0 auto;
		  width: 20%;
	   }
	   #navigation{
		  position: relative;
		  float: right;
		  width: 500px;
	   }
	   #page_body{
		  position: relative;
		  float: left;
	   }
	   #footer{}
	</style>
   </head>

   <body>
	  <div id="layout">

		 <div id="top-stripe">
		 </div>

		 <div id="header">
			<div id="logo">
			   Название сайта
			</div>
			<div id="contact">
			   телефон: 278-32-34
			</div>
			<div id="navigation">
			   <ul>

				  <li>Помощь</li>
				  <li>Мероприятия</li>
				  <li>Новости</li>
				  <li>Ссылка</li>
			   </ul>
			</div>
		 </div>

		 <div id="page_body">
		 Временные выезды (путешествия) людей в другую страну или местность, отличную от места постоянного жительства на срок от 24 часов до 6 месяцев в течение одного календарного года или с совершением не менее одной ночевки в развлекательных, оздоровительных, спортивных, гостевых, познавательных, религиозных и иных целях без занятия деятельностью, оплачиваемой из местного источника.[1].
		 </div>

		 <div id="footer">
		 </div>
	  </div>
   </body>
</html>

swetlana · February 20, 2011

Как вариант, можно убрать ширину для #contact и #navigation.

Для #contact сделать float: left.

И для #navigation ul сделать margin: 0;

Sign In

Как лучше сверстать?

Question

Maximilian

Link to comment

Share on other sites

30 answers to this question

Recommended Posts

Maximilian

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

Maximilian

Link to comment

Share on other sites

Maximilian

Link to comment

Share on other sites

swetlana

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information