CODEWITHSUNDEEP
htmlcss
cogle
cogle

Reputation: 1079

Positioning a table in CSS

Hi I am attempting to make a navigation bar, but am running into some trouble.

Here is my Code:

HTML

<!DOCTYPE html>
<html lang = "en">
    <head>
        <title>Input Page</title>
        <link rel="stylesheet" type="text/css" href="enhance.css">
        <meta charset = "utf-8" />  
    </head> 
    <body>
        <div class = "top">
            <table class="navbar"> 
                    <tr>
                        <th colspan = "4" class = "first"> BuyBuyBuy </th>
                        <th class = "entry">Test</th>
                        <th class = "entry">Test1</th>
                        <th class = "entry">Test2</th>
                    </tr>
            </table>
        </div>
        <div>
            <p>
                Page Content
            </p>    
        </div>
    </body>
</html>

CSS

table.navbar{
    background-color: black;
    width: 100%;
}

table tr th{
    height: 50px;
    color: black;
    font-size: 40px;
    color: orange;
}

th.first{
    text-align: left;   
}

th.entry{
    text-align: center;
    padding: 10px;
    width: 20%;
}

th.entry:hover{
    color: black;
    background-color: orange;
}

div.top{
    margin: 0;

}

I am trying to create a navigation bar that basically looks like one at the top of the current page.(The StackExchange navigation bar)

My first problem is that when compiling the code above I am noticing a border of white space surrounds the table which prohibits the table from spanning the entire width of the page. I would like to eliminate this. This sort of leads into my second problem and that is I am not able to put pin the table to the top left corner of the webpage.

Any help would be appreciated. Thanks. Link to JSFiddle: http://jsfiddle.net/8WNLL/

Upvotes: 1

Views: 138

Answers (3)

Adrian Enriquez
Adrian Enriquez

Reputation: 8413

Please avoid using tables if you are creating a navigation bar. Use <nav> or <ul> instead. I changed the code that you created to achieve the output you want.Check this out.

Fiddle Demo

HTML

<div class="navbar">
    <ul>
        <li> <a class="active" href="#"> BuyBuyBuy </a> 
        </li>
        <li> <a href="#">Test</a>

        </li>
        <li><a href="#">Test1</a>

        </li>
        <li><a href="#">Test2</a>

        </li>
    </ul>
</div>
<div class="page-content">
    <p>Page conent goes here</p>
</div>

CSS

.navbar {
    overflow:hidden;
}
.navbar ul {
    list-style-type:none;
}
.navbar li {
    background-color: #333;
    float:left;
    margin-right:7px;
}
.navbar .active, .navbar a:hover {
    background:#ff9900;
}
.navbar a {
    color:#fff;
    display:block;
    padding:6px 12px 6px 12px;
    text-decoration:none;
}
.page-content {
    clear:left;
}

Upvotes: 3

TimSPQR
TimSPQR

Reputation: 2984

And just to throw out a different approach - not to be used with drop-downs - but just with a simple link by click.

You can just make a series of anchor tags and style them the way you want.

FIDDLE

CSS

.navholder {
    width: 500px;
    margin: 30px auto;
}
a {
    display: inline- block;
    height: 50px;
    padding: 15px;
    margin-left: 10px;
    background-color: #333;
    text-decoration: none;
    color: white;
}
a:first-child {
    background-color: orange;
}

Upvotes: 1

Osama Yawar
Osama Yawar

Reputation: 369

Do not use table for navigation bars. I would recommend you to use unordered list.

This may help you: http://www.w3schools.com/css/css_navbar.asp

Upvotes: 0

Related Questions