CODEWITHSUNDEEP
csshtml
Vernard
Vernard

Reputation: 477

CSS/HTML Navbar with container?

Ok, so day by day I'm scrapping up my css/html skills but always encounter a few issues. I'm sure I'm doing very noob coding here. Anyways, I'm trying to create a very simple container in the center of the webpage with a navbar on top of it, no space separating them. And here is what I have so far, :/

index.html - http://pastie.org/5149875 style.css - http://pastie.org/5149890

All help is appreciated, and if you have any tips let me know! :)

Side question: Any reason why my navbarwidth has to be greater then 800px to match up with the mytablediv?

Upvotes: 0

Views: 336

Answers (3)

Sandeep Pattanaik
Sandeep Pattanaik

Reputation: 632

Don't worry, i am here to help you. I give you a simple code. Use & learn the tricks.

Menu HTML

<div class="menu-bg">
<div class="menu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">F.A.QS</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
<div class="clear"></div>
</div>
</div>

Menu CSS

.menu-bg{background:#999 repeat-x; border:1px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
.menu{width:100%;}
.menu ul{list-style:none;}
.menu li{float:left;}
.menu a{font-family:Calibri; font-size:14px; font-weight:bold; text-decoration:none; color:#dcdcdc; padding-left:30px; padding-right:30px; line-height:40px;}
.menu a:hover{font-family:Calibri; font-size:14px; font-weight:bold; text-decoration:none; color:#000; padding-left:30px; padding-right:30px; line-height:40px;}
.clear{clear:both;}

Hope this helps you. Cheers...............

Upvotes: 0

koostudios
koostudios

Reputation: 171

You're not doing such a bad job. One of the biggest lessons I learnt was centering things is made very easy by assigning margin-left and margin-right to auto. You can simplify this into a simple one-liner as well: 

margin: 0 auto;

If you remove the float: left and replace your margins with this, your elements should center. The problems with a space in the middle are probably problems with margins inside elements (yes, these affect it as well). If you have a <h1>, you could create a gap between them.

Side answer: The reason you have to make navbar width to more than 800px to match up is because you've added padding to the bottom one which will make the effective width 800px + 2 x padding.

Upvotes: 1

Pastor Bones
Pastor Bones

Reputation: 7351

Here is a scaled down version of your html and styling needs on jsFiddle. Basically wrap your page in a container element and then style its width and then set the margin to margin:0 auto; to center it as shown below. To see a better example of the 800px settings, go here

<html>
<head>
    <title> Learning </title>
    <link type="text/css" href="style.css" rel="stylesheet" />
    <style>
        #container{
            width: 800px;
            margin: 0 auto;    
        }
        #anavbar{
            border:solid 1px #000;       
        }
        #mytable{
            padding:10px;       
        }
    </style>
</head>
<body>
<div id="container" style="width:800px;margin:0 auto;">
    <div id="anavbar">
        <a href="#">Home</a>
        <a href="#">Aboute</a>
        <a href="#">Social</a>
        <a href="#">Contact</a>
    </div>
   <div id="mytable">
        <p>A new test by the frank man.</p>
    </div>
</div>

​

Upvotes: 0

Related Questions