Button alignment

@myself1Nov 04.2010

My button alignment seems be wrong…The Home bottons on the right and the About on the left ?

I would like the Home button to start somwhere from near the middle and the rest to the left of the bar.

TIA

to post a comment

@FangNov 05.2010 — #We need a link or full document code

@myself1authorNov 05.2010 — #The css:

.navbar {

width: 958px;

height: 25px;

font-family: verdana;

font-size:13px;

font-weight: bold;

border: 1px solid #000;

background-color:#000;

line-height: 22px;

}

.button a{

float: left;

width: 100px;

height: 25px;

color: #FFF;

text-decoration: none;

text-align:center;

}

.button a:hover {

float: left;

width: 100px;

height: 25px;

color: #000;

text-decoration: none;

text-align:center;

font-weight: bold;

background-color:#FFF

}[/QUOTE]

@FangNov 05.2010 — #The css is meaning less without the html

@myself1authorNov 05.2010 — #The css is meaning less without the html[/QUOTE]
There not much to the html:

<div class="navbar">

<div class="button"><a href='#'>HOME</a></div>

<div class="button"><a href='#'>SERVICES</a></div>

<div class="button"><a href='#'>PRICES</a></div>

<div class="button"><a href='#'>CONTACT</a></div>

<div class="button"><a href='#'>ABOUT</a></div>

</div>[/QUOTE]

The code works fine...All I need to know is how do I get to position the starting home button somewhere near the middle.

@FangNov 05.2010 — #

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html lang="en">
 <head>
 <title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
 <style type="text/css">
 #navbar {
 width: 958px;
 height: 25px;
 font-family: verdana, sans-serif;
 font-size:13px;
 font-weight: bold;
 border: 1px solid #000;
 background-color:#000;
 line-height: 22px;
 list-style-type:none;
 }
 
 #navbar li {
 float: left;
 }
 
 #navbar a {
 display:block;
 width: 100px;
 height: 25px;
 color: #FFF;
 text-decoration: none;
 text-align:center;
 }
 
 #navbar a:hover {
 color: #000;
 background-color:#FFF
 } 
 </style>
 </head>
 <body>
 
 <ul id="navbar">
 <li><a href='#'>HOME</a></li>
 <li><a href='#'>SERVICES</a></li>
 <li><a href='#'>PRICES</a></li>
 <li><a href='#'>CONTACT</a></li>
 <li><a href='#'>ABOUT</a></li>
 </ul> 
 </body>
 
 </html>[/CODE]

@myself1authorNov 05.2010 — #That's just the same nav bar, but li used instead ?

The HOME button is still on its left, how do I get it to begin from the mid point onwards? ?

@myself1authorNov 05.2010 — #Sorted. ?

Just added padding-left and had to compensate of the overall .navbar width. ?

Button alignment

7 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Button alignment

7 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #CSS _↴