On Jan 15, 2010, at 10:36 PM, Lisa Frost wrote:
> The page in question is here:
> http://www.diabetesflight50.org/test/xhtml/supporters.html
>
> css here: http://www.diabetesflight50.org/test/css/mainstyles.css
>
> The part i can't get my head round is my css for my supporters content which
> is at the bottom of the css file.
>
> 1. This was the only way i could figure to get the image with text and link
> in a box which would lie next to each other. Is this the correct way to do
> it with a float?
It is a good way to handle this. An alternative would be to use
'display:inline-block', but this has poor support in IE 6 and 7; that is
probably something to be concerned about.
> 2. How can i get the "boxes" to center in the maincontent div?
That is more tricky. Floated boxes, by definition, go to the left or right side
of the parent box (#maincontent in your case). What you could do is warp all
those .supporters divs in a div, and set a width on that div,
like this:
<div class="wrap-my-supporters">
<div class="supporters"></div>
<div class="supporters"></div>
...
</div>
div.wrap-my-supporters {width: 400px; margin: 0 auto;}
> 3. What do i need to do to get the "boxes" to flow inside the main content
> div?
google: containing floats.
By definition, floated boxes are taken out of the flow, and don't make the
parent box grow.
http://www.positioniseverything.net/easyclearing.html
has a nice solution, and explanation.
> 4. My biggest problem i am having with css, is that i know exactly how i
> want something to look, like in this case i just want a series of boxes
> lined up next and under each other and centered but then i have no idea how
> to do it and even less of an idea as to what to google for to point me in
> the right direction. I don't want to be emailing you all for every little
> thing that stumps me. Any tips on what to search for on the web for basic
> layout techniques such as this?
Reading up on CSS will help you a lot.
Reading the specification might sound daunting (it is not a tutorial) but very
informative.
http://www.w3.org/TR/CSS21/
Sitepoint’s collection of articles is probably one of the best references out
there
http://reference.sitepoint.com/css
Oh, and welcome around here. Don't be afraid to ask questions.
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
