Я работаю над простым сайтом с панелью меню, которая закреплена в верхней части страницы при прокрутке вниз, эта часть работает правильно.
У меня есть два тега 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;
Сделайте свой логотип таким образом. Кажется, ваше меню выглядит отлично.
#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;
}
#
для стилизации элементов сid
и.
для укладки элементов сclass
.