#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2004
    Posts
    223
    Rep Power
    0

    My menu buttons will move when resizing window


    Im trying to do a web page with no tables, right now im making the horizontal menu. It works. the only thing is that when rezing window, some buttons will move depending on the re-sizing, as you can see here: http://www.impulsanl.org/testing.htm

    My CSS code is this:

    Code:
    }
    
    .hbuttons1 a{
    display: block;
    text-decoration: none;
    font: 13px Arial;
    color: black;
    width: 124px;
    height: 30px;
    float: left;
    display: inline;
    margin-right: 0px;
    background-image:url(images/button1.png);
    background-repeat: no-repeat;
    padding-top: +4px;
    margin-left: +156px;
    text-align:center;
    margin-top: +88px;}
    
    
    .hbuttons1 a:hover{
    background-image:url(images/button1b.png);
    }
    
    .hbuttons2 a{
    display: block;
    text-decoration: none;
    font: 13px Arial;
    color: black;
    width: 124px;
    height: 30px;
    float: left;
    display: inline;
    margin-right: +100px;
    background-image:url(images/button2.png);
    background-repeat: no-repeat;
    padding-top: 4px;
    text-align:center;
    margin-top: +88px;
    margin-left: -5px;
    padding-left: 0px;
    }
    
    
    
    .hbuttons2 a:hover{
    background-image:url(images/button2b.png);
    }
    .hbuttons3 a{
    display: block;
    text-decoration: none;
    font: 13px Arial;
    color: black;
    width: 124px;
    height: 30px;
    float: left;
    display: inline;
    margin-right: +100px;
    background-image:url(images/button3.png);
    background-repeat: no-repeat;
    padding-top: 4px;
    text-align:center;
    margin-top: +88px;
    margin-left: -111px;
    padding-left: 0px;
    }
    
    
    
    .hbuttons3 a:hover{
    background-image:url(images/button3b.png);
    }
    
    .hbuttons4 a{
    display: block;
    text-decoration: none;
    font: 13px Arial;
    color: black;
    width: 124px;
    height: 30px;
    float: left;
    display: inline;
    margin-right: +300px;
    background-image:url(images/button4.png);
    background-repeat: no-repeat;
    padding-top: 04px;
    text-align:center;
    margin-top: +88px;
    margin-left: -111px;
    padding-left: 0px;
    }
    
    
    
    .hbuttons4 a:hover{
    background-image:url(images/button4b.png);
    }
    
    
    #reflejo {
    	background: url(images/reflejo.png) no-repeat;
    	position: absolute; 
    	top: 127px; 
    	left: 100px; 
    	width: 700px; 
    	height: 25px;
    	margin: 0;
    	padding: 0px;
    }
    .hbuttons5 a{
    display: block;
    text-decoration: none;
    font: 13px Arial;
    color: black;
    width: 124px;
    height: 30px;
    float: left;
    display: inline;
    margin-right: +300px;
    background-image:url(images/button5.png);
    background-repeat: no-repeat;
    padding-top: 04px;
    text-align:center;
    margin-top: -35px;
    margin-left: 614px;
    padding-left: 0px;
    }
    
    
    
    .hbuttons5 a:hover{
    background-image:url(images/button5b.png);
    }
    my html is this:

    Code:
    <div id="extraDiv1"></div>
    <div id="extraDiv2"></div>
    <div id="extraDiv3"></div>
    
    <div class="hbuttons1"> <a href="http://www.impulsanl.org/index.htm"></a>
    </div>
    <div class="hbuttons2"> <a href="http://www.impulsanl.org/index.htm"></a>
    </div>
    <div class="hbuttons3"> <a href="http://www.impulsanl.org/index.htm"></a>
    </div>
    <div class="hbuttons4"> <a href="http://www.impulsanl.org/index.htm"></a>
    </div>
    <div class="hbuttons5"> <a href="http://www.impulsanl.org/index.htm"></a>
    </div>
    <div style="clear: left;"></div>
    <div id="reflejo"></div>
    I know its a weir code, Im new in this. Can someone help please.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2004
    Posts
    223
    Rep Power
    0

    I used position:absolute;


    I used position: absolute;
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,126
    Rep Power
    4309
    Don't make the mistake of going from misusing/overusing tables to overusing <div>s. There are many other HTML elements.

    It's best to mark up navigational menus with an unordered list (<ul>) instead of just a series of links.

    These three articles explain how to style lists.
    http://www.alistapart.com/articles/taminglists/
    http://css.maxdesign.com.au/listutorial/
    http://www.webreference.com/programming/css_lists/

    This is a step by step tutorial on building a horizontal nav bar:
    Turning a list into a navigation bar

    This may be of interest too:
    http://www.smashingmagazine.com/2007...ern-solutions/

    the only thing is that when rezing window, some buttons will move depending on the re-sizing
    You can set a width or min-width on a parent element to prevent that.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo