SitePoint Sponsor

User Tag List

Page 2 of 66 FirstFirst 1234561252 ... LastLast
Results 26 to 50 of 1630
  1. #26
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This is the basics of it:
    Code:
    #contentLayer {
     margin-right:200px;
     text-align:left;
     border-right:1px solid #FFF;
     padding-left:2px;
    }
    #contentLayer p, #contentRight p {margin-top:0}
    #contentRight {
     float:right;
     width:200px;
     border-left:1px solid #fff;
     position:relative;
     text-align:left;
    }
    #footer { 
     margin-top:-1.1em;
     clear:both;
     height:50px;
     background:blue;
     color:#fff;
    }
    html:
    Code:
    etc......
      </div>
      <div id="contentRight"> 
    	<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 id="footer">Footer</div>
    </div>
    </body>
    </html>
    I'm sure you can tie the loose ends up.

    Paul

  2. #27
    SitePoint Addict lundberg's Avatar
    Join Date
    Mar 2003
    Location
    Sweden
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks =) It helped, but still, the sidebar (rightContent) is not following the main content (height) You can go back and look att my site on the same address (both php file and css) as before. This is a problem i've allways had when i've tried myself to do a layout like this. =/

    Martin Lundberg
    Sweden

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

    It is working!! It's just that you can't see it

    The background colour of the left content must be set in the main container and not in the left content itself otherwise the effect will be spoilt.

    Also the right column is a float and only has height auto. We do not colour the float but colour the right side of the container with a repeating gif.

    Make yourself a repeating giv the same width as the float and about 10px high. This can just be a solid colour gif or a nice screenfade effect etc. This will not incur much overhead.

    You just repeat it down the y axis on the right side of the container.

    e.g.
    Code:
    #container {
     width: 	  700px;
     /*centering rule for other browsers*/
     margin: 	  auto;
     background: 	#000 url(leftcolbg.jpg) repeat-y right top;
     color:#fff;
    }
    I have this working perfectly locally and it looks good.

    Now whichever column has the most text the background will always continue on both elements and give the effect of 2 columns. Exactly what was asked for

    Hope that helps.

    Paul

  4. #29
    SitePoint Addict lundberg's Avatar
    Join Date
    Mar 2003
    Location
    Sweden
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, you are right =P hehe, sorry for that. I wanted a border between the both cols too, and all i had to to was add a border to the right of the contentlayer and then also on the left of the rightcontent =) Nice nice! =))

    Thanks for the help! =)

    Martin Lundberg
    Sweden

  5. #30
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Thanks for the help! =)
    You're welcome
    Paul

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

    Regarding the three column layout and in answer to some requests for a clearer explanation of the techniques involved, I have posted a new page here that goes into detail on the structure of the page.

    The address is here:

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

    Once you read the explanation you will see that the layout is quite straightforward and does quite a lot with very little code.

    If you can grasp the concept then you can use it in many different situations that before seemed impossible.

    I have also added a 2 column layout for the benefit of those that have already asked. It was less than a five minute job to convert from 3 columns to 2 columns and the result can be accessed from the main demo here.

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

    Hope that some help to those that have asked.

    Paul

  7. #32
    SitePoint Addict lundberg's Avatar
    Join Date
    Mar 2003
    Location
    Sweden
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul! I've got another problem, or ehmmm it's the same. Now I saw that When the right column is longer then the left (main) column, then the main column's background color doesn't follow (do not go down to the footer). I will update the site on the net so you can see my problem.

    Martin Lundberg
    Sweden

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

    You need to create a background image (or solid colour) that is 200px wide by 10px and then repeat it down the right side of the container. This will be your right column colour and will always extend with the container.

    The colour of the left column is also dictated by the colour of the background in the container and not in the content layer itself.

    This way both columns will expand at the same rate because they are in fact the same and cannot do otherwise.

    So change your containers code to this:
    Code:
    #container {
    width: 700px;
    margin: auto;
    background: #fff url(../leftcolbg.jpg) repeat-y right top;
    border:	 1px solid #01274D;
    }
    The #fff is the left column colour and the repeating gif is the right column colour. That's all that's needed it's quite simple really

    Just make sure you don't overwrite the background with one of the other elements. As I said before I had this working locally right from the beginning so I know it works ok

    Hope that helps but if you get stuck just shout.

    Paul

  9. #34
    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

    I've been experiementing with speech readers and found that if the XHTML page is structured:

    content
    navigation
    header
    footer

    and CSS used for positioning then it render better in speech engines with the content spoken first. Although I have to do more user tests this seems to work. Currently the page (looking at the 2 columns layout:

    Header
    Navigation (left col)
    Content
    Footer

    Have you considered this variant in any of your designs yet? Thus far I've done a layout with fixing the header and navbar with absolute positioning but I'm not happy - needs more work.
    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.

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

    Yes thats a good point and in most of my designs that don't need equalising columns (or other fancy stuff) I try and structure it so the content comes first and then the header footer and nav can be placed absolutely at the end of the code.

    If you look at the site I did for Rob (who sadly died) you will see the navigation is at the end of the html and the content comes first (apart from the header in this instance).
    http://www.tunna-resources.co.uk/

    The nav can be placed absolutely to the left and the content is just margined out of the way. The content can come first and the nav then placed at the end of the html. I find this method the simplest and most efficient.

    If you use floats, as you know the float has to come first in the html which makes things harder. You could float the main content right then the content would come first. But this would usually mean giving the float a specific width when usually you want the nav to have the specific width and the float to be fluid.

    (On another issue it is also good to place your absolutely placed elements after you have placed your static elements because both mozilla and IE will sometimes get it wrong this way. I did do a load of test where I placed absolute elements first in the html and then static items were supposed to ignore them but in some cases they didn't. Both ie and Mozilla occasionally behaved oddly.)

    Paul

  11. #36
    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)
    Thanks Paul

    I should have had this up and running over Christmas - but on Tuesday decided to install a demo of a Speech device - which crashed my PC so severely that it wouldn't boot into anything - and I've spent four days rebuilding it and getting it back to the state that it was in before.

    Grrrrrrrrrr!

    So I'm quite behind with this. I've looked at the tunna site - and will do again later - at this time of the monring i:m off to bed.
    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.

  12. #37
    SitePoint Addict lundberg's Avatar
    Join Date
    Mar 2003
    Location
    Sweden
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again Paul! =) Works great and looks great =) Woho! I understand why you become the member of the month (november)! =)

    Martin Lundberg
    Sweden

  13. #38
    SitePoint Evangelist ucahg's Avatar
    Join Date
    Apr 2001
    Location
    Sarnia, Ontario, Canada
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Forgive me, I didn't get a chance to spend much time on attempting this, but I ask if it's relatively simple to use this layout with relative-width headers, footers, and left and right columns, or not.

    As I mentioned I haven't had a real chance to try too much yet, but would the 1 pixel difference cause problems (and can those problems be worked around)? And what about the 3 pixel jog for IE and preventing that? Thanks for all the insight you can provide.
    Love it? Hate it? Helpful? Useless?
    Use the rate button to let me know what you think of my post!

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

    I didn't get a chance to spend much time on attempting this, but I ask if it's relatively simple to use this layout with relative-width headers, footers, and left and right columns, or not.
    I'm not sure what you mean by relative width headers and footers etc. Do you mean percentages?

    The header and footers are basically 100% width anyway and I wouldn't see much point in having them at a different percentage. You could always place another element inside them if needed.

    The left and right columns could be a percentage width but they would need to overlap the content by 1% (as mentioned in the explanation).

    Obviously the margins on the content would then need to be in percentage to compensate. Although I haven't tried percentage columns I don't see why it shouldn't work although I don't think it will be quite as useful. (If I get a chance I may play around with it.)

    If you want percentage heights on your header and footers then the layout could be made simpler. The reason is that we need elements to add up to 100%. Therefore we could have a header at 20% height, content at 60% height and a footer at 20%. This gives us our 100% height and would mean you wouldn't need some of the clearing divs.

    The difficulty in my layout was having headers and footers of a fixed pixel height and still trying to make the page 100%.

    However this is not what's usually required as you don't usually want your headers or footers to shrink in height.

    There is a full explanation on the site of the techniques used which might help you but I might see if left and right fluid columns are usable or not

    Paul

  15. #40
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    And what about the 3 pixel jog for IE and preventing that?
    That can be prevented by supplying surrounding content with a height of 1%. (Given to IE only - theres also an explanation about this technique in the link to the layout above).

    Paul

  16. #41
    100% Windoze-free earther's Avatar
    Join Date
    Feb 2003
    Location
    Linuxland
    Posts
    2,788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, I am just now finding this link. Great work Paul. Where do you find the time to do all this! My head feels ready to split open just from working out my own CSS bugs! No brain cells left to get into anyone else's code. How do you do it? And why don't you have a shiny badge to recognize your contributions? (Hint, hint, mods.)

  17. #42
    SitePoint Addict
    Join Date
    May 2003
    Location
    UK
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great work Paul, although as you said I have seen variations of this layout before. A question that I have, is it possible to use the same 3 column layout, but not have it cover the width of the of the screen ??

    Basically is it a case of combining this layout - http://bluerobot.com/web/css/center1.html - with your own ?? Will that validate ??

  18. #43
    SitePoint Addict
    Join Date
    May 2003
    Location
    UK
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Having played with the css for a bit, it seems as though it will work, as far as validating, we will have to wait and see.

    Thanks again for another great post.

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

    A question that I have, is it possible to use the same 3 column layout, but not have it cover the width of the of the screen
    Yes it should just be a matter of giving the content larger margins so that it's smaller. The 2 outer floats should just hang out the edge as before.

    There should be no problem validating as my example validates perfectly otherwise I wouldn't have put it up . (Note when using the star selector there should be no space between the * and the html e.g. *html not * html.)

    I think the layout has its plusses and minuses but I've not seen another layout that works as well and as consistently.

    Have fun with it

    I managed to turn it into a 2 column layout at someones request and it only took a couple of minutes to change. (There is also another 2 column example online now that uses a slightly different technique.)

    Quote Originally Posted by earther
    And why don't you have a shiny badge to recognize your contributions? (Hint, hint, mods.)
    I thought I was supposed to get a badge with member of the month on but it never materialised

    Thanks for your comments and glad you like the layout.

    Paul

  20. #45
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Basically is it a case of combining this layout - http://bluerobot.com/web/css/center1.html - with your own ??
    That layout is just simple basic css centering, its not really a layout. You'd be better off just extending the margins as mentioned in my above post. (Sorry I only just got to follow the link and see what was there )

    Paul

  21. #46
    SitePoint Zealot sethtrain's Avatar
    Join Date
    Dec 2003
    Location
    Paducah, KY
    Posts
    174
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Paul,

    You might check out my thread on 3 col design. I am having major problems...
    --
    sethtrain

  22. #47
    SitePoint Evangelist ucahg's Avatar
    Join Date
    Apr 2001
    Location
    Sarnia, Ontario, Canada
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    I'm not sure what you mean by relative width headers and footers etc. Do you mean percentages?
    Yes I meant relative heights (such as em's). Sorry about that.
    Love it? Hate it? Helpful? Useless?
    Use the rate button to let me know what you think of my post!

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

    Just added a 4 column equalising layout using the same techniques as the 3 column layout. (Haven't tested fully yet but I expect it to behave the same as the three column one.)

    I hope you find it useful.

    http://www.pmob.co.uk/temp/4colfixedtest_5.htm

    Paul

  24. #49
    SitePoint Zealot MetalAges's Avatar
    Join Date
    Jan 2003
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just when I think I got all the table rows and column quirks worked out...now I gotta get on the CSS train! lol

  25. #50
    SitePoint Zealot Krieger's Avatar
    Join Date
    Dec 2003
    Location
    Nevada - USA
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very nice Paul O'B.

    I just used your 2 column example #2 and changed my site to that format.

    Very easy to work with. I don't know CSS (much), but was still able to tailor it a bit to suit my needs.

    Thanks!
    Verwüstung rufen und des Krieges Hund' entfesseln!

    My Site
    My first php/MySQL project -->Thanks Sitepoint members


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
  •