mike12255 Posted June 16, 2011 Share Posted June 16, 2011 Right now I got a menu bar sitting ontop of my header. In the menu bar on the far right (as in the FIRST picture below) i have a login form and a thing that displays the users. My issue is (as can be seen in the second picture) if I adjust the screen size it moves their position because I used absolute positioning to set them where I wanted. I am unaware of any other ways of how to do this so help is appriciated. Ill post my html and CSS below the pictures. What it should look like What It looks like when I adjust browser size CSS Code: @CHARSET "UTF-8"; * * { margin:0; padding:0; } body{ background-color:black; } #box { margin-left:auto; margin-right:auto; width: 972px; background-color:white; margin-top:none; } #header { height: 222px; background-image:url('../images/header.jpg'); z-index: 5; } #menu { background-image:url('../images/menu_bar.png'); width: 972px; height: 72px; position: absolute; left: auto; top: 170px; z-index: 10; background-color: transparent; } #menu ul{ list-style: none; padding: 0; margin: 0; } #menu li { z-index:20; width:57px; height:23px; text-align:center; float: left; margin: 0 0.15em; background-image:url('../images/mb1.png'); background-color: transparent; position:relative; left: 13px; top: 27px; } #menu li.sel { z-index:20; padding-top:1px; width:57px; height:23px; text-align:center; float: left; margin: 0 0.15em; background-image:url('../images/mb2.png'); background-color: transparent; position:relative; left: 13px; top: 27px; } #menu li a { background: none; color: black; font-size:14px; text-decoration: none; text-align: center; } #menu li a:hover { z-index:20; width:57px; height:23px; text-align:center; float: left; margin: 0 0.15em; background-image:url('../images/mb2.png'); background-color: transparent; position:relative; left: 13px; top: 27px; } #shadow{ background-image:url('../images/dropshadow.png'); width:972px; background-repeat:repeat-x; position: absolute; left: auto; top: 229px; z-index: 15; background-color: transparent; } #login{ position: absolute; left: 600px; top: 199px; z-index: 20; color:black; background-color: transparent; border:none; } #login label{ color: black; padding:0px; font-size: 13px; } /* Rounded Corner */ #login input.tb5 { background: url('../images/rounded.png') no-repeat top left; height: 18px; padding:2px; border:none; color:#8F0000; } #login inputround.tb5a { border: 0; width:220px; margin-top:3px; } #login input.btn { position: absolute; left: 170px; top: 3px; background: url('../images/btn.png') no-repeat top left; width:35px; padding:2px; color:white; border:none; } #login input.btn2 { position: absolute; left: 170px; top: 25px; background: url('../images/btn.png') no-repeat top left; width:35px; padding:2px; color:white; border:none; } #display_users{ position: absolute; left: 810px; top: 222px; padding:2px; font-size:13px; color:black; z-index:40; } #news_display table { Padding-top:8px; font-size:13px; background-color:black; color:white; z-index:5; } #news_display td.news { background: url('../images/table_top.gif'); width:191px; padding:4px; padding-top:8px; margin-top:5px; color:white; z-index:4; } HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>CLan SGI</title> <LINK REL="SHORTCUT ICON" HREF="images/icon.ico" type="image/x-icon"> <link rel = "stylesheet" type="text/css" href=" styles/main_style.css" > </head> <body> <div id = "box"> <div id ="header"><img src="images/header.jpg"/></div> <div id="menu"> <ul> <li class="sel"><a href ="index.html">Index</a></li> <li><a href ="Forums.html">Forums</a></li> <li><a href ="contact.html">Contact</a></li> </ul> </div> <!-- End of menu Div --> <div id="display_users"> <img src="images/guy_icon.png" /> Users: 176 Members: 76 </div> <!-- End of display_users div --> <div id="login"> <form method="_POST" action="login.php"> <label>Username</label> <input class="tb5" type="text" name="firstname" /><a href="reg.php"></a><input type="submit" name="reg" action="register.php" class ="btn" value="Reg." /></a><br /> <label>Password</label> <input class ="tb5" type="password" name="lastname" /><input type="submit" action="login.php" name="login" class ="btn2" value="Login" /> </form> </div> <!-- End of login div --> <div id= "shadow"> </div> <div id="news_display"> <br/> <table> <tr><td class="news"> Latest Threads </td> </tr> <tr><td>ttest</td><td>test</td></tr> </table> </div> <!-- End Of News Display --> </div> <!-- End of box div --> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/239545-need-alternatebetter-way-to-achieve-this/ Share on other sites More sharing options...
cssfreakie Posted June 16, 2011 Share Posted June 16, 2011 Do you have an online example of this, not into reading at the moment Anyway if you adjust the size of your window, and objects than move you m ight want to consider using a min-width on the wrapper that does not have a position of absolute. Assuming that wrapper has a positon of relative. (so serves as the parent of the absolute positioned element). Quote Link to comment https://forums.phpfreaks.com/topic/239545-need-alternatebetter-way-to-achieve-this/#findComment-1230531 Share on other sites More sharing options...
mike12255 Posted June 16, 2011 Author Share Posted June 16, 2011 Yeah I got an example online, its HERE. Quote Link to comment https://forums.phpfreaks.com/topic/239545-need-alternatebetter-way-to-achieve-this/#findComment-1230580 Share on other sites More sharing options...
cssfreakie Posted June 16, 2011 Share Posted June 16, 2011 Yep just As i thought, a slight invalid use of positioning absolute. Before you apply this I really recommend you read about both position relative and position absolute and how to use them/how they really work. They are often combined and there is a good reason for that. The following code works for FF4, haven't tested it for other browsers because i am cooking at the moment, but I am pretty sure it should work for any browser. #box { background-color: white; margin-left: auto; margin-right: auto; position: relative; /* I added this, please read about positioning, because it's vital for a better understanding*/ width: 972px; } #login { background-color: transparent; border: medium none; color: black; left: 585px; /* changed the value */ position: absolute; top: 199px; z-index: 20; } Quote Link to comment https://forums.phpfreaks.com/topic/239545-need-alternatebetter-way-to-achieve-this/#findComment-1230602 Share on other sites More sharing options...
mike12255 Posted June 16, 2011 Author Share Posted June 16, 2011 I just quickly tried your modifications and they work. Ill mark this as solved and go look at positioning in more detail, thanks for pointing me in the right direction. Quote Link to comment https://forums.phpfreaks.com/topic/239545-need-alternatebetter-way-to-achieve-this/#findComment-1230605 Share on other sites More sharing options...
cssfreakie Posted June 16, 2011 Share Posted June 16, 2011 The most important thing about position absolute is that it depends on a parent element with a position other than static. Quote Link to comment https://forums.phpfreaks.com/topic/239545-need-alternatebetter-way-to-achieve-this/#findComment-1230611 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.