 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
building_my_own_site
Joined: 19 Jan 2008
Posts: 7
|
 Posted: Sun May 25, 2008 1:32 am My menu bar buttons (as list items) don't "stretch" |
 |
|
|
I am trying to display a horizontal menu bar with four buttons using the html <ul> and <li> tags.
I have the following html code:
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="Test.css"/>
</head>
<body>
<div class="menuButtons">
<ul>
<li><a href="Test.html">Test</a></li>
<li><a href="Test.html">Test</a></li>
<li><a href="Test.html">Test</a></li>
<li><a href="Test.html">Test</a></li>
</ul>
</div>
</body>
</html> |
and the following css:
| Code: |
.menuButtons{
text-align: center;
height: 40px;
width: 100%;
background: #ffffff;
vertical-align: center;
margin: 5px;
}
.menuButtons a {
text-decoration: none;
vertical-align: center;
color: #ffffff;
height: 40px;
width: 180px;
background: #003F87;
margin: 5px;
}
.menuButtons li{
display: inline;
width: 180px;
height: 40px;
vertical-align: center;
background: #ffffff;
} |
Ideally, I want the background colour of my buttons to stretch to the 180px wide - but this does not seem to work!
Many Thanks. |
|
PayneLess Designs
Joined: 28 Feb 2007
Posts: 1289
Location: Biloxi, MS
|
| Posted: Sun May 25, 2008 2:24 am |
|
|
|
Try this styling:
| Code: |
<style type="text/css">
* { margin: 0; padding: 0; border: 0; }
.menuButtons{
text-align: center;
line-height: 24px;
width: 180px;
background: #003F87;
vertical-align: center;
margin: 5px;
}
.menuButtons a {
text-decoration: none;
vertical-align: center;
color: #ffffff;
height: 40px;
width: 180px;
background: #003F87;
margin: 5px;
}
.menuButtons li{
display: inline;
width: 180px;
height: 24px;
vertical-align: center;
}
</style> |
IE doesn't like the code for the horizontal list.
Ron |
|
Straystudio
Joined: 14 Apr 2008
Posts: 261
Location: Nord Italy
|
| Posted: Sun May 25, 2008 5:56 am |
|
|
|
You got confused relying on
.menuButtons a {
width: 180px;
}
Styling A Element You shape text, indeed.
It does not exist <font width=""> equivalent, in fact.
Whether You are not convinced still, make "free" an A Link moving it out of UL
still inside styled DIV though; do:
<div class="menuButtons">
<ul>
<li><a href="Test.html">Test</a></li>
<li><a href="Test.html">Test</a></li>
</ul>
<a href="Test.html">Test</a>
</div>
and see changing width does do nothing either.
Same for .menuButtons li class; indeed, nothing is giving 180px or so fixed width to Your buttons BUT
.menuButtons a {
margin: 5px;
}
that margin increasing and
background: #003F87 moved to .menuButtons li
in place of #ffffff
change things.
The final-resulting width of a button, still depends on text lenght + margin, though; not an actual fixed-width, yet.
So, the Style Sheet You have actually acting on the field, at now is:
| Code: |
<style type="text/css">
.menuButtons{
text-align: center;
height: 40px;
width: 100%;
background: #ffffff;
margin: 5px;
border: 1px dashed black;
}
.menuButtons a {
text-decoration: none;
color: #ffffff;
background: #003F87;
margin: 5px;
}
.menuButtons li{
display: inline;
background: #ffffff;
border: 1px solid black;
}
</style>
|
|
|
Straystudio
Joined: 14 Apr 2008
Posts: 261
Location: Nord Italy
|
| Posted: Sun May 25, 2008 1:15 pm |
|
|
|
To have a fixed-width field in XHTML, first thing coming to think is fixed-width DIV; five div's shaping buttons.
This works as for sizing, except that they want no longer to stay inline:
| Quote: |
<li><div style="width: 180px; border: 1px solid black;"><a href="Test.html">Test</a></div></li>
|
If I give each DIV
They come back inline, yet no longer stretch to the 180px assigned width. Trowing Us back to the starting point.
Tried the old tricks:
| Quote: |
| <a href="Test.html">Test<br /><hr style="width: 180px;" /></a> |
| Quote: |
<a href="Test.html">Test<br /><img height="1" width="180" src="" alt="" /></a>
<a href="Test.html">Test<br /><img style="height: 1px; width: 180px;" src="" alt="" /></a> |
In many combo works around.
IMG does expand and LIs keep inline; good as far as it is IMG alone and does have an actual SRC, yet You get two tick rows if going <br /> (Image beeing thin, even though).
Even tried styling UL and my pussy cat.
What works in UL LI under XHTML for this purpose, are:
either
Actual buttons
| Quote: |
| <li><input type="button" value="Test" style="width: 180px; display: ; border: 1px solid black;"></input></li> |
or
Saving each button as Image (say, a screen-shot to an HTML pattern) and calling them in the LIs, as said.
INPUT and LI can leave unwanted empty spaces in breaking row, IMG as well; so, break rows this way:
| Quote: |
<ul>
<li><input type="button" value="Test"></input></li><li><input
type="button" value="Test"></input></li><li><input
|
INPUT Button requires opening Link via JavaScript, though.
This a fine workaround, a href using an input button as Link, likewise made with linking Images; yet, it won't work in IExplorer:
| Quote: |
| <a href="http://netscape.aol.com/"><input type="button" value="Test" /></a> |
To stay at the classic layout of a Link, anyone has to leave the Unordered List inline-styled way.
|
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
 |
|
|
|
|
|
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
