Re: [css-d] 4 part question about lining up 'boxes' of information

2010-01-15 Thread G. Sørtun 
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* ...


Example: 
...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...



You have other variants, with varying degree of loop-jumping for 
cross-browser compatibility, on Bruno's site...

...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...

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/

Re: [css-d] 4 part question about lining up 'boxes' of information

2010-01-15 Thread Philippe Wittenbergh 

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.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

2010-01-15 Thread Bill Braun 

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/

[css-d] 4 part question about lining up 'boxes' of information

2010-01-15 Thread Lisa Frost 
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/