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

[Barry Pearson]

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.drea mweaver is a rather
strangely-configured newsgroup. The "real" newsgroup is run on a Macromedia
news-server forums.macromed ia.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/

[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:absolu te 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.

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

[SpaceGirl]

"Els" <el*********@ti scali.nl> wrote in message
news:40******** **************@ dreader2.news.t iscali.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 :)

[Stephen Poley]

On Fri, 20 Feb 2004 09:41:18 -0000, "Neil Monk"
<neil.monk02@__ REMOVE__NO__SPA M__blueyonder.c o.uk> 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/

[Richard]

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:absolu te which is not necessary on top line
divisions.

Try this on for size:

<style type="text/css">
..mylinks { width:30%; height:150px; background:#88D CF0; float:left; }
..mylogo { height:150px; background:#FFF FA8; 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]

"Barry Pearson" <ne**@childsupp ortanalysis.co. uk> wrote in message
news:1alZb.77$T d6.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.drea mweaver is a rather
strangely-configured newsgroup. The "real" newsgroup is run on a Macromedia news-server forums.macromed ia.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

[Neil Monk]

"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:absolu te which is not necessary on top line
divisions.

Try this on for size:

<style type="text/css">
.mylinks { width:30%; height:150px; background:#88D CF0; float:left; }
.mylogo { height:150px; background:#FFF FA8; 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.

[Neal]

On Fri, 20 Feb 2004 20:53:04 -0000, Neil Monk
<neil.monk02@__ REMOVE__NO__SPA M__blueyonder.c o.uk> 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.