help withj css and div's

[Neil Monk]

(sorry for x-post but news://macromedia.dreamweaver seem unable to help,
which I find astounding.)

Hi, I'm VERY new to DW MX 2004 (opk then, I'm new to DW..period!)

I'm sipmly trying to do the following:

setup a page with 4 divs -
1) div id Logo (top right)
2) div id links (next to logo at the top, so call it top right)
3) div id main main part of page, in the middle
4) div id bottom at the bottom of the page below everything else.

I've managed to do it, BUT, when altering the text size in IE6 to largest,
the bottom div is overlayed on top on the main div.

Here is the code from the CSS:
<!-- start code-->
/* CSS Document */
body{
padding :0;
margin :0;
}
#main{
padding-top : 130px;
padding-bottom : 30px;
padding-left : 30px;
padding-right : 30px;
}

#content h1 {
font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
font-size: 120%;
font-weight: normal;
color: #000000;
background-color : transparent;
}

#content h2 {
font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
font-size: 100%;
font-weight: bold;
color: #000000;
background-color : transparent;
}

#content p{
font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
font-size: 80%;
font-weight: normal;
color: #000000;
background-color : transparent;
line-height : 140%;
}
#logo{
position : absolute;
top : 16px;
left : 12px;
z-index : 50;
width: 443px;
height: 76px;
}

#links{
position : absolute;
top : 20px;
right : 0;
text-align : right;
left: 391px;
width: 500px;
height: 80px;
}

#bottom{
position: absolute;
bottom: 0;
right: 0;
text-align: center;
left: 18px;
top: 433px;
background-color: #FFFFCC;
}

<!--end code-->

Amy ideas what I'm doing wrong???

Thanks, a newbie

 

[Barry Pearson]

(sorry for x-post but news://macromedia.dreamweaver seem unable to
help, which I find astounding.)

[snip]

(I won't attempt to answer the question because I get similar problems with
footers when I use absolute positioning! I normally avoid absolute positioning
in these circumstances for that reason. It isn't just IE 6. Try (say) Firefox,
or any of the others.)

My real purpose was to point out that macromedia.dreamweaver is a rather
strangely-configured newsgroup. The "real" newsgroup is run on a Macromedia
news-server forums.macromedia.com and if you post via that you should be OK.
But it appears from your message-IDs that you posted via your ISP's
news-server. Now, while there is a feed *out* from the Macromedia news-server,
there isn't a feed in (at least, not in normal circumstances). So no one there
saw your posts!

Don't ask why! It is a hot topic of debate there at the moment. I've made the
same "mistake" in the past.

 

[Els]

(sorry for x-post but news://macromedia.dreamweaver seem unable to help,
which I find astounding.)

Hi, I'm VERY new to DW MX 2004 (opk then, I'm new to DW..period!)

I'm sipmly trying to do the following:

setup a page with 4 divs -
1) div id Logo (top right)
2) div id links (next to logo at the top, so call it top right)
3) div id main main part of page, in the middle
4) div id bottom at the bottom of the page below everything else.

I've managed to do it, BUT, when altering the text size in IE6 to largest,
the bottom div is overlayed on top on the main div.

Here is the code from the CSS:
<!-- start code-->
/* CSS Document */
body{
padding :0;
margin :0;
}
#main{
padding-top : 130px;
padding-bottom : 30px;
padding-left : 30px;
padding-right : 30px;
}

#content h1 {
font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
font-size: 120%;
font-weight: normal;
color: #000000;
background-color : transparent;
}

#content h2 {
font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
font-size: 100%;
font-weight: bold;
color: #000000;
background-color : transparent;
}

#content p{
font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
font-size: 80%;
font-weight: normal;
color: #000000;
background-color : transparent;
line-height : 140%;
}
#logo{
position : absolute;
top : 16px;
left : 12px;
z-index : 50;
width: 443px;
height: 76px;
}

#links{
position : absolute;
top : 20px;
right : 0;
text-align : right;
left: 391px;
width: 500px;
height: 80px;
}

#bottom{
position: absolute;
bottom: 0;
right: 0;
text-align: center;
left: 18px;
top: 433px;
background-color: #FFFFCC;
}

<!--end code-->

Amy ideas what I'm doing wrong???

You didn't put all of these divs in a container, which
means, that position:absolute on the footer div, is in
respect to it's container, being the body, which isn't any
higher than (or not even as high as) the viewport, being
your browser's window.
If you put all the divs in a container div, which you give a
height in ems instead of px, the whole lot will expand with
the text size.

http://www.csscreator.com/version2/pagelayout.php
might be useful

 

[Els]

Neil Monk wrote:
[snip]

Here is the code from the CSS: [snip]
width: 443px;
height: 76px;
left: 391px;
width: 500px;
height: 80px;
left: 18px;
top: 433px;
Amy ideas what I'm doing wrong???

If you put all the divs in a container div, which you give a height in
ems instead of px, the whole lot will expand with the text size.

Forgot to mention: lose the other px measures as well. use
ems, to make them expand with the text size.

 

[SpaceGirl]

Neil Monk wrote:
[snip]

Here is the code from the CSS: [snip]
width: 443px;
height: 76px;
left: 391px;
width: 500px;
height: 80px;
left: 18px;
top: 433px;
Amy ideas what I'm doing wrong???

If you put all the divs in a container div, which you give a height in
ems instead of px, the whole lot will expand with the text size.

Forgot to mention: lose the other px measures as well. use
ems, to make them expand with the text size.

ewww no

 

[Stephen Poley]

#bottom{
position: absolute;
bottom: 0;
right: 0;
text-align: center;
left: 18px;
top: 433px;
background-color: #FFFFCC;
}

<!--end code-->

Amy ideas what I'm doing wrong???

Yes - you are specifying font size in % (good) but positioning the
'bottom' div 433 pixels down the document (not good). The bottom can't
move when it needs to get out of the way of the larger text.

I haven't examined it in minute detail, but I think you can simply
remove the positioning from the bottom div and let it take up its
position within the normal flow.

One other thing: you've specified P as having font-size 80%, H2 as 100%,
H1 as 120%. Much better to have P as 100% and H1/H2 larger. If that
looks too large to you, reduce the default text size in your browser.

 

[Richard]

(sorry for x-post but news://macromedia.dreamweaver seem unable to help,
which I find astounding.)

Hi, I'm VERY new to DW MX 2004 (opk then, I'm new to DW..period!)

I'm sipmly trying to do the following:

#bottom{
position: absolute;
bottom: 0;

Can't be done.

Position 0,0 is the top left of your screen.
You're telling the division to place the bottom line at left position 0, the
right side at the left border.

Plus I've noticed you've tried to position divisions the wrong way.
Top means the top border. Left means the left border.
So where does top:20; left:0; get placed?

20 pixels down from the top, 0 pixels from the left border.
left:20; would simply move the division 20 pixels to the right.

If you intend to have two divisions side by side, you must use "float:"
I do not see a float element anywhere.
Unless you're using position:absolute which is not necessary on top line
divisions.

Try this on for size:

<style type="text/css">
..mylinks { width:30%; height:150px; background:#88DCF0; float:left; }
..mylogo { height:150px; background:#FFFFA8; float:none;}
..main { background:gold; }
..footer { background:blue;

</style>



</HEAD>
<BODY>

<div class="mylinks"> this is the links place</div>
<div class="mylogo"> Logo goes here</div>
<div class="main"> Main content of the page</div>
<div class="footer"> copyright and legal stuff</div>


</BODY>

 

[Neil Monk]

(sorry for x-post but news://macromedia.dreamweaver seem unable to
help, which I find astounding.)

[snip]

(I won't attempt to answer the question because I get similar problems with
footers when I use absolute positioning! I normally avoid absolute positioning
in these circumstances for that reason. It isn't just IE 6. Try (say) Firefox,
or any of the others.)

My real purpose was to point out that macromedia.dreamweaver is a rather
strangely-configured newsgroup. The "real" newsgroup is run on a Macromedia
news-server forums.macromedia.com and if you post via that you should be OK.
But it appears from your message-IDs that you posted via your ISP's
news-server. Now, while there is a feed *out* from the Macromedia news-server,
there isn't a feed in (at least, not in normal circumstances). So no one there
saw your posts!

Don't ask why! It is a hot topic of debate there at the moment. I've made the
same "mistake" in the past.

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/

Thanks for that Barry, makes sense now, thought it was weird them not
replying! D'oh!

 

[Neil Monk]

Can't be done.

Position 0,0 is the top left of your screen.
You're telling the division to place the bottom line at left position 0, the
right side at the left border.

Plus I've noticed you've tried to position divisions the wrong way.
Top means the top border. Left means the left border.
So where does top:20; left:0; get placed?

20 pixels down from the top, 0 pixels from the left border.
left:20; would simply move the division 20 pixels to the right.

If you intend to have two divisions side by side, you must use "float:"
I do not see a float element anywhere.
Unless you're using position:absolute which is not necessary on top line
divisions.

Try this on for size:

<style type="text/css">
.mylinks { width:30%; height:150px; background:#88DCF0; float:left; }
.mylogo { height:150px; background:#FFFFA8; float:none;}
.main { background:gold; }
.footer { background:blue;

</style>



</HEAD>
<BODY>

<div class="mylinks"> this is the links place</div>
<div class="mylogo"> Logo goes here</div>
<div class="main"> Main content of the page</div>
<div class="footer"> copyright and legal stuff</div>


</BODY>

I don't really understand that, but I'm basically wanting to put the stuff
into an external style sheet, and reference it in, to each page.

Can you please be as simple as possible, and maybe given an example of where
my code is wrong, and what it maybe ought too look like. I'm not asking you
to do my site for me, but I'm "OLD SCHOOL" HTML author, before CSS and DIV's
were this popular, so I'm only really familiar with pure HTML (prob verion
three-ish)!!!

Thanks for all your help so far, but its gone way above my head :-(

 

[Neal]

Thanks for all your help so far, but its gone way above my head :-(

As a "reformed" old-school coder myself, I found http://www.htmldog.com to
be very good at getting me up to speed on current web authoring techniques.

 

[Neil Monk]

You didn't put all of these divs in a container, which
means, that position:absolute on the footer div, is in
respect to it's container, being the body, which isn't any
higher than (or not even as high as) the viewport, being
your browser's window.
If you put all the divs in a container div, which you give a
height in ems instead of px, the whole lot will expand with
the text size.

<snip>
Not sure what you mean...? Could you explain it simply and use examples
please??
Thanks for your help however,

 

[Els]

<snip>
Not sure what you mean...? Could you explain it simply and use examples
please??

Let's say you have a box of 20px high, and 50 wide.
The text inside of it, just about fits.
Then you make the font larger. What will happen?
You made all your divs with px heights and widths.
So when the text gets larger, it just doesn't fit anymore.
So it could go outside the box, or the box could expand.

Your bottom div has position:absolute.
It is positioned 0px from the bottom, 0px from the right,
and exactly 433px from the top and 18px from the left.

Let's say your browser window is exactly 434px high. And
your bottom div is therefore only 1px high.
How can it show the text that's inside of it?

It will have to expand, or let the contents get out of the
box. Probably the first.

Now, if you would give a url to the page, I (and anyone
else) might be able to see exactly what things you need to
change, as just the CSS file isn't enough (at least for me).

All I can guess now, is: get rid of position:absolute, at
least for the bottom div, get rid of px, and see what happens.

Instead of px you can use em, where 1em is (I think) the
size of the font. That way, if the font gets twice as big,
so does the container which has a width and/or height in em.

 

[Neil Monk]

Let's say you have a box of 20px high, and 50 wide.
The text inside of it, just about fits.
Then you make the font larger. What will happen?
You made all your divs with px heights and widths.
So when the text gets larger, it just doesn't fit anymore.
So it could go outside the box, or the box could expand.

Your bottom div has position:absolute.
It is positioned 0px from the bottom, 0px from the right,
and exactly 433px from the top and 18px from the left.

Let's say your browser window is exactly 434px high. And
your bottom div is therefore only 1px high.
How can it show the text that's inside of it?

It will have to expand, or let the contents get out of the
box. Probably the first.

Now, if you would give a url to the page, I (and anyone
else) might be able to see exactly what things you need to
change, as just the CSS file isn't enough (at least for me).

All I can guess now, is: get rid of position:absolute, at
least for the bottom div, get rid of px, and see what happens.

Instead of px you can use em, where 1em is (I think) the
size of the font. That way, if the font gets twice as big,
so does the container which has a width and/or height in em.

http://www.neilmonk.com/dn/index.html
http://www.neilmonk.com/dn/css.css

 

[Neil Monk]

http://www.neilmonk.com/dn/index.html
http://www.neilmonk.com/dn/css.css

Originally, the main div contained proper text, and the bottom div did not
overlap it to start with. I had to quickly change that text because of my
obligations under the UK's Official Secrets Act (its something for my work).

 

[Els]

Neil Monk wrote:

[snip]

http://www.neilmonk.com/dn/index.html
http://www.neilmonk.com/dn/css.css

By putting the links table next to the logo, your page gets
too wide. The site may be optimised for 1024x768 (after
quite a bit more work of course ;-) ), but lots of people
don't use that. And if they have their screens at 1024x768,
they may have their browser windows open in smaller sizes.

Nevertheless, if you want the logo left, and the links next
to it, you can use position:absolute, (with only left and
top values defined), but you can also use float:left, which
will 'float' it to the side of the logo.

The bottom div doesn't need any position:absolute, as you
don't know the height of the content that's above it. With
larger font size or smaller window, it will be higher.

Change these things, and see what happens.
And instead of using Dreamweaver, use notepad, or another
text-editor and have a look at the specs
http://www.w3.org/TR/REC-CSS2/ so you actually get an idea
of what you are doing. Seems to me, that Dreamweaver made
some code, which you don't understand.
And check your page in more browsers than just IE6.0,
because there you have a funny thing happening with the
bottom div, as it is obeying only the top and left
positions, but in Netscape, it obeys all four positions;
top, left, right and bottom, which makes the bottom div
rather large when I have my browser at full size.
And also in Netscape, the links table is partly behind the
logo, because you positioned it at 391px from the left,
whereas the logo is already 456 wide. How IE gets it to be
placed next to the logo, I don't know

A good example of something that's quite strange, is your
links style:
#links{
position : absolute;
top : 20px;
right : 0;
text-align : right;
left: 391px;
width: 500px;
height: 80px;
}

Apparently you want it to be positioned 20px from the top,
and 0px from the right. This is not a problem.
It's 500px wide. No problem. Neither is the height.
But then you also want it 391px from the left.
Now this can only be done in windows which are exactly 891px
wide. That's not my window

See what I mean?
Have a look at the specs, use notepad and common sense, and
things will look a lot better

 

[Els]

Neil Monk wrote:

but
you can also use float:left, which will 'float' it to the side of the logo.

eh.. if you have the logo float:left as well, that is...

 

[Neal]

Instead of px you can use em, where 1em is (I think) the size of the
font. That way, if the font gets twice as big, so does the container
which has a width and/or height in em.

Unless the line wraps...

 

[Els]

Unless the line wraps...

And when it wraps, one line becomes two...
And two lines take up more height than one...
So the box has to expand in height, if not in width.

 

[Neal]

And when it wraps, one line becomes two...
And two lines take up more height than one...
So the box has to expand in height, if not in width.

True, actually. The box should expand unless you've set height on it in
some restricting way with the CSS. That's where my brain was at there - if
you set a height at 2em, and due to larger size the font now wraps more
often, 2em might not be enough and you might get overflow. As I never set
height because IE doesn't seem to like it anyway, I don't know how
browsers will specifically react.

 

[Els]

True, actually. The box should expand unless you've set height on it in
some restricting way with the CSS. That's where my brain was at there -
if you set a height at 2em, and due to larger size the font now wraps
more often, 2em might not be enough and you might get overflow.

Correct; you have to make it as flexible as possible.
If the width is also in ems, lines wouldn't have to wrap,
but then you get the much hated horizontal scrollbar

As I never set height

Before today you mean?

because IE doesn't seem to like it anyway, I don't know
how browsers will specifically react.

IE just expands anyway. You can set a div to 1px height, and
IE will just expand to hold the text.

It's good to not set height, but sometimes you need it
somewhere, even though I can't think of an example right now.

But it's the position:absolute that messes up your page the
most.