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 15 of 15
  1. #1
    New to the CF scene
    Join Date
    May 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Border height = 100%

    Hi. For some reason I am having a reoccuring problem when it comes to height=100%.

    I am trying to get a border (not image) to extend the height of the page, or at least be able to control it better than I am now.

    Right now, it will only extend to where the content in the related div stops.

    For example, here is my code:

    #content-right-border
    {
    border-left: 1px #c1c1c1 solid;
    height: 100%;
    }


    This div is within a "right column" div, where there are 2 columns within the right column (if that makes sense...like 2 right navs). Right now the far right column extends far, and the left-right column is where I have less content, but want the border to extend all the way to where the right-right column ends.

    How would I control that height? Would I have to make that border into an image and repeat-y it, or is there a way to extend that border without making it into an image?

  • #2
    Regular Coder
    Join Date
    May 2008
    Location
    Oxford, UK
    Posts
    422
    Thanks
    14
    Thanked 27 Times in 27 Posts
    try...

    #content-right-border
    {
    border-left: 1px #c1c1c1 solid;
    overflow:visible;
    }

    If I misread the question, apologies, my eyes aren't working well today :P

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    You need the full code of your document, including html & CSS. Or a link to your page would be more useful.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Try putting the border on to the body or wrapper div
    css

    body {
    border-left: 1px #c1c1c1 solid;
    }

    but a link to your site would enable us to help you more.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    AFAIK, you can't tell a border to be 100%. But you could tell it to be 1px as you have done. If you want to have the area, in which a picture is positioned, to stretch to the top of the screen, then you might want to put it into a div (which can do the 'stretching' and then padding it to push the pictiure downwards or wherever.

    #picture_div {
    background-color: #ccc;
    padding : 100px 0 0 0;
    margin : 0;
    border : 1px solid #000040;
    }

    But we still need to see youre code to be sure that this is what you want.



    bazz

  • #6
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Quote Originally Posted by pandabunny View Post
    How would I control that height? Would I have to make that border into an image and repeat-y it, or is there a way to extend that border without making it into an image?

    You might need to ask in the javascript forum. There is a JS code to make a div extend below where its content takes it. Remember divs extend in height as determined by their content.



    @Frank,

    presumably somewhere along the line, we'll find a link to a JS code that does this. Can we add it to your list in a section, perhaps, entitled 'js for positioning'??

    bazz

  • #7
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #8
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Great rangana.

    That's just what I meant.

    bazz

  • #9
    New to the CF scene
    Join Date
    May 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tried that but it didn't work. Here is the url:
    http://dev.peta.org/living2/

    My css is here:
    http://dev.peta.org/living2/style/style.css

    I am almost thinking of resorting to (I know I am going to get crap for it here!) putting the rightnav in one big table. I have sucessfully made a handfull of "table-less" pages, but the deadline on this one is so tight that I am considering the horrible alternate!

    Quote Originally Posted by brazenskies View Post
    try...

    #content-right-border
    {
    border-left: 1px #c1c1c1 solid;
    overflow:visible;
    }

    If I misread the question, apologies, my eyes aren't working well today :P

  • #10
    New to the CF scene
    Join Date
    May 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bazz View Post
    Remember divs extend in height as determined by their content.
    Thanks for that confirmation! Sometimes I just need to hear it from someone to believe that it's real.

  • #11
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by pandabunny View Post
    Thanks for that confirmation! Sometimes I just need to hear it from someone to believe that it's real.
    But not always!

    Anyway, the link that you have posted can make some considerable improvement!
    How about applying right border to the #content-left directly(since this is your ultimate aim), rather than applying border-left to its adjacent element? Say
    Code:
    #content-left {/*style.css (line 249) */
    border-right:1px solid #C1C1C1;
    float:left;
    width:525px;
    }
    Then change the width of this element to say some 550px and then remove the margin-left of the other element.

    Let's know if this is not OK.
    Edit: Nice theme and layout, I like it
    Last edited by abduraooft; 05-20-2008 at 04:23 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #12
    New to the CF scene
    Join Date
    May 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, it's definately "getting there", but I think I tried something like that before, and the reason I ended up making the border-left encompas only from "search articles" down is because the left border does not start till after the "peta living" logo.

    Here is what it looks like with those changes: http://dev.peta.org/living2/

    I am also not sure if it will work if the main content is sometimes shorter than the nav. (I suspect it will be, because that's just the way things go. )

    Thanks for helping, and thanks for the nice comment, although I can only be credited for the cute little birdies and the logo! The layout design was a group effort


    Quote Originally Posted by abduraooft View Post
    But not always!

    Anyway, the link that you have posted can make some considerable improvement!
    How about applying right border to the #content-left directly(since this is your ultimate aim), rather than applying border-left to its adjacent element? Say
    Code:
    #content-left {/*style.css (line 249) */
    border-right:1px solid #C1C1C1;
    float:left;
    width:525px;
    }
    Then change the width of this element to say some 550px and then remove the margin-left of the other element.

    Let's know if this is not OK.
    Edit: Nice theme and layout, I like it

  • #13
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Alright! since you are using a fixed with layout you could easily achieve your goal by a faux-column aproach, see www.alistapart.com/articles/fauxcolumns/

    Jus create a 980px(width of your) X 1px horizontal image, having a 1px dot at a specific place , say at 560px (width+pading of left).
    Then apply it as the background of #wrapper and apply repeat-y. You could still use the boder for people who blocked images in their browser (but they get a partial result, just like the curent border)

    Hope it's clear!
    Last edited by abduraooft; 05-20-2008 at 07:18 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #14
    New to the CF scene
    Join Date
    May 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok here it is:
    http://dev.peta.org/living2/

    I left the old line in there just to see what was going on.

    Unfortunately, when I try to change the values after "repeat-y" (50% 0 to something else, like (50% 100, the line just disappears!
    \

    Quote Originally Posted by abduraooft View Post
    Alright! since you are using a fixed with layout you could easily achieve your goal by a faux-column aproach, see www.alistapart.com/articles/fauxcolumns/

    Jus create a 980px(width of your) X 1px horizontal image, having a 1px dot at a specific place , say at 560px (width+pading of left).
    Then apply it as the background of #wrapper and apply repeat-y. You could still use the boder for people who blocked images in their browser (but they get a partial result, just like the curent border)

    Hope it's clear!

  • #15
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Now just apply background-color:#fff;(or the required value) to #header and #footer.

    PS: float:left; for #header is completely of no use, just remove! And I think width:545px; is OK for #content-left.
    Last edited by abduraooft; 05-21-2008 at 08:29 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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