SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Hybrid View

  1. #1
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Layout - want content to be higher in source code

    Ok, I have a layout that has the most common header, left column, center, and right column, including a footer

    On my juicedthoughts.com website, I have the same layout, but my content is the last item in the source code.

    I don't know how to accomplish getting my content to be either above one of the columns or above both of them, but still maintain the layout.

    Any help is appreciated

    http://www.juicedthoughts.com/images/layout.gif

    Thanks

  2. #2
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Australia
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Jag,

    If you posted some code we might get a better idea of what you are trying to do.

    If I'm correct in my thinking then you want your content to appear as high up in the page as possible. If you have a link to your stylesheet in the page then the only code you would be likely to have in your page would be something like:
    Code:
    <body>
    <div id="header"> Header Content</div>
    <div id="content"> Content </div>
    <div id="footer"> Footer Content </div>
    </body>
    That's just a crude example but I'm not entirely sure of what you want.

    Brad.

  3. #3
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, here is my code in a nutshell. Right now, with this layout, my right column appears BELOW the content area, but the left column and the content area look great with their position on my screen. I have left out the code up to the BODY and the ending of the body.

    Code:
    <div id="container">
    	<div id="contentwrap">
    		<div id="header">
    			<div id="mainmenu">
    				<ul>
    					<li><a href="#">Why</a></li>
    					<li><a href="#">Advertise</a></li>
    					<li><a href="#">Rating System</a></li>
    				</ul>
    				<ul>
    					<li><a href="#">Home</a></li>
    					<li><a href="#">About</a></li>
    					<li><a href="#">Rules</a></li>
    					<li><a href="#">Terms</a></li>
    				</ul>
    				<br clear="all" />
    				<div style="clear: both;"></div>
    			</div>
    		</div>
    		
    		<div id="menucontain">
    			<ul id="leftmenu">
                                   <li>Item1</li>
    			</ul>
    		</div>
    		
    		<div id="contentarea">
    			<h2>Header</h2>
    			<p>content goes here. This is what I want to be on top</p>
    		</div>
    		
    		<div id="rightmenucontain">
    			<p>Right content goes here.
    		</div>
    		
    	</div>
    Here is my current CSS

    Code:
    body {
    	background-image: url(../images/lower-bg.jpg);
    	background-repeat: repeat-y;
    	background-position: center top;
    	margin: 0px;
    	padding: 0px;
    	font-size: 0.8em;
    
    }
    div#container {
    	background-image: url(../images/upper-bg.jpg);
    	background-repeat: no-repeat;
    	background-position: center top;
    	margin: 0px;
    	padding: 0px;
    	height: 100%;
    	width: 100%;
    	text-align: center;
    
    
    }
    div#header {
    	background-image: url(../images/logo.gif);
    	background-repeat: no-repeat;
    	background-position: 15px 15px;
    	height: 139px;
    	width: 670px;
    	text-align: left;
    	border-bottom-width: 1px;
    	border-bottom-style: solid;
    	border-bottom-color: #D3D9DE;
    	margin-right: auto;
    	margin-left: auto;
    
    
    
    
    }
    div#contentwrap {
    	text-align: left;
    	width: 720px;
    	margin-right: auto;
    	margin-left: auto;
    }
    div#mainmenu {
    	margin: 35px 30px 0px 0px;
    	padding: 0px;
    	float: right;
    }
    div#mainmenu ul {
    	float: right;
    	margin-top: 0px;
    	margin-bottom: 0px;
    	margin-right: 10px;
    	margin-left: 10px;
    	padding: 0px;
    
    
    
    
    
    }
    div#mainmenu ul li {
    	background-image: url(../images/arrow.gif);
    	background-repeat: no-repeat;
    	background-position: left 55%;
    	margin: 2px 0px;
    	padding-top: 0px;
    	padding-right: 0px;
    	padding-bottom: 0px;
    	padding-left: 15px;
    	list-style-type: none;
    }
    div#mainmenu a:link, div#mainmenu a:visited {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 90%;
    	font-weight: bold;
    	color: #607089;
    	text-decoration: none;
    
    }
    div#mainmenu a:hover {
    	color: #6F020B;
    	text-decoration: underline;
    }
    ul#leftmenu {
    	margin: 0px;
    	padding: 0px;
    	list-style-type: none;
    }
    ul#leftmenu li {
    	margin: 0px;
    	padding: 0px;
    	list-style-type: none;
    	border-bottom-width: 1px;
    	border-bottom-style: solid;
    	border-bottom-color: #EEEFF0;
    
    }
    div#menucontain {
    	margin: 30px 0px 0px 3px;
    	padding: 0px;
    	float: left;
    	width: 120px;
    	border-top-width: 1px;
    	border-bottom-width: 1px;
    	border-top-style: solid;
    	border-bottom-style: solid;
    	border-top-color: #EEEFF0;
    	border-bottom-color: #EEEFF0;
    	font-family: Arial, Helvetica, sans-serif;
    
    
    }
    ul#leftmenu a:link, ul#leftmenu a:visited {
    	display: block;
    	border-right-width: 1px;
    	border-right-style: solid;
    	border-right-color: #EEEFF0;
    	margin: 0px;
    	padding: 3px 0px 3px 3px;
    	font-size: 90%;
    	width: 99%;
    	font-weight: bold;
    	color: #607089;
    
    
    
    
    
    }
    ul#leftmenu a:hover {
    	background-color: #EEEFF0;
    	border-right-width: 1px;
    	border-right-style: solid;
    	border-right-color: #204D92;
    }
    ul#leftmenu li.noborder {
    	border-bottom-style: none;
    }
    div#contentarea {
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 95%;
    	color: #596882;
    	margin-left: 150px;
    	margin-top: 25px;
    	margin-right: 260px;
    
    
    
    }
    div#contentarea  h2 {
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 150%;
    	font-weight: bold;
    	color: #604854;
    	margin-top: 10px;
    	margin-bottom: 20px;
    }
    div#contentarea p {
    	line-height: 19px;
    	margin-top: 10px;
    	margin-bottom: 10px;
    }
    img.homeimage {
    	margin: 4px;
    	float: right;
    	border: 2px solid #66789A;
    	padding: 0px;
    
    
    }
    div#rightmenucontain {
    	margin: 0px 15px 0px 0px;
    	padding: 0px;
    	float: right;
    	width: 220px;
    
    }

  4. #4
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    by the way, placing the right column underneath the left column in the code will achieve the effect I want, but that just pushes my content in the source even farther down.

  5. #5
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    I think you're going to have to switch from using floating to absolute positioning in order to do this sanely. You can use negative margins on floats if you wanted to change the source code ordering, but I always found it easier to just go with absolute positioning for your sidebar elements.

  6. #6
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well, I know I hate absolute positioning , plus, is that going to make it harder to achieve consistency among browsers?

    Not a huge deal. Problem with my juicedthoughts website is the amount of content that takes up the columns, so there is ALOT in the source code before my content would ever get read.

    In the case of the new site I am doing, there is a series of about 15 links on the left and 3 main boxes on the right, so the amount of content is less , but still, my content ends up last in the code.

    I wish there was a float middle j/k

  7. #7
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by jag5311
    well, I know I hate absolute positioning , plus, is that going to make it harder to achieve consistency among browsers?
    I find absolute positioning a whole lot more consistent than floats, but that's based on personal experience and the layouts I design may be wildly different from yours. I guess it's all in how you use each layout method though.

  8. #8
    SitePoint Addict Bravogolf's Avatar
    Join Date
    Aug 2004
    Location
    All over really :)
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Heh, so do I. We're getting there though. I like your website by the way

  9. #9
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Bravo, I appreciate it.


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
  •