...

View Full Version : Buttons won't break



masterofollies
12-01-2008, 03:52 PM
I have tried a hundred things and must be a really really horrible coder. I can get the buttons to go side by side, but not on top of each other on the left side of the page.

Here is the page
http://www.rodgame.org/downloads/project108/

and this is the coding.

index.html

<div id="header">
<img src="images/banner.jpg">
</div>

<a class="boldbuttons" href="index.html"><span>Home</span></a><br>
<a class="boldbuttons" href="index.html"><span>About Us</span></a><br>
<a class="boldbuttons" href="index.html"><span>MMA</span></a><br>
<a class="boldbuttons" href="index.html"><span>For Him</span></a><br>
<a class="boldbuttons" href="index.html"><span>For Her</span></a><br>
<a class="boldbuttons" href="index.html"><span>Style</span></a><br>
<a class="boldbuttons" href="index.html"><span>Mens</span></a><br>
<a class="boldbuttons" href="index.html"><span>Specials</span></a><br>
<a class="boldbuttons" href="index.html"><span>Upcoming Events</span></a><br>
<a class="boldbuttons" href="index.html"><span>Contact Us</span></a>

<br><br><br>Welcome to my website!

CSS file

#header {
width: 100%;
height: 150px;
margin: 0 auto;
padding: 10px 0 0 0;
background-color: black;
}



a.boldbuttons{
background: transparent url('images/roundedge-gray-left.gif') no-repeat top left;
display: block;
float: left;
font: bold 20px Arial; /* Change 20px as desired */
line-height: 22px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 30px) */
height: 30px; /* Height of button background height */
padding-left: 8px; /* Width of left menu image */
text-decoration: none;

}

a:link.boldbuttons, a:visited.boldbuttons, a:hover.boldbuttons, a:active.boldbuttons{
color: white; /*button text color*/
}

a.boldbuttons span{
background: transparent url('images/roundedge-gray-right.gif') no-repeat top right;
display: block;
padding: 4px 10px 4px 2px; /*Set 10px to be equal or greater than'padding-left' value above*/
}

a:hover.boldbuttons{ /* Hover state CSS */
text-decoration: underline;
}

abduraooft
12-01-2008, 04:07 PM
Remove all those <br>s between the anchors.

BoldUlysses
12-01-2008, 04:31 PM
Try this:


#header {
width: 100%;
height: 150px;
margin: 0 auto;
padding: 10px 0 0 0;
background-color: black;
}

#buttonlist {
margin:0px;
padding:0px;
list-style-type:none;
width:1px;
}

a.boldbuttons{
background: transparent url('images/roundedge-gray-left.gif') no-repeat top left;
display: block;
float:left;
font: bold 20px Arial; /* Change 20px as desired */
line-height: 22px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 30px) */
height: 30px; /* Height of button background height */
padding-left: 8px; /* Width of left menu image */
text-decoration: none;

}

a:link.boldbuttons, a:visited.boldbuttons, a:hover.boldbuttons, a:active.boldbuttons{
color: white; /*button text color*/
}

a.boldbuttons span{
background: transparent url('images/roundedge-gray-right.gif') no-repeat top right;
display: block;
padding: 4px 10px 4px 2px; /*Set 10px to be equal or greater than'padding-left' value above*/
}

a:hover.boldbuttons{ /* Hover state CSS */
text-decoration: underline;
}

HTML:


<ul id="buttonlist">

<li><a class="boldbuttons" href="index.html"><span>Home</span></a></li>
<li><a class="boldbuttons" href="index.html"><span>About Us</span></a></li>
<li><a class="boldbuttons" href="index.html"><span>MMA</span></a></li>
<li><a class="boldbuttons" href="index.html"><span>For Him</span></a></li>
<li><a class="boldbuttons" href="index.html"><span>For Her</span></a></li>
<li><a class="boldbuttons" href="index.html"><span>Style</span></a></li>
<li><a class="boldbuttons" href="index.html"><span>Mens</span></a></li>
<li><a class="boldbuttons" href="index.html"><span>Specials</span></a></li>
<li><a class="boldbuttons" href="index.html"><span>Upcoming Events</span></a></li>
<li><a class="boldbuttons" href="index.html"><span>Contact Us</span></a></li>

</ul>

<br><br><br>Welcome to my website!

Semantically what you've got here is a list, so you should code it as such. The problem arose because the block-level anchor automatically expanded to fill the width of the containing div when removing the float. So we'll just keep the float in place and give the containing list a "minimum" width to force the button anchors to wrap to the next line.

masterofollies
12-01-2008, 05:31 PM
Hi, I tried that and it still doesn't work

http://www.rodgame.org/downloads/project108/

index.html

<ul id="buttonlist">
<li><a class="boldbuttons" href="index.html"><span>Home</span></a></li>
<li><a class="boldbuttons" href="index.html"><span>About Us</span></a></li>
<li><a class="boldbuttons" href="index.html"><span>MMA</span></a></li>
<li><a class="boldbuttons" href="index.html"><span>For Him</span></a></li>
<li><a class="boldbuttons" href="index.html"><span>For Her</span></a></li>
<li><a class="boldbuttons" href="index.html"><span>Style</span></a></li>
<li><a class="boldbuttons" href="index.html"><span>Mens</span></a></li>
<li><a class="boldbuttons" href="index.html"><span>Specials</span></a></li>
<li><a class="boldbuttons" href="index.html"><span>Upcoming Events</span></a></li>
<li><a class="boldbuttons" href="index.html"><span>Contact Us</span></a></li>
</ul>

default.css

#buttonlist {
margin:0px;
padding:0px;
list-style-type:none;
width:1px;
}

Excavator
12-01-2008, 06:19 PM
Hello masterofollies,
By only changing the CSS, here is your menu in horizontal
/* Header */

#header {
width: 100%;
height: 150px;
margin: 0 auto;
padding: 10px 0 0 0;
background-color: black;
}


#buttonlist {
height: 30px;
margin:0px;
padding:0px;
}
#buttonlist ul a {
display: block;
}
#buttonlist li {
background: transparent url('images/roundedge-gray-left.gif') no-repeat top left;
float: left;
font: bold 20px Arial; /* Change 20px as desired */
line-height: 22px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 30px) */
height: 30px; /* Height of button background height */
padding-left: 8px; /* Width of left menu image */
list-style-type: none;
}
#buttonlist li a {
color: #fff;
float: left;
text-decoration: none;
}
#buttonlist li a:hover {
color: #fff;
text-decoration: underline;
}

a.boldbuttons span{
background: transparent url('images/roundedge-gray-right.gif') no-repeat top right;
display: block;
padding: 4px 10px 4px 2px; /*Set 10px to be equal or greater than'padding-left' value above*/
}



and here it is vertical
/* Header */

#header {
width: 100%;
height: 150px;
margin: 0 auto;
padding: 10px 0 0 0;
background-color: black;
}


#buttonlist {
width: 200px;
border: thin solid #000000;
margin:0px;
padding:0px;
}
#buttonlist ul a {
display: block;
}
#buttonlist li {
background: transparent url('images/roundedge-gray-left.gif') no-repeat top left;

font: bold 20px Arial; /* Change 20px as desired */
line-height: 22px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 30px) */
height: 30px; /* Height of button background height */
padding-left: 8px; /* Width of left menu image */
list-style-type: none;
}
#buttonlist li a {
color: #fff;
float: left;
text-decoration: none;
}
#buttonlist li a:hover {
color: #fff;
text-decoration: underline;
}

a.boldbuttons span{
background: transparent url('images/roundedge-gray-right.gif') no-repeat top right;
display: block;
padding: 4px 10px 4px 2px; /*Set 10px to be equal or greater than'padding-left' value above*/
}

BoldUlysses
12-01-2008, 06:55 PM
Hi, I tried that and it still doesn't work

Looks fine to me if what you're after is to have the buttons vertically stacked. What look are you going for?

masterofollies
12-01-2008, 07:58 PM
Look at it in firefox

BoldUlysses
12-01-2008, 08:02 PM
See attached. What do you want it to look like?

Rowsdower!
12-01-2008, 10:08 PM
How about this:

HTML:

<!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>My Website</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="header">
<center><h1><font color="#FF9912">Stylish Knockouts Clothing</font></h1><br>
<h3><font color="#FF9912">[Tagline Here]</font></h3></center>
</div>


<div style="float:left;width:200px;">
<ul id="buttonlist">
<li>
<div class="start">&nbsp</div>
<div class="linktext"><a class="boldbuttons" href="index.html">Home</a></div>
</li>

<li>
<div class="start">&nbsp</div>
<div class="linktext"><a class="boldbuttons" href="index.html">About Us</a></div>
</li>
<li>
<div class="start">&nbsp</div>
<div class="linktext"><a class="boldbuttons" href="index.html">MMA</a></div>
</li>
<li>
<div class="start">&nbsp</div>
<div class="linktext"><a class="boldbuttons" href="index.html">For Him</a></div>
</li> <li>
<div class="start">&nbsp</div>
<div class="linktext"><a class="boldbuttons" href="index.html">For Her</a></div>
</li>
<li>
<div class="start">&nbsp</div>
<div class="linktext"><a class="boldbuttons" href="index.html">Style</a></div>
</li>
<li>
<div class="start">&nbsp</div>
<div class="linktext"><a class="boldbuttons" href="index.html">Mens</a></div>
</li>
<li>
<div class="start">&nbsp</div>
<div class="linktext"><a class="boldbuttons" href="index.html">Specials</a></div>
</li>
<li>
<div class="start">&nbsp</div>
<div class="linktext"><a class="boldbuttons" href="index.html">Upcoming Events</a></div>
</li>
<li>
<div class="start">&nbsp</div>
<div class="linktext"><a class="boldbuttons" href="index.html">Contact Us</a></div>
</li>
</ul>
</div>

<div id="wrapper">
<!-- get rid of these --> <br><br><br> <!-- using <br> for anything but to actually break a line to stop it from wrapping is generally seen as poor form -->
Welcome to my website!<br> <!-- this is the proper use of <br> -->
Put all of your content here...

</div>

</body></html>

CSS:

/* Header */

#header {
width: 100%;
height: 130px;
margin: 0 auto;
padding: 10px 0 0 0;
background-color: black;
}

#buttonlist a:link{
text-decoration: none;
}

#buttonlist a:hover{
text-decoration: underline;
}

#buttonlist a:link, a:visited, a:hover, a:active{
color: white; /*button text color*/
}

#buttonlist {
margin:0px;
padding:0px;
width:220px;
display:block;
}

ul#buttonlist li
{
list-style:none;
font: bold 20px Arial; /* Change 20px as desired */
line-height: 22px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 30px) */
height: 30px; /* Height of button background height */
}


div.start{
height:30px;
background: transparent url('http://www.rodgame.org/downloads/project108/images/roundedge-gray-left.gif') no-repeat top left;
float: left;
}

#buttonlist a{
height:30px;
}

div.linktext{
background: transparent url('http://www.rodgame.org/downloads/project108/images/roundedge-gray-right.gif') no-repeat top right;
padding: 4px 10px 4px 2px; /*Set 10px to be equal or greater than'padding-left' value above*/
font: bold 20px Arial; /* Change 20px as desired */
line-height: 22px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 30px)
height: 30px; /* Height of button background height */
padding-left: 28px; /* Width of left menu image */
}

#wrapper{
margin-left: 220px; /*Make this the same as your menu width whenever you change it*/
padding-left: 10px; /*use this to keep content from butting up against menu*/
padding-top: 10px; /*use this to keep content from butting up against header*/
}

This shows up fine in IE7 and FF (which I finally have available for my use, yay!) on my machine.

Is this what you're looking for?

Rowsdower!
12-01-2008, 10:10 PM
As a p.s. to the above, you may want to do something about your header as well. It overflows its bounds in FF.

masterofollies
12-02-2008, 01:14 AM
Here is a screenshot from my firefox 2.0.0.16

http://www.rodgame.org/downloads/error.jpg

BoldUlysses
12-02-2008, 03:32 AM
Try this:

HTML (removed the <span> tags):


<ul id="buttonlist">
<li><a class="boldbuttons" href="index.html">Home</a></li>
<li><a class="boldbuttons" href="index.html">About Us</a></li>
<li><a class="boldbuttons" href="index.html">MMA</a></li>
<li><a class="boldbuttons" href="index.html">For Him</a></li>
<li><a class="boldbuttons" href="index.html">For Her</a></li>
<li><a class="boldbuttons" href="index.html">Style</a></li>
<li><a class="boldbuttons" href="index.html">Mens</a></li>
<li><a class="boldbuttons" href="index.html">Specials</a></li>
<li><a class="boldbuttons" href="index.html">Upcoming Events</a></li>
<li><a class="boldbuttons" href="index.html">Contact Us</a></li>
</ul>

CSS (simplified things):


#buttonlist {
margin:0px;
padding:0px;
list-style-type:none;
}

#buttonlist li {
background: transparent url('images/roundedge-gray-left.gif') no-repeat top left;
height: 30px;
padding-left: 8px;
display:block;
}

.boldbuttons{
background: transparent url('images/roundedge-gray-right.gif') no-repeat top right;
font: bold 20px Arial;
line-height: 30px;
text-decoration: none;
padding:4px 10px 4px 0px;
}

a:link.boldbuttons, a:visited.boldbuttons, a:hover.boldbuttons, a:active.boldbuttons {
color: #fff; /*button text color*/
}

a:hover.boldbuttons{ /* Hover state CSS */
text-decoration: underline;
}

abduraooft
12-02-2008, 06:43 AM
Let me make it clear.. Are you trying to make a horizontal navigation bar below the header or a vertical navigation bar on the left side of the screen(if so, do you want to make the items equal in length?)?

Rowsdower!
12-02-2008, 01:57 PM
Here is a screenshot from my firefox 2.0.0.16

http://www.rodgame.org/downloads/error.jpg

Did you even try my code? This is what I get in FF 2.0.0.18 (looks almost identical in IE7):

masterofollies
12-02-2008, 02:36 PM
Did you even try my code? This is what I get in FF 2.0.0.18 (looks almost identical in IE7):

I am pretty sure I tried all the codes.


@abduraooft vertical buttons on the left side equal in length.

abduraooft
12-02-2008, 02:52 PM
Changing your current CSS to

a.boldbuttons {default.css (line 13)
background:transparent url(images/roundedge-gray-left.gif) no-repeat scroll left top;
display:block;
/*float:left;*/
/*and apply some width, if required */
font-family:Arial;
font-size:20px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
height:30px;
line-height:22px;
padding-left:8px;
text-decoration:none;
}
would do that.

Rowsdower!
12-02-2008, 02:53 PM
If you used the CSS and HTML that I provided together at the same time it should have been a slam dunk for what you are asking for. It's a vertical menu, left-aligned, standard-width across all "buttons."

I just double-checked my code using copy-and-paste to completely blank files and this loads up just as expected (i.e. without the crowding at the top of the page, without buttons of unequal size, etc.) in both IE7 and FF 2.0.0.18.

I don't mean to sound feisty and I don't mean to beat a dead horse or anything, I'm just trying to help you out...

If you're seeing something other than what I put in the thumbnail earlier please let me know and I'll drop it like a hot rock! :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum