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 2 of 2
  1. #1
    New Coder
    Join Date
    Oct 2007
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts

    CSS within div tags - going crazy -need help

    Hello there,
    I am having a problem with the layout of my website. i am trying to not have any of my tags break, but at a resolution of 800 x 600 (maximized), in mozilla, it fails. it seems to work fine if the browser window isnt maximized, then as soon as it is maximized i run into problems. my site is based off of this demo - http://www.pmob.co.uk/temp/min-max-3col.htm and i would like the layout to be exactly like this my site is here - http://www.auriasdesign.com/troystum...indextest.html


    here is my current code (divs are colored for visual degbugging on my part)

    <!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>Jeff Stump</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    * {margin:0;padding:0}
    body {
    padding:0 0 0 0;
    color: #000000;
    background-color:#ffffff;
    text-align:center;
    }
    #wrapper{
    background-color:#ff0000;
    width:auto;

    min-width:770px;
    max-width:1024px;
    text-align:left;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    }
    #outer{
    margin-left:348px;
    margin-right:421px;
    background-color:#ffffff;
    color: #000000;

    }
    #header{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:17px;
    text-align:center;
    overflow:hidden;
    color: #fff;
    background-color:#00ff00;
    }
    #left {
    position:relative;/*ie needs this to show float */
    width:348px;
    height:350px;
    float:left;
    margin-left:-347px;/*must be 1px less than width otherwise won't push footer down */
    left:-1px
    }
    * html #left {margin-right:-3px;}/* 3px jog*/
    * html #outer{/* 3px jog*/
    margin-left:345px;
    margin-right:418px;
    }

    #right {
    position:relative;/*ie needs this to show float */
    width:421px;
    height:350px;
    float:right;
    margin-right:-420px;/*must be 1px less than width otherwise won't push footer down */
    left:1px;
    }
    * html #right {margin-right:-130px;margin-left:-3px}/* stop float drop in ie + 3px jog */

    #footer {
    width:100%;
    clear:both;
    background-color:#ffffff;
    color: #000000;
    text-align:center;
    position:relative;
    }
    #clearheader{height:17px;background-color:#000000;}/*needed to make room for header*/
    #centrecontent {float:right;width:99%;position:relative;}
    * html #centercontent{width:100%}

    .outerwrap {
    float: left;
    width: 99%;

    }
    .clearer{
    height:0px;
    overflow:hidden;
    margin-top:0px;
    clear:both;

    }

    td
    {
    font-family: "trebuchet ms";
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 0px;
    border: 0px;
    }

    .subtable
    {
    height: 62px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
    border-spacing: 0px;
    }
    </style>
    <!--[if lt IE 7]>
    <style type="text/css">
    body {width:expression( documentElement.clientWidth < 770 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 770 ? "770" : "auto") : "770px") : "auto" );}
    #wrapper {width:expression( documentElement.clientWidth > 1024 ? (documentElement.clientWidth == 0 ? (body.clientWidth >1024 ? "1024" : "auto") : "1024px") : "auto" );}
    * html #outer, * html #wrapper,* html #centrecontent {height:1%}
    </style>
    <![endif]-->
    </head>
    <body>
    <div id="wrapper">
    <div id="outer">
    <div id="clearheader"></div>
    <div class="outerwrap">
    <div id="centrecontent">&nbsp;</div>



    <div id="left">
    <img src="beta0.png" height="100" width="348"style="position:absolute;left:0px;bottom:0px;">
    </div>
    <div class="clearer"> </div>
    </div>
    <!--end outer wrap -->

    <div id="right">
    <iframe src="contact.html" style="width: 421px; height: 350px;" framespacing="0" frameborder="0" name="content" scrolling="auto"></iframe> </div>
    <div class="clearer"></div>
    </div>
    <div id="footer">
    <table class="subtable">
    <tr>
    <td colspan="3" height="10" bgcolor="#000000" valign="top"></td>
    </tr>
    <tr>
    <td align="left" valign="top" width="78">
    <script type="text/javascript" src="swfobject.js"></script>

    <div id="flashPlayer">Download the latest flash plug-in.</div>

    <script type="text/javascript">
    var so = new SWFObject("playerLoopMini.swf", "mymovie", "75", "30", "7", "#ffffff");
    so.addVariable("autoPlay", "no");
    so.addVariable("soundPath", "loop.swf");
    so.write("flashPlayer");
    </script></td>

    <td align="left" valign="top" style="padding-top: 4px;">p r o f e s s i o n a l <font color="#8B0000">h a i r</font> d r e s s e r.</td>

    <td align="right" style="padding-top: 10px;">&nbsp;<img src="beta6.png" align="top"> &nbsp;<img src="beta5.png" align="top"> &nbsp;<img src="beta4.png" align="top"> &nbsp;<img src="beta3.png" align="top"></td>
    </tr>
    </table>
    </div>

    <div id="header">Header </div>

    </div>

    </body>
    </html>

  • #2
    Regular Coder zro@rtv's Avatar
    Join Date
    Feb 2005
    Location
    on the network
    Posts
    433
    Thanks
    0
    Thanked 1 Time in 1 Post
    Im a little confused on what the visual effect you are trying to achieve is.
    Do you have a graphic, or could you describe in more detail what you are trying to do?

    There are a handful of errors in the markup as well, like not properly closing image tags.

    Also, when posting code. please use the CODE tags.
    ._-zro
    zro@redtv
    zro.redtv.org

    "If HTML and the Web made all the online documents look like one huge book, RDF, schema, and inference languages will make all the data in the world look like one huge database"
    -Tim Berners-Lee, Weaving the Web, 1999


  •  

    Posting Permissions

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