Пятница, 29 Марта 2024, 04:46

Приветствую Вас Гость

[ Новые сообщения · Игроделы · Правила · Поиск ]
  • Страница 1 из 1
  • 1
Форум игроделов » Дополнительные темы » Вебмастеринг » Меню центрировать (CSS)
Меню центрировать
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
постоянный участник
Сейчас нет на сайте
Не делай таблицами... это прошлый век biggrin
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
Форум игроделов » Дополнительные темы » Вебмастеринг » Меню центрировать (CSS)
  • Страница 1 из 1
  • 1
Поиск:

Все права сохранены. GcUp.ru © 2008-2024 Рейтинг