SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast quiquedcode's Avatar
    Join Date
    Jun 2004
    Location
    Argentina
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Stuck on complex Css Layout

    Hi guys
    I've started learning developing css layouts (tableless), and begun converting an image of a template
    Please Look


    I've uploaded the files I've done so far, because I'm having a little problem and I'm stuck in the structure of the top zone...

    http://www.4shared.com/dir/9984713/9...0/sharing.html
    (compressed.zip)

    1- You're free to modify the whole structure, code at your wish, but I mainly need to add the top horizontal navbar and the image of the doctor at the top zone...

    2- Should I use float and clear properties?

    Thanks a lot in advance,
    Enrique Becerra
    CodeIgniter / Joomla / Facebook-Twitter APIs
    http://www.freelancer.com/u/kabeza.html
    http://about.me/kabeza

  2. #2
    SitePoint Addict
    Join Date
    Feb 2007
    Posts
    270
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks like a good start. I don't see the "stuck" part.

    As for floats/clears: I avoid them where possible because floated designs seem too fragile to me. You get caught with peek-a-boo bugs, and what happens when the browser window isn't what you'd like it to be? Especially when seen in IE6. (I always keep a copy of IE6 around to test floated designs in, as that browser will destroy most of them on contact.)

    For the top section I'd use a judicious mix of position relative and position absolute, as most of that area seems to be fixed sizes due to the graphics. The middle section looks like a standard two-column deal, which you could do either with floats or a combination of absolute and relative positioning (possibly with a little javascript mixed in: see Shaun Inman's description for details). My preference would be for positioning with the Inman javascript added, but floats with an added clear would also work. The footer section looks fairly straightforward as well.

    Dan Cederholm's "Web Standards Solutions" is a good source for the techniques I've talked about here. For that matter, check out Andy Clarke's "Transcending CSS" for another.

    (Hopefully I've given you enough to work it out for yourself; if not, feel free to ask for more help.)

  3. #3
    SitePoint Enthusiast quiquedcode's Avatar
    Join Date
    Jun 2004
    Location
    Argentina
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Arlen
    Thanks for helping.

    The stuck part can be seen directly in the files. I'm stuck on the top right part, I must add a wrapper div with 2 divs inside, for adding the top right navbar, and the doctor image (or other content)

    Could you give me the links for Dan Cederholm's "Web Standards Solutions" and Andy Clarke's "Transcending CSS" ? are these books, articles ?

    I'm very newbie with css layouts, so well, any help is welcome. Thanks again
    Enrique Becerra
    CodeIgniter / Joomla / Facebook-Twitter APIs
    http://www.freelancer.com/u/kabeza.html
    http://about.me/kabeza

  4. #4
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually I have to disagree - floats are by far the most reliable way to position bits of a page. Absolute positioning works... but it can make a page very fragile. For example, if the user increases the size of the text then the page may well break.

    Javascript definitely has it's uses but it's not necessary for this application.

    Float bugs aren't hard to get around to be honest.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  5. #5
    SitePoint Enthusiast quiquedcode's Avatar
    Join Date
    Jun 2004
    Location
    Argentina
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tailslide
    What would you recommend me then? Can you help me with a little quickstart modding to the files I've pointed so I can learn the way you say?
    As far I've read in google, I think the floats are the most used, but well...
    Enrique Becerra
    CodeIgniter / Joomla / Facebook-Twitter APIs
    http://www.freelancer.com/u/kabeza.html
    http://about.me/kabeza

  6. #6
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately I can't go through your file at the moment (trying to cook and post at the same time!). But basically, for the top half of the page you want a wrapper div with two inner divs floated left and right - or both left to get around IE's float dropping behaviour. Same end look either way.

    The within the left hand div you've got your logo and the vertical nav list (make background colour the dark grey so that the nav can expand). I'd use an accessible image replacement technique for the logo.

    In the right-hand div you've got the horizontal nav and the image (the image could be a background image if you prefer).
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  7. #7
    SitePoint Enthusiast quiquedcode's Avatar
    Join Date
    Jun 2004
    Location
    Argentina
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kernelpower_Ltd View Post
    This is something I wish to learn more about , I will keep tabs on this thread.
    so true
    I've learned java, php, complex frameworks, css (common properties, hacks, etc.) but making complex layouts tableless is something that makes me become nuts
    Enrique Becerra
    CodeIgniter / Joomla / Facebook-Twitter APIs
    http://www.freelancer.com/u/kabeza.html
    http://about.me/kabeza

  8. #8
    The Mind's I ® silver trophy Dark Tranquility's Avatar
    Join Date
    Sep 2003
    Location
    KSA - UAE
    Posts
    9,458
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    I didn't have the time to look at your files but I would use relative positions for the div with float to the right or the left ... and try to be precise while setting the width/height of the divs...Is this how you proceeded?

  9. #9
    SitePoint Enthusiast quiquedcode's Avatar
    Join Date
    Jun 2004
    Location
    Argentina
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dark Tranquility View Post
    I didn't have the time to look at your files but I would use relative positions for the div with float to the right or the left ... and try to be precise while setting the width/height of the divs...Is this how you proceeded?
    No
    I just use width/heights, but I don't use relative positioning... I'll try again from scratch
    Enrique Becerra
    CodeIgniter / Joomla / Facebook-Twitter APIs
    http://www.freelancer.com/u/kabeza.html
    http://about.me/kabeza

  10. #10
    SitePoint Enthusiast quiquedcode's Avatar
    Join Date
    Jun 2004
    Location
    Argentina
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've decided to start again from scratch, after googling and reading some pages, and got a result, but, my problem now is that I need some divs to adjust automatically to the height of its neighbours divs



    Files
    http://www.4shared.com/dir/10005997/...ss_layout.html

    All the code in just one file
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Tableless Design</title>
    
    <style type="text/css" media="screen,projection">
    
    /* ====================================================== */
    /* Styles for Reset */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p,
    blockquote, pre, a, abbr, acronym, address, big,
    cite, code, del, dfn, em, font, img,
    ins, kbd, q, s, samp, small, strike,
    strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    center, u, b, i {
         margin: 0;
         padding: 0;
         border: 0;
         outline: 0;
         font-weight: normal;
         font-style: normal;
         font-size: 100&#37;;
         font-family: inherit;
         vertical-align: baseline
    }
    
    body {
         line-height: 1
    }
    
    :focus {
         outline: 0
    }
    
    ol, ul {
         list-style: none
    }
    
    table {
         border-collapse: collapse;
         border-spacing: 0
    }
    
    blockquote:before, blockquote:after, q:before, q:after {
         content: ""
    }
    
    blockquote, q {
         quotes: "" ""
    }
    
    input, textarea {
         margin: 0;
         padding: 0
    }
    
    hr {
         margin: 0;
         padding: 0;
         border: 0;
         color: #000;
         background-color: #000;
         height: 1px
    }
    
    /* ====================================================== */
    /* Styles for LAYOUT */
    div#main_wrap {
    	width:900px;
    	margin:0 auto;
    	background-color:#FFFFFF;
    	padding:4px;
    	overflow: hidden;
    }
    
    div#top_wrap {
    	background-color: fuchsia;
    	padding: 4px;
    	overflow: hidden;
    }
    
    div#top_left_wrap {
    	background-color:#5ed85f;
    	width: 25%;
    	float: left;
    	padding: 4px;
    }
    
    div#logo {
    	background-color:#b44747;
    	color:white;
    	height:125px;
    }
    
    div#left_nav {
    	background-color:#87cefa;
    	color:white;
    	height:225px;
    }
    
    div#top_right_wrap {
    	background-color: orange;	
    	width: 73%;
    	float: right;
    	padding: 4px;
    }
    
    div#top_navbar {
    	background-color: aqua;
    	padding: 4px;
    	height:60px;
    }
    
    div#top_content {
    	background-color: #696969;
    	color: white;
    	padding: 4px;
    	margin-top: 5px;
    	height: 170px;
    }
    
    div#middle_wrap {
    	background-color: #ffe4b5;
    	padding: 4px;
    	margin-top: 4px;
    	overflow: hidden;
    }
    
    div#main_content {
    	background-color: #9acd32;
    	padding: 4px;
    	float: left;
    	width: 70%;	
    	font-size: 12px;
    }
    
    div#right_col {
    	background-color: #c8d9f9;
    	padding: 4px;
    	float: right;
    	width: 28%;
    	height: 200px;
    }
    
    div#footer_wrap {
    	background-color: aqua;
    	padding: 4px;
    	overflow: hidden;
    	margin-top: 4px;
    	clear: both;
    }
    
    div#footer_left {
    	background-color: #a294f3;
    	padding: 4px;
    	float: left;	
    	width:20%;
    }
    
    div#footer_content {
    	background-color: #cd5c5c;
    	padding: 4px;
    	float: right;	
    	width:78%;
    }
    </style>
    
    </head>
    <body>
    	<div id="main_wrap">
    
    		<div id="top_wrap">
    			<div id="top_left_wrap">
    				<div id="logo">LOGO</div>
    				<div id="left_nav">LEFT NAV</div>
    			</div>			
    			<div id="top_right_wrap">
    				<div id="top_navbar">TOP NAVBAR</div>
    				<div id="top_content">TOP CONTENT</div>
    			</div>
    		</div>
    
    		<div id="middle_wrap">
    			<div id="main_content">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla quis massa ut ligula porttitor fermentum. Donec lectus urna, volutpat tristique, ultricies ac, vehicula vitae, elit. Curabitur fermentum faucibus nunc. Morbi vehicula, urna nec sollicitudin semper, diam turpis aliquet mi, et congue elit orci eu ipsum. Proin tincidunt, quam ut scelerisque imperdiet, mi nisl cursus sem, a sodales metus pede ac mauris. Aliquam erat volutpat. In congue dui et enim. Nullam consequat. Nullam at justo vitae erat malesuada sagittis. Suspendisse pede nibh, tempor eget, varius at, convallis ut, leo. Sed pharetra pulvinar elit. Nulla sagittis tincidunt tortor. Integer ac lectus ut arcu consequat consectetuer. Vivamus in lorem. Mauris tempus hendrerit neque. Aenean tristique volutpat risus. Sed sit amet enim volutpat arcu auctor dignissim. Ut vel odio ut magna lacinia viverra. Praesent sit amet turpis in purus fringilla tincidunt. 
    			</div>			
    			<div id="right_col">
    				RIGHT NAVBAR
    			</div>
    		</div>
    		
    		<div id="footer_wrap">
    			<div id="footer_left">LEFT FOOTER</div>
    			<div id="footer_content">FOOTER CONTENT</div>
    		</div>
    		
    	</div>
    </body>
    </html>
    Enrique Becerra
    CodeIgniter / Joomla / Facebook-Twitter APIs
    http://www.freelancer.com/u/kabeza.html
    http://about.me/kabeza

  11. #11
    SitePoint Member igmuska's Avatar
    Join Date
    Jun 2006
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have seen complex layouts using only floats that are xhtml strict compliant. As this is my first post, I can't provide link to the information. To see an excellent demo of complex css float layout, google "The Perfect Multi-Column Stacked Liquid Layout" by Mathew James Taylor.
    Although I have only coded one css layout using his techniques, his design simplicity helped me understand document flow better. From his example you can easily use positioning and floating to solve your layout questions.

  12. #12
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Henry, are you still planning on using that image in the first mockup with your design? (By the way, it would help me immensely if you could put up a live demo, rather than just files - I'll be able to "see" what you're trying to accomplish better, not to mention faster.)

  13. #13
    SitePoint Enthusiast quiquedcode's Avatar
    Join Date
    Jun 2004
    Location
    Argentina
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi guys
    I've tried finally doing the layout with divs, fixed widths and heights, some float, and well, here is what I've got... I think it got good (look) ...

    http://img206.imageshack.us/img206/8950/captura1pu2.jpg

    PS: I can't provide live url, because it is an intranet, internal use and uploading entire framework would be 1 day loss

    Thanks 2 every1 4 helping !!
    Enrique Becerra
    CodeIgniter / Joomla / Facebook-Twitter APIs
    http://www.freelancer.com/u/kabeza.html
    http://about.me/kabeza


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
  •