SitePoint Sponsor

User Tag List

Page 4 of 66 FirstFirst 123456781454 ... LastLast
Results 76 to 100 of 1630
  1. #76
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,825
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Based on an idea in this example :

    http://www.positioniseverything.net/...ecta-beta.html#

    (which uses very similar techniques to mine) but basically floats the centre content as well in order to produce content first in the html column.

    I have therefore used a similar technique in my layout to produce a content first column as some people have already requested this. Unlike the example above my example also maintains the footer at bottom of window technique that is proving quite useful.

    I have not doen extensive checking on this layout but it seems ok on mozilla and ie. (I will do more testing.)

    Here it is anyway:
    http://www.pmob.co.uk/temp/3colfixedtest_sourcenone.htm

    Hope you find it useful.

    (lets see a table do the same thing now )

    Paul

  2. #77
    SitePoint Evangelist ucahg's Avatar
    Join Date
    Apr 2001
    Location
    Sarnia, Ontario, Canada
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks good Paul, very impressive!

    Unfortuntately I don't have many browsers installed on the machine I am using now, or I'd try to test it some more for you.

    And no, I think it's safe to say a table cannot do that
    Although I have seen tables with the source order like this:Header>Center Column>Left Column>Right Column>Footer. Those are neat little tricks, but this layout, if it turns out to work across the browser spectrum, just might be one of the most useful ones I've seen in quite some time.
    Love it? Hate it? Helpful? Useless?
    Use the rate button to let me know what you think of my post!

  3. #78
    SitePoint Member
    Join Date
    Feb 2004
    Location
    Arizona
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    I have therefore used a similar technique in my layout to produce a content first column as some people have already requested this. Unlike the example above my example also maintains the footer at bottom of window technique that is proving quite useful.

    I have not doen extensive checking on this layout but it seems ok on mozilla and ie. (I will do more testing.)

    Here it is anyway:
    http://www.pmob.co.uk/temp/3colfixedtest_sourcenone.htm

    (lets see a table do the same thing now )
    Wow Paul, If only I knew about your work I could have
    saved a whole lot of time! With what you have and
    the source-ordered idea and all, this concept is going
    to be really big.

    I actually prefer your 3-col method over mine, but some
    people do want that source ordering, so what can one do
    but try? My method seems to have weird hover problem
    in IE5/mac, but perhaps we can school that puppy, eh?

    The best part is that with your height tricks it goes far
    beyond what tables are capable of doing. Hooyah!
    Perennial student + Impractical joker + CSS junkie = Big John
    <http://www.positioniseverything.net>

  4. #79
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Paul O'B, I'm surprised you haven't work in ems.
    I hope you don't mind but I changed your css to a ratio of 16px to 1em ( apart from borders ), then rounded the figures, the result is absolutely beautiful..........
    Code:
    <style type="text/css">
    html, body {height:100%}
    body {
    padding:0;
    margin:0;
    background: pink url(leftcolbg.jpg) repeat-y left top;
    color: #000000;
    }
    #outer{
    height:100%;
    min-height:100%;
    margin-left:8em;
    margin-right:8em;
    background:#F8E7EC;
    border-left:1px solid #000;
    border-right:1px solid #000;
    margin-bottom:-3em;
    color: #000000;
    }
     
    html>body #outer{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
    #header{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4em;
    background:#FF0000;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    overflow:hidden;
    color: #000000;
    }
    #left {
    position:relative;/*ie needs this to show float */
    width:8em;
    float:left;
    margin-left:-7.9em;/*must be 1px less than width otherwise won't push footer down */
    }
    #left p {padding-left:3px;padding-right:2px}
    #right p {padding-left:3px;padding-right:2px}
    #right {
    position:relative;/*ie needs this to show float */
    width:8em;
    float:right;
    margin-right:-7.9em;/*must be 1px less than width otherwise won't push footer down */
    }
    #footer {
    width:100%;
    clear:both;
    height:3em;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    background-color: #FF8080;
    color: #000000;
    text-align:center;
    position:relative;
    }
    * html #footer {/*only ie gets this style*/
    \height:3.1em;/* for ie5 */
    he\ight:3em;/* for ie6 */
    }
    #clearheader{height:4.5em;}/*needed to make room for header*/
    #clearfooter{clear:both;height:3em;}/*needed to make room for footer*/
    div,p {margin-top:0}/*clear top margin for mozilla*/
    * html #centrecontent {height:1%;margin-bottom:1em}/* combat IE's 3 pixel jog */
    #centrecontent {float:right;width:100%;position:relative;margin: 0 -0.5%;}
    .outerwrap {
    float: left;
    width: 99%;
    }
    </style>
    I like it loads even with text enlarging......

    Added:Oops spoke to soon still goes out when text is increased too big, but maybe you could have a go with ems? I sure you could do a better job than me . It may stop text overlap.....
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  5. #80
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,825
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi Big John,

    Thanks for your comments they are much appreciated.

    Markdidj - Thanks for the ems version I'll have a play around with it tomorrow

    Paul

  6. #81
    SitePoint Enthusiast
    Join Date
    Jan 2004
    Location
    Cali
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,


    On this site

    http://www.pmob.co.uk/temp/3colfixedtest_explained.htm

    how did you make the buttons in the left and right columns? I want my links to go in there with a background color and be centerd through the column.

    How would you do this?

    Thanks,
    Eric

  7. #82
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,825
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Well this is the basic code for the link buttons.

    They are just put in an unordered list (ul) and moved to the centre using the margin property. It's a fixed width container so if you know the width of your button you can just place it where you want.

    Otherwise give your list a width and use margin:auto and text-align:center on the parent to center the buttons.

    The buttons are just simple css rollovers and the image is swapped on hover. The borders are set to give the 3d effect.
    Code:
    #left ul, #right ul {
    margin: 2px;
    padding: 0px;
    }
    #right ul{margin-left:4px}
    #left li, #right li {
    background-image: url(images/pobnavdown.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    height: 25px;
    width: 120px;
    list-style-type: none;
    margin-top:3px;
    }
    #left a, #right a {
    width:100%;
    height:25px;
    line-height:25px;
    display:block;
    text-align:center;
    text-decoration:none;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-right-style: solid;
    border-bottom-style: solid;
    border-right-color: #666666;
    border-bottom-color: #666666;
    border-top-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-left-style: solid;
    border-top-color: #FFFFFF;
    border-left-color: #FFFFFF;
    }
    #left a:hover, #right a:hover {
    background-image: url(images/pobnavup.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    color: #0099FF;
    border-top-width: 1px;
    border-right-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-top-color: #333333;
    border-right-color: #FFFFFF;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-bottom-style: solid;
    border-left-style: solid;
    border-bottom-color: #FFFFFF;
    border-left-color: #333333;
     
    }
    Hope that's what you meant but if you have some code and want a specific example then let me know.

    Paul

  8. #83
    SitePoint Enthusiast
    Join Date
    Jan 2004
    Location
    Cali
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Pure genius!

    Thanks a bunch paul, it worked perfectly.

    I've always wondered if the borders were the ones to give a 3d effect, but could never figure it out until now.

    Thanks a bunch,
    Eric

  9. #84
    Mal Reynolds Mandibal's Avatar
    Join Date
    Aug 2003
    Location
    Columbus
    Posts
    718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's another real world design using Paul's example...except its the 2 col layout. Also used this from alistapart.com for the faux columns.
    http://aasc.osu.edu/index.php

    Still working on it. In Safari and NS7 the left faux col bg extends below the footer which is not really desirable.

    Thanks for the great example Paul.
    Erh

  10. #85
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,825
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Mandibal - It's good to see the layout getting some use - It's looking good

    Your columns problem can be solved easily. The reason for the problem in netscape is that you have changed the height in the footer to 25px. But it needs to be 50px or else you need to change the corresponding dimensions etc.

    The reason it looks ok in ie is because of the box model hack below which is giving the height of 50px to ie6 and 52px to ie5.

    Code:
    #footer {
     width:100%;
     clear:both;
     height:50px;/* you had 25px here */
     border-top:1px solid #000;
     background-color: #FFF;
     color: #000000;
     text-align:center;
     font-size: .6em;
     position: relative;
    }
    * html #footer {/*only ie gets this style*/
     \height:52px;/* for ie5 */
     he\ight:50px;/* for ie6 */
    }
    Hope that helps.

    PS: eric996 thanks for the comments

  11. #86
    Mal Reynolds Mandibal's Avatar
    Join Date
    Aug 2003
    Location
    Columbus
    Posts
    718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul! Helped a lot.

    Fixed it with the corresponding dimensions. Now I just have to figure out how to get it to look right in Safari.
    Erh

  12. #87
    SitePoint Zealot
    Join Date
    Sep 2003
    Location
    Michigan
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    header and footer collapsing

    Hi Paul,

    I'm using your 2 column layout for a site i'm building. I have a question with the header and footer. When I remove the <h1>Header</h1> tags from the header it will collapse. What I wanted is to have just the background image and no text. Is that possible in your layout?

    http://www.dewatson.com

    Thanks,
    Bill

  13. #88
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,825
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    You should just need to give the element a height to match your background image and then it will have something to display in.

    Shout if that's not what you meant

    Paul

  14. #89
    SitePoint Member
    Join Date
    Jan 2004
    Location
    commerce
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul-
    Your tutorial has been most helpful! I was browsing your site, though, and happened across your 2 column left layout with the greenish center section, blue header, and gray everything else. How did you do that? I tried several times in vein to replicate something similar and could never made it work.

    sam

    EDIT-

    Nevermind, I finally got it working! There was just a formatting error in my CSS and it was throwing Moz for a loop.

  15. #90
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,825
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Nevermind, I finally got it working! There was just a formatting error in my CSS and it was throwing Moz for a
    Glad you got it working (and sorry I missed the post)

    Paul

  16. #91
    SitePoint Member
    Join Date
    Jan 2004
    Location
    commerce
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Glad you got it working (and sorry I missed the post)

    Paul
    Yeah, me too. I had been laboring over this thing for a couple days. Thanks.

  17. #92
    SitePoint Enthusiast jlrosine's Avatar
    Join Date
    Feb 2002
    Location
    Colorado
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, I'd like to say thanks, and great job. I haven't found much on the web that puts it all together like this. CSS is still in the hacking stages so it seems, but I think this design (3column fixed or floating) works really well in the browsers I care about.

    As for NS4, I have to say one thing STOP SUPPORTING THIS BROWSER. Forget it, it's a worthless pile of internet surfing crap that shouldn't be supported anymore. It promotes nothing but primitive design, and anyone worth a hill of beans will not be using it anymore.....ok sorry, but I really hate NS4. And the fact that I don't have one web report on any client that pulls more than 1% of their users as NS4, no one cares about them anymore. Your design works in all other designs I have checked...even macs here at work.

    I did have one question abut the 3col fixed design. It works in almost every browser here, but when I test under Mac OS9 with IE 5.1, the footer keeps goin down the page and looks terrible. Basically, however long the repeating image is that sets the borders, it just floats as far as the page goes. I there something I'm missing here or a way to fix that?

    I read through most of the posts in the thread, forgive me if this was already asked.

    Also I know you mention there is a footer problem, but this looks like more than the problem you describe.

    (advisor edit: please don't swear, and if you're going to swear, spell correctly)

    Edit: Another quit Kudos to you, Sitepoint.com doesn't even look as good as your 3col in a mac. I personally hate macs, but at least your floating 3col looks right. When you resize the mac browser IE 5.1 on sitepoint it refuses to look right, you have to manually refresh the page....yuk.
    Last edited by jlrosine; Feb 16, 2004 at 15:17.

  18. #93
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,825
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Thanks for your comments and glad you enjoyed the layouts

    I did have one question abut the 3col fixed design. It works in almost every browser here, but when I test under Mac OS9 with IE 5.1, the footer keeps goin down the page and looks terrible. Basically, however long the repeating image is that sets the borders, it just floats as far as the page goes. I there something I'm missing here or a way to fix that?
    I really must buy a mac to check on as I'm sure I could come up with something suitable to fix these display problems so that they don't look too bad.

    I think that ie5 mac doesn't like the 100% height and the only alternative will be to hide this style from the mac so that the footer renders at the bottom of the content. There are a couple of mac hiding methods that you could use like the backslash eg.
    Code:
    /* start hiding \*/ 
    div {what everyone else gets} 
    /* end hiding */ 
    Sorry I can't be more specific but until I get myself something to test on I'm really just guessing at this

    Paul

  19. #94
    SitePoint Addict raydenx's Avatar
    Join Date
    Jun 2003
    Location
    Singapore
    Posts
    208
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hello everyone,

    i've read this thread and I was wondering if you guys could help me out with a 2 Col + Footer CSS Layout with nested Divs?

    I've got 3 screenshots to help you guys visualize what I'm trying to achieve. Its quite a challenge and I realized that CSS layout isn't as straightforward as I thought. Damn, I've got lots to learn!

    http://www.sitepoint.com/forums/show....php?p=1109926

  20. #95
    SitePoint Enthusiast jlrosine's Avatar
    Join Date
    Feb 2002
    Location
    Colorado
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again Paul for your time and help...it seems you put a lot of time into just replying to helping people here, just wanted to thank you again and know your work is appreciated.

  21. #96
    SitePoint Wizard Young Twig's Avatar
    Join Date
    Dec 2003
    Location
    Albany, New York
    Posts
    1,355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    About the table { height: 100% } thing, it works for me in IE and K-Meleon. As long as you set the height for the header and the footer, the content cells will expand to fit the screen. Check it out:
    http://www.tccalbany.com

    As much as I hated to use tables, it was easier, quicker, cheaper (for the church) and it was cross-browser. Or at least, for what I've checked.

    Edit:

    Actually, the table {height:100%} only works with HTML. Using XHTML, it won't work for some reason.
    Last edited by Young Twig; Feb 20, 2004 at 13:20.

  22. #97
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,825
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Thanks for the example but you just proved my point You're about the nth person that has shown me a table example yet it performs less well in the browers I specified that my css version

    Your table doesn't display correctly in Opera7.02 and the footer is half way up the screen. In 7.22 the footer is ok but the left column is squashed to the side.

    In firebird you get a horizontal scrollbar unless the page is maximised and the table is aligned left but centred in ie.

    That's just the first three I checked. While I know there are display issues with mine I'm just making the point that everything isn't as black and white as table fans would have us think. I'm sure you can correct this defects and come up with a solution but thanks for proving my point yest again

    It may have been quicker for you with a table but it would take me longer

    I've got nothing against tables, I just use what I'm familiar with and at the moment that doesn't happen to be tables.

    I'll say it again "If you want to use a table thats fine by me, but please let me use css without arguing about it "

    I do not infer that my design is better than tables only that it is possible with css for the browsers specified. I wish to keep out of the argument of tables vs CSS.

    Edit:


    Table is broken in mozilla 1.2. and 1.4 (same as firebird problem).
    Netscape 6.2 is completely broken.

    Paul

  23. #98
    SitePoint Wizard Young Twig's Avatar
    Join Date
    Dec 2003
    Location
    Albany, New York
    Posts
    1,355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I suppose they both have their drawbacks. I'll just go the easy way that I can actually understand.

  24. #99
    SitePoint Addict matt_12511's Avatar
    Join Date
    Feb 2004
    Location
    Michigan
    Posts
    256
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    positioning in the header

    First, I must say that your Example 3 is exactly what I've been trying to do with my site for quite a while now.

    My problem is positioning things in the header. I would like to have a logo in the left corner of the header and the company name and date in the right corner. What I'm getting is the date appearing underneath the logo.

    In my html:

    Code:
    <div id="container"> 
     	<div id="header">
    	  <div id="headerlogo"><img src="images/websitelogoface.gif" /></div>
    	  <div id="datebar"><!--#include file="javascript/datebar.js" --></div>
     	</div>
    In my CSS:
    Code:
    body {
    	margin: 10px;
    	padding: 0;
    	text-align:center;/* center layout in ie5 and 5.5. */
    }
    #container {
    	width: 670px;
    	margin: 0px;
    	margin-left: auto;
    	margin-right: auto;
    	background-color: #829CC8;/* this is the background colour of the right column */
    	border: 1px solid #000;
    	text-align:left;
    }
    #content {
    	border: 1px solid #000;
    	padding: 0;
    	background-image: url(images/navbg.gif);/*this is the background colour of the left column */
    	background-repeat: repeat-y;
    	background-position: left top;
    }
    #left {
    	float:left;
    	border-right:1px solid #000;
    	width:199px;
    }
    #right {
    	float:left;
    	width:465px;
    	border-left:1px solid #000;
    	margin-left:-1px;/* makes border line up with #left border */
    }
    #header {
    	background:url(images/hbg.jpg) repeat-x;
    
    }
    
    #footer {
    	background:#FFFFCC;
    	text-align:center;
    
    }
    #header h1, #footer h1 {margin:0}
    #footer {background:#B8BBA8;}
    #headerlogo {
    }
    #datebar {
    	font-family: Century, Georgia, "Times New Roman";
    	font-size: 16px;
    	font-weight: bold;
    	color: #000000;
    	position: static;
    	float: right;
    
    }
    I have added this site to my favorites and can't wait to look through more.

    matt

  25. #100
    SitePoint Guru r2d2's Avatar
    Join Date
    Dec 2003
    Location
    In my van, fool!
    Posts
    647
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question IE prob when changing borders

    Hi,

    I am trying to modify your 3 column layout for a new site I am working on, but have run into a bit of a problem.

    I would like to modify the top and bottom borders of the footer and header so they are only as wide as the main content. In mozilla its working nicely. But in IE6, the top border is not wide enough.

    I have changed the borders by applying a border-bottom to #clearheader rather than #header, and putting an extra div in #footer with margins the same as #outer and applying the border-top to that instead of #footer.

    It appears that #clearheader and #centrecontent dont expand right up to the border of #outer in IE6 - almost as if #outer had padding at the sides, but have set padding:0 to be sure.

    Thought it might be IEs 3px jog, but its a 4px gap I am getting...

    I have applied a background to a paragraph in the centrecontent to better highlight the difference.

    Any ideas on whats causing the difference?

    Edit:Looked at it and thought it might be something to do with the 3px jog and the 1px to force the footer down? A div before #left and #right stretches all the way to the border of #outer.

    Edit 2: This example looks horrible, but shows the problem better I think. I have removed the header, put a green backrounded div before everything, and coloured the left float green too.


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
  •