RE: [WSG] how would I do this?
Title: RE: [WSG] how would I do this?
Whoops sorry about that. There's also a:
mg.logo {
float: left;
border-right: 1px #b0bcc0
solid;
}
You guys are quick ...!
Peter
Hey Peter
I think we are missing something
here. What is the style on
class=logo. Is it float:
left?
Cheers
Mark
--
peter gifford
universal head
design that works
visit 7/43 bridge road
stanmore nsw
2048
australia
call (+612) 9517 1466
fax (+612) 9565 4747
email [EMAIL PROTECTED]
site
www.universalhead.com
RE: [WSG] how would I do this?
Ok. Assuming you are *sure* that you text will never be taller than you image (which is always a bit risky) why not put you h2 p into a div and float that right. Remove the float left from your image and that might fix your problem. By floating your image you are removing it from the page flow (see Russ's floatutorial for more on this http://css.maxdesign.com.au/floatutorial/index.htm) and as such it no longer affects the height of its containing block. By doing what I suggested above you flip it around - no matter how much text you have the box will stay fixed to the height of the image. That's the theory anyway - will be interested to see if it works... Cheers Mark -- Mark Stanton Technical Director Gruden Pty Ltd Tel: 9956 6388 Mob: 0410 458 201 Fax: 9956 8433 http://www.gruden.com * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] how would I do this?
Peter,
The image is set to float: left which means it is taken out of normal
flow. Containers (in this case the li) cannot determine the height of a
floated item, so they will close themselves immediately below any elements
that are in normal flow (in this case below the h2 and the p) - leaving
your image poking out the bottom of the container. If the content were
deeper, this may not show, but it will always be the case with floated
items. It is completely normal browser behaviour. Does that make sense?
You have a number of choices (none of them great) including:
1. The simplest option is to set a height for the li, which will help for
short text, but not if you have text that runs deeper than the thumbnail.
2. As Mark says, you could wrap the content in a div and float it right,
leaving the image in normal flow - this will mean the image determines the
height of the li. Dangerous option as height of text may break layout if
it is deeper than image.
3. You could set a height for the li and then apply each thumbnail image
as a background image to individual li's - you can do this with an
individual class for each thumbnail. You would need to apply your a
element around the h2 only in this case. You could then set padding on the
h2 and p so that they do not sit over the top of the background image
Again, problems if you have content that runs deeper than the thumbnail. It
could be argued that the images are decorative, and if this option is used,
they will then be removed from the document altogether. If you remove all
CSS you will be left with a clean list (each list item will simply have an
h2 and p). Some would say this is the most semantically correct option -
weird maybe, but semantically correct.
HTH
Russ
Whoops sorry about that. There's also a:
mg.logo {
float: left;
border-right: 1px #b0bcc0 solid;
}
You guys are quick ...!
Peter
*
The discussion list for http://webstandardsgroup.org/
*
Re: [WSG] how would I do this?
The float and container information was poorly explained. Here is a real example with an explanation: http://www.maxdesign.com.au/jobs/floatsample.htm Russ The image is set to float: left which means it is taken out of normal flow. Containers (in this case the li) cannot determine the height of a floated item, so they will close themselves immediately below any elements that are in normal flow (in this case below the h2 and the p) - leaving your image poking out the bottom of the container. If the content were deeper, this may not show, but it will always be the case with floated items. It is completely normal browser behaviour. Does that make sense? * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] how would I do this?
Thankyou for the excellent advice Russ and Mark, much appreciated! I went for setting the height in this case, but the other options were very educational. I'll be sure to post the completed site for your comments (when it's valid that is!). cheers Peter -- peter gifford universal head design that works visit 7/43 bridge road stanmore nsw 2048 australia call(+612) 9517 1466 fax (+612) 9565 4747 email [EMAIL PROTECTED] sitewww.universalhead.com * The discussion list for http://webstandardsgroup.org/ *
