Stylesheets - Formatting help needed

Author

Formatting help needed

robert4

2004-06-20, 12:15 pm

Xref: kermit comp.infosystems.www.authoring.stylesheets:72771

I am new to CSS and am trying new things and am stuck at 4 am. The site
in question is

http://www.robert4.com/test/fitting.html

It is just a test page for me to practice with for a bit. My goal is to
have a pad on the page with a different background color to offset the
middle content. I also want to butt the logo and the header together but
there is a gap between them. If I use absolute positioning my problem is
what happens in the dark blue content area in that it won't span the
width of the screen. It stops when the text does. I have been trying
now for a while to get the logo and header next to each other and can do
it with absolute positioning, but how can I get the header part to fill
across to the page padding? Also, I used absolute positioning on the
dark blue section figuring 10px for the page pad and 114px for the image
height so I thought 124px from the top would place it right at the bottom
of the logo and header. Apparently I am wrong about that also.

I realize this is alot at once, but would appreciate some pointers or
references on layout techniques such as this. The book I am reading
doesn't go into this much detail.

I did notice that if I didn't use the float tag for the logo I could use
"margin-left: 80" in the header tag and the header would be perfectly
aligned with the edge of the logo BUT on the row underneath instead of
next to it.

Any help would be greatly appreciated
robert

Stan Brown

2004-06-20, 12:15 pm

"robert4" <bobor@hotmail.com> wrote in
comp.infosystems.www.authoring.stylesheets:
>I realize this is alot at once, but would appreciate some pointers or
>references on layout techniques such as this. The book I am reading
>doesn't go into this much detail.

Meaning no disrespect, I think you're trying to do too much at once.
The (unnamed) "book" you are reading may not be a good one, or it
may not be right for you at this time.

Seems to me you're trying to run before you've even begun walking.
For instance, your surprise at "margin" and "float" leading to
different vertical alignment says you really need to spend some work
on understanding the basic concepts. Try a book by Eric Meyer, or
one of the many good CSS tutorials on the Web. By all means look at
the spec for particular things, particularly the box model.

Please don't feel I'm trying to insult you. I'm not trying to say
"Go away and don't bother us." I'm just saying that you're asking a
lot of detail questions about fairly advanced concepts and it's
going to be less frustrating for you if you get the basics down
first -- which we can also help with.

Putting up a sample page was absolutely the right thing to do. Now
try some more reading (probably with a better book) and
experimenting with one thing at a time. Even if you may be naturally
impatient to accomplish a lot, you'll probably get better quality
responses if you don't mix up too many questions in one big lump.

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

Gus Richter

2004-06-20, 7:15 pm

robert4 wrote:
> I am new to CSS and am trying new things and am stuck at 4 am. The site
> in question is
>
> http://www.robert4.com/test/fitting.html
>
> (1) I want to butt the logo and the header together but there is a gap.
> (2) the dark blue content area won't span the width of the screen.
> (3) place [dak blue area] right at the bottom of the logo and header.
>
> Any help would be greatly appreciated
> robert

I will provide a solution and explanation for 2/3 problems (last two).
Perhaps someone will jump in and do so for the IE spacing problem; Logo
to Header.
Replace your stylesheet with this and read the notes therein:

body {margin:0; padding:0;} /* See Notes below */
#page {
background-color: #FFF8DC;
padding: 10px 10px 0 10px;
}
#header {
font-family: "Comic Sans MS";
font-size: 36px;
background-color: #AFEEEE;
text-align: center;
height: 114px;
/* margin-left: 80px;
This is not needed. Since #logo is floated to the left,
#header will automatically go to the right of it,
as long as it will fit, which it does.
*/
}
#logo {
background-color: Teal;
width: 80px;
height: 114px;
float: left;
}
#new {
background-color: Blue;
font-size: 24px;
color: White;
/* position: absolute;
top: 124px;
This top value does not take into account the browsers' default
margin values for body. It is a good idea to include:
body {margin:0;padding:0;}
as included above. These two properties will now work as far as the
value is concerned.
For the Blue section to fit the full width:
Without a position property, the div will be Static Block which
will fit the full width. It does not take positioning properties.
(If width &/or height properties are needed, use Relative Block Model.)
*/
}

--
Gus