Jump to content
  • 0

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

Maximilian

Asked by Maximilian,

 Share

Question

Maximilian Explorer

Maximilian

Posted
Posted (edited)

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

b8e7d3f10ae9.png

Спасибо.

Edited by Maximilian
Link to comment
Share on other sites

30 answers to this question

Recommended Posts

  • 0
Serlutin Explorer

Serlutin

Posted
Posted

В зависимости, что у вас находится в блоках. Если похоже на таблицу делайте таблицей. Кстати структура очень похожа на http://www.artlebedev.ru Посмотрите как там сделано.

Ну а шапку на дивах надо. Там не очень сложно, поверьте.

Link to comment
Share on other sites
  • 0
Maximilian Explorer

Maximilian

Posted
  • Author
Posted (edited)
В зависимости, что у вас находится в блоках. Если похоже на таблицу делайте таблицей. Кстати структура очень похожа на http://www.artlebedev.ru Посмотрите как там сделано.

Ну а шапку на дивах надо. Там не очень сложно, поверьте.

Структуру с лебедева и слямзил, хочу сделать под разные экраны. А с шапкой не понятно, как лучше сделать меню? Напрашивается таблица. Я так понимаю название сайта, строка с адресом и телефоном и блок меню это 3 разных дива? Как лучше организовать чтоб было удобно управлять ими?

Edited by Maximilian
Link to comment
Share on other sites
  • 0
boompaw Explorer

boompaw

Posted
Posted

Ну если тебе обязательно эти рамочки нужны вокруг ссылок, тогда через таблицу наверн легче было бы.

Если без рамочек вокруг ссылок, то действительно, через div было бы быстрее и удобней.

Link to comment
Share on other sites
  • 0
Serlutin Explorer

Serlutin

Posted
Posted
Ну если тебе обязательно эти рамочки нужны вокруг ссылок, тогда через таблицу наверн легче было бы.

Меню, как раз сверстать не так уж тяжело будет. UL {float: left} LI {padding: 5px 10px; border 1px solid black}

Тут скорее вопрос про основной контент.

Link to comment
Share on other sites
  • 0
Maximilian Explorer

Maximilian

Posted
  • Author
Posted
списки вижу.

меню вижу.

заголовок вижу.

адрес вижу.

хэдер с футером вижу.

таблиц или блоков не вижу. Автор, покажите, где они тут могут быть?

Я имею ввиду, как сверстать меню, хэдер с футером, заголовок и всё прочее. Вы можете это сделать без таблиц или блоков?

Рамки не обязательны, я просто обозначил что информация будет в таких блоках.

Link to comment
Share on other sites
  • 0
swetlana Explorer

swetlana

Posted
Posted

Вот приблизительная раскладка для вашей схемы:

<!DOCTYPE html>
<html>
<head>
	<title>Нечто абстрактное</title>
	<meta charset=utf-8 />
</head>
<body>
<header>
	<h1 class="logo">Название сайта</h1>
	<address class="office">Адрес организации</address>
	<address class="tel">телефон: 23-23-45</address>
	<nav>
		<menu>
			<li><a href="">Главная</a></li>
			<li><a href="">Ссылка 1</a></li>
			<li><a href="">Ссылка 2</a></li>
			<li><a href="">Ссылка 3</a></li>
			<li><a href="">?</a></li>
		</menu>
	</nav>
</header>
<ul class="bricks">
	<li>фигня с рамкой</li>
	<li>фигня с рамкой</li>
	<li>фигня с рамкой</li>
	<li>фигня с рамкой</li>
	<li>фигня с рамкой</li>
	<li>фигня с рамкой</li>
	<li>фигня с рамкой</li>
	<li>фигня с рамкой</li>
	<li>фигня с рамкой</li>
</ul>
<footer>
	<address class="email"><a href="mailto:mail@mail.ru">mail@mail.ru</a></address>
	<p class="horror">© 2001</p>
</footer>
</body>
</html>

а таблицы или блоки для вёрстки — обречённый тупиковый путь.

Link to comment
Share on other sites
  • 0
Maximilian Explorer

Maximilian

Posted
  • Author
Posted (edited)

А зачем тогда человечество придумало дивы и таблицы? Я не имею в виду, что ими можно делать только вёрстку, я имею в виду что люди тоже ими пользуются. Вы выносите мне мозг :)

Edited by Maximilian
Link to comment
Share on other sites
  • 0
swetlana Explorer

swetlana

Posted
Posted

див — это элемент ни о чём, лишённый семантики. Это наследие прошлого. Почти так, с небольшими оговорками.

таблицы — это очень правильная группа элементов. Многие данные удобнее всего представлять именно в таблицах. К примеру, таковым может быть прайс-лист или расписание поездов. Но если таблицы применяют для позиционирования элементов на странице — это дикость.

  • Like 1
Link to comment
Share on other sites
  • 0
swetlana Explorer

swetlana

Posted
Posted

И да, ещё:

дивы верстальщики прошлых лет были вынуждены использовать в отдельных случаях, поскольку устаревшие версии языков разметки не содержали в себе семантических элементов для разметки большинства традиционных частей веб-страницы;

таблицы для позиционирования верстальщики прошлого века были вынуждены использовать потому что браузеры того века были весьма несовершенны, и это был единственный адекватный способ передать задумку дизайнера.

Спасибо. Попробую сделать так как вы сказали.

там делать нечего. Не то что пробовать…

Минут на десять всей работы.

Link to comment
Share on other sites
  • 0
Serlutin Explorer

Serlutin

Posted
Posted
Вот приблизительная раскладка для вашей схемы

Предвижу следующий вопрос: почему не работает в IE.

Ответ. Вариант 1:подключайте скрипт

<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

Вариант 2: скачайте и подключите Modernizr (только для продвинутых)

Вариант 3: убрать все HTML5 теги, и заменить чем-то более классическим <div class="header">

Кстати адрес и телефон можно сделать с помощью hCard.

<ul class="bricks">
 <li>фигня с рамкой</li>

А вот это, наверное, лучше блоками делать. Ведь там будет не просто элементы списка, а какие-то данные. Значит уже и <article> можно использовать.

Кстати, на счёт тега <menu>. Где-то я читал, мол «давайте вместо <ul> использовать <menu>», но вот практического применения я этому не видел. Ведь <menu> задумывается, как контекстное меню или тулбар, а type="list", как мне кажется, оставили только для совместимости с браузерами. Официальной рекомендации я нигде не видел.

Link to comment
Share on other sites
  • 0
Int Explorer

Int

Posted
Posted

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

Link to comment
Share on other sites
  • 0
swetlana Explorer

swetlana

Posted
Posted
Предвижу следующий вопрос: почему не работает в IE.

Ответ. Вариант 1:подключайте скрипт

<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

Вариант 2: скачайте и подключите Modernizr (только для продвинутых)

Вариант 3: убрать все HTML5 теги, и заменить чем-то более классическим <div class="header">

ну да, всё так. Спасибо за дополнение.

Кстати адрес и телефон можно сделать с помощью hCard.

на мысль навёл сlass="tel"? :) в общем, это и подразумевалось.

<ul class="bricks">
 <li>фигня с рамкой</li>

А вот это, наверное, лучше блоками делать. Ведь там будет не просто элементы списка, а какие-то данные. Значит уже и <article> можно использовать.

А вот тут становится очевидной первичность контента.

Сейчас мы видим ряд фигнюшек с рамками. Что там будет на самом деле — остаётся только догадываться.

Но в любом случае можно задать любую осмысленную разметку между header и footer, и это будет правильно.

Кстати, на счёт тега <menu>. Где-то я читал, мол «давайте вместо <ul> использовать <menu>», но вот практического применения я этому не видел. Ведь <menu> задумывается, как контекстное меню или тулбар, а type="list", как мне кажется, оставили только для совместимости с браузерами. Официальной рекомендации я нигде не видел.

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

Link to comment
Share on other sites
  • 0
Maximilian Explorer

Maximilian

Posted
  • Author
Posted (edited)

Подскажите, как лучше спозиционировать шапку? А то не получается. Конкретно интересует, как адрес поместить по середине, а меню справа, а названи сайта с лева. Чтобы оно всё было в одну строку. Вобщем примерно така как я на рисунке показал. И ещё инетерсует, как сделать так, чтобы при уменьшении окна телефон размещался под адресом, а когда места достаточно то всё в одну строку? Большое спасибо за помощь. Хочется понять как делать правильно, а не лишь бы работало.

<!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;
	  padding: 0px;
   }
   #logo {
	  text-align:left;
	  font-size: 250%;
   }
   li {
	  float: right;
	  margin: 5px;
	  list-style-type: none;
   }
   .contacts {
	  float: top;
   }
</style>

</head>


<body>
<header>
	<h1 class="logo">Название сайта</h1> 
	<address class="contacts">Адрес: ул. Шевченко 20  телефон: 23-23-45 </address>
	<nav>
		<menu>
		   <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>
		</menu>
	</nav>
</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>

И ещё, а как же Студия Лебедева? Почему там позиционируют дивами? Например последний сайт www.baby-club.ru? Или там работают далёкие люди?

Edited by Maximilian
Link to comment
Share on other sites
  • 0
Serlutin Explorer

Serlutin

Posted
Posted (edited)

Центрируем с помощью text-align: center

Ну а в одну строчку можно сделать, например, с помощью position: relative и отрицательного top. Хотя, наверное, другие варианты.

В студии Лебедева всё правильно делают. Для них репутация важнее, чем мифическая семантика. Что хуже: не работающий в IE сайт или красота вёрстки?

Edited by Serlutin
Link to comment
Share on other sites
  • 0
Maximilian Explorer

Maximilian

Posted
  • Author
Posted (edited)
Что хуже: не работающий в IE сайт или красота вёрстки?

Вот и я теперь думаю... Но ведь мне написали что можно скрипт подключить какой-то, разве так работать не будет?

у а в одну строчку можно сделать, например, с помощью position: relative и отрицательного top

Что значит отрицательный top? Для каждого блока (Название страницы, строка с адресом и телефоном, меню) я добавил position: relative, а вот top не знаю как отрицательным сделать.

Напрашивается вариант сделать 3 дива, и просто выстроить их по горизонтали.

Edited by Maximilian
Link to comment
Share on other sites
  • 0
Serlutin Explorer

Serlutin

Posted
Posted

Скрипт будет работать. Но просто если JS отключён, что теперь довольно редко, то сайт в ослах показываться не будет. Шанс довольно небольшой, но даже он вероятен. Ну а недоброжелателей, которые отключат JS и будут писать заметки о неработающих сайтов, много.

.contacts {
	  position: relative;
	  top: -40px;
   }

Если честно, то не проверял. Но по идеи должно работать

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