Setting right border of panel with CSS-P

  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Posts: 379
  • Loc: here

Post 3+ Months Ago

I'm messing around with CSS-P trying to get a sense for what does what, and how to use CSS instead of tables. I'm working on a new site and would like to use the new site as a learning experience for using CSS.

My design goal is to have a teal colored column 150px wide running down the left side of the page. I want to use this column for navigation purposes. When I type text in the <div> with the appropriate style called, the text causes the column to expand beyond 150px instead of wrapping around at the 150px point. How do I set the right side of the column to not move at all? here's the class as i have it written:

Code: [ Select ]
.nav_panel  
        {position:absolute;
        background-color:#006666;
        width:150px;
        height:100%;
        left:0px;
        top:0px;
        }
  1. .nav_panel  
  2.         {position:absolute;
  3.         background-color:#006666;
  4.         width:150px;
  5.         height:100%;
  6.         left:0px;
  7.         top:0px;
  8.         }


Thanks for any help you can send my way. I've been reading all over the place on this, and I can't find anything about making the overall width of the column absolute.

mark
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

Do you have an example page?
  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Posts: 379
  • Loc: here

Post 3+ Months Ago

here's what i have thus far

http://www.nriyounglife.org/csstest.htm

the other thing i want to do is get the background to begin at the right edge of the teal column, rather than begin behind the column at the left side of the browser window. that's a task for a different day though =)

mark
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

the way your doing this is correct CSS2. It works fine for me, although I use the shorthand notations when possible like this...

Code: [ Select ]
#selector{position:absolute;left:0px;top:0px;background:#066;width:150px;height:100%;}


you might want to relieve the edge a bit with some padding as well

Code: [ Select ]
padding:10px 10px 10px 10px;


in this notation the first dimension is top, then it goes clockwise...right, bottom and left.

for the background, you can set your BODY selector thusly:

Code: [ Select ]
BODY{background:#FFF url(yourBkgndImg.gif) repeat-y 150px;}


this would cause your bkgnd image to be offset 150px and only tile in the y direction.

HTH!
  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Posts: 379
  • Loc: here

Post 3+ Months Ago

digitalMedia wrote:
the way your doing this is correct CSS2. It works fine for me, although I use the shorthand notations when possible like this...



actually, it does help. thank you. I guess the answer is there is no way to set the right border of the column absolutely then? The teal column created with the <div style=> statement will expand to fit whatever i put in there. if i put a 200 px wide image in the column, the column will expand to hold the image, even though the column width is set to 150px. is this correct?

Mark
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

It really shouldn't. When you set a width with an absolute dimension (e.g. 150px) it shouldn't react like a table cell, it should be fixed. If the text doesn't wrap (and it does for me), if anything it would flow outside of the div box.

The problem I'm having is replicating what you're getting.

This is a complete shot in the dark, but are you using an obscure browser? I tested this in IE6, Moz1.3a, and Opera 7 - each were identical. Here's a screen shot of Moz...

Image

and here's the code...

Code: [ Select ]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
BODY{background:#FFF url(dm.jpg) repeat-y 150px;}
#selector{position:absolute;left:0px;top:0px;background:#066;width:150px;height:100%;}
</style>
</head>

<body>
<div id="selector">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</div>
</body>
</html>
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>Untitled Document</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <style>
  7. BODY{background:#FFF url(dm.jpg) repeat-y 150px;}
  8. #selector{position:absolute;left:0px;top:0px;background:#066;width:150px;height:100%;}
  9. </style>
  10. </head>
  11. <body>
  12. <div id="selector">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</div>
  13. </body>
  14. </html>
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

I should also mention, on the padding, that there is a really odd, ugly, unforgivable weirdness in Moz where it doesn't add padding to the inside of the width, but adds the padding to the overall width (nasty). So the workaround is to nest a div, relatively positioned with a fixed with to create your padding. The code might look something like this....


Code: [ Select ]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
BODY{background:#FFF url(dm.jpg) repeat-y 150px;}
#selector{position:absolute;left:0px;top:0px;background:#066;width:150px;height:100%;}
.nested{position:relative;left:10px;top:10px;width:130px;}
</style>
</head>

<body>

<div id="selector">
    <div class="nested">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</div></div>

</body>
</html>
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>Untitled Document</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <style>
  7. BODY{background:#FFF url(dm.jpg) repeat-y 150px;}
  8. #selector{position:absolute;left:0px;top:0px;background:#066;width:150px;height:100%;}
  9. .nested{position:relative;left:10px;top:10px;width:130px;}
  10. </style>
  11. </head>
  12. <body>
  13. <div id="selector">
  14.     <div class="nested">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</div></div>
  15. </body>
  16. </html>


They may have fixed this problem. I should really update my Mozilla, but I like to keep my version slightly behind the current for testing purposes.
  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Posts: 379
  • Loc: here

Post 3+ Months Ago

It's still behaving the same odd way. I posted a version of the page with an example of what it's doing at http://www.nriyounglife.org/csstest.htm .

Would it matter that I'm using an external style sheet rather than an embeded style sheet?

Mark
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

no on the external style sheet. doesn't make a difference as far as I know.

I see what's happening in your page though. You're using a continuous string, so there's nowhere for the wrap to happen. In my example I was using Lorem Ipsum. The browser going to need the spaces in between the words to figure out where to wrap.

:)

sorry, i breezed right by your link. my bad.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

btw: in your HTML, you've got a /DIV as the first element after the BODY tag.

and...

in your style sheet, in the def for the BODY selector, you have a "background-border" which i've never heard of. Is this proprietary to a certain browser? I looked through the W3C spec and didn't see it. Maybe it was a typo, but I see you're using front page...yadda yadda yadda...do you know?
  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Posts: 379
  • Loc: here

Post 3+ Months Ago

digitalMedia wrote:
no on the external style sheet. doesn't make a difference as far as I know.

I see what's happening in your page though. You're using a continuous string, so there's nowhere for the wrap to happen. In my example I was using Lorem Ipsum. The browser going to need the spaces in between the words to figure out where to wrap.



ohhhhhhh, ok. i didn't realize the browser behaved like that. i guess i was thinking it would wrap around automatically once the text hit the border. once i put some spaces in there, it did wrap properly.

always something new to learn about how this stuff works out in the wild!!

the background-border, i have no idea about. front page has been inserting some odd characters in the sheet when i save, so it may have thrown it in automatically and i just never noticed. but it's also entirely possible i was spaced out when i was typing. CSI was on while i was working on the sheet :lol:

mark
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

lol
  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Posts: 379
  • Loc: here

Post 3+ Months Ago

digitalMedia wrote:
btw: in your HTML, you've got a /DIV as the first element after the BODY tag.



what's wrong with having a <div> as the first element in your body? i had been reading at http://www.mako4css.com/BasDiv.htm to try and become more familiar with using CSS, and that seemed like the way to insert the classes into the html document.

mark
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

allgoodpeople wrote:
It's still behaving the same odd way. I posted a version of the page with an example of what it's doing at http://www.nriyounglife.org/csstest.htm .

Would it matter that I'm using an external style sheet rather than an embeded style sheet?

Mark



Mark,

Other than the difference you two have in the style sheet, the instructions are the same. So the question is why dM's works and your's doesn't.

I would suggest looking at your Doctype declaration vs. dM's -- you'll note he has one and you don't. I bet that would solve your problem. I've talked about doctype and how it affects the display of a page in recent posts.
  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Posts: 379
  • Loc: here

Post 3+ Months Ago

ATNO/TW wrote:
allgoodpeople wrote:
It's still behaving the same odd way. I posted a version of the page with an example of what it's doing at http://www.nriyounglife.org/csstest.htm .

Would it matter that I'm using an external style sheet rather than an embeded style sheet?

Mark



Mark,

Other than the difference you two have in the style sheet, the instructions are the same. So the question is why dM's works and your's doesn't.

I would suggest looking at your Doctype declaration vs. dM's -- you'll note he has one and you don't. I bet that would solve your problem. I've talked about doctype and how it affects the display of a page in recent posts.


yeah, that thought had occured to me too. for now i'm just messing around with the page, but i might give that a try and see what happens.

mark
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

allgoodpeople wrote:
digitalMedia wrote:
btw: in your HTML, you've got a /DIV as the first element after the BODY tag.



what's wrong with having a <div> as the first element in your body? i had been reading at http://www.mako4css.com/BasDiv.htm to try and become more familiar with using CSS, and that seemed like the way to insert the classes into the html document.

mark



You had the CLOSING div as the first element. Not an OPENING div.
:)

That's what I was pointing out.
  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Posts: 379
  • Loc: here

Post 3+ Months Ago

digitalMedia wrote:


You had the CLOSING div as the first element. Not an OPENING div.
:)

That's what I was pointing out.


oh....yeah :oops: i can see where that would be a problem :lol:

i think i have it the way i would like it though. thanks for all your input digital media, it was a big help!

mark
  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Posts: 379
  • Loc: here

Post 3+ Months Ago

ok, so here's a new behavior that i find confusing:

for reference, here's the class:
Code: [ Select ]
.nav_panel {
    background: Teal;
    border: 1px solid Black;
    height: 100%;
    left: 0px;
    padding: 10px 10px 10px 10px;
    position: absolute;
    top: 0px;
    font-size: xx-small;
    width: 165px;
}
  1. .nav_panel {
  2.     background: Teal;
  3.     border: 1px solid Black;
  4.     height: 100%;
  5.     left: 0px;
  6.     padding: 10px 10px 10px 10px;
  7.     position: absolute;
  8.     top: 0px;
  9.     font-size: xx-small;
  10.     width: 165px;
  11. }




the left hand column is draw correctly when the page loads, flush against the top and left, 100% of page height.

however, when the page scrolls down, the column does not continue flush against the bottom of the page. it maintains the original height that it drew when the page loaded. you can see the effect at http://www.nriyounglife.org . any ideas on how to get the left panel to continue to draw itself, even as the page is scrolled? I could simply specify an absolute pixel height which fit the entire page, but this would have to be adjusted any time the page was modified in total height. I would think there is a way to get the column to adjust automatically.

I've tried background: repeat-y, i've tried setting the bottom margin to 0px. not sure what else there is.

mark

Post Information

  • Total Posts in this topic: 18 posts
  • Users browsing this forum: No registered users and 54 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.