I'm making the switch to complete CSS (I find it so much simpler than tables, apart from trying to center align something 
), and am making a horizontal menu.
The HTML for the menu is:
<div id="menuhome"><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.php"></a></div><div id="menuhome"><a href="index.php"></a></div>
CSS:
#menuhome a
{display:block; width:52px; height:20px; background: url("../images/home.up.jpg") 0 0 no-repeat}
#menuhome a:hover
{background: url("../images/home.over.jpg") 0 0 no-repeat}
Is there a way to have these buttons 'side-by-side', instead of vertical?
Or should I use a different tag than <div>?#menuhome {float: left;}Thanks for that, but the menu i'm using has 13 parts (sorry I didn't mention it before).
If I try to add more than two with float:left, then it creates a new paragraph.It would be better if you used a list for your menu. Check out:
<!-- m --><a class="postlink" href="http://css.maxdesign.com.au/listamatic/">http://css.maxdesign.com.au/listamatic/</a><!-- m -->
Alternatively this tool will produce the code for you:
<!-- m --><a class="postlink" href="http://www.accessify.com/tools-and-wizards/list-o-matic/list-o-matic.aspAs">http://www.accessify.com/tools-and-wiza ... atic.aspAs</a><!-- m --> Dave said, try building your menu with a list. At any rate this is not valid because an ID should only be used once.
<div id="menuhome"><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.php"></a></div><div id="menuhome"><a href="index.php"></a></div>if you need to use the id more than once, use classes instead. In your css an id is defined as #idname and a class as .classname.
as for what code you should use, use the following:
#nav li { float: left;
list-style: none;
}
#nav a { width: 52px;
height:20px;
background: url("../images/home.up.jpg") 0 0 no-repeat
}
#nav a:hover {
background: url("../images/home.over.jpg") 0 0 no-repeat
}
<ul id="nav">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.php"></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.php"></a></li>
</ul>
that's better, and u can do all the styling of the links building off of that
If you want it displayed horizontal then add "list-style-type:none;" and "display:inline;" to the css for the line item.Im not entirely sure but im sure float:left works better than display:inline for some reason can someone clarify a better reason please.Inline-level elements cannot have padding, margin, height, width, or border (maybe more?) applied.Well legally anywayOriginally posted by sharkey
Well legally anyway
eh, not doing it legally can just lead to trouble cept w/ IE which anything you do leads to trouble lolOriginally posted by Johnno
Is there a way to have these buttons 'side-by-side', instead of vertical?
Horizontal graphical nav:
gladeelementary.com
You can float them all side by side.
), and am making a horizontal menu.The HTML for the menu is:
<div id="menuhome"><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.php"></a></div><div id="menuhome"><a href="index.php"></a></div>
CSS:
#menuhome a
{display:block; width:52px; height:20px; background: url("../images/home.up.jpg") 0 0 no-repeat}
#menuhome a:hover
{background: url("../images/home.over.jpg") 0 0 no-repeat}
Is there a way to have these buttons 'side-by-side', instead of vertical?
Or should I use a different tag than <div>?#menuhome {float: left;}Thanks for that, but the menu i'm using has 13 parts (sorry I didn't mention it before).
If I try to add more than two with float:left, then it creates a new paragraph.It would be better if you used a list for your menu. Check out:
<!-- m --><a class="postlink" href="http://css.maxdesign.com.au/listamatic/">http://css.maxdesign.com.au/listamatic/</a><!-- m -->
Alternatively this tool will produce the code for you:
<!-- m --><a class="postlink" href="http://www.accessify.com/tools-and-wizards/list-o-matic/list-o-matic.aspAs">http://www.accessify.com/tools-and-wiza ... atic.aspAs</a><!-- m --> Dave said, try building your menu with a list. At any rate this is not valid because an ID should only be used once.
<div id="menuhome"><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.php"></a></div><div id="menuhome"><a href="index.php"></a></div>if you need to use the id more than once, use classes instead. In your css an id is defined as #idname and a class as .classname.
as for what code you should use, use the following:
#nav li { float: left;
list-style: none;
}
#nav a { width: 52px;
height:20px;
background: url("../images/home.up.jpg") 0 0 no-repeat
}
#nav a:hover {
background: url("../images/home.over.jpg") 0 0 no-repeat
}
<ul id="nav">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.php"></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.php"></a></li>
</ul>
that's better, and u can do all the styling of the links building off of that
If you want it displayed horizontal then add "list-style-type:none;" and "display:inline;" to the css for the line item.Im not entirely sure but im sure float:left works better than display:inline for some reason can someone clarify a better reason please.Inline-level elements cannot have padding, margin, height, width, or border (maybe more?) applied.Well legally anywayOriginally posted by sharkey Well legally anyway
eh, not doing it legally can just lead to trouble
cept w/ IE which anything you do leads to trouble lolOriginally posted by Johnno Is there a way to have these buttons 'side-by-side', instead of vertical?
Horizontal graphical nav:
gladeelementary.com
You can float them all side by side.