By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,787 Members | 1,124 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,787 IT Pros & Developers. It's quick & easy.

help withj css and div's

P: n/a
(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
--
Neil
Jul 20 '05 #1
Share this Question
Share on Google+
27 Replies


P: n/a
Neil Monk wrote:
(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/
Jul 20 '05 #2

P: n/a
Els


Neil Monk wrote:
(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

Mente humana é como pára-quedas; funciona melhor aberta.

Jul 20 '05 #3

P: n/a
Els
Els wrote:
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.

--
Els

Mente humana é como pára-quedas; funciona melhor aberta.

Jul 20 '05 #4

P: n/a

"Els" <el*********@tiscali.nl> wrote in message
news:40**********************@dreader2.news.tiscal i.nl...
Els wrote:
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 :)
Jul 20 '05 #5

P: n/a
On Fri, 20 Feb 2004 09:41:18 -0000, "Neil Monk"
<neil.monk02@__REMOVE__NO__SPAM__blueyonder.co.u k> wrote:
#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.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Jul 20 '05 #6

P: n/a
Neil Monk wrote:
(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>
Jul 20 '05 #7

P: n/a
"Barry Pearson" <ne**@childsupportanalysis.co.uk> wrote in message
news:1alZb.77$Td6.65@newsfe1-win...
Neil Monk wrote:
(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
Jul 20 '05 #8

P: n/a

"Richard" <an*******@127.000> wrote in message
news:c1********@enews1.newsguy.com...
Neil Monk wrote:
> (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>

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 :-(
--
Neil.
Jul 20 '05 #9

P: n/a
On Fri, 20 Feb 2004 20:53:04 -0000, Neil Monk
<neil.monk02@__REMOVE__NO__SPAM__blueyonder.co.u k> wrote:
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.
Jul 20 '05 #10

P: n/a
"Els" <el*********@tiscali.nl> wrote in message
news:40**********************@dreader2.news.tiscal i.nl...


Neil Monk wrote:
(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.

<snip>
Not sure what you mean...? Could you explain it simply and use examples
please??
Thanks for your help however,
--
Neil
Jul 20 '05 #11

P: n/a
Els

Neil Monk wrote:
"Els" <el*********@tiscali.nl> wrote in message
news:40**********************@dreader2.news.tiscal i.nl...
Neil Monk wrote:
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.


<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.

--
Els

Mente humana é como pára-quedas; funciona melhor aberta.

Jul 20 '05 #12

P: n/a

"Els" <el*********@tiscali.nl> wrote in message
news:40**********************@dreader2.news.tiscal i.nl...

Neil Monk wrote:
"Els" <el*********@tiscali.nl> wrote in message
news:40**********************@dreader2.news.tiscal i.nl...
Neil Monk wrote:

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.


<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.

--
Els

Mente humana é como pára-quedas; funciona melhor aberta.

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

--
Neil

Jul 20 '05 #13

P: n/a

"Neil Monk" <neil.monk02@__REMOVE__NO__SPAM__blueyonder.co.u k> wrote in
message news:02***************@news-binary.blueyonder.co.uk...

"Els" <el*********@tiscali.nl> wrote in message
news:40**********************@dreader2.news.tiscal i.nl...

Neil Monk wrote:
"Els" <el*********@tiscali.nl> wrote in message
news:40**********************@dreader2.news.tiscal i.nl...

>Neil Monk wrote:
>
>>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.

<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.

--
Els

Mente humana é como pára-quedas; funciona melhor aberta.

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

--
Neil

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).
--
Neil
Jul 20 '05 #14

P: n/a
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

Mente humana é como pára-quedas; funciona melhor aberta.

Jul 20 '05 #15

P: n/a
Els
Els wrote:
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...

--
Els

Mente humana é como pára-quedas; funciona melhor aberta.

Jul 20 '05 #16

P: n/a
On Fri, 20 Feb 2004 23:34:20 +0100, Els <el*********@tiscali.nl> wrote:
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...
Jul 20 '05 #17

P: n/a
Els


Neal wrote:
On Fri, 20 Feb 2004 23:34:20 +0100, Els <el*********@tiscali.nl> wrote:
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...


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.

--
Els

Mente humana é como pára-quedas; funciona melhor aberta.

Jul 20 '05 #18

P: n/a
On Sat, 21 Feb 2004 00:25:57 +0100, Els <el*********@tiscali.nl> wrote:


Neal wrote:
On Fri, 20 Feb 2004 23:34:20 +0100, Els <el*********@tiscali.nl> wrote:
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...


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.
Jul 20 '05 #19

P: n/a
Els
Neal wrote:
On Sat, 21 Feb 2004 00:25:57 +0100, Els <el*********@tiscali.nl> wrote:

Neal wrote:
On Fri, 20 Feb 2004 23:34:20 +0100, Els <el*********@tiscali.nl> wrote:

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...
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.


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.

--
Els

Mente humana é como pára-quedas; funciona melhor aberta.

Jul 20 '05 #20

P: n/a
On Sat, 21 Feb 2004 00:54:45 +0100, Els <el*********@tiscali.nl> wrote:
IE just expands anyway. You can set a div to 1px height, and IE will
just expand to hold the text.


As it also behaves when preformatted text lines are longer than the set
width. Opera, however, allows the line to go on and on beyond the border
of the parent. I suppose a similar thing might happen with heights.
Jul 20 '05 #21

P: n/a
Neal wrote:

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.


Thanks, that's helpful. Good discussion of the relevance of techniques.
I was able to search a topic I was struggling with and find great
analysis and related alternative techniques.

Jul 20 '05 #22

P: n/a
Els

Neal wrote:
On Sat, 21 Feb 2004 00:54:45 +0100, Els <el*********@tiscali.nl> wrote:
IE just expands anyway. You can set a div to 1px height, and IE will
just expand to hold the text.

As it also behaves when preformatted text lines are longer than the set
width. Opera, however, allows the line to go on and on beyond the border
of the parent. I suppose a similar thing might happen with heights.


Oops, sorry, Neal, I accused you of setting px heights in my
previous post. I now see (it's morning now, and apparently
I'm more awake than yesterday night) that Neal and Neil are
not the same person :S :-)

--
Els

Mente humana é como pára-quedas; funciona melhor aberta.

Jul 20 '05 #23

P: n/a
Neil Monk wrote:

"Richard" <an*******@127.000> wrote in message
news:c1********@enews1.newsguy.com...
Neil Monk wrote:
>> (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>

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 :-(
--
Neil.


What's so hard to understand?
Think of a division as a table cell.
Instead of defining everything within each table element tag, you define
your structures with a "class" or "ID".
Which allows you to reuse those same definitions as many times as you want.
A few tricks to master to get the division to behave the way you want, but a
division is much more flexible than a table.

I'm no expert with CSS but I find it an asset to learn and only compliments
html.
You learn by doing.

Jul 20 '05 #24

P: n/a
On Sat, 21 Feb 2004 10:33:41 +0100, Els <el*********@tiscali.nl> wrote:
Neal and Neil are not the same person :S :-)

I get that all the time. You should see the misspellings I'm subjected
to...
Jul 20 '05 #25

P: n/a
Els
Neal wrote:
On Sat, 21 Feb 2004 10:33:41 +0100, Els <el*********@tiscali.nl> wrote:
Neal and Neil are not the same person :S :-)


I get that all the time. You should see the misspellings I'm subjected
to...


hmm... like: Neil, Niel, Neel, Nael, Kneel... ?

--
Els

Mente humana é como pára-quedas; funciona melhor aberta.

Jul 20 '05 #26

P: n/a
Richard wrote:
Neil Monk wrote:

> "Richard" <an*******@127.000> wrote in message
> news:c1********@enews1.newsguy.com...
>> Neil Monk wrote:
>>
> >> (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>
>>
>>

> 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 :-(
> --
> Neil.


What's so hard to understand?
Think of a division as a table cell.
Instead of defining everything within each table element tag, you
define your structures with a "class" or "ID".
Which allows you to reuse those same definitions as many times as you
want. A few tricks to master to get the division to behave the way
you want, but a division is much more flexible than a table.

I'm no expert with CSS but I find it an asset to learn and only
compliments html.
You learn by doing.


Best not to think of a division as a table cell. I had been doing that up
until recently. I'm finding it much easier to get the results I want now
that I've made that paradigm shift in thinking. Refer to the replies to the
post I made with the subject line "CSS Problems".
Jul 20 '05 #27

P: n/a

"Neal" <ne*****@spamrcn.com> wrote in message
news:op**************@news.rcn.com...
On Sat, 21 Feb 2004 10:33:41 +0100, Els <el*********@tiscali.nl> wrote:
Neal and Neil are not the same person :S :-)

I get that all the time. You should see the misspellings I'm subjected
to...

Me too, you are a prime example of a mis-spelling!!!
:-P
--
Neil
Jul 20 '05 #28

This discussion thread is closed

Replies have been disabled for this discussion.