Правильно выровненное меню CSS

0

Я работаю над простым сайтом с панелью меню, которая закреплена в верхней части страницы при прокрутке вниз, эта часть работает правильно.

У меня есть два тега div, один из которых плавает влево с текстовым логотипом, а другой тег div перемещается вправо с помощью меню ul.

Основной контент веб-сайта находится в области содержимого 960 x [переменной высоты].

Мне всегда хотелось, чтобы мой логотип размещался слева, чтобы выровнять его по левому краю области содержимого, а правый конец моего меню всегда был выровнен по правому краю области содержимого. Так что, если сайт больше 960px, логотип всегда находится в 0px, а конец списка ul с отступом заканчивается на 960px.

Мой стиль логотипа

Heading container:
position: relative;
background-color: white;
height: 120px;
margin: 0px auto;
border-bottom: solid 2px #ffc900;

position:fixed;
z-index: 1;
top:0;
left:0;
right:0;
margin:0;

Logo Container H1:
float: left;
font-size: 48px;
color: #ffc900;
text-transform: uppercase;
padding: 15px 0px 0px 120px;
font-weight: normal;

Heading container H5:
clear: both;
float: left;
font-size: 16px;
color: #0070ff;
padding: 0px 0px 0px 124px;
font-weight: normal;

Вот мой стиль списка:

Main_Nav:
float: right;
display: block;
position: relative;
text-decoration: none;
color: #0070ff;
padding: 7px 20px 10px 20px;
margin: -4px 4px 0px 0px;
left: -65px;    


Main_Nav a, .Main_Nav li:
text-decoration: none;
float: left;
display: block;
color: #0070ff;
margin: -5px 3px 0px 0px;
left: 170px;


Main_Nav a 
padding: 7px 15px 10px 15px;
  • 0
    Похоже, вы забыли использовать # для стилизации элементов с id и . для укладки элементов с class .
Теги:

1 ответ

1
Лучший ответ

Сделайте свой логотип таким образом. Кажется, ваше меню выглядит отлично.

#Logo {
position: absolute; //add this
left: 0;  //add this
top: 0;  //add this
float: left; // remove this line
font-size: 48px;
color: #ffc900;
text-transform: uppercase;
padding: 15px 0px 0px 120px;
font-weight: normal;
}
  • 0
    Спасибо, что помогли мне разобраться!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню