Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts

    Buttons won't break

    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
    Code:
    <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
    Code:
    #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;
    }

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Remove all those <br>s between the anchors.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Try this:

    Code:
    		#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:

    Code:
    	<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.
    matt | design | blog

  • #4
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    Hi, I tried that and it still doesn't work

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

    index.html
    Code:
    <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
    Code:
    #buttonlist {
    margin:0px;
    padding:0px;
    list-style-type:none;
    width:1px;
    }

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello masterofollies,
    By only changing the CSS, here is your menu in horizontal
    Code:
    /* 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
    Code:
    /* 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*/
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Quote Originally Posted by masterofollies View Post
    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?
    matt | design | blog

  • #7
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    Look at it in firefox

  • #8
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    See attached. What do you want it to look like?
    Attached Thumbnails Attached Thumbnails Buttons won't break-ff.jpg  
    matt | design | blog

  • #9
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    How about this:

    HTML:
    Code:
    <!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:
    Code:
    /* 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?
    Last edited by Rowsdower!; 12-01-2008 at 10:13 PM. Reason: To rant about using <br> inappropriately :)
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #10
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    As a p.s. to the above, you may want to do something about your header as well. It overflows its bounds in FF.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #11
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    Here is a screenshot from my firefox 2.0.0.16


  • #12
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Try this:

    HTML (removed the <span> tags):

    Code:
    	<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):

    Code:
    #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;
    }
    matt | design | blog

  • #13
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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?)?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #14
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by masterofollies View Post
    Here is a screenshot from my firefox 2.0.0.16

    Did you even try my code? This is what I get in FF 2.0.0.18 (looks almost identical in IE7):
    Last edited by Rowsdower!; 03-03-2009 at 07:00 PM.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #15
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    Quote Originally Posted by Rowsdower! View Post
    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.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •