SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2004
    Location
    essex, england
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Advice on making a layout with the right source order

    I have got a layout like this



    I have numbered the sections how i would like them to be ordered in the html.

    I'm wondering how to make the "drop down menu with lots of links" appear above the "main content" visually as it will be below "main content" in the html.

    Should i make the header, section links, drop down menu and flash banner FIXED POSITION so that i can make the "drop down menu" appear above the main content?

    Any advice would be greatly appreciated. I dont want anyone to write the css for me or anything, just a little advice on best practice would be great!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI,

    Assuming your drop down top level menu is a fixed height and that the drop downs themselves are to overlay other content then you can simply absolutely place the menu into the correct position from almost anywhere in the html.

    Above your flash banner just preserve some space with padding or margins using the existing element and then use that space to pop the menu into position and thus keep the other content clear.

    If you want to be clever you may wish to preserve the space using em padding/margin/height and then size your menu using em height and then when the browsers text is resized the layout should expand also so that the menu doesn't overlap the flash banner. Of course if the text wraps then you won't be able to do this as the height will have increased by more than the spacing allocated.

    One big problem is that drop down menus don't like going over the top of flash elements so you may want to read the sticky thread in the flash forum for some possible solutions however they won't work in all browsers and I would avoid trying to do it.

    Hope that helps

  3. #3
    SitePoint Zealot
    Join Date
    Nov 2004
    Location
    essex, england
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ahh good stuff

    Thank you for that, i had my own idea of how i wanted to do it but i wanted to know how someone else would approach the issue.

    Regarding the menu over the flash, you are right that it may prove to be a problem. However, i use SIFR for flash text replacement by mikeindustries.com on another site. I also use a suckerfish drop down menu. They work fine with each other, the menu goes over it perfectly.

    I had a look at how he has done it and he has a sWmode="transparent" setting for the flash. I am only aware of wmode as an option in flash like this so i presume he has written his own funcion to do this.

    I will investigate it and see what happens.

    Thank you for your help. i appreciate it very much indeed.

  4. #4
    SitePoint Zealot
    Join Date
    Nov 2004
    Location
    essex, england
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Well i have done it and seems to work fine in IE and firefox

    Please find below the code for the base outline of the template i'm building.
    It looks identical in IE6 and FIREFOX 1.5.

    Source ordered how i want it and all that jazz.
    I hope this is of some use to somone!

    Thanks for your help Paul.

    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>Untitled Document</title>
    <STYLE type="text/css">
    html,body{margin:0;padding:0;}
    body{font: 76% arial,sans-serif;}
    #wrapper{width:760px;margin:0 auto;}
    #access{height:20px; background-color:#009900; margin-top:10px; margin-bottom:3px; z-index:1;}
    #header{height:130px; margin-bottom:3px; z-index:2;}
    #image{height:130px; width:380px; background-color:#CC33FF; z-index:3; float:left;}
    #sectionlinks{height:130px; background-color:#33CCFE; width:374px; z-index:4; float:right;}
    #banner{height:221px; background-color:#999999; margin-top:36px; margin-bottom:10px; z-index:5;}
    #content{height:237px; background-color:#666666; margin-bottom:10px; z-index:9;}
    #menu{height:30px; width:760px; background-color:#ff0000; position:absolute; top:166px; z-index:8;}
    #footer{height:30px; background-color:#333333; z-index:7;}
     </STYLE>
    </head>
    <body>
    <div id="wrapper">
    <div id="access"></div>
    <div id="header"><div id="image"></div><div id="sectionlinks"></div></div>
    <div id="banner"></div>
    <div id="content"></div>
    <div id="menu"></div>
    <div id="footer"></div>
    </div>
    
    </body>
    </html>

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Glad you sorted it

    A couple of things I would change such as the left positioning of the menu. You haven't defined a left position so its up to the browers to decide where that will be. This may vary in some browers and ie will vary depending on the text-alignment (strangely enough).

    Therefore I would set left:0 on the menu and then apply a stacking context by adding position:realtive to #wrapper.

    You also have a collapsing margin in mozilla with the 10px margin top on #access and you would be better off placing a padding top on #wrapper instead.

    e.g.
    Code:
    html,body{margin:0;padding:0;}
    body{font: 76% arial,sans-serif;}
    #wrapper{width:760px;margin:0 auto;position:relative;padding-top:10px}
    #access{height:20px; background-color:#009900; margin-bottom:3px; z-index:1;}
    #header{height:130px; margin-bottom:3px; z-index:2;}
    #image{height:130px; width:380px; background-color:#CC33FF; z-index:3; float:left;}
    #sectionlinks{height:130px; background-color:#33CCFE; width:374px; z-index:4; float:right;}
    #banner{height:221px; background-color:#999999; margin-top:36px; margin-bottom:10px; z-index:5;}
    #content{height:237px; background-color:#666666; margin-bottom:10px; z-index:9;}
    #menu{height:30px; width:760px; background-color:#ff0000; left:0;position:absolute; top:166px; z-index:8;}
    #footer{height:30px; background-color:#333333; z-index:7;position:relative;}
    Note that on your other elements where you have defined a z-index then you will also need to add position:relative to those elements as z-index takes effect only on positioned elements. However it doesn't ook like you need most of them anyway so I would remove the unnecessary z-indexes.

    Hope it helps

  6. #6
    SitePoint Zealot
    Join Date
    Nov 2004
    Location
    essex, england
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Marvellous

    Yes i see now that i should have applied the 10px top margin to the wrapper rather than the access div. Thank you.
    I did not know about having to have position:relative for z-index (having never needed to use z-index before!) i was going to use it to see if it would help me with getting the drop down menu over the flash movie.

    Is defining a "left" for the menu a bit like specifying margin:0 and padding:0 on elements?

    Is your rule when doing css to specify as much as possible to leave no room for interpretation?

    Ah well, at least it was only a few minor things wrong. We live and learn!

    Thanks again.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    "left" for the menu a bit like specifying margin:0 and padding:0 on elements
    Not exactly

    If you don't define a left position (or at least 2 co-ordinates) for an absolute element then its left position will probably be in the position that the element occupied in the flow of the document before it was removed from the flow.

    You are therefore leaving it to chance for the browsers to determine exactly where it is and how it should be placed. As I mentioned before that in IE if you have text-align:center applied on a parent then IE gets confused and you can end up with the element in the wrong place.

    You can often omit the top position if you want an absoute element to start at the end of a flow as it is less problematical than left or right.

    Also note that IE won't let you define an elements width and height by using top,left, bottom and right simultaneously unlike other browsers. For ie you would need to use top and left (or any combination of horizonatal and vertical) and a width and height.

    Is your rule when doing css to specify as much as possible to leave no room for interpretation?
    Without being overly pedantic yes it is better to make sure that there is no room for error and this includes margins and padding etc. If you take control then you have control

  8. #8
    SitePoint Zealot
    Join Date
    Nov 2004
    Location
    essex, england
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks for the detailed summary

    I presume it must all boil down to how much you know about browser quirks and how thoroughly you test the end product.

    You would not want to specify every little thing and end up with a huge css file size. I would think it would make it very hard to trouble shoot!

    The mantra is going to have to be test test test at the end of the day.

    Thanks for your patience.

    john

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Well it does come down to experience and its only things like positioning, margins and padding that you need to be doubly careful about.

    You would not for example state float:none or position:static unless you wanted to over-ride existing styles etc.

    Testing is the best way and test at every step rather than at the end and you will end up with fewer problems

  10. #10
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    The model is still hiding its big trouble because all heights are set on the containers; also the top margin problems are still there

  11. #11
    SitePoint Zealot
    Join Date
    Nov 2004
    Location
    essex, england
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    A bit more of an explanation please!?

    Can you explain what you mean please? Is this something to do with not being able to increase text size for accessibility as i have set all the sizes in px?

    What top margin problems? Any more help would be greatfully appreciated.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I assumed you set the heights on most of the containers just for example only. If you leave the heights in place then the content will never expand (if of course it needs to) and the content will over-write the content below it.

    Unless of course you are adding overflow auto to the content element and allowing a scrollbar to appear which is not usually what you want.

    You probably only want to fix the header and menu sizes height and let the content divs underneath be a fluid height.

    The issue with text-re-sizing is as I mentioned in my original post and why I suggested you use ems to place the element and to preserve its space. If you size in ems then things will usually grow together and avoid overwriting each other. However ems are a little tricky to work with and take some practice.

    The collapsing top margin was addressed in the code I gave above where I substituted padding instead.
    Code:
    #wrapper{width:760px;margin:0 auto;position:relative;padding-top:10px}
    You may wish to read this article to fully understand the implications.

    http://www.complexspiral.com/publica...psing-margins/

    I think those were the issues that all4nerds was raising.

  13. #13
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Because you use position absolute the header section needs set heights, that also means that content can not control there heights , be dynamic

    The floats are not cleared in the header? You simply slap Suspenders on it by setting a height also

    I presume the content container height is controlled by content and not a set height?
    Without a height IE scuttles, with a height and content that is higher as set height in FF it spills out?

    All containers below the absolute can be controlled by content or padding and margins

    All standard compliant Browsers, always show there dirty undies on the first container with a margin on top, , so you have to beat them up and tell them to do what you want with a border before it or a 100% wide float, or a container without a margin first , or padding (not with 100% hight models)

    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" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>12345 12345 12345 12345 12345 12345</title>
    <style type="text/css">
    * {margin:0;padding:0;}
    	body{border-top:1px solid #ff6600;margin:-1px 0 0 0;font-size:75%;}
    	
    	div{font-size:1em;font-family:arial,sans-serif;}
    	
    	head+/**/body .fc:after{
    	content:"."; 
    	display:block; 
    	height:0;
    	clear:both; 
    	visibility:hidden;
    	}
    	/*  \*/
    	* html .fc{height:1%;}
    	/*  */
    .wrapper{width:64em;margin:1em auto;position:relative;}
    .access{height:2em;background:#009900;margin-bottom:.3em;overflow:hidden;}
    .header{margin-bottom:.3em;background:#ff6600;}
    .image{height:11em;width:31.5em;background:#CC33FF;float:left;}
    .sectionlinks{height:11em;background:#33CCFE;width:31.5em;float:right;}
    .banner{background:#999999;margin-top:3.6em;margin-bottom:1em;}
    .content{background:#666666;margin-bottom:1em;}
    .menu{left:0px;height:3em;width:64em;background:#ff0000;position:absolute;top:13.6em;}
    .footer{background:#333333;}
    
    .wrapper p{margin:3px;}
    </style>
    	<!--[if IE]>
    	<style type="text/css">
    	*+html .fc{zoom:1;}
    	</style>
    	<![endif]-->
    </head>
    <body>
    
    <div class="wrapper">
    
    <div class="access"><p>access</p></div>
    
    <div class="header fc">
    
    <div class="image"></div>
    <div class="sectionlinks"><p>links</p></div>
    
    </div>
    
    <div class="banner fc"><p>banner</p></div>
    <div class="content fc"><p>content<br /><br /><br /><br /><br /><br /><br /><br /></p></div>
    <div class="menu"><p>menu</p></div>
    <div class="footer fc"><p>footer</p></div>
    
    </div>
    
    </body>
    </html>
    Last edited by all4nerds; Jul 19, 2006 at 12:22.

  14. #14
    SitePoint Zealot
    Join Date
    Nov 2004
    Location
    essex, england
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ah i see what you mean

    Ah yes i see where your concerns lie.

    The only section that is going to expand according to it's variable content is going to be the "content" block. And yes i have just specified it's height exactly for demo purposes.

    I am going to have a think about what i can do for text resizing and ems, but as paul says i probably need a bit of time to work through it and practise it.

    All4nerds - that is some pretty complex (for me anyway) css, i'll have a look and try to learn from it. But i think i will stick with the bulk of what i have, it makes sense to me at the moment! If i had to try and edit yours i think i would get myself into a large muddle.

    Thanks for all your help and most importantly your time gentlemen, it has been a fast and painful lesson on how much i do(n't) know.

  15. #15
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    I only changed from ID to class and got most heights of the containers , cleared the floats for FF NS Moz OP and haslayout for IE and the margin on the first container are working as expected

    see FAQ CSS for float clearing and haslayout


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
  •