Не удается правильно выровнять мое меню CSS

Я пытаюсь выучить CSS/HTML на данный момент так жаль, если есть действительно очевидное решение этого. Я просто использую это, чтобы практиковать то, что я узнал в данный момент, но он продолжает идти не так.Не удается правильно выровнять мое меню CSS

После буквально часов возиться с моим кодом, я наконец-то получил свою навигационную панель, чтобы выровнять ее вправо, не испортив все остальное. Однако теперь он не будет сидеть в моем «заголовке» div. Моя основная структура - это заголовок div, и внутри него находится div для логотипа (выравнивается влево) и div для меню навигации (выравнивается вправо).

Однако, наконец, получив правильное выравнивание, я не могу получить свое меню div в нужном месте. Вот картина, иллюстрирующее то, что я имею в виду:

http://i.stack.imgur.com/ot5ls.png

Я временно изменил цвет моих «заголовок» дела до черного цвета, чтобы лучше проиллюстрировать мою проблему. Как вы можете видеть, мое меню находится под заголовком div, а также немного вправо?

Вот мой HTML код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>T5</title> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
</head> 

<body id="home_p"> 

<div id="header"> 

<div id="logo"> 
</div> 

<div id="menu"> 

<ul id="nav"> 
<li id="home"><a href="#"></a></li> 
<li id="about"><a href="#"></a></li> 
<li id="portfolio"><a href="#"></a></li> 
<li id="contact"><a href="#"></a></li> 
</ul> 

</div> 
</div> 


</body> 
</html>

А вот мой CSS:

body 
/* T5 */ 
{background-color:#fff8d3; font-size:100%;} 

body#home_p #home{background:url('home.gif') 0 -45px;} 
body#about_p #about{background:url('about.gif') 0 -45px;} 
body#portfolio_p #about{background:url('portfolio.gif') 0 -45px;} 
body#contact_p #about{background:url('contact.gif') 0 -45px;} 

#header { 
background-color:#000000; 
height:45px; 
width:1200px; 
margin-left:auto; 
margin-right:auto; 
margin-top:90px; 
} 

#logo { 
background-image('logo.gif'); 
height:45px; 
width:181px; 
} 


#menu { 
width:328px; 
float:right; 
} 

#nav 
{position:absolute;} 

#nav ul{ 
display: inline; 
} 


#nav li{ 
height:45px; 
margin:0px; 
padding:0px; 
list-style:none; 
position:absolute; 
right:0px; 
top:0px; 
display:inline; 
float:right; 
} 

#nav a 
{height:45px; 
display:block; 
} 


#home{left:0x; width:62px;} 
#home{background:url('home.gif') 0 0;} 
#home a:hover{background: url('home.gif') 0 -45px;} 

#about{left:62px;width:65px;} 
#about{background:url('about.gif') 0 0;} 
#about a:hover{background: url('about.gif') 0 -45px;} 

#portfolio{left:147px;width:98px;} 
#portfolio{background:url('portfolio.gif') 0 0;} 
#portfolio a:hover{background: url('portfolio.gif') 0 -45px;} 

#contact{left:265px;width:83px;} 
#contact{background:url('contact.gif') 0 0;} 
#contact a:hover{background: url('contact.gif') 0 -45px;}

Я был бы очень признателен за любую помощь. Заранее спасибо.

источник

2012-02-08 case

CSS:

body 
{ 
    background-color: #fff8d3; 
    min-width: 600px; 
} 

body#home_p #home, body#about_p #about, body#portfolio_p #about, body#contact_p #about 
{ 
    background-position: 0 -45px !important; 
} 

#header 
{ 
    background-color: black; 
    height: 45px; 
    width: 90%; 
    position: relative; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 90px; 
} 

#logo 
{ 
    background-image: url('logo.gif'); 
    background-color: #fff8d3; 
    height: 45px; 
    width: 181px; 
} 

#nav 
{ 
    position: relative; 
    float: right; 
    padding: 0; 
    margin: 0; 
} 

#nav li 
{ 
    height: 45px; 
    margin: 0 -2px; 
    padding: 0; 
    list-style: none; 
    position: relative; 
    display: inline-block; 
    background-position: 0 0; 
    background-repeat: no-repeat; 
    position: relative; 
} 

#nav li:hover 
{ 
    background-position: 0 -45px; 
} 

#nav a 
{ 
    height: 100%; 
    width: 100%; 
    position: abosolute; 
    display: block; 
} 


#home 
{ 
    width: 62px; 
    background-image: url('home.gif'); 
} 

#about 
{ 
    width: 65px; 
    background-image: url('about.gif'); 
} 

#portfolio 
{ 
    width: 98px; 
    background-image: url('portfolio.gif'); 
} 

#contact 
{ 
    width: 83px; 
    background-image: url('contact.gif'); 
}

HTML:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>T5</title> 
     <link rel="stylesheet" type="text/css" href="style.css" /> 
    </head> 
    <body id="home_p"> 
     <div id="header"> 
      <!-- The floating elements have to go before the main content, or they will appear below. --> 
      <ul id="nav"> 
       <li id="home" title="Home"><a href="javascript:void();"></a></li> 
       <li id="about" title="About"><a href="javascript:void();"></a></li> 
       <li id="portfolio" title="Portfolio"><a href="javascript:void();"></a></li> 
       <li id="contact" title="Contact"><a href="javascript:void();"></a></li> 
      </ul> 
      <div id="logo"></div> 
     </div> 
    </body> 
</html>

источник

2012-02-08 05:39:23 Zenexer

Это прекрасно, но я не совсем понимаю все изменения! – case

После этого все медленно, и, читая о позиционировании снова, я думаю, что сейчас понимаю. Сначала я не понимал, как меню может идти до логотипа в HTML! Но теперь я понимаю позиционирование немного больше. Благодаря! – case

Я сделал много других небольших улучшений. У вас было много опечаток, код, который ничего не делал, код, который можно было бы сжать, и т. Д. Обязательно сравните его с вашим предыдущим кодом. – Zenexer

Устанавливая position:absolute на #nav но не дает его координаты (left/top), он находится где-то в другом месте. Добавьте к нему границу, и вы увидите. Но давайте сделаем это:

Вам не нужно абсолютное положение в пунктах меню. Установите для каждого в float:left с запасом
Набор position:relative на #header, а затем якорь #nav в правом верхнем углу с position:absolute
Поскольку каждые акции ссылок же состояние парения, объявить a:hover только один раз меняя background- положение
Используйте доступный способ замены изображения, сохранить фактический текст в HTML

Вот подмости для вас, чтобы построить на: http://jsfiddle.net/Pz3Q3/

я настоятельно рекомендую вам прочитать: http://na.isobar.com/standards/

источник

2012-02-08 05:59:15

Думаю, я слишком рано пытался сделать слишком много! Читайте больше о позиционировании, и я думаю, что теперь я понимаю это лучше. Благодарю. – case

На самом деле, это потому, что он положил плавающие элементы после неплавающих элементов. Просто установка элемента в абсолютное позиционирование никогда не изменит его текущее положение, только его размеры и то, как он влияет на позиции братьев и сестер. – Zenexer

@Zenexer «где-то еще» -> не там, где это предназначено (в данном случае, нормальное положение потока). –

вы устанавливаете на вашем #menu ширина вызывает хаос по всей вашей CSS. Ваш «#nav ul» ничего не делает. Но в конечном итоге проблема в том, что ваш #logo должен иметь float: left;

Все абсолютное позиционирование не требуется.Используйте это:

#logo { 
    background-image('logo.gif'); 
    height:45px; 
    width:181px; 
    float: left; 
} 

#menu { 
    float: right; 
} 

#nav li{ 
    list-style:none; 
    display: inline; 
}

источник

2012-02-08 06:03:40

Спасибо за ответ. Я попробовал ваше предложение, но теперь я даже не вижу меню? – case

На самом деле все в порядке, я получил это и от другого ответа. Благодаря :) – case

Не удается правильно выровнять мое меню CSS

ответ

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