CODEWITHSUNDEEP
htmlcssbuttonnavigationstacked
Joe
Joe

Reputation: 538

CSS and HTML Navigation Bar Error

I am trying to make a basic site with HTML & CSS, with a navigation bar, but I have a problem with it [below]: 

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 is - all my navigation buttons are stacked up ontop of each other, not on a row. What am I doing wrong?

The problem with the page

Upvotes: 1

Views: 1119

Answers (4)

Cyrus
Cyrus

Reputation: 131

Why you dont use <ul> and <li> tags? I think is better. Then in CSS you must use:

display: inline

One example in: http://www.w3schools.com/css/tryit.asp?filename=trycss_float5

Upvotes: 0

Charles Butler
Charles Butler

Reputation: 583

A reply to your question, and a question to your question...

What are you looking for?

Here are 3 examples:

3 List Styles

1 Providing you wanted a normal left hand horizontal inline-list you would do:

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 Providing you want to center your li elements.

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 Providing you want to center your li elements with a solid background.

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;
}

Pretty sure this should help you.

Upvotes: 1

Shreyans
Shreyans

Reputation: 186

Instead of making them divs, use anchor tags inside lists. Here's the image and the complete working code for you:

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>

Upvotes: 3

Chase Ries
Chase Ries

Reputation: 2204

The problem is that divs are block elements, thus they naturally position themselves on top of each other. You can use several methods to get them to behave. Applying a display: inline-block to your .navigation_button class is what I would prefer in most cases. In this case, however, a float: left will work just as well.

The two methods have their benefits and drawbacks, but floats can become problematic because they essentially become unrecognizable to non-floated elements (in the same way position: absolute does).

As an aside, if I were you, I'd pull the height off your container, change #navigation_holder to a <nav>, and perhaps even pull the ids (and possibly even the classes!) off of your individual navigation elements. Heck, you could even take out the inner divs entirely, and replace them with a ul whose li were display: inline (it would be more semantic).

You could then reference them like this:

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

And if you need to target only the first or last:

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

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

To pop the default styles off the ul:

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

Upvotes: 1

Related Questions