Previous Message
Next Message

Many requirements

Sent by Bob Easton on 29 September 2005 10:10


[EMAIL-REMOVED] wrote:
> Is it possible to set this page up so that they two gray boxes (Iron Giant is Good, I Like Ray
Liotta) stretch with the width of the browser window while keeping the same amount of space
inbetween the two boxes *and* so that the two gray lines below "How?s The Weather in Brazil?" and
"Aquaman is Not a Good Superhero" stretch as well with their right edges and the right edge of the
text beginning with "More than 75% . . . " always at the same point of the far right edge of the Ray
Liotta box? Some of this is presenting tabular data so tables are necessary at some point but is
there a way to use less tables than I have now while keeping everything faithful to the mockup? I am
going to try to work out solutions to all this but suggestions are appreciated. Thanks
>  
> http://www.christianziebarth.com/rent/mockup.html
>  
> based on:
>  
> http://www.christianziebarth.com/rent/mockup.gif

The strategy for doing this in a way that minimizes tables for layout is 
the following:

1) Learn about multi-column layouts from the 2-col and 3-col pages in 
our WIKI. (The WIKI link is at the bottom of ecery positing.) The goal 
is to have a content container that has its width expressed as a 
percentage of the page width, so it will be flexible

2) Leave the top two boxes (Iron giant, and I like Ray) in tables.  You 
can learn later how to do them with less markup.  When you want to take 
that step consult our WIKI for a page about rounded corners.

3) Float those top two tables left within the content container. Give 
each of them a width of 50% so they sit side by side.  For safety in 
browsers which have rounding errors, make one of them width:49%.

4) Clear the float.  This is VERY IMPORTANT and is the solution to a 
great many of the questions listed here.  Again, consult the WIKI, read 
Eric's article on containg floats (a) and Big John's clearfix technique (b).

5) Code the orange lines as headings.  They are semantically headings, 
not just orange text.  Style them with a border-bottom, and indent their 
text with padding-left.

6) Code the text under the headings as paragraphs, again being 
sematically correct.  Style the paragraphs to have left and right 
padding to produce the indentation you want.

7) Try your hardest to never use SPAN again.  It's a very sloppy way of 
styling text. Using well structured IDs, classes, and chosing the right 
CSS selectors is much cleaner.  (Again, class and ID info in the WIKI.)

(a) http://www.complexspiral.com/publications/containing-floats/
(b) http://www.positioniseverything.net/easyclearing.html

-- 
Bob Easton
Accessibility Matters: http://access-matters.com

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread: