SitePoint Sponsor

User Tag List

Page 1 of 66 123451151 ... LastLast
Results 1 to 25 of 1630
  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)

    3 equalizing col layout +header +footer

    Hi,

    I've seen a number of threads asking for this type of layout so I hope nobody minds if I post this example that i've coded as it should be useful to a lot of people.

    The idea was to produce a table type layout where:

    1) any column could be the longest depending on content.
    2) different coloured columns with borders.
    3) a header and footer.
    4) the footer must sit at the bottom of the window unless the content is greater. Then the footer sits at the bottom of the document.

    While most of these problems have been partially solved before, I have not seen a solution that fulfils all the requirements (although I expect other people have of course done this before).

    Its been tested in ie5, ie5.5, ie6, mozilla 1.2 1.4, firebird 0.6.1, Opera7(slight problem with footer but nothing that notices) and netscape 6.2. (Opera 6 doesn't like it but its usable and code can be added to make it acceptable). I suspect older browsers will fall over when they see it, however there's about 90% of the market covered here anyway.

    I don't have a mac to test on but I know it works on Mac Firebird and Mac Netscape 7, netscape 6 OS 9. (On Mac IE5.1 and Safari1.1.1 it works with the columns but they don't like the footer but the design is still perfectly usable. I'm sure theres a mac hack that would fix it as the code is quite simple anyway.)

    Well thats enough talking about it, I suppose youll want to see it now.
    http://www.pmob.co.uk/temp/3colfixedtest_4.htm

    If you think its any good or your interested in how it works then shout. If you think its rubbish then keep quiet. (I've only posted it here because I think it may be useful and there are no links to any site on the demo.)

    It's commented out so feel free to use it.

    Paul
    Last edited by Paul O'B; Mar 6, 2010 at 11:00.

  2. #2
    Pointiest Petitions carrotflowers's Avatar
    Join Date
    Jul 2003
    Location
    Suburbs of DC (MD)
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You rock!

  3. #3
    SitePoint Wizard Dangermouse's Avatar
    Join Date
    Oct 2003
    Posts
    1,024
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good job

  4. #4
    Starting to-digg-in ********* jamesxv7's Avatar
    Join Date
    Oct 2003
    Location
    Island of Puerto Rico @ the Caribbean
    Posts
    873
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi to all:

    Great job Paul. Inspired in your layout I build mine. Check it here: http://www.ecodig.com/index_.php until I finish it. If any one want the code I will give it. I think it works in any platform.
    James: Ecodig - My Blog - My Gallery
    Validate your sites: CSS - HTML/XHTML
    Without faith you are lost.

  5. #5
    SitePoint Member
    Join Date
    Dec 2003
    Location
    Macomb, MI
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Hmm, very nice.

    Now, can you make it such that the min-width of the header (or 3 columns combined) totals 800px, AND if the browser is increased to a size larger, that the left & right nav columns increase too but not beyond 250 pixels each (max-width)? AND keep it cross-browser compatible?

    If you do, I'll give you a great big kiss

    -jim

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    If you do, I'll give you a great big kiss
    That's a reason not to do it

    I could probably do it for mozilla but ie would need to be hacked to death. (which is probably the best thing for it lol).

    Paul

  7. #7
    SitePoint Member
    Join Date
    Dec 2003
    Location
    Macomb, MI
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    That's a reason not to do it

    I could probably do it for mozilla but ie would need to be hacked to death. (which is probably the best thing for it lol).

    Paul
    Ok, I challenge you! Do it!

    Actually, if you could help me out, I'd pay you for it dude. I just posted a message in the trading post for a css/xhtml freelancer.

    -jim

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Ok, I challenge you! Do it!
    Haven't got the time at the moment I'm afraid I saw your post in trading post and it looks like you'll find somenone to do what you want ok.

    Paul

  9. #9
    SitePoint Addict jodmcc's Avatar
    Join Date
    Dec 2003
    Location
    Houston, Texas
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's the address:

    http://users2.ev1.net/~jodmcc/2_col.html


    Also, I have attached 2 screenshots.

    Thanks,
    John
    Attached Images Attached Images

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

    Hi John I notice that in ie5 -6 (PC) the image has 5px padding between the vertically stacked floats.

    For some reason Ie is interpreting the padding from your #right style. Just change it to padding-left:5px (if you need it at all?)
    Code:
    #right {
     margin-right: 10px;
     margin-left: 230px;
     border: none;
     background-color: #FFFFFF;
     top: 164px;
     right: 10px;
     padding-left: 5px;
    }
    It now looks the same as mozilla (pc). (As I mentioned before I don't have a mac so perhaps someone with a make can have a play around with it.)

    BTW you posted this in the wrong thread which might confuse some people ( confused me lol).

    Paul

  11. #11
    SitePoint Addict jodmcc's Avatar
    Join Date
    Dec 2003
    Location
    Houston, Texas
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul,
    You mentioned this was posted in the wrong thread, I thought this was a CSS question. Am I wrong?

    John

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi John,
    You mentioned this was posted in the wrong thread, I thought this was a CSS question. Am I wrong?
    You Hi-jacked my thread lol.
    This was your post:
    Here's the address:

    http://users2.ev1.net/~jodmcc/2_col.html


    Also, I have attached 2 screenshots.

    Thanks,
    John
    No one else reading this thread will know what you are talking about, unless of course they have read your other thread

    Your original thread was a bit lower down

    It doesn't matter to me but you may miss some traffic from your original thread, which would have gone to the top of the list had you posted correctly.

    Never mind eh

    Paul

  13. #13
    Ensure you finish what you sta bronze trophy John Colby's Avatar
    Join Date
    Aug 2003
    Location
    University of Central England, U.K.
    Posts
    487
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul

    Great - many thanks - looks great
    John
    No electrons were harmed during the creation, transmission
    or reading of this posting. However, many were excited and
    some may have enjoyed the experience.

  14. #14
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Thread stickied

  15. #15
    SitePoint Addict jodmcc's Avatar
    Join Date
    Dec 2003
    Location
    Houston, Texas
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    I just caught what you were saying about the wrong thread. My Bad.

    John

  16. #16
    Non-Member
    Join Date
    Aug 2002
    Location
    USA
    Posts
    544
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much for posting this template. I think the hardest part probably is figuring out browser compatibility. Could you elaborate on the various browser hacks, why they work, and why they're needed?

    Code:
    html>body #outer{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
    
    * html #footer {/*only ie gets this style*/
    	\height:52px;/* for ie5 */
    	he\ight:50px;/* for ie6 */
    
    * html #centrecontent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */
    Also, any idea how it would display on older browsers?

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

    Here goes quickly
    html>body #outer{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
    Mozilla and Opera7 support min-height which IE doesn't so for ie you have to use height alone.

    Therefore ie will render the page at the height specified but if content is greater it will automatically expand unlike mozilla (and others) which will overflow. Therefore mozilla needs height auto which will let the height expand with the content but the min-height is still observed so we now have both browsers behaving the same. Obviously we need to hide the height auto from ie otherwise it will have no height to start with.

    That's why we use the child selector (>) to hide the styles from IE as IE doesn't understand the child selector. End result=both browers happy

    * html #footer {/*only ie gets this style*/
    \height:52px;/* for ie5 */
    he\ight:50px;/* for ie6 */
    IE5 and ie5.5. (and ie6 in quirks mode) have a broken box model and include padding and borders inside the width of an element instead of adding it to the width as per the specs.

    As this is only an ie problem we use the star selector (universal selector) hack which only IE parses when in fact it shouldn't. Therefore to give style just to ie you can use * html followed by the style and only ie will parse it.

    The second part is the backslash which when it occurs in the middle of the property causes ie5 and 5.5. to stop parsing that part of the style and move on to the next bit. This allows us to pass the values to even up the fact that ie5 and ie5.5. aren't adding the borders/padding to the elements width as they should. We just add up whatever the total width should be and give that to ie5 and 5.5.

    IE6 does'nt trip up on the backslash and so still reads the correct width and does understand the box model so again everyone is happy

    * html #centrecontent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */
    IE has a bug in that it adds padding to content surrounding a float and when content extends passed the bottom of the float there is a 3 pixel jog that can't be reduced by normal means.

    The solution is either to give the content a specified width (if at all possible) or give it a specified height. However if you want the height to be fluid then you can use 1% height remembering that ie will automatically expand that 1% to fit the content. Again we need to hide this from other browsers otherwise they will adhere to the 1% height and ruin the layout.

    All the above hacks have been explained before and there are many links on the web so just do a search for these terms:
    simplified box model hack
    3 pixel jog
    star selector big
    child selector hack

    Also, any idea how it would display on older browsers?
    I doubt it will display at all!

    I have listed the browers it has been checke on so far and IE5 displays more or less perfectly and is about as old as I want to support.

    However the best thing to do would be to use import for the css to hide it from older browsers such as NN4 and then set up a very simple style rule that will allow the pages to be viewed and read.

    Again if you want to search on the web there are some 3 column layouts that do work for Netscape 4, but they are pretty basic.

    I hope the above all makes sense but I've just rushed of off quickly and I didn't have time to find you the links (I'm not supposed to be on the computer right now as we have guests lol)

    Anyway hope that helps.

    Paul

  18. #18
    SitePoint Zealot
    Join Date
    Sep 2003
    Location
    Michigan
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Great post!

    Bill

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Great post!
    Thanks Bill glad you liked it

  20. #20
    SitePoint Addict lundberg's Avatar
    Join Date
    Mar 2003
    Location
    Sweden
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What about If I only want 2 cols that follows each other??

    Martin Lundberg
    Sweden

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    What about If I only want 2 cols that follows each other??
    Well a simpler design could probably be achieved for 2 columns but using my 3 column layout as above you only need to delete the right column and then take away the right margin on the outer element.

    The left column size can be increased by increasing the margin left on the outer class but make sure you also increase the float to match. Also, you wont need the repeating gif for the colour as the background colour will show through

    I've just redone it very quickly in less than 5 minutes (so I hope there are no errors).

    http://www.pmob.co.uk/temp/2colfixedtest_4.htm

    Hope that helps, but shout if it's not what you want.

    Paul

  22. #22
    SitePoint Addict lundberg's Avatar
    Join Date
    Mar 2003
    Location
    Sweden
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, It confuses me a little when the head and footer is there too. I will try to get it to work and come back if it doesn't =)

    Here is what i've done so you can take a look at it:
    PAGE: http://www.shell.linux.se/lundberg/ssa/index.php
    CSS: http://www.shell.linux.se/lundberg/ssa/css/eskiimo.css

    Right under the menu I want two cols. Left col should be the content col where the main text will be and the left col will be like a sidebar. much like alistapart and simplebits.

    Any tips would be great =)

    Martin Lundberg
    Sweden

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

    Any tips would be great =)
    Do you want your content to be 100% high even when the content is less? If so you will need to set html,body {100%} and also set your container to 100%, plus add the height:auto for mozilla browsers etc.

    If not then don't bother.

    If you have two columns and you want them to be the same length then you can have the main column in the flow and then float the right column right.

    Set a right-margin on the main content and a corresponding left margin on the float. You may have to fiddle to make the margin occupy the same space. (negative margin on the float etc).

    By doing this the main content will have a border if it is longer than the float. If the float is longer the floats border will increase making it look like two equalising columns as they both share the same border. You will need to add a clear:both after the content to push the bottom border down.

    Alternatively you can use the same method as in my example where you make the main content shorter than the space it has to fill (ie margin-left:160px and then float the right column in the main content and then drag it outside of the content to form its own column. (Remembering to keep a slight overlap so that a footer will be pushed downwards.)

    If you need a normal footer then that should be ok. If you want a footer at bottom of window then you will need to refer to my example and use negative margins and a spacer div to compensate.

    Thats roughly how to do it If you get stuck just shout and I'll give you some code when I know exactly what you want.

    Paul

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

    Heres the simple version (no height and no footer):
    CSS:
    Code:
    #contentLayer {
     margin-right:149px;
     text-align:left;
     border-right:1px solid #FFF;
     padding-left:2px;
    color:#fff;background:#000;
    }
    #contentLayer p, #contentRight p {margin-top:0}
    #contentRight {
     float:right;
     width:149px;
     border-left:1px solid #fff;
     position:relative;
    }
    Html:
    Code:
    etc........ 
    <div id="menuItemLayer">
      <ul>
       <li id="current"><a href="">Blog</a></li>
       <li><a href="">Fotografier</a></li>
       <li><a href="">Jag</a></li>
       <li><a href="">Arbeten</a></li>
       <li><a href="">Lšnkar</a></li>
      </ul>
     </div>
     <div id="contentRight">
      <p>Right Content</p>
      <p>Right Content</p>
      <p>Right Content</p>
      <p>Right Content</p>
     </div>
     <div id="contentLayer">
    	<p>Left content</p>
    	<p>Left content</p>
    	<p>Left content</p>
    	<p>Left content</p>
    	<p>Left content</p>
    	<p>Left content</p>
    	<p>Left content</p>
      </div>
    </div>
    </body>
    </html>
    If you need a different colour for the right column you may need to do that with a background repeating gif on the right side of the container.

    Paul

  25. #25
    SitePoint Addict lundberg's Avatar
    Join Date
    Mar 2003
    Location
    Sweden
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm, hehe =) CSS is alittle tricky when it comes to taking the tables away. Well what I want is this. Under my menu div, I want 2 cols, the left one should be like 500px wide and the left one 200. The cols should not be at the bottom if there aren't that much text in them but I do want a footer under them.

    Have to go! =) Thanks for the help!

    Martin Lundberg
    Sweden


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
  •