Помогите. Как сверстать?

junglecity · April 22, 2008

Вот макет: http://junglecity.ru/upload/versefour.jpg

Сверстать таблицами могу. А с дивами проблема. Не разу до этого не верстал, хочу научиться.

Как сделать верхнее синее меню? Подскажите, пожалуйста.

Fu-tai · April 22, 2008

А зачем здесь дивы?

все верстается с применением одного заголовка первого уровня, двух списков, шести спанов или также списков, и одного тега параграфа.

Dimitry Wolotko · April 22, 2008

junglecity · April 22, 2008

А зачем здесь дивы?
все верстается с применением одного заголовка первого уровня, двух списков, шести спанов или также списков, и одного тега параграфа.

А можно поподробнее?

yopopt · April 22, 2008

Макет простенький, в первом приближении:

<h1>junglecity</h1>
<ul>
	<li>О нас</li>
	<li>Контакты</li>
	<li>Доставка</li>
	<li>FAQ</li>
	<li>Корзина</li>
	<li>Вход</li>
</ul>
<ul>
	<li>Кошельки</li>
	<li>Кошельки</li>
	<li>Кошельки</li>
	<li>Кошельки</li>
	<li>Кошельки</li>
	<li>Кошельки</li>
</ul>
<div><img /><span>Картинка 1</span></div>
<div><img /><span>Картинка 2</span></div>
<div><img /><span>Картинка 3</span></div>
<div><img /><span>Картинка 4</span></div>
<div><img /><span>Картинка 5</span></div>
<div><img /><span>Картинка 6</span></div>
<div>Копирайты</div>

Поменять div на span или список и будет вариант уважаемого Fu-tai.

junglecity · April 24, 2008

почему именно список, я уже вторые сутки бьюсь и он кривой постоянно выходит.

можете расписать на примере верхнего меню?

klierik · April 24, 2008

а что тут делать то?

меню - ul li - правихо хорошего тона + семантика

левая сторона: div (float:left; width: 200px)

правая div (margin-left: 200px;)

галерея - таблица +

доктайп по желанию. все ))

yopopt · April 24, 2008

почему именно список, я уже вторые сутки бьюсь и он кривой постоянно выходит.
можете расписать на примере верхнего меню?

Покажите нам Ваши пробы пера и расскажите что конкретно не получается. Поможем.

junglecity · April 25, 2008

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

Более менее разобрался. Яндекс помог. Вот что вышло пока: http://junglecity.ru/newshop/

Один вопрос: как спозиционировать список по центру?

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>index</title>
<style type="text/css">
BODY
{
 text-align: center;
 margin-top: 20px;
}

#page
{
 width: 850px;
 margin-right: auto;
 margin-left: auto;

}

#logo
{
 text-align:left;
 margin-bottom: 20px;
}


#punkt
{
 width: 834px;
 height: 41px;
 background: #009900;
}

#punkt ul
{

 display: inline;
}

#punkt ul li
{
 padding: 3px 20px;
 border-left: 1px solid #FFF;
 list-style: none;
 display: inline;
}

#punkt ul li A
{
 font-family: Arial;
 text-decoration: none;
 color: #FFFFFF;
 font-size: 14pt;
}


.left
{
 float:left;
}


#punkt ul li.first
{
 border-left: none;
}



</style>

</head>

<body>
<div id="page">
	<div id="logo">
		<img src="theme/logo.png">
	</div>

	<div class="left">
		<img src="theme/left.png">
	</div>

	<div id="punkt" class="left">
	<ul>
		<li class="first"><a href="about.php">О нас</a></li>
		<li><a href="about.php">Контакты</a></li>
		<li><a href="about.php">Доставка</a></li>
		<li><a href="about.php">FAQ</a></li>
		<li><a href="about.php">Корзина</a></li>
		<li><a href="about.php">Вход/Регистрация</a></li>
	</ul>
	</div>
	<div>
		<img src="theme/right.png">
	</div>



</div>
</body>
</html>

junglecity · April 25, 2008

К тому же в Опере список прилипает к верхней границе, в Мозилле к нижней в ИЕ правый зеленый набалдашник отваливается вниз

junglecity · May 3, 2008

как избавиться от такого прилипания?

junglecity · May 6, 2008

Народ, ну может поможет кто с верхним меню? Я уже все перепробывал. Только хуже получается.

ZoNT · May 6, 2008

#punkt

line-height:41px;

junglecity · May 6, 2008

#punkt
line-height:41px;

Спасибо! Работает.

А почему в IE сползает меню вниз?

ZoNT · May 6, 2008

Не знаю, не смотрел в ИЕ... Некогда...

photojabber · May 10, 2008

почему именно список?

список лучше индексируется поисковиками - он воспринимается семантически-правильно. имхо это - лучший спсоб создания разделов. просто набор ссылок остается простым набором ссылок, он ничем не выделяется внутри ХТМЛ-я, чего никак не скажешь о списках.

Sign In

Помогите. Как сверстать?

Question

Link to comment

Share on other sites

15 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information