Re: [css-d] Fluid 3 column layout with images

[David Laakso]

Christine Reed wrote:
> I have just built my first successful 3-column layout - 'proper' contents 
> still need adding.
> It works well at 1024 res and above but when the viewport gets reduced (eg at 
> 800 res) or if  Favourites is open on the side, the whole thing degrades 
> badly - ie page elements move out of place starting with the image placed in 
> the middle column.
> I suspect it is because the text can resize because I have used  
> {margin:auto;} as well as percentages for the body and the <div>s but the 
> image has a fixed width and shifts instead of resizing...
> Is there a way I can get the image to behave like the rest and resize?
>
> Many thanks to anyone willing to help me!
>
> To test what I mean:
> http://www.clairerich.co.uk
> ______________________________________________________________________
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
>
>   
I only looked at this page 
<http://www.clairerich.co.uk/introductionwhite.html>
Part of the problem, Claire, is the software can't find the doctype, 
because <dl></dl> is preceding it. Delete those.
Changing this selector to read:
#content img{ padding:10px 0;
text-align:center;
/*margin-left:130px; delete this*/
display: block;<<<<< add this
margin: 0 auto;<<<<< add this
}
should center the image in its container.
Add an empty comment here, like so (I do not know why, but it helps-- 
makes it not empty, I guess?):
<div class="cleardiv"><!-- --></div>  
You have 3 images specified in the markup. /Each/ of them needs an alt 
(whatever it's called) thing, like:
<img src="http://www.clairerich.co.uk/Pictures3/arrow1w27x20.gif"; alt=""> 
Then valididate the markup here: <http://validator.w3.org/> .
Then validate the CSS (correct errors-- ignore warnings for the time 
being) here:
<http://jigsaw.w3.org/css-validator/>
Not tested.
HTH.
Regards,
~dl

-- 

http://chelseacreekstudio.com/ca/ccs/pow/pow.html

______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/