18 replies [Last post]
Mike James
Offline
Regular
Houston
Last seen: 14 years 17 weeks ago
Houston
Timezone: GMT-5
Joined: 2005-06-22
Posts: 35
Points: 0

Greetings... I'm attempting a little CSS-learning project: renovating http://www.rainingjane.com/band.html (presently a most tangled table layout) to use completely standards-compliant code.

My first thoughts are these:

    1. Everything will go in a centering DIV.
    2. Withing the centered DIV, I'll have a header DIV and two DIV 'columns' - one for nav, one for content.
    3. Nav icons can be elements of a vertically oriented list.
    4. Within the content div, the sub-nav links will be in a right-floated DIV, which is then cleared by some sort of spacer.
    5. At the bottom of the content div, the umbrella link will be floated to the right.
Looking more at that content DIV (aka the purple box), however, I'm at a bit of a loss as to how I can accomidate the background elements at the top and bottom AND give that rounded box the ability to strech if the content ever gets longer.

It's currently layed out as a single background image to a table cell - that doesn't give it any expandability.

I could chop up the content DIV into top-middle-bottom DIVs (rounded corners in top and bottom, content in middle) but then I either have to shrink the actual content space or accept the background not extenting to the top and bottom edges of the box.

I could chop up the box into left-middle-right DIVs, or even into a 3x3 grid of DIVs, but the same sorts of restrictions apply.

I thought about trying some sort of vertical 'sliding doors' type thing, but the background elements still can't extent to the top.

Does any of this make any sense? Any suggestions would be very appreciated.

[/]
Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

tricky (multiple) background issue

I am not sure why you say the background can't extend to the top. Background should cover the full content + padding area of an element. So if it doesn't extend as high as you would like that implies the element has some margin-top or there are (escaping) collapsing margins or some padding on the parent element.

You should be able to achieve a custom border background look with just four elements. If your content container will have a standard set of elements or you have control over the classes you can assign the first two and the last two elements the appropriate classes.

e.g.

<div class='box'>
  <h2 class='box_top'> ... </h2>
  <div id='box_content'>
  ...
    <p class='box_footer'> <!-- the last block element in .box_content --> </p>
  </div>
</div>

there are several varieties of image sets that will work with this layout, including:
.box - has an oversize image of top/left corner and top & left edges.
.box_top - has an oversize image of top/right corner and right edge and a small amount of top edge.
.box_content - has an oversize image of bottom/right corner, bottom edge and right edge
.box_footer - has a small image of bottom/left corner

giving

BBBBBBBBBBBBBBBHHHHHHHHHHHHHHHH 
B              h              H
B              hhhhhhhhhhhhhhhH
B                             C
B   cc   c    c               C
B  c  c  cc   c               C
F  c  c  c c  c               C
FFFCCCCCCCCCCCCCCCCCCCCCCCCCCCC

which should be able to give you something similar to what you have now, but expandable.

Mike James
Offline
Regular
Houston
Last seen: 14 years 17 weeks ago
Houston
Timezone: GMT-5
Joined: 2005-06-22
Posts: 35
Points: 0

tricky (multiple) background issue

What do you mean by "oversized image"?

jimmygoon
Offline
Regular
Last seen: 14 years 42 weeks ago
Joined: 2005-08-04
Posts: 45
Points: 0

tricky (multiple) background issue

break it up and use the top / bottom borders etc

and then just use a purple bg color for the content.

or am I missing something

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

tricky (multiple) background issue

Mike James wrote:
What do you mean by "oversized image"?

Make the image larger than is necessary in the indicated direction.

Say, make the main container image 1600 x 1200. Extend the top and left border as far as the image goes, don't end them in corners. Anything outside the size of the container div is not shown. The top right corner comes from the header element, because its nested inside the container, it will lay ontop. Make its portion of the right hand edge a little too long. Then if someone increase the font-size there is still border available to show and no gaps will appear.

The content element will work in the opposite way to the main container image. Use background position to align it to the bottom right corner. It can't overwrite the top/right corner because the element doesn't extend that far. And the bottom left corner on the last element inside it will cover sit on top of the straight parts of the left and bottom edges.

The tricky bits are your background graphics. If they are placed on teh container image and use the organisation I describe they will be locked to the bottom right corner.

If you would prefer them locked to the bottom left corner you need to re-organise things a little.
- outer container: top/right corner, top edge, right edge
- header: top/left corner, part of left edge
- content div: bottom/left corner, left edge, bottom edge
- last element in content div: bottom/right corner

Mike James
Offline
Regular
Houston
Last seen: 14 years 17 weeks ago
Houston
Timezone: GMT-5
Joined: 2005-06-22
Posts: 35
Points: 0

tricky (multiple) background issue

Thanks for your help Chris. I've started laying everything out with CSS, and for now I'm just using one DIV (the background image makes the top, and I've temporarily thrown in another IMG to make the bottom).

http://xonelabs.com/temp/rj/

My next question is why the UL I'm using for the navigation icons (marked in green for easy reference) is so much wider than the images contained in it). Shouldn't a floated element keep to the smallest dimension it can?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

tricky (multiple) background issue

Set the margin & padding of your ul to 0.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Mike James
Offline
Regular
Houston
Last seen: 14 years 17 weeks ago
Houston
Timezone: GMT-5
Joined: 2005-06-22
Posts: 35
Points: 0

tricky (multiple) background issue

They are...

#navigation { background: #0f0; float: left ; padding: 0 ; margin: 0 10px 0 0 ; list-style: none ; }	
#navigation ul li { background: #f00; display: block ; padding: 0; margin: 0 ; }
#navigation ul li a img { border: 0px; }
#navigation ul li a:hover img { background: url('../img/nav/main/hover.png') no-repeat center; }
#navigation ul li a#active img { background: url('../img/nav/main/on.png') no-repeat center; }

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

tricky (multiple) background issue

No it's not. Not #navigation, and not #navigation ul li; #navigation ul.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

jrtalon
Offline
newbie
Last seen: 16 years 8 weeks ago
Joined: 2005-10-05
Posts: 8
Points: 0

tricky (multiple) background issue

oops wrong thread sorry

Mike James
Offline
Regular
Houston
Last seen: 14 years 17 weeks ago
Houston
Timezone: GMT-5
Joined: 2005-06-22
Posts: 35
Points: 0

tricky (multiple) background issue

Thanks, Tyssen... sorry for the oversight on my part. Your suggestion fixed it, but I'm curious: why would a list have default padding like that?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

tricky (multiple) background issue

All elements have a default margin and padding which is determined by the browser and its font size setting.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

tricky (multiple) background issue

In addtion to what Tyssen has said.

UL and OL elements are supposed to have some left indent. Different browsers will achieve that in different ways, but if you want your own left indent or no indent at all you must override the browser default style.

Similarly, headers, paragraphs, li, pre, etc, all have default top & bottom margins in their browser styles. Thats how you get a blank line between elements with no styling applied.

Mike James
Offline
Regular
Houston
Last seen: 14 years 17 weeks ago
Houston
Timezone: GMT-5
Joined: 2005-06-22
Posts: 35
Points: 0

tricky (multiple) background issue

Thanks, Chris.

The latest and greatest aggrivation is now the sliver of pink (part of the containing DIV) showing beneath the bottom border... What did I do wrong?

(I applied a height to the DIV to make sure it was exactly the height of the picture, AND I eliminated padding and margin. Aaaahhhrg!)

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

tricky (multiple) background issue

Which browser do you get this problem in? I've had a look in FF & IE and didn't see it.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Mike James
Offline
Regular
Houston
Last seen: 14 years 17 weeks ago
Houston
Timezone: GMT-5
Joined: 2005-06-22
Posts: 35
Points: 0

tricky (multiple) background issue

IE doesn't show it, but FF does (for me anyway)...

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

tricky (multiple) background issue

My best guess is its a pixel rounding problem related to vertical margins. Try changing the font-size, its goes away at some sizes. Also try the following styles - its goes away completely.

.content-box {margin: 0;}
.content-box p {margin: 1em 0; border: 1px dashed yellow;}
.content-box * * {margin: 0; border: none;}

You shouldn't need that &nbsp; in #content-box-bottom. If a div has height it will show up.

There is probably a clue in that has to how to reorganise things so it won't be a problem. I'll leave that for you to find out Smile.

Mike James
Offline
Regular
Houston
Last seen: 14 years 17 weeks ago
Houston
Timezone: GMT-5
Joined: 2005-06-22
Posts: 35
Points: 0

tricky (multiple) background issue

Do you mean to use that exact code? I thought the asterik was an IE-specific DOM thing (which would then not work in FF)...? What does ** do that eliminates the line?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

tricky (multiple) background issue

* is the universal selector - it'll match anything.

.content-box * * means any descendent of .content-box except its direct children.

* html is a hack that only works in IE. Other browsers recognise html as the root element - so it can not be a descendent.

No, I don't recomend you use those styles in your finished site. But those styles do kill the problem. So that means a more targetted style rule at the correct element will also kill it. I am not entirely sure why - and don't have time to investigate further - but that pixel appears to be some element's margin-bottom.