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 9 of 9

Thread: Layout Help

  1. #1
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Layout Help

    Okay well i was using the idea of http://bonrouge.com/2c-hf-fixed.php that layout. so i tweeked it to my likings,but when i change the bg image

    Code:
    html {height:100%;}
    body {
    margin:0;
    padding:0;
    height:100%;
    background-color:#ffffff;
    font-family:arial, serif;
    }
    #wrap {
    background:url(bg200W3.gif) top left repeat-y;
    min-height:100%;
    width:780px;
    margin:auto;
    position:relative;
    }
    * html #wrap {height:100%}


    That they have which is bg200w3.gif which link is http://bonrouge.com/bg200W3.gif. and i try to add http://www.da-nexgen.com/bgbgbg.gif instead it combines both left and main together. and if i try to resize the image to 200x1px then the main side has no bg.

    this is the code i have so far

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Dark Dominion Guild</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">html {height:100%;}
    
    body {
    margin:0; padding:0; height:100%;
    font-family:arial, serif;
    background-image:
    url('http://www.da-nexgen.com/cssddbgwhole.gif')
    }
    #wrap {
    background:url(http://www.da-nexgen.com/bgbgbg.gif) top left repeat-y;
    min-height:100%;
    width:780px;
    margin:auto;
    position:relative;
    }
    * html #wrap {height:100%}
    
    #inner-wrap {
    padding-bottom:80px;
    }
    #inner-wrap:after {
    content:" ";
    display:block;
    clear:both;
    }
    * html #wrap {
    height:100%
    }
    #header {
    background: #333333 url(http://www.da-nexgen.com/bg25.jpg);
    color:#FF00FF;
    margin:0; padding:0;
    height:130px;
    }
    p {margin:5px; padding:0;}
    h1 {
    position:relative;
    line-height:80px;
    margin:0;
    padding-left:20px;
    }
    #left {
    float:left;
    width:200'px;
    text-align:center;
    }
    #main {
    position:relative;
    margin-left:200px;
    background: #;
    }
    #footer {
    position:absolute;
    bottom:0;
    height:30px;
    background-color: #333333;
    width:100%;
    color:#FFFFFF;
    text-align:center;
    }
    #footer p {
    margin:0;
    font-size:.7em;
    text-align:center;
    }
    
    h5 { color: white; }
    
    
    
    ul {
    padding:0;
    margin:0;
    list-style-type:none;
    width: 200px;
    font-family: Tahoma;
    }
    a {
    display: block;
    background: url('http://www.da-nexgen.com/ddnavfg.gif');
    height: 24px;
    width: 170px;
    padding: 7px 0 0 30px;
    text-decoration: none;
    }
    a:hover {
    background: url('http://www.da-nexgen.com/ddnavbg.gif');
    }
    
    
    
    </style>
    <!--[if IE]>
    <style type="text/css">
    #main,
    #inner-wrap,
    #wrap {
    zoom:1;
    }
    </style>
    <![endif]-->
    </head>
    
    <body>
    
    <div id="wrap"><div id="header">
    <img src="http://www.da-nexgen.com/bfdd2.jpg" width="780" height="130">
    </div>
    
    <div id="inner-wrap">
    <div id="left">
    
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Forums</a></li>
    <li><a href="#">Addons</a></li>
    <li><a href="#">DKP</a></li>
    <li><a href="#">Recruitment</a></li>
    </ul>
    
    
    
    
    </div>
    
    
    
    <div id="main"><p><h5> Welcome to the dark Dominion guild website. This is a very rough version there are still many updates that need to be done. Sample textSample textSample textSample textSample textSample textSample textSample textSample textSample textSample textSample textSample textSample textSample textSample textSample textSample textSample text
    Sample textSample textSample textSample textSample text<br>__________________ <br> <img src="http://www.da-nexgen.com/pissedoff.jpg"
    width="500" height="450"> <br> _______________ <br> <img src="http://www.da-nexgen.com/pissedoff.jpg"
    width="500" height="450"> </h5></p></div>
    
    
    
    
    </div>
    <div id="footer">
    <p> &copy; Dark Dominion Guild 2007</p>
    </div>
    </div>
    </body>
    </html>

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Why are you using that as your background image? It appears to be just a solid color.

    You have some issues in your CSS. I suggest you use the css validator. http://jigsaw.w3.org/css-validator/

    Mainly this part
    Code:
    #left {
    float:left;
    width:200'px;
    text-align:center;
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well i am going according to the layout in that site and they used an image. It looks fine the way they have it but if i try to change the left image it just messes up

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Did you see what I told you to fix? They use an image because it its only a repeating image that is 200px wide though if you want the whole background to be one color then just set a background color to #wrap and lose the image.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay i did what you told me, but it now changes the color to both sides. Im sorry, i am pretty new to css so please do not get mad with my nooby questions.
    Last edited by bryan12; 09-27-2007 at 03:49 AM.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Please post your updated code. You also need to make an image that is as wide as your left column not the width of your wrap div. A link to your site would be better. Help us help you.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OKay well here's the link www.da-nexgen.com

    i tried what you told me and i have the left side working but in the main side it still messed up i tried to put a white background but it does not cover it all.

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You aren't listening. I said add the background color to #wrap not #main
    Code:
    #wrap {
    background: #FFF url(http://www.da-nexgen.com/bgtry2.gif) top left repeat-y;
    min-height:100%;
    width:780px;
    margin:auto;
    position:relative;
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you so much it finally worked


  •  

    Posting Permissions

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