Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > слой в слое по центру

Автор: Рыжий 6.7.2007, 14:12

Нужно сделать меню навигации, "<< Previous 1 2 3 4 Next >>"

Выглядеть должно так:
user posted image

И находиться по середине страницы.

Никак не получается ((((((
Делаю так:

Код


//Контейнер:

#navigation{
    border:1px solid blue;
    width:950px;
    background:#ffffff;
    position:relative;
    margin: 0 auto 0;
    text-align:center;
}

Код


<div id='navigation' style='border:1px solid blue;'>
<div style='background:#ddd;text-align:left;margin:auto;width:400px;height:23px;'>

<div style='display:inline;color:#000000;float:left;'><u><< Previous</u></div>&nbsp;...&nbsp;

<div style='display:inline;border:3px solid #e3e3e3;background:#5c5c5c;color:#d7d7d7;width:18px;height:18px;float:left;'>5</div>

  </div>
</div>

Пытаюсь расположить еще один div по центру - нужно указывать width, если нужно сделать его "резиновым" width указывать нельзя. Что-то все так запутанно :((((

PS уже пробовал через Span и div и <center> никак :(

PPS
Нормальный код "в строчку" получился таким:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head><style>

#navigation {
clear:left;
font-family:Arial,sans-serif;
font-size:75%;
margin:1em 0pt;
padding:1em 1em 2em 0pt;
}
#navigation a, #navigation span {
background:#FFFFFF none repeat scroll 0%;
color:#666666;
display:block;
float:left;
line-height:2.2em;
margin-right:0.1em;
padding:0pt 3px;
text-align:center;
}
#navigation span.now {
border:3px solid #e3e3e3;
background:#5c5c5c;
color:#d7d7d7;
}
#navigation a {

color:#0069b2;
text-decoration:none;
}


</style></head><body>
                                        <center>
<div id="navigation">
    <a href="#"><< Previous</a> <a href="#">3</a><a href="#">4</a><span class="now">5</span>
    <a href="#">6</a><a href="#">7</a><a href="#">Next >></a>

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

Но, никак не могу довести его до нормального вида :(

Автор: z-END 6.7.2007, 14:28

а через table ?

Автор: Рыжий 6.7.2007, 14:45

z-END, а не засмеют? smile

Сейчас попробую через Table в принципе там все реально... Хм.... а если через display:table-cell; .... *ушел кодить smile

Автор: WebDisaster 6.7.2007, 15:01

dysplay: table-cell, ИМХО, не работает в IE. Я бы попробовал поиграться так же, как делают горизонтальные меню на списках (ul/li). Т.е. внешний div-контейнер с выравниванием по центру (div#navigation {margin: 0 auto}), а вложенные div#navigation a {display: block; width: auto; float: left;} - все float'ит в одну сторону (например, влево). Главное, чтобы все <a> в суммарной своей ширине укладывались в одну строку, иначе сползут на вторую.

Автор: Рыжий 6.7.2007, 15:14

Все сделал через Table smile

Конечно менее понтово, но Valid W3С

PS вообще откуда пошли слухи о том что на таблицах верстать не нужно и т.п. рррррр :((((

Автор: SelenIT 6.7.2007, 16:18

Честно говоря, не понимаю, зачем тут не то что table, но и более одного дива...

Код


<style>
#paginator { text-align: center; white-space: nowrap; font-family: sans-serif; font-size: 0.75em; }
#paginator a { color: #06c; margin: 0 0.3em; }
#paginator a.black { color: #000; margin: 0 0.8em }
#paginator span { border:0.2em solid #e3e3e3; background:#5c5c5c; color:#d7d7d7; padding: 0.1em 0.4em; margin: 0 1.1em; }
</style>
<div id="paginator">
    <a href="#" class="black">&#8592; Предыдущие</a>
    <a href="#">1</a>
    <a href="#">2</a>
    <span>3</span>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#" class="black">Следующие &#8594;</a>
</div>

Только в IE5.0 будет не так радужно - там пробелы между ссылками сожмутся до стандартной ширины и рамка вокруг текущего номера тоже сожмется. Но имхо IE5.0 давно не актуален...