Jump to content

Recommended Posts

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

 

good.png

 

What It looks like when I adjust browser size

 

bad.png

 

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>

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

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

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.