Positioning design problem

tekker

02-22-2005, 01:09 PM

Greetings,

I'm having some serieous problems I can't come out myself, trying for weeks now.
Can someone please give me a hand.
The positioning of my site is totally not stretching as it suppose to.
Hopefully someone can help me with my code here, probarly css code that isn't correct like the absolute and the relative, I dunno if you are able to combine it with eachother, if I combine it it never gives a good result.
... thank you ... I would appriciate it soo much, sorry I sound desperate but I kinda am lol

This is the link of the site, how it looks when streteched ...
http://test.wrw.be/lan_test/contentslice.php

HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>contentslice</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1" />
<style type="text/css">
html {
overflow-x: hidden;}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background: #427A91;
color: white;
margin-top: 0}
.text {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;}
.hButton {
border-color: #FFFFFF;
border-style: double;
border-width: 0;
font-size: 8pt;
font-family: arial;}
.bgtext {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-attachment: fixed;
background-image: url(images/bgtext_small.jpg);
background-repeat: no-repeat;
background-color: #427A91;
color: #FFFFFF;
border-top: 1px solid #111111;
border-left: 1px solid #111111;
border-right: 1px solid #465263;
border-bottom: 1px solid #465263;}
#mainDiv {
background-image: url(images/bg_tmp.jpg);
position: absolute;
width: 810px;
background-position: top left;
background-attachment: fixed;
margin-left: auto;
margin-right: auto;
visibility: visible;
z-index: 1;
}
#TitleDiv {
background-image: url(images/contentslice_01.jpg);
position: relative;
left: 0;
top: 0;
width:815px;
height:151px;
z-index:3;
visibility: visible;}
#LeftPiston {
background-image: url(images/contentslice_02.jpg);
position: absolute;
left: 0;
top: 151;
width: 63px;
height: 211px;
z-index:5;
visibility: visible;
vertical-align:top;}
#LoginDiv {
background-image: url(images/contentslice_03.jpg);
position: absolute;
left:63px;
top: 0;
width:203px;
height:118px;
z-index:1;
visibility: visible;}
#PicDiv {
background-image: url(images/contentslice_04.jpg);
position: absolute;
left:203px;
top: 0;
width:279px;
height:118px;
z-index:1;
visibility: visible;}
#ContentRightStatus {
background-image: url(images/contentslice_05.jpg);
position: relative;
left: 279px;
top: 0;
width: 225px;
height: 118px;
z-index:2;
visibility: visible;}
#RightPiston {
background-image: url(images/contentslice_06.jpg);
position: absolute;
left: 217px;
top: 0;
width: 59px;
height: 211px;
z-index:3;
visibility: visible;}
#NieuwsField {
position: relative;
left: 71px;
top: 104px;
width: 482px;
height: 135px;
z-index:2;
visibility: visible;}
#ContentLeftWhere {
background-image: url(images/contentslice_08.jpg);
position: absolute;
left: 482px;
top: 0;
width: 219px;
height: 194px;
z-index:2;
visibility: visible;}
#LeftLight {
background-image: url(images/contentslice_09.jpg);
position: relative;
left: 0px;
top: 0;
width: 63px;
height: 145px;
z-index:1;
visibility: visible;}
#ContentRightCompo {
background-image: url(images/contentslice_11.jpg);
position: absolute;
left: 482px;
top: 190;
width: 219px;
height: 294px;
z-index:1;
visibility: visible;}
#RightLight {
background-image: url(images/contentslice_10.jpg);
position: relative;
left: 762px;
top: 0;
width: 63px;
height: 145px;
z-index:1;
visibility: visible;}
#LeftLight2 {
background-image: url(images/contentslice_12.jpg);
position: relative;
left: 0px;
top: 0;
width: 63px;
height: 500px;
z-index:1;
visibility: visible;}
#LeftPistonBottom {
background-image: url(images/contentslice_14.jpg);
position: absolute;
left: 63px;
bottom: 0;
width: 30px;
height: 217px;
z-index:1;
visibility: visible;}
#Bottom {
background-image: url(images/contentslice_17.jpg);
position: absolute;
left: 30px;
bottom: 0;
width: 643px;
height: 87px;
z-index:1;
visibility: visible;}
#BottomDivBanners {
background-image: url(images/contentslice_15.jpg);
position: relative;
left: 30px;
bottom: 0;
width: 643px;
height: 130px;
z-index:1;
visibility: visible;}
#RightPistonBottom {
background-image: url(images/contentslice_16.jpg);
position: absolute;
left: 673px;
bottom: 0;
width: 26px;
height: 217px;
z-index:1;
visibility: visible;}
#RightLight2 {
background-image: url(images/contentslice_13.jpg);
position: relative;
left: 762px;
top: 0;
width: 68px;
height: 500px;
z-index:1;
visibility: visible;}
</style>
</HEAD>
<BODY>
<div id="MainDiv">
<div id="TitleDiv"></div>
<div id="LeftPiston">
<div id="LoginDiv">
<TD width="204" ROWSPAN=2 background="images/contentslice_22.jpg"> <table width="90%" height="99%" align="center" bordercolor="#427A91" bordercolorlight="#333333" bordercolordark="#333333" class="text">
<tr>
<td width="100%"> <form name="form1" method="post" action="http://www.lan.wrw.be/forum/misc.php?action=login">
<div align="left">Login:<br>
<input name="username" type="text" class="bgtext" onFocus="clearText(this)" size="12" maxlength="12">
<br>
Paswoord:<br>
<input name="password" type="password" class="bgtext" onFocus="clearText(this)" size="12" maxlength="12">

<input class="hButton" type="submit" value="Zend" name="loginsubmit">
</div>
</form></td>
</tr>
</table></TD>
<div id="PicDiv">
<div id="ContentRightStatus">
<div id="RightPiston"> </div>
<br>
<table width="90%" border="0" align="center" cellpadding="4" cellspacing="3" class="text">
<tr>
<td width="55%"> <div align="right">Geregistreerde</div></td>
<td width="3%"> <div align="left"><strong>:</strong></div></td>
<td width="42%"><div align="center">php</div></td>
</tr>
<tr>
<td><div align="right">Betaald</div></td>
<td><div align="left"><strong>:</strong></div></td>
<td><div align="center">php</div></td>
</tr>
<tr>
<td><div align="right">Clans</div></td>
<td><div align="left"><strong>:</strong></div></td>
<td><div align="center">php</div></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="NieuwsField">
<p class="text">
<?PHP
$template = "wrw";
include("news/show_news.php");
?>
</p>
<div id="ContentLeftWhere"> <br>
<br>
<table width="90%" border="0" align="center" cellpadding="4" cellspacing="1" class="text">
<tr>
<td width="55%"> <div align="center"><strong>1-2-3 juli 2005</strong></div></td>
</tr>
<tr>
<td><div align="center">Emielle VanDeVeldelaan 25</div></td>
</tr>
<tr>
<td><div align="center">2845 Niel</div></td>
</tr>
</table>
<table width="90%" border="0" align="center" cellpadding="4" cellspacing="3" class="text">
<tr>
<td> <div align="center">€17,50 voor 30 mei</div></td>
</tr>
<tr>
<td><div align="center">€20,00 1 juni - 30 juni</div></td>
</tr>
<tr>
<td><div align="center">€25,00 aan de deur</div></td>
</tr>
</table>
</div>
<div id="ContentRightCompo"> <br>
<br>
<table width="90%" border="0" align="center" cellpadding="4" cellspacing="1" class="text">
<tr>
<td width="55%"> <div align="left"><strong>Game-Compo's:</strong></div></td>
</tr>
<tr>
<td><div align="left"> # Counterstrike 5X5 cup</div></td>
</tr>
<tr>
<td><div align="left"># Unreal Tournament 2004 2X2</div></td>
</tr>
<tr>
<td><div align="left"># Quake 3 2x2</div></td>
</tr>
<tr>
<td><div align="left"># Unreal Tournament Instagib</div></td>
</tr>
<tr>
<td><div align="left"># Warcraft 3 duel</div></td>
</tr>
</table>
<table width="90%" border="0" align="center" cellpadding="4" cellspacing="1" class="text">
<tr>
<td width="55%"> <div align="left"><strong>fun-Compo's:</strong></div></td>
</tr>
<tr>
<td><div align="left">$ NFSU2</div></td>
</tr>
<tr>
<td><div align="left">$ Surprice compo (multimedia)</div></td>
</tr>
<tr>
<td><div align="left">$ Tetrinet</div></td>
</tr>
</table>
</div>
</div>
<div id="LeftLight">
<div id="RightLight"> </div>
</div>
<div id="LeftLight2">
<div id="RightLight2"></div>
<div id="LeftPistonBottom">
<div id="RightPistonBottom"></div>
<div id="Bottom"></div>
<div id="BottomDivBanners"></div>
</div>
</div>
</div>
<?php
define("_BBC_PAGE_NAME", "Index - Lanparty");
define("_BBCLONE_DIR", "counter/");
define("COUNTER", _BBCLONE_DIR."mark_page.php");
if (is_readable(COUNTER)) include_once(COUNTER);
?>
</BODY>
</HTML>

---------------------------------------------------------------------

whizard

02-22-2005, 06:03 PM

Hi, and welcome to the forums!

If you want a layout that scales when the screen sixe is changed, then you definetly want your CSS widths and heights in %s, not in pxs.

Also, just as a tip, you should post non-php code in the code box, not the PHP box. (the pound (#) sign)

Dan

tekker

02-22-2005, 09:05 PM

Thx,
Well I started all over again, and think I found out :)
Allthough I didn't read your reply on time, and went on again without %, so will change it once in % and see if I can get it centered, cause now I did variants with absolute and relatives, and when I try to move the whole design it gets fragmented ...

But gonna try % now, allthough one question.
Do I need to work with % horizontal when I don't need horizontal stretching ?
And do I need % when I only want verticale stretching

thanks x2 ;)

whizard

02-22-2005, 09:16 PM

No. You only need to use percents for things that will change whe you stretch the window, like your layout stuff. Something like a 100x100 image, you can code height:100px;width:100px;

Dan

tekker

02-22-2005, 11:51 PM

ok many thx, I'm back up for some more learning and testing, css is powerfull "VERY" :) and you too, thx again for your time !

More question comming up I'm sure :D

whizard

02-23-2005, 12:10 AM

hey, no problem!

Dan

EDIT: if you want to center your page, add this to your CSS:

body
{
margin:0px auto;
}

tekker

02-23-2005, 11:06 AM

hey, no problem!
Dan
EDIT: if you want to center your page, add this to your CSS:
body
{
margin:0px auto;
}

Hmm this ain't working ^^
He just don't wanna move a thing :confused:

But besides that if you click here (http://test.wrw.be/lan_test/contentslice.php?subaction=showcomments&id=1108942682&archive=&start_from=&ucat=&) you will notice at the bottom it is totally jerked up. (in IE)
The wierd thing in Firefox it is working 100%, opera also for 95%, but now ie is dooing wierd, mostly it's the other way around.
Tried like every possible way, is there a way I can resolve this ?
I was thinking on a browser detection js to use the correct css, but I just can't get it correct with css ...

If you want the code, I will past it ...

Thx x3 ;)

whizard

02-23-2005, 02:12 PM

I believe (from looking at your code) that <div id="MainDiv"> is a giant wrapper for all you code, correct?

add

#MainDiv div
{
margin:0px auto;
}

See if this works. if it doesn't, post your CSS and HTML

Dan

EDIT:

scratch the margin:0px auto; from your body definition

tekker

02-23-2005, 03:21 PM

ok time for some code I guess ^^
as I tried like allot of possibility's for the margin:0px auto;

This is now my MainDiv css ...
it is as you said my wrapper for the whole content ... if I remove this I get a fragmented site.

#MainDiv {
margin:0 auto;
background-image: url(images/bg_tmp.jpg);
position: absolute;
width: 788px;
background-position: top left;
background-attachment: fixed;
margin-left: auto;
margin-right: auto;
visibility: visible;
z-index: 1;
overflow: hidden;}

Let me if intrested past my html and css fully.
Now I packed it up in 2 files... as it's more easy to edit and overview ... it's pretty much now :) hope I kept the standards a bit and that there are not to many errors.

HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>-= We aRe Wired - Lanparty =-</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<link href="wrwlan.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<div id="MainDiv">
<div id="Header"> </div>
<div id="LeftPiston">
<div id="LoginDiv">
<TD width="204" ROWSPAN=2> <table width="90%" height="99%" align="center" bordercolor="#427A91" bordercolorlight="#333333" bordercolordark="#333333" class="text">
<tr>
<td width="100%" height="100%"> <form name="form1" method="post" action="http://www.lan.wrw.be/forum/misc.php?action=login">
<div align="left"> Login:</font><br>
<input name="username" type="text" class="bgtext" onfocus="clearText(this)" size="12" maxlength="12">
<br>
<font size="-2">Paswoord:</font><br>
<input name="password" type="password" class="bgtext" onfocus="clearText(this)" size="12" maxlength="12">
<input class="hButton" type="submit" value="Zend" name="loginsubmit">
</div>
</form></td>
</tr>
</table></TD>
<div id="PicDiv">
<div id="ContentRightStatus">
<TD ROWSPAN=2 WIDTH=224 HEIGHT=580 valign=top> <table border="0" background="images/content_03.jpg" WIDTH=224 HEIGHT=101 CELLPADDING=0 CELLSPACING=0 >
<tr>
<td><table width="90%" border="0"align="center" cellpadding="4" cellspacing="3" class="text">
<tr>
<td width="55%"> <div align="right">Geregistreerde</div></td>
<td width="3%"> <div align="left"><strong>:</strong></div></td>
<td width="42%"><div align="center">php</div></td>
</tr>
<tr>
<td><div align="right">Betaald</div></td>
<td><div align="left"><strong>:</strong></div></td>
<td><div align="center">php</div></td>
</tr>
<tr>
<td><div align="right">Clans</div></td>
<td><div align="left"><strong>:</strong></div></td>
<td><div align="center">php</div></td>
</tr>
</table></td>
</tr>
</table>
<div id="RightPiston"> </div></div>
</div>
</div>
</div>
<div id="LeftLightFirst">
<div id="HeadLines" class="textheadlines">
<p>
<SCRIPT language=javascript src="http://test.wrw.be/lan_test/news/remote_headlines.php?5"></SCRIPT>
</p>
<div id="Compos"> <table>
<table border="0" cellpadding=15 cellspacing="0" background="images/content_07.jpg" width=224 height=296>
<tr>
<td class=text align=left valign=top><br> <br>
- Game-Compo's: <br>
# Counterstrike 5X5 cup <br>
# Unreal Tournament 2004 2X2 <br>
# Quake 3 2x2 <br>
# Unreal Tournament Instagib <br>
# Warcraft 3 duel <br> <br>
- Fun-Compo's: <br>
$ NFSU2 <br>
$ Surprice compo (multimedia) <br>
$ Tetrinet <br> </td>
</tr>
</table>
<div id="ContentLeftWhere">
<table border="0" width=224 height=178>
<tr>
<td class=text align=center> <strong><br>
<font color="#CC0000">1-2-3 juli 2005</font></strong><br> <br>
Emielle VanDeVeldelaan 25 <br>
2845 Niel <br> <br> €17,50 voor 30 mei <br> <br> €20,00
1 juni - 30 juni <br> <br> €25,00 aan de deur <br>
<td> </tr>
</table>
<div id="RightLightFirst"> </div>
</div>
</div>
</div>
</div>
<div id="LeftLight">
<div id="NieuwsField">
<?PHP
$template = "wrw";
include("news/show_news.php");
?>
<div id="RightLight"> </div>
</div>
</div>
<div id="LeftLightLast">
<div id="LeftPistonBottom">
<div id="BottomDivBanners">
<div id="RightPistonBottom">
<div id="RightLightLast"> </div>
</div>
</div>
</div>
<div id="Bottom"> </div>
</div>
</div>
<?php
define("_BBC_PAGE_NAME", "Index - Lanparty");
define("_BBCLONE_DIR", "counter/");
define("COUNTER", _BBCLONE_DIR."mark_page.php");
if (is_readable(COUNTER)) include_once(COUNTER);
?>
</BODY>
</HTML>

CSS
html {
overflow-x: hidden;}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background: #427A91;
color: white;
margin-top: 0}
.text {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;}
.textheadlines {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
padding-top:40px;
padding-left:10px;
padding-right:10px;}
.hButton {
border-color: #FFFFFF;
border-style: double;
border-width: 0;
font-size: 8pt;
font-family: arial;}
.bgtext {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-attachment: fixed;
background-image: url(images/bgtext_small.jpg);
background-repeat: no-repeat;
background-color: #427A91;
color: #FFFFFF;
border-top: 1px solid #111111;
border-left: 1px solid #111111;
border-right: 1px solid #465263;
border-bottom: 1px solid #465263;}
.bgcomments {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-attachment: fixed;
background-image: url(images/bgtext_large.jpg);
background-repeat: no-repeat;
background-color: #427A91;
color: #FFFFFF;
border-top: 1px solid #111111;
border-left: 1px solid #111111;
border-right: 1px solid #465263;
border-bottom: 1px solid #465263;}
.buttonform {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-attachment: fixed;
background-color: #427A91;
color: #000000;
border-top: 1px solid #8F8F8F;
border-left: 1px solid #8F8F8F;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;}
a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #E5E5E5;
text-decoration: underline;}
a:hover {
color: #FFFFFF;
text-decoration: none;}
a:visited {
color: #6A7491;
text-decoration: underline;}
a:active {
color: #D4D7D4;
text-decoration: underline;}
#MainDiv {
margin:0 auto;
background-image: url(images/bg_tmp.jpg);
position: absolute;
width: 788px;
background-position: top left;
background-attachment: fixed;
margin-left: auto;
margin-right: auto;
visibility: visible;
z-index: 1;
overflow: hidden;}
#Header {
background-image: url(images/contentslice_01.jpg);
position: relative;
left: 0;
top: 0;
width:815px;
height:151px;
z-index:3;
visibility: visible;}
#LeftPiston {
background-image: url(images/contentslice_02.jpg);
position: relative;
left: 0;
top: 0;
width: 63px;
height: 100%;
z-index:1;
visibility: visible;
background-repeat: no-repeat;}
#LoginDiv {
background-image: url(images/contentslice_03.jpg);
position: relative;
left:63px;
top: 0;
width:204px;
height:118px;
z-index:1;
visibility: visible;
background-repeat: no-repeat;}
#PicDiv {
background-image: url(images/contentslice_04.jpg);
position: absolute;
left:204px;
top: 0;
width:279px;
height:100%;
z-index:1;
visibility: visible;
background-repeat: no-repeat;}
#ContentRightStatus {
background-image: url(images/contentslice_05.jpg);
position: absolute;
left: 279px;
top: 0;
width: 225px;
height: 100%;
z-index:1;
visibility: visible;
background-repeat: no-repeat;}
#RightPiston {
background-image: url(images/contentslice_06.jpg);
position: absolute;
left: 216px;
top: 0;
width: 59px;
height: 100%;
z-index:1;
visibility: visible;
background-repeat: no-repeat;}
#LeftLightFirst {
background-image: url(images/contentslice_07.jpg);
position: relative;
left: 0;
top: 0;
width: 63px;
height: v;
z-index:1;
visibility: visible;
background-repeat: no-repeat;}
#HeadLines {
background-image: url(images/contentslice_08.jpg);
position: relative;
left: 63px;
top: 0;
width: 263px;
height: 194px;
z-index:1;
visibility: visible;
background-repeat: no-repeat;}
#Compos {
background-image: url(images/contentslice_09.jpg);
position: absolute;
left: 263;
top: 0;
width: 220px;
height: 100%;
z-index:1;
visibility: visible;
background-repeat: no-repeat;}
#ContentLeftWhere {
background-image: url(images/contentslice_10.jpg);
position: absolute;
left: 220px;
top: 0;
width: 216px;
height: 100%;
z-index:1;
visibility: visible;
background-repeat: no-repeat;}
#RightLightFirst {
background-image: url(images/contentslice_11.jpg);
position: absolute;
left: 216px;
top: 0;
width: 68px;
height: 100%;
z-index:1;
visibility: visible;
background-repeat: no-repeat;}
#LeftLight {
background-image: url(images/contentslice_12.jpg);
position: relative;
left: 0px;
top: 0px;
width: 63px;
height: 100%;
z-index:1;
visibility: visible;
background-repeat: repeat-y;}
#NieuwsField {
position: relative;
left: 63px;
top: 0;
width: 95%;
height: 95%;
z-index:1;
visibility: visible;
background-repeat: no-repeat;}
#RightLight {
background-image: url(images/contentslice_14.jpg);
position: absolute;
left: 699px;
top: 0;
width: 68px;
height: 100%;
z-index:1;
visibility: visible;
background-repeat: repeat-y;}
#LeftLightLast {
background-image: url(images/contentslice_07.jpg);
position: relative;
left: 0;
bottom: 0;
width: 63px;
height: 100%;
z-index:1;
visibility: visible;
background-repeat: repeat-y;}
#LeftPistonBottom {
background-image: url(images/contentslice_15.jpg);
position: relative;
left: 63px;
bottom: 0;
width: 30px;
height: 100%;
z-index:1;
visibility: visible;
background-repeat: no-repeat;}
#BottomDivBanners {
background-image: url(images/contentslice_16.jpg);
position: relative;
left: 30px;
bottom: 0;
width: 643px;
height: 100%;
z-index:1;
visibility: visible;
background-repeat: no-repeat;}
#RightPistonBottom {
background-image: url(images/contentslice_17.jpg);
position: relative;
left: 643px;
bottom: 0;
width: 26px;
height: 217px;
z-index:1;
visibility: visible;
background-repeat: no-repeat;}
#RightLightLast {
background-image: url(images/contentslice_11.jpg);
position: relative;
left: 26px;
bottom: 0;
width: 68px;
height: 100%;
z-index:1;
visibility: visible;
background-repeat: repeat-y;}
#Bottom {
background-image: url(images/contentslice_18.jpg);
position: absolute;
left: 93px;
top: 130px;
width: 643px;
height: 87px;
z-index:1;
visibility: visible;
background-repeat: no-repeat;}

tekker

02-23-2005, 03:28 PM