SitePoint Sponsor |
|
User Tag List
Results 1 to 8 of 8
Thread: div / column layout problem
-
Sep 7, 2004, 11:56 #1
- Join Date
- Sep 2004
- Location
- seattle.usa
- Posts
- 84
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
div / column layout problem
hey.. my first post!
i've been looking at this tutorial:http://www.webreference.com/authorin...yout/advanced/ and i really like the ideas.. but i must be slow or something, cause i cant seem to use those ideas to create my own layout. (see attached gif) i'm hoping somebodyhere could show me what i need to do to create this layout using div/span tags and.. comment the code. i'm assuming for anybody who understands the techniques well, it'd only take a minute or two..
however if i'm mistaken, and thats actually a lot of work, then maybe somebody could point me to some other tutorials that might be a little eaiser for me to follow? or maybe to a layout online somewhere that is like what i'm trying to do?
thanks a zillion!!
mmmm.. maybe it's right in front of me and i'm just not seeing it.. but when i view this post, i dont see the attached gif anywhere. here's a link to the layout gif: http://gotchaopen.net/Assets/css.div_column_layout.gifLast edited by GOLGO-13; Sep 7, 2004 at 12:15. Reason: cant see attached gif!
-
Sep 7, 2004, 13:26 #2
- Join Date
- Jul 2004
- Location
- Melbourne, VIC, Australia
- Posts
- 221
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Heres the body.
NOTE: all the boxes are nested inside the big red box named "middle"
HTML Code:<body> <div id="topnav" class="nav">Navigation</div> <div id="middle" class="middle"> <div id="box" class="boxvert">content</div> <div id="box2" class="boxvert2">content</div> <div id="box3" class="boxhorz">content</div> </div> <div id="botnav" class="nav">Navigation</div> </body>
Code:body,html { margin-top: 5px; margin-left: 104px; background-color: #EDEDED; /*keep mozilla happy*/ height: 100%; weight: 100%; } .nav { background-color: #000000; /*black*/ /*font crap*/ font-size: 24px; font-weight: bold; font-family: arial; color: #FFFFFF; text-align: right; /*set the size*/ width: 70%; height: 30px; /*pull the text off the edge*/ padding: 5px; } .middle { background-color: #FF0000; /*red*/ /*set the size*/ width: 70%; height: 85%; /*space div's*/ padding: 5px; } .boxvert { border: 1px solid #FFFFFF; /*shift it left and down*/ margin-left: 20px; margin-top: 20px; /*set size*/ height: 380px; width: 240px; } .boxvert2 { border: 1px solid #FFFFFF; /*set size*/ height: 380px; width: 240px; /*get the divs side by side*/ float: right; position: absolute; /*manual co-ords*/ top: 75px; left: 400px; } .boxhorz { border: 1px solid #FFFFFF; /*set size*/ height: 90px; width: 510px; /*position it*/ position:absolute; top: 485px; /*bring it off the sides*/ margin-left: 20px; margin-right: 20px; }
ciao
oh yeah forgot, you can view it here:
(the positioning may be a little off in different resolutions :S)
CSS Positioning
-
Sep 7, 2004, 13:39 #3
- Join Date
- Sep 2004
- Location
- seattle.usa
- Posts
- 84
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
COOL!!!
i'm playing around with it now.. i'll let you know how it works for me!
thanks a lot!!!
-
Sep 7, 2004, 15:27 #4
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
Without wishing to seem ungrateful I think I need to point out a couple of errors in the above code. Please don't take this the wrong way but I do like things to be correct where possible(and I realise this may just be an oversight as we all make mistakes at some time.
This piece of code here:
Code:.boxvert2 { border: 1px solid #FFFFFF; /*set size*/ height: 380px; width: 240px; /*get the divs side by side*/ float: right; position: absolute; /*manual co-ords*/ top: 75px; left: 400px; }
If you place the element absolutely then it is removed from the flow and will not be able to exert pressure on the footer or remaining content in the document. You will be better off floating the element and then letting the elements below clear it with clear:both etc.
Your linked example above shows the horizontal box completely covering the footer at 1024x768 res and reducing the widow in any direction results in most of the elements overlapping.
I've tidied the code up (a bit) so that elements respect each other but I have used a fixed size. Obviously a fluid width could be applied also now that the elements are not absolutely placed.
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> <title>CSSP</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> html,body { margin: 0; padding:0; background-color: #EDEDED; text-align:center;/* centre for ie5 and 5.5. */ min-width:664px/* for mozilla to stop sliding off the left side */ } #container { width:664px;/*set the size*/ margin-left:auto;/* centre for compliant browsers */ margin-right:auto;/* centre for compliant browsers */ background:#000; text-align:left;/*reset text*/ } .nav { background-color: #000000; /*black*/ font-size: 24px; font-weight: bold; font-family: arial; color: #FFFFFF; text-align: right; /*set the size*/ height: 30px; } #middle { background-color: #FF0000; /*red*/ /*space div's*/ padding: 5px; } #boxvert, #boxvert2 { border: 1px solid #FFFFFF; margin: 20px; min-height: 360px; width: 280px; float:left; display:inline;/* ie double margin fix*/ } * html #boxvert, * html #boxvert2{height:380px}/* for ie*/ #boxvert2{float:right;} #boxhorz { border: 1px solid #FFFFFF; height: 90px; width: 614px; margin-left: 20px; margin-bottom:20px; clear:both; } </style> </head> <body> <div id="container"> <div class="nav">Navigation</div> <div id="middle"> <div id="boxvert">content</div> <div id="boxvert2">content</div> <div id="boxhorz">content</div> </div> <div class="nav">Navigation</div> </div> </body> </html>
Paul
-
Sep 7, 2004, 18:49 #5
- Join Date
- Jul 2004
- Location
- Melbourne, VIC, Australia
- Posts
- 221
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
thanks for the heads up paul, it was 3am when i wrote that
However i will take your suggestions on board and remeber for next time, cheers.
-
Sep 8, 2004, 02:22 #6
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
thanks for the heads up paul, it was 3am when i wrote that
-
Sep 9, 2004, 17:59 #7
- Join Date
- Sep 2004
- Location
- seattle.usa
- Posts
- 84
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
thanks for the help guys!
i REALLY appreciate it, and hopefully i'll be completing my project this weekend!
-
Oct 15, 2004, 22:22 #8
- Join Date
- Dec 2003
- Location
- el paso tx
- Posts
- 119
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
loadz & Paul O'B
im no newbie at HTML, but CSS? im tinkering with it more and more everyday.
now im going through many of my old designs and trying to convert them all from tables, to CSS positioning.
its members like you that assist all the rest of us to make our websites THAT much more compliant, and easy to update.
thanks guys!
and gals!
Bookmarks