Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Design Help?

    CSS Design Help?

    Hi, thanks for reading my post.
    Iíve posted this thread to hopefully receive help about a little problem I have with my website - If itís solvable.

    I have a very simple CSS driven layout but cant seem to work out how to make the footer DIV stay below all inputted text in both DIV sections on my site.
    It always stays below any text in the main content table, but if the text in the menu bar is further down than the text in the content table; it seems to still stay below the content text. Therefore making it look very odd as the footer line goes thru any extra text in the menu DIV greater than what is in the content DIV.
    Iíve managed to solve this problem by adding the Ďmin-heightí attribute to the content. Here is an example:

    Code:
    #content {
    	width:400px;
    	min-height:460px;
    	margin-right:200px;
    	border-right:1px solid #CCCCCC;
    	padding:15px;
    }
    This is no problem when viewing in Opera, but when viewed in IE the content border does not stretch down to the footer line unless its filled with text or
    Code:
    <br>
    is inserted a number of times.

    This is my website to help you understand more: www.tabbyondrums.co.uk

    Click on the Testimonials page as this hardly has any text in to demonstrate what I mean.
    If youíre viewing in opera; everything should look fine. But if youíre using IE then you will notice the border on the right of the content DIV doesnít stretch right down to the bottom near the footer as it does on the home page for example.

    Is there any way I could ether make that border on the right of the content DIV always stretch down to the bottom, or some how set it so that itís always below the text/content in the menu DIV?

    Please help me; Iíd appreciate it so much!
    I donít think this problem will be hard to solve for all those who know what there doing,

    If you need me to post my CSS up I will, but Iím sure you guys can get hold of it no probs.

    Thanks for youíre time.

    Tabby

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Remove the min-height on #content and add clear:both; to the footer. To learn more about clearing floats read this http://www.positioniseverything.net/easyclearing.html
    You could use their technique but since you already have the footer there, just use that to clear the floats.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks!

    Thanks a lot, but is there any way to make the border on the right of the content DIV stretch to the footer line as it would when full of text?

    Thanks again
    Tabby

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    For that you would need to use a repeating background image. This method is explained here: http://www.alistapart.com/articles/fauxcolumns/
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Not sure...

    Im not sure i will be able to do that as i dont think my site works like that and i already havea bg image...
    Any help?

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Yes you can. The background image will go on the #window div. Trust us we know what we are talking about. Make a 1px high image with a 1px gray dot on the far left. The image should be as wide as your right column. Have it repeat in the y direction in the top right of #window. Remove the border on your right column. I suggest you read the article rather than assume something can't be done.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So I take it there is no way of doing it in CSS without the use of an image?
    Sorry for assuming.
    I don’t doubt that you don’t know what you’re talking about.

    I would just like to avoid using images for the layout is possible.

    Thanks for your time
    Tabby

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    No not with CSS. You can do it in javascript but then you will users who have javascript disabled. Its one background image. I don't see what the big deal is.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •