...

View Full Version : Layout Skeleton Needed To Solve Problem



labiere
03-19-2005, 12:50 AM
Hi there. I have been trying to figure out how to position CSS elements for a layout I want to create, but I can't seem to manage it.
This is what I am aiming for:

http://blogs.zeidelicious.com/temp/layout.gif

If possible, I want to only be using CSS1 for this and have a cross-browser solution.

It seems that if I fix the text area width, then I get lots of empty space around it when viewed at higher resolutions. However, when I try to avoid fixing a width for the text area, the text area jumps down to below the DIV image when the window gets too small. I want to keep that text area in the upper right, but not let it get smaller than say, 300px -- if the window gets too small, I just want the text to bleed off the right of the screen and require a scrollbar to see it.

Can someone show me an outline of how elements should be nested for this effect and the relevant position, width, and float properties I should use.

Thank you.

harbingerOTV
03-19-2005, 03:26 AM
I really shouldn't do this as doing it on your own will help more but,

try this (http://home.earthlink.net/~harbingerofthevoid/testing/labiere.html)

the paddings are set specific to the size of the pic you had in the gif file.

IE doesn't support min-width so the expression was used.

If you notice #top has height: 1px and #top[id] has height: auto Mozilla liked the auto but IE demanded a set height. 1px worked as well as anything else.

only tested on FF/MOZ and IE6

Kurashu
03-19-2005, 03:43 AM
In Opera, the img div and the content div touch. Just to let you know.

mark87
03-20-2005, 04:43 PM
In Firefox it's messed up :S, any ideas how to fix?

_Aerospace_Eng_
03-20-2005, 05:14 PM
what firefox are u using? its fine for me, and it looks the same in opera to

mark87
03-20-2005, 05:36 PM
Strange, version 1.0. In IE, it's nicely centered etc - in FF it goes off edge of the page.

Here's an example (where I used the same kind of design (it will be changed)) - notice the difference in IE and FF?

http://mysite.wanadoo-members.co.uk/downfallband/sss/index.html

harbingerOTV
03-20-2005, 06:49 PM
mark87,

Yours looks the same almost in FF 1.0 and IE6 to me. The only difference is the white box margins. They stickout more in IE. Everything is centered fine.

have you cleared your cache?

mark87
03-20-2005, 07:27 PM
Yup, this is how it looks for me -

Internet Explorer (http://mysite.wanadoo-members.co.uk/downfallband/sssie.JPG)

Firefox (http://mysite.wanadoo-members.co.uk/downfallband/sssff.JPG)

mark87
03-21-2005, 08:52 PM
Bump - anyone got any ideas?

harbingerOTV
03-22-2005, 01:47 AM
Okay I just copied all your source and checked it. Looks fine to. One question:

Are you running 800x600 screen resolution?

If so you need to change min-width line of the #container.

I'll use my original source as it's easier:



#container {
position: relative;
margin: 50px auto;
text-align: left;
min-width: 820px;
width: 80%;
width: expression(document.body.clientWidth < 800? "750px": "80%" );
color: #000;
background: #FF923F;
border: 2px solid #000;
}


This sets FF/MOZ/etc.. to stop collapsing the page at 820px. If you are running 800x600 resolution this needs to probally be 750px to mimic IE.

p.s.

What did you output the code with? Some kind of page builder?

you have:

unknown {
height: auto;
}

to make your logo box to work like in IE you need to change that to:

#top[id] {
height: auto;
top: -32px;
}

the [id] is selector that IE will not recognize. If you used something like frontpage or whatever, odds are it doesn't recognize it either.

same thing where you have:

{
padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px
}

it needs to be:

* {
padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px
}

BUT since you adjusted everything already and the "*" had no effect, ERASE that line from your code. If you add the * to it it will all go wacky on you. No need to use it and have to readjust everything again ;)

mark87
03-22-2005, 11:15 AM
Ah ok thanks, yes I'm running at 800*600.

I used some of the source from the design above, so the 'unknown' probably got in because of that.

I'll have a play around! :)

EDIT : Yup, cheers, all sorted now.

Hmm, one thing - how comes my pages do not validate for html ? Some errors I know why there are and can fix, but I don't get -

'end tag for element "HEAD" which is not open'
'document type does not allow element "BODY" here'

http://validator.w3.org/check?uri=http%3A%2F%2Fmysite.wanadoo-members.co.uk%2Fdownfallband%2Fsss%2Findex.html

Any help on that would be appreciated!

Also, what does 'You are encouraged to offer a generic family as a last alternative' mean when validating css?

zro@rtv
03-22-2005, 12:11 PM
your self closing your link tag XHTML style in a doc defined as html 4.01


instead of



<link rel="stylesheet" type="text/css" href="stylesheet.css" />


use




<link rel="stylesheet" type="text/css" href="stylesheet.css">


ps....
read the validation results.... this was there...

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum