...

View Full Version : CSS - Problem with object size



CaptainB
06-07-2007, 10:26 AM
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 be (see pic):

http://img217.imageshack.us/img217/4301/goodxt3.jpg

However when I watch the page in 1280x1024 the little gray line seems to expand and cover some of the buttons. (See pic below: )
http://img511.imageshack.us/img511/8774/badin0.jpg

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)

#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:

<!-- 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... :(

VIPStephan
06-07-2007, 10:41 AM
Hi CaptainB, glad you joined us. :)

I think one major problem of your page (well, donít know for sure since I only see that bit of code, but I assume it concerns the entire page) is your use of absolute positioning where it ainít necessary. This should be used with care as there are some hidden pitfalls if you donít really know what youíre doing.

Also you have some redundant HTML (empty and/or unnecessary elements) that you shouldnít use just to add some style. Use only the elements you need and style them. For example, you could just add a 10px top border to the menu div or something. No need for an empty div and a lot of styling to get it in place and look like you want (or not).

It would be helpful for us to see your entire code, though, assometimes a problem comes from a totally different place and only shows its ugly face in this one section.

CaptainB
06-07-2007, 05:31 PM
Hi VIPStephan and thanks for your welcome! :)

About the position:absolutes; It could be, as I'm just started learning CSS (this is my first use of DIVs and CSS ever) :D But what would you use to position it if not pos absolute?

I can't really get it to work that way?

Yup, here you are:

HTML:

<!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().getUTCMinute s(),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 the CSS:


/*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*/

Hope it isn't too confusing :p

_Aerospace_Eng_
06-07-2007, 07:07 PM
Check out the layouts here http://bonrouge.com/3c-hf-fixed.php find the one that best matches your currently layout and follow the tutorial. This means you'll probably to move things around possibly recode from scratch. This wouldn't happen if you took the time to learn about what certain CSS things did. Tutorials are always good. I suggest you do more of them.

CaptainB
06-08-2007, 01:01 PM
I tried to use position:relative; instead of position:absolute; to position the menu. However when I select position:relative; and set margins the menu positions itself relative to the MAIN content and NOT to the container, which contains all of my content. Why?

Here's a pic:

http://img530.imageshack.us/img530/582/problemkg4.jpg

Here's the CSS for it:

#menu { position:relative;
margin-top:217px;
margin-left:5px;
width:150px;
border-width:2px;
border-color:#000000;
}

VIPStephan
06-08-2007, 02:15 PM
OK, youíre really taking the second step before the first one. Positioning is kind of an advanced thing because itís not as intuitive as it seems. Absolute positioning takes an element completely out of the natural flow of elements, kind of putting it in a layer on top of the others, and following elements will take its place underneath (they go up to the last element before the positioned one - which ďhoversĒ above the others). Relative positioning leaves the element within that flow. However, any direct positioning of a relatively positioned element will move the element from the point where it naturally resides, i.e. left: 10px; moves it 10px to the left of its original position. Absolutely positioned elements, however, will be positioned according to the next relative positioned ancestor, i.e. if nothing else specified it will take the html element as reference and left: 10px; will position it 10px from the html elementís left edge.

If you have a container that is, say, 800px wide and centered on the screen, and you have another element within that container, positioned absolute and left: 0; then the element will be put to the left edge of the screen. If you position the container relative then the absolutely positioned child of that container will be at the left edge of the container, capiche? :)

So donít use positioning when itís not necessary and only use it if you really know what youíre doing (my explanation was just the surface so that doesnít count). Look at BonRougeís website and do your layout according to one of those tutorials. Iím sure your layout (2 columns? 3 columns?) is among them, and itís definitely easier than direct positioning.

CaptainB
06-10-2007, 06:40 PM
Ok, I really can't figure it out. Now I have searched for different tutorials, with no luck. I'm starting to think about tables, even though it's an oldschool method..

How would one design a 3 column page with BOXES instead of just ONE piece...with DIV's?? Just a basic layout or so.

This guy did it: http://www.webshapes.org/template/details/id/2007022411723524750 , but then again I don't get his code - it's pretty advanced! I would REALLY appriciate help on this since I need it before I can go any further with my page. Plzzzzz

VIPStephan
06-10-2007, 07:19 PM
You know, divs are just boxes. And you can nest divs. So you can put one box into another box, or two boxes into one box container box. Itís really easy actually, and youíll never wanna do that with tables again.

OK, a really basic example:
You divide your document/page into three general sections: header, content, footer. Those three are grouped in one container div.


<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>

Then the appropriate content goes into the appropriate sections. Now, youíre gonna have three columns below your header, so essentially these are another three sections/boxes (divs) that reside within the content section:


<div id="content">
<div id="info1"></div>
<div id="main"></div>
<div id="info2"></div>
</div>

(note: I named the sections after their potential function on the page. Names like ďsidebarĒ or similar arenít as desirable since a section doenít necessarily have to be a sidebar - thatís a matter of styling it.)

And each of those three sections can have even more small boxes (divs), like your menu, or your calendar, or some info boxes.

Now, if you just float the info1 box/section to the left, the entire content of that box will be at the left and only the box following the floated one (the main section) will go up to the right of that info1 section. Then, if you float the main section to the left, too, and assign a width to it (and have enough space left at the right side) then the following box, namely info2, will go up to the right, and tadaaa! you have three columns.


#info1 {
width: 80px;
float: left;
}
#main {
width: 450px;
float: left;
}


Now you can float (or style however you want) the content of these columns without affecting the content of another column (if you style it reasonably).

Put borders/outlines around elements that you currently work with or you need to have an eye on to see how they look, how big they are, and how they behave when you are applying styles.
I hope that clarifies some things?

CaptainB
06-10-2007, 09:30 PM
Thank you a bunch, Stephan! But how would I then position the boxes and objects inside the page? With position:absolute; ? (Yeha, I love that tag! :D )

VIPStephan
06-10-2007, 10:55 PM
How Ďbout margins? You can apply top and/or bottom margins to the boxes themselves. However, you should also read a couple of things about that as you might come across collapsing margins (http://www.complexspiral.com/publications/uncollapsing-margins/) which make things work differently at times.

Alternatively, and perhaps a better method if you want the entire content of a box moved down you can apply a top padding to the containing box.

And if itís applicable, of course you can use positioning but beware: only if you really know what you are doing and why you wanna do this.

CaptainB
06-11-2007, 03:41 PM
I really wanna thank you guys once again, and espicially you, VIPStephan!! Now my menu and "object" work like they should and I have NO more problems + a PROPER code WITHOUT position:absolute; ALL over!!!! :thumbsup:

Thank you so much again!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum