on my site, <!-- w --><a class="postlink" href="http://www.suburbanbeats.net">www.suburbanbeats.net</a><!-- w -->, i have some graphics that when the browser is resized, they move outside of the content area. how do i go about locking them inside?Put it in the background.What you've got is this:
#header {
background-image: url(/images/clipart/knobs.jpg);
background-repeat: no-repeat;
height: 113px;
width: 742px;
}
You need to avoid setting an explicit width, or else do width:auto. The default behaviour for a div is already to "fill all available width."
Props on going with a liquid layout. It's tricky but worth it!awsome, that worked. but what would be a more concise way of having the same effect on the entire site for all content?awsome, that worked. but what would be a more concise way of having the same effect on the entire site for all content?
No quite sure I understand your question...
Are you meaning "How can I make the content not run over the edges of my site at narrow widths?"
If so, there's a quirky trick involving overflow that you can use. Best thing is to see it in action on the comments section of my site. Drag this comment (<!-- m --><a class="postlink" href="http://uwmike.com/archive/tagging-beyond/#comment321">http://uwmike.com/archive/tagging-beyond/#comment321</a><!-- m -->) to a narrow width and notice how the URL he posted gets cropped off?
There's an outer wrapper on each comment declared "overflow: hidden". And then each comment is declared "float: left", since this causes them to shrink-wrap the widest content. But since I don't want them to actually float, I give them a declared width of 88% so that two can't fit beside each other. (any value over 50% would be adequate.)
.blogcomment {
overflow: hidden;
overflow-x: hidden; /* for IE */
width: 100%;
}
.blogcomment .commentbody {
width: 88%;
float: left;
}i'll have to try that when i'm not falling asleep ;-)
i'll let you know how it goes, if it fails, then... oh well, screw those people with 640x480 displays
#header {
background-image: url(/images/clipart/knobs.jpg);
background-repeat: no-repeat;
height: 113px;
width: 742px;
}
You need to avoid setting an explicit width, or else do width:auto. The default behaviour for a div is already to "fill all available width."
Props on going with a liquid layout. It's tricky but worth it!awsome, that worked. but what would be a more concise way of having the same effect on the entire site for all content?awsome, that worked. but what would be a more concise way of having the same effect on the entire site for all content?
No quite sure I understand your question...
Are you meaning "How can I make the content not run over the edges of my site at narrow widths?"
If so, there's a quirky trick involving overflow that you can use. Best thing is to see it in action on the comments section of my site. Drag this comment (<!-- m --><a class="postlink" href="http://uwmike.com/archive/tagging-beyond/#comment321">http://uwmike.com/archive/tagging-beyond/#comment321</a><!-- m -->) to a narrow width and notice how the URL he posted gets cropped off?
There's an outer wrapper on each comment declared "overflow: hidden". And then each comment is declared "float: left", since this causes them to shrink-wrap the widest content. But since I don't want them to actually float, I give them a declared width of 88% so that two can't fit beside each other. (any value over 50% would be adequate.)
.blogcomment {
overflow: hidden;
overflow-x: hidden; /* for IE */
width: 100%;
}
.blogcomment .commentbody {
width: 88%;
float: left;
}i'll have to try that when i'm not falling asleep ;-)
i'll let you know how it goes, if it fails, then... oh well, screw those people with 640x480 displays