2013-12-16 3 views
0

Привет, дамы и господа.Правильное выравнивание CSS

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

У меня есть два тега 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'. – mdesdev

ответ

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

Спасибо, что помогли мне разобраться! – user1610950

Смежные вопросы