CSS Forum

**CaptainB** · 06-04-2007, 03:25 PM

Hi guys and gals!

I'm new to this forum - I've tried several other forums, but they didn't seem to be that great..

Anyways, I have a problem. I'm currently in the stage of recoding my whole website, which before was made only of pictures in Photoshop.

In my left side I have a menu box which is defined by a little object in the top and bottom. When I watch the page in 1024x768 it looks like it should de (see pic):

However when I watch the page in 1280x1024 the little gray line seems to expand and cover some of the buttons. (See pic below

Do you see the difference? The object, which was supposed to be 10PX wide and ABOVE the buttons has now expanded and are overlapping the buttons.

Here's my CSS for the object and the menu DIV:
(Upperline is the object and menu is the main menu div)

Code:

#upperline { background-color:#C8C8C8;
    position:absolute;
    top:203px;
    left:5px;
    width:150px;
    height:10px;
    border-style:ridge;
    border-width:1px;
    }
 
 
 
#menu {   position:absolute;
    top:217px;
    left:5px;
    width:150px;
    border-width:2px;
    border-color:#000000;
    }

And here's the part of my HTML with the object and the menu:

Code:

<!-- MENU BEGIN -->
<div id="upperline"></div>
<div id="menu">
<img src="Home.gif" alt="Home"/><img src="Downloads.gif" alt="Downloads" style="border-top-width:1px; border-bottom-width:0px; border-right-width:0px; border-left-width:0px; border-style:solid;"/>
</div>
<!-- MENU END -->

What have I done wrong?? I really can't find the error...

**LadynRed** · 06-04-2007, 03:46 PM

For one thing, using position:absolute all over the place is a bad idea, and I can see no real reason for doing so.

Remove the absolute positioning and use the normal document flow. I'd put that 10px bar in as a background on your 'upperline' div, and give the div a height of 10px.

Follow that with the menu div - also by removing the position: absolute. adjust using margins and padding as necessary.

**CaptainB** · 06-04-2007, 04:05 PM

Why is it a bad idea to use position:absolute; ?

How should I position the object if I chose it as background for that div?

I have tried to use padding/margin, but every time I do that the object just moves relative to mu main content. I can't make it go ABOVE it. Here's the WHOLE CSS and HTML for my page:

HTML:

Code:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Index</title>
<meta name="title" content="XflightX">
<meta name="keywords" content="XflightX, Flight, planes, airports, forums, graphic design, flight simulation, FS9, FSX, FS2004, Microsoft Flight Simulator, Live ATC, Air Traffic Control, Community forums, Flight club, multiplayer, free downloads, scenery, airplanes, aeroplanes, misc, airfields, GA, General Aviation, military planes, jetliners, jets, props, propellers, helicopters, tutorials, picture editing, gallery, newbie help, information, CaptainB, flightsim news, aivaiton news, flightsim links, links, aviation links, banner design, web design">
<meta name="description" content="A friendly flightsim community for FS 2004 and X! We aim to help new simmers get started with FS and provide a quality web with free downloads, forums, links, flightclub, gallery and much more!">
<meta name="copyright" content="Copyright (c) XflightX. All Rights Reserved">
<meta name="revisit-after" content="1 days">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="calendar/style.css" />
<style type="text/css">
<!--
.style1 {color: #FFFFFF}
-->
</style>
</head>
<body><div id="container">
<!-- BANNER BEGIN -->
<div id="banner"> <img src="http://www.guild-metus.com/xflightx/XflightX.gif" alt="XflightX Banner"></div>
<!-- BANNER END -->
<!-- CONTENT BEGIN -->
<div id="midte">Dette er selvfoelgelig en test. Test test. HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE????? HVORFOR VIRKER DET MED BOXE</div>
<!-- CONTENT END -->
<!-- RIGHT TABLE BEGIN -->
<div id="clock">
<!-- Clock Part 1 - Put Anywhere Before Part 2 -->
<script language="JavaScript">
function tS(){ x=new Date(tN().getUTCFullYear(),tN().getUTCMonth(),tN().getUTCDate(),tN().getUTCHours(),tN().getUTCMinutes(),tN().getUTCSeconds()); x.setTime(x.getTime()); return x; } 
function tN(){ return new Date(); } 
function lZ(x){ return (x>9)?x:'0'+x; } 
function dE(x){ if(x==1||x==21||x==31){ return 'st'; } if(x==2||x==22){ return 'nd'; } if(x==3||x==23){ return 'rd'; } return 'th'; } 
function dT(){ if(fr==0){ fr=1; document.write('<font size=2 face=Tahoma color=#D6D5D5><b><span id="tP">'+eval(oT)+'</span></b></font>'); } document.getElementById('tP').innerHTML=eval(oT); setTimeout('dT()',1000); } 
var mN=new Array('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'),fr=0,oT="tS().getDate()+dE(tS().getDate())+' '+mN[tS().getMonth()]+' '+' '+lZ(tS().getHours())+':'+lZ(tS().getMinutes())+' '+'Z'+'u'+'l'+'u'";
</script>
<!-- Clock Part 1 - Ends Here  -->
<!-- Clock Part 2 - This Starts/Displays Your Clock -->
<script language="JavaScript">dT();</script>
<!-- Clock Part 2 - Ends Here -->
</div>
<!-- BOX 1 BEGIN -->
<div id="box1right">
<h1>Box 1 Right</h1>
  
<p>Blah blah blah blah blah blah blah blah blah blah blah blah blah nlah blahBlah blah blah blah blah blah blah blah blah blah blah blah blah nlah blah </p>
</div>
<!-- BOX 1 END-->
<!-- BOX 2 BEGIN -->
<div id="box2right">
<h1>Box 2 Right</h1>
  
<p>Blah blah blah blah blah blah blah blah blah blah blah blah blah nlah blahBlah blah blah blah blah blah blah blah blah blah blah blah blah nlah blah </p>
</div>
<!-- BOX 2 END -->
<!-- BOX 3 BEGIN -->
<div id="box3right">
<h1>Box 3 Right</h1>
  
<p>Blah blah blah blah blah blah blah blah blah blah blah blah blah nlah blahBlah blah blah blah blah blah blah blah blah blah blah blah blah nlah blah </p>
</div>
<!-- BOX 3 END -->
<!-- RIGHT TABLE END -->
<!-- LEFT TABLE BEGIN -->
<!-- CALENDAR BEGIN -->
<div id="calender">
  <?php include('calendar/calendar.php');
$calendar = new WingedCalendar();
// to display a single calendar
$calendar->show_calendar();
// where PREVIOUS and NEXT are the number of months
// before and after the current month respectively.  
?>
</div>
<!-- CANDAR END --> 
<!-- MENU BEGIN -->
<div id="upperline"></div>
<div id="menu">
<img src="Home.gif" alt="Home"/><img src="Downloads.gif" alt="Downloads" style="border-top-width:1px; border-bottom-width:0px; border-right-width:0px; border-left-width:0px; border-style:solid;"/>
</div>
<!-- MENU END -->
<!-- BOX 1 BEGIN -->
<div id="box1left">
 <h1>Box 1 left</h1><br />HEY KDKAOJFDIKH<br />
 jfbjsgbsjkgbsdjkbdf
  kslghskgG</div>
<!-- BOX 1 END -->
</div>
</body>
</html>

And here goes the CSS:

Code:

 
/*MAIN LAYOUT START*/
body {    background-color:#333333;
       text-align:center;
       margin-left:auto;
       margin-right:auto;
    }
 
#container {
       position: relative;
       width: 1000px;
       margin: auto;
    }
 
#midte {   background-color:#666666;
     width:665px;
     text-align:center;
     margin-left:auto;
     margin-right:auto;
     margin-top:10px;
     border-width:1px;
     border-style:solid;
     border-color:#000000;
    }
 
#banner {   width:665px;
      margin-left:auto;
      margin-right:auto;
    }
/*MAIN LAYOUT END*/
/*FONTS LAYOUT BEGIN*/
h1 {    font-family:Tahoma;
    font-weight:bold;
    font-size:12px;
    color:#FFFFFF;
     background-color:#000000;
    }
/*FONTS LAYOUT END*/
/*RIGHT SIDE BEGIN*/
#upperline { background-color:#C8C8C8;
    position:absolute;
    top:203px;
    left:5px;
    width:150px;
    height:10px;
    border-style:ridge;
    border-width:1px;
    }
    
    
    
#menu {   position:absolute;
    top:217px;
    left:5px;
    width:150px;
    border-width:2px;
    border-color:#000000;
    }
    
    
    
#clock {  background-image:url("box_bg.gif");
    position:absolute;
    width:150px;
    top:90px;
    right:5px;
    border-top-width:1px;
    border-bottom-width:1px;
    border-left-width:1px;
    border-right-width:1px;
    border-style:solid;
    border-color:#000000;
    }
 
#box1right { background-color:#666666;
    background-image:url("box_bg.gif");
    width:150px;
    position:absolute;
    top: 203px;
    right: 5px;
    border-top-width:0px;
    border-right-width:1px;
    border-left-width:1px;
    border-bottom-width:1px;
    border-style:solid;
    border-color:#000000;
    }
 
#box2right { background-color:#666666;
    background-image:url("box_bg.gif");
    width:150px;
    position:absolute;
    top: 385px;
    right: 5px;
    border-top-width:0px;
    border-right-width:1px;
    border-left-width:1px;
    border-bottom-width:1px;
    border-style:solid;
    border-color:#000000;
    }
 
#box3right { background-color:#666666;
    background-image:url("box_bg.gif");
    width:150px;
    position:absolute;
    top: 567px;
    right: 5px;
    border-top-width:0px;
    border-right-width:1px;
    border-left-width:1px;
    border-bottom-width:1px;
    border-style:solid;
    border-color:#000000;
    }
/*RIGHT SIDE END*/
/*LEFT SIDE BEGIN*/
#calender {  position:absolute;
       width:150px;
       top:300px;
       left:5px;
    }
 
 
 
#box1left {  background-color:#666666;
    width:150px;
    position:absolute;
    top:385px;
    left:5px;
    border-style:solid;
    border-color:#000000;
    border-width:1px;
    }
/*LEFT SIDE END*/

**LadynRed** · 06-04-2007, 08:58 PM

Ok, I think the problem is that you have virtually EVERYTHING set to position:absolute. As I said, that is not a good way to build a site, you run into all sorts of troubles - like the one you're having here. More will come.

You've got a 3 column layout, so lay it out AS COLUMNS and not a bunch of boxes just nailed in place with absolute positioning. Floats would be a better solution.

http://css-discuss.incutio.com/?page=FloatLayouts
Here's a selection of 3-column layouts:
http://css-discuss.incutio.com/?page=ThreeColumnLayouts
and here: http://www.positioniseverything.net/..._2_9_home.html

**CaptainB** · 06-05-2007, 01:18 PM

Well, I don't see any reason to rework my whole site just to not use position:absolute; as I havn't had any more trhoubles than this one...I just want to know how to position the object and make it STAY there...?

**LadynRed** · 06-05-2007, 03:02 PM

You are having these issues because of the position:absolutes on everything. The positioning is set relative to it's nearest positioned ancestor. Since you have everything positioned, you're going to have to figure the hierarchy you've created. These articles should help you:

http://www.positioniseverything.net/posbugs.html
http://www.positioniseverything.net/abs_relbugs.html
http://www.barelyfitz.com/screencast...s/positioning/

Unfortunately, I don't have the time to spend untangling it right now.