SitePoint Sponsor

User Tag List

Page 53 of 66 FirstFirst ... 34349505152535455565763 ... LastLast
Results 1,301 to 1,325 of 1630
  1. #1301
    SitePoint Evangelist croatiankid's Avatar
    Join Date
    Mar 2007
    Location
    Zagreb, Croatia
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I find this to be the most comprehensive list of 3 column layouts and their properties in short. And one more thing: this is the longest thread I've ever seen.

  2. #1302
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I find this to be the most comprehensive list of 3 column layouts and their properties in short.
    Yes and my layout is on that list

  3. #1303
    SitePoint Enthusiast cubixstudios's Avatar
    Join Date
    Mar 2007
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    awesome. very helpful for someone like myself...
    Adam
    Last edited by Varelse; Mar 24, 2007 at 14:21. Reason: url removed - please use your signature for links

  4. #1304
    SitePoint Addict AdRock952's Avatar
    Join Date
    Aug 2006
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First I got to say what a great layout....been looking for one like this for ages.

    But I have a problem and I don't know how to fix it.

    In the left and right columns I have some div classes.......

    Left column:
    Code:
    .navbox {
       margin: 0;
       background-color: #D6DDE6;
       border-bottom: 1px solid #000;
       padding-bottom: 10px;
    }
    Right column:
    Code:
    .adbox {
       background-color: #D6DDE6;
       border-bottom: 1px solid #000;
       padding-bottom: 10px;
    }
    That works fine how I expect and most of my other pages work fine with the content in the centercontent div but if I use this div class in the centercontent div...

    Code:
    .contentbox {
       margin: 0 0 10px 0;
       background-color: #FFFFFF;
    }
    ...I have noticed that the first contentbox div's height is expanded down below the divs in the left and right column.

    Is there a workaround or do i have to set the height of the contentbox (which i really don't want to do)

  5. #1305
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,
    ...I have noticed that the first contentbox div's height is expanded down below the divs in the left and right column.
    I'm not following what you mean exactly - do you have a link to the page that is causing problems.

    Otherwise paste the full code (plus css) and a deeper description of what you want to achieve and why you think its going wrong.

    If you put the .contentbox inside the #centrecontent div then .contentbox height will be the height of its content as expected so I guess you must mean something else.

  6. #1306
    SitePoint Addict AdRock952's Avatar
    Join Date
    Aug 2006
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul

    Here is a link so you can see for yourself what the problem is.

    http://www.jackgodfrey.org.uk/adam/souvenirs.htm

    If i remove any divs from either of the 2 columns ther is no problem

    many thanks...

    I have to make a website for an assignment and I would like to use it again in another site I plan to make

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

    The problem is a float clearing issue and when you clear floats then you clear all floats above it in the html including the floated side columns.

    The easiest solution is to wrap an inner in the center-content and float that as a parent container for the content and all clearing will be contained within that parent float

    e.g.
    Code:
    #center-inner{width:100%;float:left}
    html:
    Code:
        <div id="centercontent">
          <div id="center-inner">
            <h1>Souvenirs Shop</h1>
            <div class="contentbox"> <img src="souvenirs/images/anubis.jpg" alt="Anubis" />
    
    etc...........
    
    
     </div>
    </div>
    Here is a demo explaining the problem and offering the same solution.

    http://www.pmob.co.uk/temp/flclear1.htm

  8. #1308
    SitePoint Addict AdRock952's Avatar
    Join Date
    Aug 2006
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul....you are a legend!!!

    I have another question. I really like what you have done with this but sometimes I would like to keep a fixed width (e.g. say about 800px) and I would like it centered which I can do.

    The thing is, how would I use your example which keeps the footer at the bottom of the page but allows me to keep the fixed width. I would like to know becuase this is very useful and I'm definitely going to use it again.

    You can see what I mean about a fixed width centered content here http://www.jackgodfrey.org.ukwww.jackgodfrey.org.uk

    Currently I have no footer because I'm extracting content from a database and I have no way of sayihng how long the page is going to be so having a fixed footer at the bottom of the page with keeping the left column the same height would be great.

    Again many thanks for your help before and any help you give in the future

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

    There are some centred layouts already linked from the main demo that may be of use. However for a fixed width centred layout then the easiest method is to use a background image for the columns and do away with any real trickery at all.

    You can still have a footer at the bottom of the viewport or document if longer if you follow this template.

    http://www.pmob.co.uk/temp/3col-centred-template.htm

    It doesn't matter that the content is from a database because the initial height is 100&#37; but if the content is greater than that then the footer moves accordingly.

    Hope that helps

  10. #1310
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul

    Love the templates, however on http://www.pmob.co.uk/temp/3column_simple_1.htm when I change the width of the header from 70px to 120px, everyshift up, and im not too sure what to change?

    Thanks

  11. #1311
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by bopo
    when I change the width of the header from 70px to 120px
    Is that a typo?

    Did you mean height?

    In the layout you linked to you can simply change the header height to what you want with no problem. Did you link to the correct example

  12. #1312
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah it was a typo, my bad. Anyway it does work, however around 15px of space, purple in colour appears when I insert a graphic, which is the correct height. However when I take it out, it dissapears, any ideas.

    And also why cant the header graphic be left aligned? what is stopping it?

    Thanks for your help

    Quote Originally Posted by Paul O'B View Post
    Is that a typo?

    Did you mean height?

    In the layout you linked to you can simply change the header height to what you want with no problem. Did you link to the correct example

  13. #1313
    SitePoint Member
    Join Date
    May 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question New modifications on your 3 equalizing col

    Hi... I've been searching endlessly for this solution, and this is the best I've see so far.
    ORIGINAL: http://www.pmob.co.uk/temp/3colfixedtest_4.htm

    But of course, one size doesn't always fit all and I wanted to modify the layout a bit. I wanted:
    1) the 3 column layout without header and footer
    2) ability to change the the background color of the the left, right and middle columns
    ...and here's the clincher...
    3) the ability to stretch between min-width: 755px and max-width:974px and left align the whole sucker

    Based off google analytic data, we still have 15-20% of our users on 800x600 so I wanted to design a site that would be at least usable to those people.

    I was able to easily:
    1) remove all the divs and css relating to header/clearheader/footer/clearfooter... GOOD
    2) change the #outer div's margin-left and margin-right's to border-left and border-right and now I can specify color... GOOD

    The problem is three...
    3) If i add any kind of min-width/max-width to outer the whole thing breaks (the colors i specify for left, right, outer completely disappear and the whole thing changes to just the background of the body tag)
    3a) same thing with my ie fix for min-width/max-width with width:expression(...)

    If anyone can help me out that'd be awesome.... Thanks!

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

    You mean something like this.

    http://www.pmob.co.uk/temp/3col-left-aligned.htm

    • 3 columns only
    • No images required
    • 3 different column colours
    • 100% high columns
    • min and max width

  15. #1315
    SitePoint Member
    Join Date
    May 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    First of all, thank for the help. you have really come up with some usuable layout, not just for me, but everyone. Much appreciated.

    Your design is almost perfect:

    Firefox 2.0.0.3 - EXCELLENT
    IE 6 - EXCELLENT
    IE 7.0.5730.11 - Columns (stretch and color) work perfect but all the content is gone... no words or pic
    Opera 9.20 - Weird resize issue... Load the page in a non-maximized window... then maximize it. the column aren't 100% height... stays at original height. refresh fixes it. Not a big deal for me

    I don't know if the IE 7 thing is some kind of z-index issue... I'll try looking into it too.

    Thanks!

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

    IE7 is just a "haslayout" issue and if you refresh ny above demo it will be working ok now.

    Opera always has a problem even you resize the window and not just with my layouts but any 100&#37; height. The demo already mentions this and its only a problem if you keep resizing in Opera. A quick refresh will fix it anyway.

  17. #1317
    SitePoint Member
    Join Date
    May 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much Paul... This is great!

  18. #1318
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You could add a js fix for opera to reload when the window is moved.
    e.g.

    http://www.pmob.co.uk/temp/3col-left-aligned-opera.htm

  19. #1319
    SitePoint Addict AdRock952's Avatar
    Join Date
    Aug 2006
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello Paul

    Just a quick question which you should be able to help me with.

    I am using your 2 column centered layoutand I am using a background image which gives the impression there is a shadow behind the centered page.

    I have noticed there is a 1px overlap between the header, footer and left column over the left hand side of the background image which I presume is for a good reason.

    What I would like to know is, is there any way of having the left column the same height as the content so that the left column actually touches the footer? I want to change the background colour of the column and at the moment it only fills where these it text.

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

    Do you have a link to your example so I can see what you mean. (and which example of mine are you basing this on as there are loads out there lying around that I may have forgotten about )

    There should be no need to put colours on the columns as they are controlled either by a repeating background image on the main container or they are addressed on other elements to create the illusion. The column itself does not get styled as it has no height.

    If you want full column colours without images then you probably need something like this demo although its a lot more complicated.

    http://www.pmob.co.uk/temp/3col/3col-abs4.htm

    The simplest ones though are the ones that just use background images like this one:

    http://www.pmob.co.uk/temp/3col-centred-template7.htm

  21. #1321
    SitePoint Addict AdRock952's Avatar
    Join Date
    Aug 2006
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    If you want full column colours without images then you probably need something like this demo although its a lot more complicated.

    http://www.pmob.co.uk/temp/3col/3col-abs4.htm
    That is what I want but in a 2 column version if you have one. Also I tried adding a background image to the body of the css but it didn't show through....any ideas?

  22. #1322
    SitePoint Addict AdRock952's Avatar
    Join Date
    Aug 2006
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I fixed the background image but I just need to know about the 2 column centered layout

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

    Here is an example of a 2col centred layout based on the other example I linked to.

    http://www.pmob.co.uk/temp/3col/2col-abs4.htm

  24. #1324
    SitePoint Addict AdRock952's Avatar
    Join Date
    Aug 2006
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is exactly what I'm looking for but just a couple of questions

    1. How do i change the width of the column to about 200px (it's going to be used for navigation etc)?
    2. Is it easy enought to put the column on the left (or do you have another example for this)?

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

    You basically just adjust the margins to match the wodth and adjust the widths etc.

    Here's an example of 200px left column so you can compare the changes.

    http://www.pmob.co.uk/temp/3col/2col-abs4-leftcol.htm


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
  •