PDA

View Full Version : CSS Toolbar Help!!



RomeosKlassicDJ
Mar 19th, 2010, 10:59 PM
I created a toolbar for my website using CSS. The toolbar looked great on one computer, but when I got on another computer, the toolbar was too long. I was hoping to fix this by putting "width:100%;" but this doesn't seem to work. Is there anything else I can do to make the toolbar look good on a variety of computers?

Here's the code I used:

ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a.toolbar
{
display:block;
width:245px;
font-weight:bold;
color:#ffffff;
background-color:#000000;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover
{
background-color:#a9a9a9;
}

Excavator
Mar 20th, 2010, 12:17 AM
Hello RomeosKlassicDJ,
The CSS alone is not enough to go off of. Can you post your code too?

When posting code in the forum, please use the code tags, [code][/code] - available with the # button in the post edit window.
This will wrap your code in a scroll box which greatly helps the readability of your post.

RomeosKlassicDJ
Mar 21st, 2010, 01:34 AM
Here is the HTML code (I think this is what you mean):



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(index.html)">
<html>
<head>
<link rel="stylesheet" type="text/css" href="home.css">
</head>
<body>
<img src="http://i200.photobucket.com/albums/aa216/Jilldear/orange2.jpg"></img>
<ul>
<li><a class="toolbar" href="index.html">Tab</a></li>
<li><a class="toolbar" href="tab.html">Tab</a></li>
<li><a class="toolbar" href="tab.html">Tab</a></li>
<li><a class="toolbar" href="tab.html">Tab</a></li>
<li><a class="toolbar" href="tab.html">Tab</a></li>
</ul>
</body>
</html>

Excavator
Mar 21st, 2010, 02:08 AM
Each a.toolbar is set to 245px width. That makes the whole ul 1225px wide PLUS the 4px padding on each anchor for a total width of 1265px.
That's pretty wide.

Have a look at some horizontal menus here - http://nopeople.com/design/CSS%20tips/index.html

Here's your's narrowed up and validated -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 100% "Comic Sans MS";
background: #FC6;
}
* {
margin: 0;
padding: 0;
border: 0;
}
#container {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
font-size: 0.8em;
}
ul {
list-style-type: none;
overflow: auto;
}
li {float:left;}
a.toolbar {
padding: 4px 20px; /*try adjusting button size here*/
display: block;
font-weight: bold;
color: #fff;
background: #000;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
a:hover {background:#a9a9a9;}
</style>
</head>
<body>
<div id="container">
<img src="http://i200.photobucket.com/albums/aa216/Jilldear/orange2.jpg" alt="logo" width="300" height="90" />
<ul>
<li><a class="toolbar" href="index.html">Tab</a></li>
<li><a class="toolbar" href="tab.html">Tab</a></li>
<li><a class="toolbar" href="tab.html">Tab</a></li>
<li><a class="toolbar" href="tab.html">Tab</a></li>
<li><a class="toolbar" href="tab.html">Tab</a></li>
</ul>
<!--end container--></div>
</body>
</html>

RomeosKlassicDJ
Mar 21st, 2010, 10:25 PM
Excavator--

Unfortunately the code you provided me did not work. It looked the same as before, when I tried the width:100%;--the toolbar was only about half of the page, instead of extending the full length of the page. :confused: