Woz
msg:1177490 | 3:26 am on Nov 7, 2002 (gmt 0) |
There are various ways of doing this I believe although I have as yet not started to implenet them myself. I know it has been talked about here already somewhere. Try search these fora for "CSS Buttons" and the likes and you should find them Onya
Woz
|
SmallTime
msg:1177491 | 3:52 am on Nov 7, 2002 (gmt 0) |
display: block; several examples of full code have been posted, try site search.
|
DiAMOndDavE
msg:1177492 | 4:33 am on Nov 7, 2002 (gmt 0) |
SmallTime, Thanks for the reply. Doesn't display: block insert a line break between elements? I have seen an example using display:block but the nav/menu ran down the page and I want it across the page as per my example: <No URLs Please!> Forgive me if I am a gumby-head for I know not (exactly) what I do - yet Regards
DiAMOndDavE [edited by: Woz at 4:40 am (utc) on Nov. 7, 2002]
[edit reason] TOS#14 [/edit]
|
SmallTime
msg:1177493 | 5:29 am on Nov 7, 2002 (gmt 0) |
oops, your right, check your sticky mail
|
moonbiter
msg:1177494 | 5:52 am on Nov 7, 2002 (gmt 0) |
| Doesn't display: block insert a line break between elements? |
|
It does, but you can get around that. There are a couple of ways to do what you want. One is to make the a elements display as a block and then float them. So you have css like this: div#menu {
background: #ccc;
border: 1px solid #999;
}
div#menu a {
border: 1px solid #FFF;
display: block;
float: left;
background; #CCC;
padding: 3px;
}
div#menu a:link, div#menu a:visited {
background: #CCC;
}
div#menu a:hover, div#menu a:active {
background: #FFF;
} and html like this: <div id="menu">
<a href="linkone.htm">Link one</a>
<a href="linktwo.htm">Link two</a>
<a href="linkthree.htm">Link three</a>
<div style="clear: both;"></div>
</div> The one ugly thing about this is the spacer div required to give the menu some content. Also, somewhat weirdly, if you take the border off of the div#menu it doesn't seem to work right (at least in Mozilla or IE). Another method is simpler. Replace the relevant CSS selectors above with : div#menu {
background: #ccc;
padding: 3px 0;
}
div#menu a {
border: 1px solid #FFF;
background; #CCC;
padding: 3px;
} And take out the spacer div. With this method no float or display is needed. You do need to put top and bottom padding on your div#menu to contain the padding you put on the a elements, though. With this method it is best to eliminate the border on the div#menu, because Mozilla and IE (5.5 and 6 in quirks mode) handle box-sizing differently.
|
Nick_W
msg:1177495 | 6:46 am on Nov 7, 2002 (gmt 0) |
Moonbiter hits the nail on the head. But for your info, it doesn't actually insert a line break with display: block; It makes the element a block level element and, as with all block level elements you can not place them side by side unless you take them out of the normal page flow using float or positioning them.... Nick
|
|
