Re: [css-d] Fluid 3 column layout with images
Christine Reed wrote: Very many thanks David - your suggestion did the trick beautifully. I will remember that! However, I don't understand what you mean when you wrote: Part of the problem, Claire, is the software can't find the doctype, because dl/dl is preceding it. Delete those. RE: http://www.clairerich.co.uk/introductionwhite.html Attempt to validate the page. The validation service(software) is unable to find the doctype because it is blocked by the dl thing. Browsers(software) have the same problem, I guess. I wonder if I could trouble you once again re the same page: http://www.clairerich.co.uk/introductionwhite.html The image stays put but I still have a problem with the border between column2 and column3 - that looks good at 1024 res, but as for the image, when you resize th viewport down (res 800 or favourites open), that border shifts right and goes over the text in the 3rd column. I am not good at fixing stuff. So most of the time I start with a clean sheet. This page uses your content in a /different/ layout: http://www.chelseacreekstudio.com/claire1.html There are some considerations: the header image may need to be trimmed so that you don't get the little h-scroll bar @ 800 in ie; the header will never be less wide than the width of the image; the content layout will only fold to the width of the the image in the center column; and, the image in the right col could be a little less wide. It will not work ala carte. It is not generally a good idea to set fonts in pixels. Users have to put ie in accessibility mode to scale them. Justified text works fine in print media(sometimes), but on the screen it causes rivers. Users, some of whom may be older(or a lot younger) than you, always appreciate designers who honor default for setting the primary content p. Christine Others on the list may have a better method of resolving some, if not all, of these issues. Regards, ~d -- 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/
Re: [css-d] Fluid 3 column layout with images
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 divs 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/
[css-d] Fluid 3 column layout with images
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 divs 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/
