Sent by Kelly Miller on 27 May 2005 18:06
Theodore Serbinski wrote:
>Hi Kelly,
>
>The entire website is going to be fixed width at 768px ... I know
>pros/cons to this but it seems to the most reliable method to date and
>all of the top CSS designers switched back to fixed design. But thanks
>for the tip for using it as liquid.
>
>As for the graphic of the cables, I think I'm in agreement (although
>slightly confused as to what you mean).
>
>What I am thinking... I make the blue and black bars their own divs,
>with a content div below that.
>
>I then slice up that cable image into 3 rows and put those
>respectively in the black, blue, content divs as the background-image
>(since the background image will be ABOVE the background color of
>blue, black, white).
>
>Seems simple enough, although I'm wondering if there is a more elegant approach.
>
>Make sense?
>
>ted
>
>
>
Yes. Actually, there is a more elegant solution. I used to slice my
background images up, but it's easier and technically better to simply
use an absolutely positioned div with the image in the background
instead. Here, I'll give an example:
<div id="wrap">
<div>This is the first line of text.</div>
<div>This is the second line of text.</div>
<div>Content...</div>
</div>
That's about the structure, right? I would make this adjustment:
<div id="wrap">
<div id="cables"></div>
<div>This is the first line of text.</div>
<div>This is the second line of text.</div>
<div>Content...</div>
</div>
Then try this:
div#wrap {position: relative; (rest of styles...)}
div#cables {position: absolute; top: 0; right: 0; background-image:
url(cable background image); width: (width of image); height: (height of
image)}
Then you just have to give the other three <div>'s margins equal to that
image's width (don't make them shorter than that image, though; if you
want the text to stop before the cable image, use padding). That frees
up the backgrounds of the <div>'s for whatever else you want, and the
plus is that you don't have to slice the image up at all. As long as
you get enough of the graphic that the entire fade is part of the
graphic, then it'll line up. Even better than this, use an <h2> for the
"first line of text" (since it's a secondary header), and use an
unordered list (<ul>) for the links below that. Then you don't have to
use <div>'s at all (<div is technically only supposed to be for
situations where no other element makes sense. Here, an <h2> and a <ul>
make more semantic sense, though you have to float the <li>'s to make it
horizontal).
Oh, and about that one pixel line between the first and second <div>.
If your background is white (and it looks like it is), you can enforce
that with 1 pixel of margin on either the top of the second <div> or the
bottom of the first <div> instead of using a border ;)
--
http://www.mozilla.org/products/firefox/ - Get Firefox!
http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox!
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
