SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Feb 2006
    Location
    Los Angeles, CA
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Complex layout, neeed CSS / HTML help!

    Hey Sitepoint,

    I'm currently coding a layout for a new website of mine. It's been a while since I've done this, and taking on a layout like this has got my stumped. I'm having issues setting up the basic structure of the site.

    I've attached an image to show the structure I'm attempting to create. Each "section" has a header, and there are no spaces between them, I put the spaces there just for example purposes.

    What I have so far is fine, but when I'm add under the Advert / UAC area's it positions itself under the News. When I try to place the bottom sections they don't position correctly either. On an added note, the two upper left sections have more height than what the diagrams show, so they are not even with the top middle and top right section.

    PLEASE help me

    I'm using div's, here's my current code:

    index.php
    Code HTML4Strict:
    	<body>
    		<div id="wrapper">
    			<div id="topnav">
    			</div>
    			<div id="banner">
    				<img src="images/banner.jpg" />
    			</div>
    			<div id="lnewsheader">
    				Latest News
    			</div>
    			<div id="adheader">
    				Advertisement
    			</div>
    			<div id="uacheader">
    				User Account
    			</div>
    			<div id="lnewsimg">
    				<img src="images/news.jpg" />
    			</div>
    			<div id="lnewscontent">
    			</div>
    		</div>
    	</body>

    global.css
    Code CSS:
    #wrapper {
    	margin: 0px auto;
    	padding: 0px;
    	width: 977px;
    	border-left: 1px solid #B1B1B1;
    	border-right: 1px solid #B1B1B1;
    }
     
    #topnav {
    	background: #F0F0F0;
    	background-image: url('images/top_back.gif'); 
    	background-repeat: repeat-x;
    	margin: 0px;
    	padding: 0px;
    	width: 977px;
    	height: 18px;
    }
     
    #banner {
    	background: #282828;
    	background-image: #url('images/banner.jpg');
    	border-bottom: 5px solid #D2D2D2;
    	margin: 0px;
    	padding: 0px;
    	width: 977px;
    	height: 72px;
    }
     
    #lnewsheader {
    	background: #6D6D6D;
    	background-image: url('images/div_back.gif');
    	background-repeat: repeat-x;
    	border-right: 1px solid #FFF;
    	padding: 0px;
    	margin: 0px;
    	width: 476px;
    	height: 29px;
    	float: left; 
    }
     
    #lnewsimg {
    	background: #6D6D6D;
    	border-right: 1px solid #FFF;
    	padding: 0px;
    	margin: 0px;
    	width: 476px;
    	height: 249px;
    }
     
    #lnewscontent {
    	background: #DADADA;
    	border-right: 1px solid #FFF;
    	padding: 0px;
    	margin: 0px;
    	width: 476px;
    	height: 96px;
    }
     
    #adheader {
    	background: #6D6D6D;
    	background-image: url('images/div_back.gif');
    	background-repeat: repeat-x;
    	border-right: 1px solid #FFF;
    	border-left: 1px solid #FFF;
    	margin: 0px 0px 0px 1px;
    	padding: 0px;	
    	width: 209px;
    	height: 29px;
    	float: left;
    }
    Attached Images Attached Images

  2. #2
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Substance View Post
    Hey Sitepoint,

    I'm currently coding a layout for a new website of mine. It's been a while since I've done this, and taking on a layout like this has got my stumped. I'm having issues setting up the basic structure of the site.

    I've attached an image to show the structure I'm attempting to create. Each "section" has a header, and there are no spaces between them, I put the spaces there just for example purposes.

    What I have so far is fine, but when I'm add under the Advert / UAC area's it positions itself under the News. When I try to place the bottom sections they don't position correctly either. On an added note, the two upper left sections have more height than what the diagrams show, so they are not even with the top middle and top right section.

    PLEASE help me

    I'm using div's, here's my current code:

    index.php
    Code HTML4Strict:
        <body>
            <div id="wrapper">
                <div id="topnav">
                </div>
                <div id="banner">
                    <img src="images/banner.jpg" />
                </div>
                <div id="lnewsheader">
                    Latest News
                </div>
                <div id="adheader">
                    Advertisement
                </div>
                <div id="uacheader">
                    User Account
                </div>
                <div id="lnewsimg">
                    <img src="images/news.jpg" />
                </div>
                <div id="lnewscontent">
                </div>
            </div>
        </body>

    global.css
    Code CSS:
    #wrapper {
        margin: 0px auto;
        padding: 0px;
        width: 977px;
        border-left: 1px solid #B1B1B1;
        border-right: 1px solid #B1B1B1;
    }
     
    #topnav {
        background: #F0F0F0;
        background-image: url('images/top_back.gif'); 
        background-repeat: repeat-x;
        margin: 0px;
        padding: 0px;
        width: 977px;
        height: 18px;
    }
     
    #banner {
        background: #282828;
        background-image: #url('images/banner.jpg');
        border-bottom: 5px solid #D2D2D2;
        margin: 0px;
        padding: 0px;
        width: 977px;
        height: 72px;
    }
     
    #lnewsheader {
        background: #6D6D6D;
        background-image: url('images/div_back.gif');
        background-repeat: repeat-x;
        border-right: 1px solid #FFF;
        padding: 0px;
        margin: 0px;
        width: 476px;
        height: 29px;
        float: left; 
    }
     
    #lnewsimg {
        background: #6D6D6D;
        border-right: 1px solid #FFF;
        padding: 0px;
        margin: 0px;
        width: 476px;
        height: 249px;
    }
     
    #lnewscontent {
        background: #DADADA;
        border-right: 1px solid #FFF;
        padding: 0px;
        margin: 0px;
        width: 476px;
        height: 96px;
    }
     
    #adheader {
        background: #6D6D6D;
        background-image: url('images/div_back.gif');
        background-repeat: repeat-x;
        border-right: 1px solid #FFF;
        border-left: 1px solid #FFF;
        margin: 0px 0px 0px 1px;
        padding: 0px;    
        width: 209px;
        height: 29px;
        float: left;
    }
    It's not that complex of a layout.
    Code HTML4Strict:
    <div id="container">
                <div id="header"></div>
     
                <div id="left_content">
                    <div id="box_1">
                        <p>
                            This is some testing text
                        </p>
                    </div>
                    <div id="box_2">
                        <p>
                            This is some testing text
                        </p>
     
                    </div>
                    <div id="bottom_left">
                        <p>
                            This is some testing text
                        </p>
                    </div>
                    <div id="bottom_right">
                        <p>
                            This is some testing text
                        </p>
     
                    </div>
                </div><!--end of left_content-->
                <div id="right_content">
                    <div id="ad_header"></div>
                    <div id="right_ad"></div>
                    <div id="main_content"></div>
                </div><!--end of bottom_right-->
            </div><!--end of container-->
    I started out the HTML for you. I'll finish the CSS in 10 - 15.
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  3. #3
    SitePoint Member
    Join Date
    Feb 2006
    Location
    Los Angeles, CA
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all the help, maybe I was just looking at it wrong, can't wait to check out the CSS.

  4. #4
    SitePoint Member
    Join Date
    Feb 2006
    Location
    Los Angeles, CA
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I used your structure, but I'm having issues with the CSS, and floats. I basically float everything to the left, and I'm having issues on the very far right with a space I cant fill basically, and on the left side I'm missing the 1px border from my wrapper div.

    The "user" div is supposed to be a few pixels wider, I chopped off some pixels because when I made it longer it dropped down to below the "adheader" div.

    Here's my current code;

    index.php
    Code HTML4Strict:
    	<body>
    		<div id="wrapper">
    			<div id="topnav"></div>
    			<div id="banner">
    				<img src="images/banner.jpg" />
    			</div>
                <div id="header"></div>
     
                <div id="left_content">
    				<div id="newsheader">Latest news</div>
                    <div id="box_1">
    					<img src="images/news.jpg" />
                    </div>
                    <div id="box_2">
                        This is content blah blah blah
                    </div>
                    <div id="bottom_left">
                    </div>
                    <div id="bottom_right">
                    </div>
                </div><!--end of left_content-->
                <div id="right_content">
                    <div id="adheader"></div>
                    <div id="user"></div>
                    <div id="main_content"></div>
                </div><!--end of bottom_right-->
            </div><!--end of container-->
    	</body>

    global.css
    Code CSS:
    #wrapper {
    	margin: 0px auto;
    	padding: 0px;
    	width: 977px;
    	border-left: 1px solid #B1B1B1;
    	border-right: 1px solid #B1B1B1;
    }
     
    #topnav {
    	background: #F0F0F0;
    	background-image: url('images/top_back.gif'); 
    	background-repeat: repeat-x;
    	margin: 0px;
    	padding: 0px;
    	width: 977px;
    	height: 18px;
    }
     
    #banner {
    	background: #282828;
    	background-image: #url('images/banner.jpg');
    	border-bottom: 5px solid #D2D2D2;
    	margin: 0px;
    	padding: 0px;
    	width: 977px;
    	height: 72px;
    }
     
    #left_content {
    	background: #6D6D6D;
    	background-image: url('images/div_back.gif');
    	background-repeat: repeat-x;
    	border-right: 1px solid #FFF;
    	padding: 0px 0px 0px 0px;
    	width: 476px;
    	height: 100&#37;;
    	float: left;
    }
     
    #newsheader {
    	background: #6D6D6D;
    	background-image: url('images/div_back.gif');
    	background-repeat: repeat-x;
    	margin: 0px 0px 0px 0px;
    	padding: 0px;	
    	width: 476px;
    	height: 29px;
    }
     
    #right_content {
    	background: #282828;
    	padding: 0px;
    	margin: 0px;
    	width: 495px;
    	height: 100%;
    	float: left;
    }
     
    #box_1 {
    	background: #6D6D6D;
    	padding: 0px;
    	margin: 0px;
    	width: 476px;
    	height: 249px;
    }
     
    #box_2 {
    	background: #DADADA;
    	padding: 0px;
    	margin: 0px;
    	width: 476px;
    	height: 96px;
    }
     
    #bottom_left {
    	background: #DADADA;
    	background-image: url('images/div_back.gif');
    	background-repeat: repeat-x;
    	border-right: 1px solid #FFF;
    	padding: 0px;
    	margin: 0px 1px 0px 0px;
    	width: 236px;
    	height: 29px;
    	float: left;
    }
     
    #bottom_right {
    	background: #DADADA;
    	background-image: url('images/div_back.gif');
    	background-repeat: repeat-x;
    	border-left: 1px solid #FFF;
    	padding: 0px;
    	margin: 0px;
    	width: 237px;
    	height: 29px;
    	float: left;
    }
     
    #lnewscontent {
    	background: #DADADA;
    	border-right: 1px solid #FFF;
    	padding: 0px;
    	margin: 0px;
    	width: 476px;
    	height: 96px;
    }
     
    #adheader {
    	background: #6D6D6D;
    	background-image: url('images/div_back.gif');
    	background-repeat: repeat-x;
    	border-right: 1px solid #FFF;
    	border-left: 1px solid #FFF;
    	margin: 0px 0px 0px 1px;
    	padding: 0px;	
    	width: 209px;
    	height: 29px;
    	float: left;
    }
     
    #user {
    	background: #6D6D6D;
    	background-image: url('images/div_back.gif');
    	background-repeat: repeat-x;
    	border-left: 1px solid #FFF;
    	margin: 0px 0px 0px 1px;
    	padding: 0px;	
    	width: 281px;
    	height: 29px;
    	float: left;
    }

    If anyone can point me in the right direction, I would be extremely gracious!

  5. #5
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Substance View Post
    I used your structure, but I'm having issues with the CSS, and floats. I basically float everything to the left, and I'm having issues on the very far right with a space I cant fill basically, and on the left side I'm missing the 1px border from my wrapper div.

    If anyone can point me in the right direction, I would be extremely gracious!
    It sounds like this thread has become fairly CSS focused - so, if I were you, I'd post your issues in the CSS forum as you are likely to get more prompt assistance with CSS issues there.

    Alex
    Alex Stanford @alexstanford tumblog about.me in fb G+ K
    TechTalkin The Premier Community for Technology Enthusiasts and Professionals
    Full Ambit Media Zero Sacrifice Web Design & Development; Made in the USA @fullambit in fb G+ K


Bookmarks

Posting Permissions

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