aligning div elements

I am newbie

[kutchbhi]

HI friends
I am new to html and css. I am struggling to do basic things like positing div elements. Hoping someone can help

What I am trying to do here is to have a topbar, put it in a div tag, give a background/border etc. Then put 4 links inside the top bar, put each link in its own div bar, give them nice background/border, center them.

My code -
The html >

<div id=top >
<div id=toplink style="float:left; border: .2em dotted ";> <a href="browse.html">home</a> </div>
<div id=toplink style="float:left; border: .2em dotted ";> <a href="browse.html">Browse</a> </div>
<div id=toplink style="float:left; border: .2em dotted " > <a href="browse.html">share</a> </div>
<div id=toplink style="border: .2em dotted " > <a href="browse.html">recent</a> </div>
</div>

The CSS

div#top
{
background-color:D2E7F4 ;
padding: 8px;
padding-left: 398px;
border: .2em dotted #499;
 //text-align: center ;
}
div#toplink
{
//border: .2em dotted #499;
padding: 8px;
margin: 14px ;
}

Help!
Hopefully this will be a simple thing to fix for someone here.

[edited by: tedster at 6:10 pm (utc) on Aug. 26, 2009]
[edit reason] sorry, no screen shots [/edit]

[rocknbil]

welcome aboard kitchbhi, a couple things right off.

An ID element is just that - an ID. You cannot/should not have two elements with the same ID, they should be unique (although I've errantly seen this work.)

Second, you should use semantic elements for your navigation. This better describes the content within the tags/elements. So what is a navigation? A list of links.

<ul id="top">
<li><a href="browse.html">home</a></li>
<li><a href="browse.html">Browse</a></li>
<li><a href="browse.html">share</a></li>
<li><a href="browse.html">recent</a></li>
</ul>

The way you do this is display the list items inline. You can then style the links thmeselves for your borders/images, something like

#top li { display: inline; }
#top li a {
padding: 12px;
border: .2em dotted #000000;
}

You may want to add width and height to the anchors, or even use a background image, which you can change on hover:

#top li a {
padding: 12px;
width: 250px; // or em, or pt, or in . . .
border: .2em dotted #000000;
background:url(button-off.gif) top left no-repeat;
}

#top li a:hover {
background:url(button-over.gif) top left no-repeat;
}

center them.

Now we have a bit of a "sticky wicket" in that you have what's normally a block element (li) styled as inline and contains other inline elements. The only reasonable approach I've found to this that works consistently is to begin assigning widths so you can center the "parent" container:

#top {
width: 700px;
margin:auto;
}

The approach here will vary based on what you do with the width of the navigation buttons.

This is just a starter to get you going in the right direction, you will encounter other issues and many here glad to help.

[swa66]

To center inline elements: "text-align: center" on the parent ...