SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: CSS positioning

  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS positioning

    So I was trying out to see if this was possible at all.
    On a HTML page there are "Header", "Content", & "Links" sections in that given order. Is is possible using css to get the links section (properly and expanded) above the content section without using absolute positioning or changing the HTML.

    Am I looking at something that's impossible ? See code, I can't really increase its width much.

    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" xml:lang="en" >
    <head>
    	<title>TEST</title>
        <style type="text/css">
            #header{border-bottom:solid black 1px;}
            #NAV
            {
                float:left;
                width:69%;
                border:solid black 1px;
            }
            #CONTENT
            {float:right;width:49%;border:solid black 1px;margin-top:120px;}
        
        </style>
    </head>
    <body>
    <div id="container">
    	<div id="HEADER"><h1>HEAD</h1></div>
    
    	<div id="CONTENT">
    		<h3><span>Content is here</span></h3>
    		<p class="p1">
    		        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
                    Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
                    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
                    Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.
                    Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.
                    Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla.
                    Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat.
                    Etiam eget dui. Aliquam erat volutpat. Sed at lorem in nunc porta tristique.
    		</p>
    	</div>
    	<div id="NAV">
    		<ul>
    			<li><a href="/" >Link #1</a></li>
    			<li><a href="/" >Link #2</a></li>
    			<li><a href="/" >Link #3</a></li>
    		</ul>
        </div>
    </div>
    
    </body>
    </html>

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You just have too much width so the nav drops (it being later in the source compared to the content)

    The content has 49% width (lets nto talk about padding/margins/borders). The nav has 69% width. Is that over 100%? Yes.

    Make the nav 50% width and it'll be fixed (due to it being less than 100% total width)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Make the nav 50% width and it'll be fixed (due to it being less than 100% total width)
    Yeah sure about that. But the question is, is it possible to bring it flow like "Header" > "Links" > and then "Content" without using absolute positioning.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Just add float:left; to the <li>'s and that will make them display inline
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,731
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    I think he means the order of the sections.

    Why are you avoiding AP? Are you equally adverse to RP? And do any of these sections have explicit height?

    OR is the page a set WIDTH?

    if so you could try this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title></title>
    		<style type="text/css">
    		    body, html, h1,h2,h3, ul, li, p {padding:0; margin:0;}
    			#head{background: silver; }
    			#shell { margin:0 auto; width:650px;}
    			.nav { float:left; background: orange; width:100%;}
    			.nav li { float:left;   list-style:none;}
    			.nav a {display:block;   text-decoration:none; padding:.5em .5em; }
    			#content{float: left;width:0px; clear:left; margin-top:2em}
    			#content > * {width:650px;}
    			#foot {clear: both; background: teal; }
    		</style>
    	</head>
    	<body>
    			<div id="shell">
    				<div id='head'>
    					<h1>Logo</h1>
    					<p>branding and stuff</p>
    				</div>
    				<div id="content">
    						<h2>head</h2>
    						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    				</div>
    				<ul class="nav">
    					<li><a href="#">item</a></li>
    					<li><a href="#">item</a></li>
    					<li><a href="#">item</a></li>
    					<li><a href="#">item longer sample item</a></li>
    					<li><a href="#">item</a></li>
    				</ul>
    				<div id="foot"> This would be the footer</div>
    			</div>
    	</body>
    </html>

    Hope that helps.

  6. #6
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Ryan Your reply is not what I was looking for. I'm sorry, I should have explained more clearly.

    I need the "NAV" block to come before the "CONTENT" block in the browser without using absolute positioning or changing the HTML (only css should be changed , see first post for the html). See attached image for how it should look. example1.jpg

    This is not something that I'd want to do in real-life applications, it is just a test example to see if this is possible & if so, what is the best way to get this done. Thanks

  7. #7
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @dresden_phoenix. Thanks for your post. That is exactly what I was looking for. I don't think I would have figured this out on my own.
    I still can't get myself around the part where you put -> width:0px & then #content > * {width:650px;}, but that works.

    To answer your questions, since this was just an example, I did not have much constraints (height,width, etc.) to it. As for absolute positioning, I always thought it was not a good idea to use it in site layout.

    Thanks


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
  •