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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with DIV and CSS layout (pics included)

    Hi there! I'm currently coding a layout I designed, however I've encountered a problem. Here's a picture of how I want the layout to look:

    http://i53.tinypic.com/2dsk7iv.png

    Now obviously this will be thriving with text and images when finished, me and my friend are coding it together. We've gotten everything perfect so far apart from the bit just above the white content area, the part where it gives a 3D effect below the header. The image is not a screenshot but the actual layout created in Photoshop

    Up until this point has been coded using CSS and DIV layering, the plan is eventually to include PHP for the content etc. The corners of this one row will not go into place though, and when they do, they always mess up when the page becomes smaller (because at the minute the layout is using a width of 100%) This is how it's appearing in my browser:

    http://i54.tinypic.com/hx27vb.png

    I've tried Firefox, Chrome and Safari, all bringing up the same results.

    I'm quite new to coding so any suggestions would be helpful, thank you

    Danny

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello DannyCare,
    It's impossible to guess how you're putting this site together without seeing your code. Since it's an issue with images, a link to the test site would be best so we can see them.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm sorry, how silly of me haha. Right the coding is here:

    http://pastie.org/1292647

    That's the source, then the CSS file is:

    http://pastie.org/1292649


    The test site is here:

    http://193.33.178.141/defconbeta/


    Sorry for my stupidity haha!

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Here's couple different examples that may help you...Just copy/paste this code into a new .html file and open with your browser to view -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #FC6;
    }
    #container {
    	width: 100%;
    	margin: 30px auto;
    	padding: 25px 0; /*just some separation for demonstration only*/
    	background: #999;
    	overflow: auto;
    	font-size: 0.8em;
    }
    .nav_bg {
    	height: 32px;
    	background: url(http://193.33.178.141/defconbeta/images/bg.png);
    }
    .float_L {float: left;}
    .float_R {float: right;}
    			.nav_bg2 {
    				margin: 100px 0 0; /*just some separation for demonstration only*/
    				height: 32px;
    				background: url(http://193.33.178.141/defconbeta/images/nav_bg.png);
    				position: relative;
    			}
    			#leftImg {
    				height: 32px;
    				width: 32px;
    				position: absolute;
    				top: 0;
    				left: 0;
    			}
    			#rightImg {
    				height: 32px;
    				width: 32px;
    				position: absolute;
    				top: 0;
    				right: 0;
    			}
    </style>
    </head>
    <body>
    <div id="container">
        <div class="nav_bg">
            <img src="http://193.33.178.141/defconbeta/images/nav_lc.png" width="32" height="32" class="float_L" />
            <img src="http://193.33.178.141/defconbeta/images/nav_rc.png" width="32" height="32" class="float_R" />
    	<!--end nav_bg--></div>
                <div class="nav_bg2">
                    <img src="http://193.33.178.141/defconbeta/images/nav_lc.png" id="leftImg" />
                    <img src="http://193.33.178.141/defconbeta/images/nav_rc.png" id="rightImg" />
                <!--end nav_bg--></div>		
    <!--end container--></div>
    </body>
    </html>
    Last edited by Excavator; 11-13-2010 at 05:01 AM. Reason: changed a couple things from id to class
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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