Tutorial :Why aren't these styles resulting in a single-line header and centered page contents?



Question:

I am not that bad at this, but somehow i am not able to center the contents of the page.

Also, the logo and tbar-right divs are not aligning properly (I'd like them to be arranged in a single line).

This is my markup:

<body>  <div class = "container">    <div id="topbar" >        <div class="logo">        <img src="images/rg-logo.jpg"/>      </div>        <div class="tbar-right">        <div id="User"><!--the script will feed this div--></div>        <!--Dummy Text-->Jasdeep, you have 24 routemiles&nbsp;&nbsp;|&nbsp;&nbsp;        <a href="#">My Profile</a>&nbsp;&nbsp;|&nbsp;&nbsp;        <a href="#">Logout</a>      </div>      </div>    </div>  </body>  

...and these are the styles:

* {      margin:0;      padding:0;  }    body{      -x-system-font:none;      background:#FFF;      border:0 none;      color:#555F6A;      font-family:Verdana,arial,helvetica,sans-serif;      font-size:0.7125em;      font-size-adjust:none;      font-stretch:normal;      font-style:normal;      font-variant:normal;      font-weight:normal;      line-height:1.5em;      margin:0;      padding:0;      text-align:center;  }    .container {      text-align: center;        }    #topbar {      background-color: #df3e36;      height: 32px;      width: 1004px;      }    .logo {      padding-left: 20px;      padding-top: 4px;      width: 15%;      height:27px;      }    .tbar-right {      text-align: right;      padding-right: 10px;      color: #FFF;      padding-top: 7px;      width: 85%;      }    .tbar-right a{      color: #FFF;      }  

Please, help!


Solution:1

.container{margin:0 auto;}  

As long as you have defined an explicit width. You should also probably replace

<div class = "container">  

with

<div class="container">  


Solution:2

Should center container. Make sure you don't float it.

.container{   width: /* must specify a width */   margin-left:auto;   margin-right:auto;  }  

This should fix the alignment

.logo{  float:left;  padding-left: 20px;  padding-top: 4px;  width: 15%;  height:27px;  }    .tbar-right{  float: right;  padding-right: 10px;  color: #FFF;  padding-top: 7px;  width: 85%;  }  

And you may need to rearrange the HTML a bit by putting the .tbar-right before the .logo


Solution:3

Try this:

#topbar { margin: 0 auto;}  


Solution:4

The logo isn't aligning with the other stuff because it has a different padding-left. Change to

.logo {      padding-left: 0px; //or don't even list a padding-left,      padding-top: 4px;      width: 15%;      height:27px;      }  

OH if you wanted it on the same line horizontally float them both to the left or right, and make sure there's enough space. ;D


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »