Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Positioning design problem

    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
    PHP Code:
    <!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">&euro;17,50 voor 30 mei</div></td>
            </tr>
            <tr> 
              <td><div align="center">&euro;20,00 1 juni - 30 juni</div></td>
            </tr>
            <tr> 
              <td><div align="center">&euro;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>


    ---------------------------------------------------------------------
    Last edited by tekker; 02-22-2005 at 02:14 PM.

  • #2
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    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
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #3
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    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
    Code:
    height:100px;width:100px;
    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #5
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    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

  • #6
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    hey, no problem!

    Dan

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

    body
    {
    margin:0px auto;
    }
    Last edited by whizard; 02-23-2005 at 01:13 AM.
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #7
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    Quote Originally Posted by whizard
    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

    But besides that if you click here 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

  • #8
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    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
    Last edited by whizard; 02-23-2005 at 03:58 PM.
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #9
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Code:
    #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
    PHP Code:
    <!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> &euro;17,50 voor 30 mei <br> <br> &euro;20,00 
                    1 juni - 30 juni <br> <br> &euro;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
    PHP Code:
    html 
        
    overflow-xhidden;} 
    body 
        
    font-familyVerdanaArialHelveticasans-serif;
        
    background#427A91; 
        
    colorwhite;
        
    margin-top0}
    .
    text {
        
    font-familyVerdanaArialHelveticasans-serif;
        
    font-size10px;
        
    color#FFFFFF;}
    .textheadlines {
        
    font-familyVerdanaArialHelveticasans-serif;
        
    font-size10px;
        
    color#FFFFFF;
        
    padding-top:40px;
        
    padding-left:10px;
        
    padding-right:10px;}
    .
    hButton {
        
    border-color#FFFFFF;
        
    border-styledouble;
        
    border-width0;
        
    font-size8pt;
        
    font-familyarial;}
    .
    bgtext {
        
    font-familyVerdanaArialHelveticasans-serif;
        
    background-attachmentfixed;
        
    background-imageurl(images/bgtext_small.jpg);
        
    background-repeatno-repeat;
        
    background-color#427A91;
        
    color#FFFFFF;
        
    border-top1px solid #111111;
        
    border-left1px solid #111111;
        
    border-right1px solid #465263;
        
    border-bottom1px solid #465263;}
    .bgcomments {
        
    font-familyVerdanaArialHelveticasans-serif;
        
    background-attachmentfixed;
        
    background-imageurl(images/bgtext_large.jpg);
        
    background-repeatno-repeat;
        
    background-color#427A91;
        
    color#FFFFFF;
        
    border-top1px solid #111111;
        
    border-left1px solid #111111;
        
    border-right1px solid #465263;
        
    border-bottom1px solid #465263;}
    .buttonform {
        
    font-familyVerdanaArialHelveticasans-serif;
        
    background-attachmentfixed;
        
    background-color#427A91;
        
    color#000000;
        
    border-top1px solid #8F8F8F;
        
    border-left1px solid #8F8F8F;
        
    border-right1px solid #ffffff;
        
    border-bottom1px solid #ffffff;}
    a:link {
        
    font-familyVerdanaArialHelveticasans-serif;
        
    color#E5E5E5;
        
    text-decorationunderline;}
    a:hover {
        
    color#FFFFFF;
        
    text-decorationnone;}
    a:visited {
        
    color#6A7491;
        
    text-decorationunderline;}
    a:active {
        
    color#D4D7D4;    
        
    text-decorationunderline;}
    #MainDiv {
        
    margin:0 auto;
        
    background-imageurl(images/bg_tmp.jpg);
        
    positionabsolute;
        
    width788px;
        
    background-positiontop left;
        
    background-attachmentfixed;
        
    margin-leftauto;
        
    margin-rightauto;
        
    visibilityvisible;
        
    z-index1;
        
    overflowhidden;} 
    #Header {
        
    background-imageurl(images/contentslice_01.jpg);
        
    positionrelative;
        
    left0;
        
    top0;
        
    width:815px;
        
    height:151px;
        
    z-index:3;
        
    visibilityvisible;} 
    #LeftPiston {
        
    background-imageurl(images/contentslice_02.jpg);
        
    positionrelative;
        
    left0;
        
    top0;
        
    width63px;
        
    height100%;
        
    z-index:1;
        
    visibilityvisible;
        
    background-repeatno-repeat;}
    #LoginDiv {
        
    background-imageurl(images/contentslice_03.jpg);
        
    positionrelative;
        
    left:63px;
        
    top0;
        
    width:204px;
        
    height:118px;
        
    z-index:1;
        
    visibilityvisible;
        
    background-repeatno-repeat;} 
    #PicDiv {
        
    background-imageurl(images/contentslice_04.jpg);
        
    positionabsolute;
        
    left:204px;
        
    top0;
        
    width:279px;
        
    height:100%;
        
    z-index:1;
        
    visibilityvisible;
        
    background-repeatno-repeat;}
    #ContentRightStatus {
        
    background-imageurl(images/contentslice_05.jpg);
        
    positionabsolute;
        
    left279px;
        
    top0;
        
    width225px;
        
    height100%;
        
    z-index:1;
        
    visibilityvisible;
        
    background-repeatno-repeat;}
    #RightPiston {
        
    background-imageurl(images/contentslice_06.jpg);
        
    positionabsolute;
        
    left216px;
        
    top0;
        
    width59px;
        
    height100%;
        
    z-index:1;
        
    visibilityvisible;
        
    background-repeatno-repeat;} 
    #LeftLightFirst {
        
    background-imageurl(images/contentslice_07.jpg);
        
    positionrelative;
        
    left0;
        
    top0;
        
    width63px;
        
    heightv;
        
    z-index:1;
        
    visibilityvisible;
        
    background-repeatno-repeat;}
    #HeadLines {
        
    background-imageurl(images/contentslice_08.jpg);
        
    positionrelative;
        
    left63px;
        
    top0;
        
    width263px;
        
    height194px;
        
    z-index:1;
        
    visibilityvisible;
        
    background-repeatno-repeat;}
    #Compos {
        
    background-imageurl(images/contentslice_09.jpg);
        
    positionabsolute;
        
    left263;
        
    top0;
        
    width220px;
        
    height100%;
        
    z-index:1;
        
    visibilityvisible;
        
    background-repeatno-repeat;}
    #ContentLeftWhere {
        
    background-imageurl(images/contentslice_10.jpg);
        
    positionabsolute;
        
    left220px;
        
    top0;
        
    width216px;
        
    height100%;
        
    z-index:1;
        
    visibilityvisible;
        
    background-repeatno-repeat;}
    #RightLightFirst {
        
    background-imageurl(images/contentslice_11.jpg);
        
    positionabsolute;
        
    left216px;
        
    top0;
        
    width68px;
        
    height100%;
        
    z-index:1;
        
    visibilityvisible;
        
    background-repeatno-repeat;}
    #LeftLight {
        
    background-imageurl(images/contentslice_12.jpg);
        
    positionrelative;
        
    left0px;
        
    top0px;
        
    width63px;
        
    height100%;
        
    z-index:1;
        
    visibilityvisible;
        
    background-repeatrepeat-y;}
    #NieuwsField {
        
    positionrelative;
        
    left63px;
        
    top0;
        
    width95%;
        
    height95%;
        
    z-index:1;
        
    visibilityvisible;
        
    background-repeatno-repeat;}
    #RightLight {
        
    background-imageurl(images/contentslice_14.jpg);
        
    positionabsolute;
        
    left699px;
        
    top0;
        
    width68px;
        
    height100%;
        
    z-index:1;
        
    visibilityvisible;
        
    background-repeatrepeat-y;}
    #LeftLightLast {
        
    background-imageurl(images/contentslice_07.jpg);
        
    positionrelative;
        
    left0;
        
    bottom0;
        
    width63px;
        
    height100%;
        
    z-index:1;
        
    visibilityvisible;
        
    background-repeatrepeat-y;}
    #LeftPistonBottom {
        
    background-imageurl(images/contentslice_15.jpg);
        
    positionrelative;
        
    left63px;
        
    bottom0;
        
    width30px;
        
    height100%;
        
    z-index:1;
        
    visibilityvisible;
        
    background-repeatno-repeat;}
    #BottomDivBanners {
        
    background-imageurl(images/contentslice_16.jpg);
        
    positionrelative;
        
    left30px;
        
    bottom0;
        
    width643px;
        
    height100%;
        
    z-index:1;
        
    visibilityvisible;
        
    background-repeatno-repeat;} 
    #RightPistonBottom {
        
    background-imageurl(images/contentslice_17.jpg);
        
    positionrelative;
        
    left643px;
        
    bottom0;
        
    width26px;
        
    height217px;
        
    z-index:1;
        
    visibilityvisible;
        
    background-repeatno-repeat;}
    #RightLightLast {
        
    background-imageurl(images/contentslice_11.jpg);
        
    positionrelative;
        
    left26px;
        
    bottom0;
        
    width68px;
        
    height100%;
        
    z-index:1;
        
    visibilityvisible;
        
    background-repeatrepeat-y;}
    #Bottom {
        
    background-imageurl(images/contentslice_18.jpg);
        
    positionabsolute;
        
    left93px;
        
    top130px;
        
    width643px;
        
    height87px;
        
    z-index:1;
        
    visibilityvisible;
        
    background-repeatno-repeat;} 

  • #10
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Code:
    #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
    Code:
    <!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> &euro;17,50 voor 30 mei <br> <br> &euro;20,00 
                    1 juni - 30 juni <br> <br> &euro;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
    Code:
    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;}


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •