SitePoint Sponsor

User Tag List

Results 1 to 24 of 24
  1. #1
    SitePoint Member
    Join Date
    Apr 2002
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    why is it not fluid?

    So I have my whole site layout in CSS, and it seems I cant set the <div> elements to keep a height setting.
    Hmmm. Yes, I know the color is nasty but I changed it so you can see what Im talking about. here's the code:

    body {

    margin:0px 0px 0px 0px;
    scrollbar-base-color: #FFFFFF;
    scrollbar-face-color: #008080;
    scrollbar-track-color: #FFFFFF;
    scrollbar-arrow-color: #FFFFFF;
    scrollbar-highlight-color: #FFFFFF;
    scrollbar-3dlight-color: #000000;
    scrollbar-shadow-color: #FFFFFF;
    scrollbar-darkshadow-color: #000000;

    }

    A.links:HOVER {
    color: teal;
    text-decoration: underline;
    }

    A.links {

    color: black;
    text-decoration: none;

    }

    A.links:VISITED {

    color: cadetblue;
    text-decoration: none;

    }




    #leftcontent {
    float:left;
    width:12%;
    height:100%;
    background:#000;
    border-right:2px solid #000;
    border-bottom:2px solid #000;
    cursor:auto
    }

    #rightcontent {
    height:100%;
    background:#00FFFF;
    }



    p,h1,pre {
    margin:0px 30px 10px 30px;
    }

    h1 {
    font-size:14px;
    padding-top:10px;
    }

    #rightcontent p {
    font-size:10px;
    margin-left:0px;
    font-size:7pt;
    font-family:Tahoma;
    font-weight:extra-bold;
    cursor:auto
    }

    div.p {
    font-size:7pt;
    font-family:Tahoma;
    font-weight:bold;
    cursor:auto
    }

    and the link to the site
    http://bayside.hs.brevard.k12.fl.us/indextest.htm

    Thanks

    Derek
    Last edited by Phire; Apr 16, 2002 at 07:42.

  2. #2
    SitePoint Member
    Join Date
    Apr 2002
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    28 page views and no one knows? come on guys!

  3. #3
    blonde.... Sarah's Avatar
    Join Date
    Jul 2001
    Location
    Berkshire, UK
    Posts
    7,442
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Phire,

    Tried to have a look at your link but ended up with 'server not found'. You might want to check your site is working okay.



    Sarah
    Regular user

  4. #4
    SitePoint Member
    Join Date
    Apr 2002
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok try this one:
    http://bhs.brevard.k12.fl.us/template.htm

    hope that helps

  5. #5
    blonde.... Sarah's Avatar
    Join Date
    Jul 2001
    Location
    Berkshire, UK
    Posts
    7,442
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Sorry no that doesn't work either - bad IP address returned when tried to find it further..

    Do you see anything when you click on that link? Try copy and pasting what you have in the url bar of your broswer when you are viewing your pages.

    Sarah
    Regular user

  6. #6
    SitePoint Member
    Join Date
    Apr 2002
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm yea I m actually right next to our server....I tried it from the outside (VNC'ed home and it works from there too)....Hmmmm
    what about just the http://bayside.hs.brevard.k12.fl.us ?

  7. #7
    blonde.... Sarah's Avatar
    Join Date
    Jul 2001
    Location
    Berkshire, UK
    Posts
    7,442
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    strange - that one now works... I'll will have a quick gander now..

    Sarah
    Regular user

  8. #8
    SitePoint Member
    Join Date
    Apr 2002
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok great... the file Im talking about is template.htm

  9. #9
    blonde.... Sarah's Avatar
    Join Date
    Jul 2001
    Location
    Berkshire, UK
    Posts
    7,442
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Derek,

    Okay had a look - and basically I cannot find anything which says 'height' for div's in css2. I have posted all the links that I have checked out trying to find a response. None of them or my css (Oreilly book)mention about getting both columns to match in height - in fact they all seem to prefer it not matching!?

    http://www.bluerobot.com/
    http://www.glish.com/css/
    http://www.richinstyle.com/

    Sorry not much help to you

    Have a look and see what you think but at the moment I cannot think of a way to do it

    Sarah
    Regular user

  10. #10
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Height is a valid property for <div>'s. Here some info: http://web3.w3.org/TR/REC-CSS2/visud...propdef-height

    Phire, everything seems to be working fine. Note that when setting the height equal to 100%, it will fill 100% of the canvas. In this case, the #leftcontent is doing just that, but the #rightcontent is overflowing the canvas - i.e. is > 100% thats why the div's are not the same height.

    For a quick fix set the body background-color = #leftcontent background-color and assign the border-left of the rightcontent instead of the leftcontent.

    Hope this makes sense, if not give a holler'

  11. #11
    SitePoint Member
    Join Date
    Apr 2002
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok you want me to assign the body backround-color to be black and give the borders to the #rightcontent?
    or white and give the borders to the #rightcontent?
    Lol Im confused
    Last edited by Phire; Apr 17, 2002 at 13:48.

  12. #12
    blonde.... Sarah's Avatar
    Join Date
    Jul 2001
    Location
    Berkshire, UK
    Posts
    7,442
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    seems to me he means:
    Code:
    body { 
    background-color:black;
    margin:0px 0px 0px 0px; 
    scrollbar-base-color: #FFFFFF; 
    scrollbar-face-color: #008080; 
    scrollbar-track-color: #FFFFFF; 
    scrollbar-arrow-color: #FFFFFF; 
    scrollbar-highlight-color: #FFFFFF; 
    scrollbar-3dlight-color: #000000; 
    scrollbar-shadow-color: #FFFFFF; 
    scrollbar-darkshadow-color: #000000; 
    
    } 
    
    
    #leftcontent { 
    float:left; 
    width:12%; 
    height:100%; 
    background:#000; 
    border-right:2px solid #000; 
    border-bottom:2px solid #000; 
    cursor:auto 
    } 
    
    #rightcontent { 
    height:100%; 
    background:#00FFFF; 
    border-left:2px solid #000; 
    }
    I think still not convinced re rightmargin is over 100% but then I like to be proven wrong

    Good luck

    Sarah
    Regular user

  13. #13
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Set the background-color for the body the same as background-color for #leftcontent. Set the border-left of #rightcontent instead of the border-right of #leftcontent.

    sabbe?

  14. #14
    SitePoint Member
    Join Date
    Apr 2002
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yep had figured it about 30 seconds after I posted that!
    Thanks!
    Ps--having some fun with these borders now!
    dotted is one cool feature!

  15. #15
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sweet! Glad that worked for you.

    ps - have fun

  16. #16
    SitePoint Member
    Join Date
    Apr 2002
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    weird...now the scrollbar colors are not showing up...
    http://www.elite-hardware.com/test/template.htm

  17. #17
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The scrollbars look OK from here (IE5.5).

    The page looks a little funky is NN6. The #leftcontent box isn't wide enough to accomodate the <img width="135">. Setting the #rightcontent margin-left to 135px will fix it.

    HTH

  18. #18
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Phire
    weird...now the scrollbar colors are not showing up...
    It's because you forced IE6 into standards-compliant mode by using an XHTML DOCTYPE. Take away the DOCTYPE, lose exact rendering, and voilą, colored scrollbars ahoy!

  19. #19
    SitePoint Member
    Join Date
    Apr 2002
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so which doctype should I use. I had this dilemma before, when I was validating it. So I just picked one.
    If you dont specify a doc type the rollovers dont work either, er atleast they dont work that well as far as trhe fading in/out goes...

    http://bayside.hs.brevard.k12.fl.us/template.htm
    Last edited by Phire; Apr 18, 2002 at 07:56.

  20. #20
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would keep the one you have, the XHTML DOCTYPE, even though it means colored scrollbars not displaying in IE6.

  21. #21
    SitePoint Member
    Join Date
    Apr 2002
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well setting the background color was exactly what isotope had said...a quick fix....now when I take out some of the #rightcontent content, the background color starts appearing. any way to fix this?
    If I set the #rightcontent width: to anything, the leftcontent effectively takes over the top of the page.
    If I set the background-color to white or take it out at all, I go back to square one. Help?

  22. #22
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Derek,

    Sounds like you need to set the height of the #rightcontent to 100%. Are you trying for a fixed or floating width on the right? The following should work for a fixed width left & floating width right, no need to set the width on the right.

    Code:
    <html>
    
    <head>
    
    <style>
    
    body
    	{
    	background-color:#000;
    	margin:0;
    	}
    
    #leftcontent
    	{
    	color:#fff;
    	float:left;
    	}
    
    #rightcontent
    	{
    	background-color:#fff;
    	height:100%;
    	margin-left:135px;
    	margin-right:0px;
    	}
    
    </style>
    
    </head>
    
    <body>
    
    <div id="leftcontent">Links
    	<br />links
    	<br />links
    	<br />links
    	<br />links
    	<br />links
    	<br />links
    	<br />links
    </div>
    <div id="rightcontent"></div>
    
    
    </body>
    
    </html>
    If thats not what your after, give another shout out.

    HTH

  23. #23
    SitePoint Member
    Join Date
    Apr 2002
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sweet. I think a floating width on the right would be best, mainly because the left width doesnt need to change...I really appreciate the help. I guess if I had started over on the <div> id's in the css file, I prolly would have figured it out

    Thanks again

    Derek

  24. #24
    SitePoint Member
    Join Date
    Apr 2002
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


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
  •