Need Alternate/Better Way To Achieve This

mike12255 · 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>

cssfreakie · 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).

mike12255 · June 16, 2011

Yeah I got an example online, its HERE.

cssfreakie · 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;
}

mike12255 · 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.

cssfreakie · June 16, 2011

The most important thing about position absolute is that it depends on a parent element with a position other than static.

Sign In

Need Alternate/Better Way To Achieve This

Recommended Posts

mike12255

Link to comment

Share on other sites

cssfreakie

Link to comment

Share on other sites

mike12255

Link to comment

Share on other sites

cssfreakie

Link to comment

Share on other sites

mike12255

Link to comment

Share on other sites

cssfreakie

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information