|
Меню центрировать
|
|
| 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 |
|
|
| |
