Не могу правильно выровнять мое меню CSS - PullRequest
Новая
       16

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

1 голос
/ 08 февраля 2012

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

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

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

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

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

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

Ответы [ 3 ]

0 голосов
/ 08 февраля 2012

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

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

Вот строительные леса, на которых вы можете построить: http://jsfiddle.net/Pz3Q3/

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

0 голосов
/ 08 февраля 2012

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

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

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

#menu { 
  float: right;
} 

#nav li{ 
  list-style:none; 
  display: inline;
}
0 голосов
/ 08 февраля 2012

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>
...