1. дома
  2. Вопрос и ответ
  3. CSS и HTML Панель навигации Ошибка

CSS и HTML Панель навигации Ошибка

2013-11-16 7 views
1

Я пытаюсь сделать основной сайт с HTML & CSS, с помощью панели навигации, но у меня есть проблема с этим [ниже]:CSS и HTML Панель навигации Ошибка

body 
{ 
    background-color: #666; 
} 

.font_title 
{ 
    font-family: "Segoe UI"; 
    font-weight: bold; 
    font-size: 60px; 
    text-align: center; 
} 

#title 
{ 
    width: 800px; 
} 

#container 
{ 
    position: relative; 
    margin: auto; 
    width: 800px; 
    height: 995px; 
    background-color: #CCCCCC; 
} 

#navigation_holder 
{ 
    position: relative; 
    margin: auto; 
    width: 800px; 
} 
.navigation_button 
{ 
    font-family: "Segoe UI"; 
    text-align: center; 
    font-size: 26px; 
    width: 200px; 
    height: 40px; 
    background-color: #09C; 
} 
.navigation_button:hover 
{ 
    background-color: #09F; 
} 


<div id="container"> <!-- The main container --> 
<div class="font_title", id="title"> Our Site</div> 
<div id="navigation_holder"> 
<div id="navigation_button_1", class="navigation_button"> Home </div> 
<div id="navigation_button_2", class="navigation_button"> About </div> 
<div id="navigation_button_3", class="navigation_button"> Services </div> 
<div id="navigation_button_4", class="navigation_button"> Contact </div> 
</div> 

<!-- More DIVs in the container --> 

</div>

Проблема в том, - все мои кнопки навигации сложены друг на друга, а не подряд. Что я делаю не так?

The problem with the page

источник

2013-11-16 Joe

ответ

3

Вместо того, чтобы делать их divs, используйте привязные метки внутри списков. Вот изображение и полный рабочий код для вас:

enter image description here

<html> 
<head> 
<style> 

body 
{ 
    background-color: #666; 
} 

.font_title 
{ 
    font-family: "Segoe UI"; 
    font-weight: bold; 
    font-size: 60px; 
    text-align: center; 
} 

#title 
{ 
    width: 800px; 
} 

#container 
{ 
    position: relative; 
    margin: auto; 
    width: 800px; 
    height: 995px; 
    background-color: #CCCCCC; 
} 

#navigation_holder 
{ 
    position: relative; 
    margin: auto; 
    width: 800px; 
} 
.navigation_button 
{ 
    font-family: "Segoe UI"; 
    text-align: center; 
    font-size: 26px; 
    width: 200px; 
    height: 40px; 
    background-color: #09C; 
} 
.navigation_button:hover 
{ 
    background-color: #09F; 
} 

ul 
{ 
list-style-type:none; 
margin:0; 
padding:0; 
overflow:hidden; 
} 

li 
{ 
float:left; 
} 


a:link,a:visited 
{ 
display:block; 
width:200px; 
font-family: "Segoe UI"; 
text-align: center; 
font-size: 26px; 
width: 200px; 
height: 40px; 
background-color: #09C; 
} 
a:hover,a:active 
{ 
background-color: #09F; 
} 

</style> 
</head> 

<body> 
<div id="container"> <!-- The main container --> 
<div class="font_title", id="title"> Our Site</div> 
<div id="navigation_holder"> 
<ul> 
<li id="navigation_button_1" > <a href="#"> Home </a></li> 
<li id="navigation_button_2" > <a href="#"> About </a></li> 
<li id="navigation_button_3" > <a href="#"> Services </a></li> 
<li id="navigation_button_4" > <a href="#"> Contact </a></li> 
</ul> 
</div> 

<!-- More DIVs in the container --> 

</div> 
</body> 
</html>

источник

2013-11-16 10:04:07 Shreyans

+0

После этого вы можете стилизовать элементы, которые больше похожи на внешний вид вашей домашней страницы. – Shreyans

1

Проблема в том, что div s являются блочные элементы, таким образом, они, естественно, позиционируют себя друг на друга. Вы можете использовать несколько методов, чтобы заставить их вести себя. Применение display: inline-block к вашему классу .navigation_button - это то, что я бы предпочел в большинстве случаев. В этом случае, однако, будет работать float: left.

Эти два метода имеют свои преимущества и недостатки, но поплавки могут стать проблематичными, поскольку они по существу становятся неузнаваемыми для неплавающих элементов (точно так же position: absolute).

Как и в сторону, если бы я тебя, я бы тянуть height с вашего контейнера, изменить #navigation_holder к <nav>, и, возможно, даже тянуть id с (и, возможно, даже классы!) От ваших индивидуальных элементов навигации , Черт, вы могли бы полностью вытащить внутреннюю часть div и заменить их на ul, чьи li были display: inline (это было бы более семантично).

Вы можете ссылаться на них, как это:

.navigation_holder ul li { 
    display: inline; 
    padding-left: 40px; /* or whatever */ 
}

И если вы должны предназначаться только первый или последний:

.navigation_holder ul li:first-of-type { 
    // styles 
} 

.navigation_holder ul li:last-of-type { 
    // styles 
}

Чтобы поп стили по умолчанию от ul:

.navigation_holder ul { 
    list-style-type: none; 
}

источник

2013-11-16 09:59:47

1

В ответ на ваш вопрос, и вопрос на ваш вопрос ...

Что вы ищете?

Вот 3 примера:

3 List Styles

1 Предоставление вы хотите нормальную левую руку горизонтальную инлайн-список вы могли бы сделать:

HTML

Left List

<div id="navigation_holder"> 
<ul> 
<li><a href="#">Home</a></li> 
<li><a href="#">About</a></li> 
<li><a href="#">Services</a></li> 
<li><a href="#">Contact</a></li> 
</ul> 
</div>

CSS

#navigation_left ul 
{ 
margin: 0; 
padding: 0; 
list-style-type: none; 
} 

#navigation_left ul li { display: inline; } 

#navigation_left ul li a 
{ 
font-family:"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif; 
text-decoration: none; 
padding: .2em 1em; 
color: #DDD; 
background-color: #0099CF; 
border-radius: 4px; 
} 

#navigation_left ul li a:hover 
{ 
color: #FFF; 
background-color: #00BEF9; 
}

2 Обеспечивая вы хотите центрировать свои Li элементы.

HTML

List Center

<div id="navigation_center"> 
    <ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Services</a></li> 
    <li><a href="#">Contact</a></li> 
    </ul> 
</div>

CSS

#navigation_center ul 
{ 
margin: 0; 
padding: 0; 
list-style-type: none; 
text-align: center; 
} 

#navigation_center ul li { display: inline; } 

#navigation_center ul li a 
{ 
    font-family:"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif; 
    text-decoration: none; 
    padding: .2em 1em; 
    color: #DDD; 
    background-color: #0099CF; 
    border-radius: 4px; 
} 

#navigation_center ul li a:hover 
{ 
    color: #FFF; 
    background-color: #00BEF9; 
}

3 Обеспечивая вы хотите центрировать свои Lī элементы с твердым фоном.

HTML

List Center Background

<div id="navigation_center_full"> 
    <ul class="full"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Services</a></li> 
    <li><a href="#">Contact</a></li> 
    </ul> 
</div>

CSS

#navigation_center_full ul 
{ 
margin: 0; 
padding: 0; 
list-style-type: none; 
text-align: center; 
    padding: .2em 1em; 
    color: #DDD; 
    background-color: #0099CF; 
} 

#navigation_center_full ul li { display: inline; } 

#navigation_center_full ul li a 
{ 
    font-family:"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif; 
    text-decoration: none; 
    padding: .2em 1em; 
    color: #DDD; 
    background-color: #0099CF; 
    border-radius: 4px; 
} 

#navigation_center_full ul li a:hover 
{ 
    color: #FFF; 
    background-color: #00BEF9; 
}

Довольно уверен, что это должно помочь вам.

источник

2013-11-16 10:51:02

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

  • Нет связанных вопросов^_^