help withj css and div's

[Els]

Re: help withj css and div's

Els wrote:
[color=blue]
> Neil Monk wrote:
>
> but
> you can also use float:left, which will 'float' it to the side of the logo.[/color]

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

--
Els

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

[Neal]

Re: help withj css and div's

On Fri, 20 Feb 2004 23:34:20 +0100, Els <els.aNOSPAM@ti scali.nl> wrote:
[color=blue]
> 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.
>[/color]

Unless the line wraps...

[Els]

Re: help withj css and div's



Neal wrote:
[color=blue]
> On Fri, 20 Feb 2004 23:34:20 +0100, Els <els.aNOSPAM@ti scali.nl> wrote:
>[color=green]
>> 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.[/color]
>
> Unless the line wraps...[/color]

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.

[Neal]

Re: help withj css and div's

On Sat, 21 Feb 2004 00:25:57 +0100, Els <els.aNOSPAM@ti scali.nl> wrote:
[color=blue]
>
>
> Neal wrote:
>[color=green]
>> On Fri, 20 Feb 2004 23:34:20 +0100, Els <els.aNOSPAM@ti scali.nl> wrote:
>>[color=darkred]
>>> 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.[/color]
>>
>> Unless the line wraps...[/color]
>
> 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.
>[/color]

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]

Re: help withj css and div's

Neal wrote:
[color=blue]
> On Sat, 21 Feb 2004 00:25:57 +0100, Els <els.aNOSPAM@ti scali.nl> wrote:[color=green]
>>
>> Neal wrote:
>>[color=darkred]
>>> On Fri, 20 Feb 2004 23:34:20 +0100, Els <els.aNOSPAM@ti scali.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...[/color]
>>
>> 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.[/color]
>
> 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.[/color]

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 :-)
[color=blue]
> As I never set height[/color]

Before today you mean?
[color=blue]
> because IE doesn't seem to like it anyway, I don't know
> how browsers will specifically react.[/color]

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:absolu te that messes up your page the
most.

--
Els

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

[Neal]

Re: help withj css and div's

On Sat, 21 Feb 2004 00:54:45 +0100, Els <els.aNOSPAM@ti scali.nl> wrote:
[color=blue]
> IE just expands anyway. You can set a div to 1px height, and IE will
> just expand to hold the text.[/color]

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.

[Paul Furman]

Re: help withj css and div's

Neal wrote:[color=blue]
>
> 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.[/color]

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.

[Els]

Re: help withj css and div's


Neal wrote:[color=blue]
> On Sat, 21 Feb 2004 00:54:45 +0100, Els <els.aNOSPAM@ti scali.nl> wrote:
>[color=green]
>> IE just expands anyway. You can set a div to 1px height, and IE will
>> just expand to hold the text.[/color]
>
>
> 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.[/color]

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.

[Richard]

Re: help withj css and div's

Neil Monk wrote:

[color=blue]
> "Richard" <anonymous@127. 000> wrote in message
> news:c156ou0dqj @enews1.newsguy .com...[color=green]
>> Neil Monk wrote:
>>[color=darkred]
> >> (sorry for x-post but news://macromedia.dreamweaver seem unable to[/color][/color]
> help,[color=green][color=darkred]
> >> which I find astounding.)[/color]
>>[color=darkred]
> >> Hi, I'm VERY new to DW MX 2004 (opk then, I'm new to DW..period!)[/color]
>>[color=darkred]
> >> I'm sipmly trying to do the following:[/color]
>>[color=darkred]
> >> #bottom{
> >> position: absolute;
> >> bottom: 0;[/color]
>>
>>
>> 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,[/color]
> the[color=green]
>> 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>
>>
>>[/color]
> 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.[/color]
[color=blue]
> 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)!!![/color]
[color=blue]
> Thanks for all your help so far, but its gone way above my head :-(
> --
> Neil.[/color]

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.

[Neal]

Re: help withj css and div's

On Sat, 21 Feb 2004 10:33:41 +0100, Els <els.aNOSPAM@ti scali.nl> wrote:
[color=blue]
> Neal and Neil are not the same person :S :-)[/color]


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

[Els]

Re: help withj css and div's

Neal wrote:
[color=blue]
> On Sat, 21 Feb 2004 10:33:41 +0100, Els <els.aNOSPAM@ti scali.nl> wrote:
>[color=green]
>> Neal and Neil are not the same person :S :-)[/color]
>
> I get that all the time. You should see the misspellings I'm subjected
> to...[/color]

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

--
Els

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

[Nik Coughin]

Re: help withj css and div's

Richard wrote:[color=blue]
> Neil Monk wrote:
>
>[color=green]
> > "Richard" <anonymous@127. 000> wrote in message
> > news:c156ou0dqj @enews1.newsguy .com...[color=darkred]
> >> Neil Monk wrote:
> >>
> > >> (sorry for x-post but news://macromedia.dreamweaver seem[/color][/color]
> unable to > help,[color=green][color=darkred]
> > >> which I find astounding.)
> >>
> > >> Hi, I'm VERY new to DW MX 2004 (opk then, I'm new to[/color][/color]
> DW..period!) >>[color=green][color=darkred]
> > >> 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[/color][/color]
> position 0, > the[color=green][color=darkred]
> >> right side at the left border.
> >>
> >> Plus I've noticed you've tried to position divisions the wrong[/color][/color]
> way. >> Top means the top border. Left means the left border.[color=green][color=darkred]
> >> 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[/color][/color]
> "float:" >> I do not see a float element anywhere.[color=green][color=darkred]
> >> Unless you're using position:absolu te which is not necessary on[/color][/color]
> top line >> divisions.[color=green][color=darkred]
> >>
> >> Try this on for size:
> >>
> >> <style type="text/css">
> >> .mylinks { width:30%; height:150px; background:#88D CF0;[/color][/color]
> float:left; } >> .mylogo { height:150px; background:#FFF FA8;
> float:none;} >> .main { background:gold ; }[color=green][color=darkred]
> >> .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>
> >>
> >>[/color]
> > I don't really understand that, but I'm basically wanting to put[/color]
> the > stuff into an external style sheet, and reference it in, to
> each page.
>[color=green]
> > Can you please be as simple as possible, and maybe given an[/color]
> 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)!!!
>[color=green]
> > Thanks for all your help so far, but its gone way above my head :-(
> > --
> > Neil.[/color]
>
> 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.[/color]

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

[Neil Monk]

Re: help withj css and div's


"Neal" <neal413@spamrc n.com> wrote in message
news:opr3qirlx6 dvhyks@news.rcn .com...[color=blue]
> On Sat, 21 Feb 2004 10:33:41 +0100, Els <els.aNOSPAM@ti scali.nl> wrote:
>[color=green]
> > Neal and Neil are not the same person :S :-)[/color]
>
>
> I get that all the time. You should see the misspellings I'm subjected
> to...[/color]
Me too, you are a prime example of a mis-spelling!!!
:-P
--
Neil