[css-d] 4 part question about lining up 'boxes' of information
Forgive my ignorance but i am still completely new to css and yet to complete a whole site using it. I have 4 questions in my search for understanding. 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? 2. How can i get the boxes to center in the maincontent div? 3. What do i need to do to get the boxes to flow inside the main content div? 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? Thanks Lisa __ css-discuss [cs...@lists.css-discuss.org] 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/
Re: [css-d] 4 part question about lining up 'boxes' of information
Lisa Frost wrote: 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? Lisa, some general resources that might be helpful (they helped me): CSS Tutorial http://www.w3schools.com/css/default.asp CSS Reference by Categories of Properties http://www.w3schools.com/css/css_reference.asp CSS Reference - Alphabetical http://www.w3schools.com/css/css_reference_atoz.asp The Box Model http://www.w3schools.com/CSS/css_boxmodel.asp Bill B __ css-discuss [cs...@lists.css-discuss.org] 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/
Re: [css-d] 4 part question about lining up 'boxes' of information
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 [cs...@lists.css-discuss.org]
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/
Re: [css-d] 4 part question about lining up 'boxes' of information
Lisa Frost wrote: The page in question is here: http://www.diabetesflight50.org/test/xhtml/supporters.html I don't want to be emailing you all for every little thing that stumps me. Why not? That's what CSS-D is for. :-) Floats are not well suited for that kind of line-up. Resize text and even what you have will start looking weird - before becoming unreadable as content overflows the fixed-size boxes. Your case is a perfect job for *CSS Table* ... http://www.w3.org/TR/CSS21/tables.html Example: http://www.gunlaug.no/tos/moa_11g.html ...but IE7 and older won't play ball. They don't support CSS Table and need a lot of proprietary crap in order to render a look-alike... http://www.gunlaug.no/contents/wd_additions_22.html You have other variants, with varying degree of loop-jumping for cross-browser compatibility, on Bruno's site... http://www.brunildo.org/test/ ...look under Centering, Shrink wrapping, Images. Unless you got lots of time to check and fix up things across browser-land, I'll suggest you use a good old HTML Table for line-up of supporters on that page... http://www.w3.org/TR/html401/struct/tables.html Your content will be presented perfectly well in a linearized table, it works in all browsers, and I personally wouldn't bother with anything but an HTML Table for that sort of content in _that_ context. Read up on how to style a table to appear as you want. regards Georg __ css-discuss [cs...@lists.css-discuss.org] 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/
