Меню центрировать
|
|
andarky | Дата: Вторник, 27 Января 2015, 15:51 | Сообщение # 1 |
старожил
Сейчас нет на сайте
| У меня во так оно: HTML: Код <nav> <ul id="menu"> <li class="active"> <a href="index.html">Main</a></li> <li><a href="index1.html">Pukt1</a></li> <li><a href="index2.html">Punkt2</a></li> <li><a href="index3.html">Punkt3</a></li> <li><a href="index4.html">Punkt4</a></li> </ul> </nav>
CSS:Код #menu {width:633px;float:center;padding:0 0 0 0} #menu li {float:left;padding-left:3px} #menu li a {display:block;font-size:24px;color:#faf3ed;line-height:40px;padding:0 20px;height:44px;letter-spacing:-1px} #menu li a:hover, #menu .active a {background:url(../images/menu_bg.png) repeat}
Я бы мог сделать таблицей, но все меня ругают за такой подход и смеются. Потому решил переучиваться на дивы. Но тут много непонятного...
вот так я могу: влево ил и вправо float:left / float:rigth
А я ХОЧУ так: но как??
есть мысль такая: внутри дива сделать див содержащий эти блоки
это глупо? наверное да. Но как тогда быть?
если это НЕВОЗМОЖНО, то подскажите как сделать так:
ну вы поняли? : чтоб равномерно по ширине всё распределилось. Я нагуглил методы описания картинок, там всё понял как картинку-бэкграунд отцентрорировать по центру
Моя страничка по дизайну GameDev//Design//3D Ютубчик
|
|
| |
LunarPixel | Дата: Вторник, 27 Января 2015, 16:35 | Сообщение # 2 |
старожил
Сейчас нет на сайте
| andarky, вообще убери float:center; (центр у него не ставится) и допиши вместо него margin: 0 auto, должно помочь.
|
|
| |
andarky | Дата: Вторник, 27 Января 2015, 16:45 | Сообщение # 3 |
старожил
Сейчас нет на сайте
| margin: auto я ставил. Не помогло...
в гугле только нашел через иквэри, всё остальное - при известной ширине страницы. А мне надо резинуДобавлено (27 января 2015, 16:45) --------------------------------------------- тут ведь дело в том что их 5 блоков! они должны прижаться друг к другу и вся эта группа встать по центру...
чото не могу нагуглить... наверное так придется табличкой делать
Моя страничка по дизайну GameDev//Design//3D Ютубчик
|
|
| |
LunarPixel | Дата: Вторник, 27 Января 2015, 16:59 | Сообщение # 4 |
старожил
Сейчас нет на сайте
| andarky, у тебя, видимо, в другом месте проблема. Так как скопировал все, что ты выложил в первый пост, поставил margin: auto и меню встало по центру. Кинь больше разметки или, если у тебя там просто html, можешь его выслать.
|
|
| |
andarky | Дата: Вторник, 27 Января 2015, 18:55 | Сообщение # 5 |
старожил
Сейчас нет на сайте
| LunarPixel, спасибо за проявленный интерес к моей беде,
ну что прям все дружно кучкой по центру встали 5 дивов? интересно...
щас сам потыкаюсь еще, ну если ничего не смогу тогда выложу исходник
Моя страничка по дизайну GameDev//Design//3D Ютубчик
|
|
| |
Milfy | Дата: Вторник, 27 Января 2015, 21:35 | Сообщение # 6 |
участник
Сейчас нет на сайте
| Цитата andarky ( ) Я бы мог сделать таблицей, но все меня ругают за такой подход и смеются. никогда не верстал таблицами, но увидев их, кажется что там сложнее. float:center; такого нету. берешь все эти дивы в главный и ему присваеваешь margin 0 auto; я всегда так центрирую
|
|
| |
_ToBe_ | Дата: Вторник, 27 Января 2015, 22:09 | Сообщение # 7 |
постоянный участник
Сейчас нет на сайте
| Не делай таблицами... это прошлый век
|
|
| |
TheModo | Дата: Среда, 28 Января 2015, 12:07 | Сообщение # 8 |
был не раз
Сейчас нет на сайте
| вариант раз, просто поправил код из первого поста: CSS: Код #menu{ margin: 0; padding: 0; text-align: center; list-style-type: none; }
#menu li{ display: inline; padding: 10px 3px; }
#menu li a{ font-size: 24px; color: #faf3ed; line-height: 40px; padding: 0 20px; height: 44px; letter-spacing: -1px }
второй вариант - "те же яйца, только в профиль": Код nav { margin: 0 auto; padding: 0; width: 100%; }
nav ul{ list-style: none; text-align: center; }
nav ul li{ display: inline; margin-left: 10px; }
nav ul li:first-child{ margin-left: 0; }
nav ul li a{ text-decoration: none; color: #000; } nav ul li a:hover{ color: lightblue; }
Вариант с div HTML: Код <nav> <div style=" width:100%; height:1px; clear:both;"></div> <div id="line">#1</div> <div id="line">#2</div> <div id="line">#3</div> <div id="line">#4</div> <div id="line">#5</div> <div style=" width:100%; height:1px; clear:both;"></div> </nav>
CSS: Код nav { text-align: center; width:500px; margin: 0 auto; }
nav #line{ padding: 2px 10px; float: left; text-align: center; width: 18%; margin: 0 1%; box-sizing: border-box; }
Сообщение отредактировал TheModo - Среда, 28 Января 2015, 12:10 |
|
| |