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/ *
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 ) 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 and the ) - 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?
Peter,
The image is set to "float: left" which means it is taken out of normal
flow. Containers (in this case the ) 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 and the ) - 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 , 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 and float it right,
leaving the image in normal flow - this will mean the image determines the
height of the . Dangerous option as height of text may break layout if
it is deeper than image.
3. You could set a height for the and then apply each thumbnail image
as a background image to individual 's - you can do this with an
individual class for each thumbnail. You would need to apply your
element around the only in this case. You could then set padding on the
and 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
and ). 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?
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?
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?
Hey Peter I think we are missing something here. What is the style on class="logo". Is it float: left? 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/ *
[WSG] how would I do this?
Title: how would I do this?
I'm working at getting my site all correct (though are we OK with
transitional coding here - ie use of very simple tables - or is that a
no-no?), but I have a question about the right way to approach a part
of it.
Have a look at
http://universalhead.com/clients/tempimage.jpg
I'm trying to create the CSS to allow me to set this up as a list
of items. This is my attempt:
#logolist
ul {
padding:
0;
margin: 0;
}
#logolist li
{
list-style-type:
none;
background-color:
#fff;
border:
1px #b0bcc0 solid;
margin-top:
10px;
clear: left;
}
#logolist h2
{
font-size: 11px;
padding:
5px 10px 5px 85px;
}
#logolist p
{
font-size:
10px;
line-height:
16px;
padding: 0 10px 0 85px;
}
with the code:
JBL ProfessionalBrief
summary of products here.
JBL ProfessionalBrief
summary of products here.
And the result is at
http://universalhead.com/clients/tempimage2.jpg
You can see my problem is that the height of the box is dependent
on the text, rather than the logo image.
I'm stumped. Hope this question is OK to ask, and excuse my
newbieness, I'm learning a lot in a short time for a non-programmer
designer like myself!
Cheers
--
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
