Hi,
I think the subject says it all...
thanks
ThunderMusicor spans,
or position:relative
ok, lets say I want a structure that looks like www.yahoo.com
a top bar (title), a left bar (navigation menu), a content pan, a right
bar(actually full of things on yahoo, but I would put publicity) and a
bottom bar (copyrights and such).
I tried to position everything in absolute, but, probably because I'm no
expert with css, I can't seem to make this simple structure work correctly.
Could you give me a little hint please?
thanks
ThunderMusic
"Horace Nunley" <biteme@.biteme.net> wrote in message
news:e7hkKfn4GHA.4740@.TK2MSFTNGP03.phx.gbl...
> or spans,
> or position:relative
>
>
The new Yahoo IS tableless now. Its a bit complicated, but take a look at
the source of the home page - its all there.
"ThunderMusic" <NoSpAmdanlatathotmaildotcom@.NoSpAm.com> wrote in message
news:%23hwVBjn4GHA.2596@.TK2MSFTNGP06.phx.gbl...
> ok, lets say I want a structure that looks like www.yahoo.com
> a top bar (title), a left bar (navigation menu), a content pan, a right
> bar(actually full of things on yahoo, but I would put publicity) and a
> bottom bar (copyrights and such).
> I tried to position everything in absolute, but, probably because I'm no
> expert with css, I can't seem to make this simple structure work
> correctly. Could you give me a little hint please?
> thanks
> ThunderMusic
>
> "Horace Nunley" <biteme@.biteme.net> wrote in message
> news:e7hkKfn4GHA.4740@.TK2MSFTNGP03.phx.gbl...
>
div are block elements, so by default they go on seperate lines. to put a
div side by side must be done with a css position command. in general to use
positioning, you need to set absolute heights and widths to divs, so you can
position them correctly. often you want client script to calc offsets based
on screen size.
try;
<html>
<body>
<div
style="background- color:green;position:absolute;left:10;to
p:10;width:400;hei
ght:100;">
top
</div>
<div
style="background- color:red;position:absolute;left:10;top:
610;width:400;heig
ht:100;">
bottom
</div>
<div>
<div
style="background- color:blue;position:absolute;left:10;top
:110;width:100;hei
ght:500;">
left
</div>
<div
style="background- color:yellow;position:absolute;left:110;
top:110;width:300;
height:500;">
right
</div>
</body>
</html>
"ThunderMusic" <NoSpAmdanlatathotmaildotcom@.NoSpAm.com> wrote in message
news:%23hwVBjn4GHA.2596@.TK2MSFTNGP06.phx.gbl...
> ok, lets say I want a structure that looks like www.yahoo.com
> a top bar (title), a left bar (navigation menu), a content pan, a right
> bar(actually full of things on yahoo, but I would put publicity) and a
> bottom bar (copyrights and such).
> I tried to position everything in absolute, but, probably because I'm no
> expert with css, I can't seem to make this simple structure work
> correctly. Could you give me a little hint please?
> thanks
> ThunderMusic
>
> "Horace Nunley" <biteme@.biteme.net> wrote in message
> news:e7hkKfn4GHA.4740@.TK2MSFTNGP03.phx.gbl...
>
Hello Thunder,
There is a lot of good information on how to do tableless layouts:
http://www.google.com/search?hl=en&q=tableless+layout
http://www.w3.org/2002/03/csslayout-howto (only covers three column layout
but adding the header and the footer aren't difficult)
http://www.positioniseverything.net/piefecta-rigid.html - covers alot of the
gotcha's and has a pointer at the bottom of the page to a script which will
generate layouts for you
A couple of good books:
Bulletproof Web Design
CSS Mastery
Stylin' with CSS
Javascript + CSS + DOM Magic
(The books speak to absolute versus relative positioning as well as fluid
versus static design of pages.)
--
enjoy - brians
http://www.limbertech.com
"ThunderMusic" wrote:
> ok, lets say I want a structure that looks like www.yahoo.com
> a top bar (title), a left bar (navigation menu), a content pan, a right
> bar(actually full of things on yahoo, but I would put publicity) and a
> bottom bar (copyrights and such).
> I tried to position everything in absolute, but, probably because I'm no
> expert with css, I can't seem to make this simple structure work correctly
.
> Could you give me a little hint please?
> thanks
> ThunderMusic
>
> "Horace Nunley" <biteme@.biteme.net> wrote in message
> news:e7hkKfn4GHA.4740@.TK2MSFTNGP03.phx.gbl...
>
>
the third link seems to be exactly what I need, so I'll look at it when I
have time... ;) thanks a lot
"brians[MCSD]" <briansMCSD@.discussions.microsoft.com> wrote in message
news:D92D9B26-B2E9-44D9-9E86-07139C697650@.microsoft.com...
> Hello Thunder,
> There is a lot of good information on how to do tableless layouts:
> http://www.google.com/search?hl=en&q=tableless+layout
> http://www.w3.org/2002/03/csslayout-howto (only covers three column layout
> but adding the header and the footer aren't difficult)
> http://www.positioniseverything.net/piefecta-rigid.html - covers alot of
> the
> gotcha's and has a pointer at the bottom of the page to a script which
> will
> generate layouts for you
> A couple of good books:
> Bulletproof Web Design
> CSS Mastery
> Stylin' with CSS
> Javascript + CSS + DOM Magic
> (The books speak to absolute versus relative positioning as well as fluid
> versus static design of pages.)
> --
> enjoy - brians
> http://www.limbertech.com
>
> "ThunderMusic" wrote:
>
Showing posts with label subject. Show all posts
Showing posts with label subject. Show all posts
Wednesday, March 28, 2012
Tableless layout. Is it always divs with position:absolute?
Hi,
I think the subject says it all...
The new Yahoo IS tableless now. Its a bit complicated, but take a look at
the source of the home page - its all there.
>
>
div are block elements, so by default they go on seperate lines. to put a
div side by side must be done with a css position command. in general to use
positioning, you need to set absolute heights and widths to divs, so you can
position them correctly. often you want client script to calc offsets based
on screen size.
>
>
Hello Thunder,
>
>
>
the third link seems to be exactly what I need, so I'll look at it when I
have time... ;) thanks a lot
>>
>>
>>
I think the subject says it all...
thanks
ThunderMusicor spans,
or position:relative
ok, lets say I want a structure that looks like www.yahoo.com
a top bar (title), a left bar (navigation menu), a content pan, a right
bar(actually full of things on yahoo, but I would put publicity) and a
bottom bar (copyrights and such).
I tried to position everything in absolute, but, probably because I'm no
expert with css, I can't seem to make this simple structure work correctly.
Could you give me a little hint please?
thanks
ThunderMusic
"Horace Nunley" <biteme@.biteme.netwrote in message
news:e7hkKfn4GHA.4740@.TK2MSFTNGP03.phx.gbl...
Quote:
Originally Posted by
or spans,
or position:relative
>
>
>
>
The new Yahoo IS tableless now. Its a bit complicated, but take a look at
the source of the home page - its all there.
"ThunderMusic" <NoSpAmdanlatathotmaildotcom@.NoSpAm.comwrote in message
news:%23hwVBjn4GHA.2596@.TK2MSFTNGP06.phx.gbl...
Quote:
Originally Posted by
ok, lets say I want a structure that looks like www.yahoo.com
>
a top bar (title), a left bar (navigation menu), a content pan, a right
bar(actually full of things on yahoo, but I would put publicity) and a
bottom bar (copyrights and such).
>
I tried to position everything in absolute, but, probably because I'm no
expert with css, I can't seem to make this simple structure work
correctly. Could you give me a little hint please?
>
thanks
>
ThunderMusic
>
>
"Horace Nunley" <biteme@.biteme.netwrote in message
news:e7hkKfn4GHA.4740@.TK2MSFTNGP03.phx.gbl...
Quote:
Originally Posted by
>or spans,
>or position:relative
>>
>>
>>
>>
>
>
div are block elements, so by default they go on seperate lines. to put a
div side by side must be done with a css position command. in general to use
positioning, you need to set absolute heights and widths to divs, so you can
position them correctly. often you want client script to calc offsets based
on screen size.
try;
<html>
<body>
<div
style="background-color:green;position:absolute;left:10;top:10;width :400;height:100;">
top
</div>
<div
style="background-color:red;position:absolute;left:10;top:610;width: 400;height:100;">
bottom
</div>
<div>
<div
style="background-color:blue;position:absolute;left:10;top:110;width :100;height:500;">
left
</div>
<div
style="background-color:yellow;position:absolute;left:110;top:110;wi dth:300;height:500;">
right
</div>
</body>
</html>
"ThunderMusic" <NoSpAmdanlatathotmaildotcom@.NoSpAm.comwrote in message
news:%23hwVBjn4GHA.2596@.TK2MSFTNGP06.phx.gbl...
Quote:
Originally Posted by
ok, lets say I want a structure that looks like www.yahoo.com
>
a top bar (title), a left bar (navigation menu), a content pan, a right
bar(actually full of things on yahoo, but I would put publicity) and a
bottom bar (copyrights and such).
>
I tried to position everything in absolute, but, probably because I'm no
expert with css, I can't seem to make this simple structure work
correctly. Could you give me a little hint please?
>
thanks
>
ThunderMusic
>
>
"Horace Nunley" <biteme@.biteme.netwrote in message
news:e7hkKfn4GHA.4740@.TK2MSFTNGP03.phx.gbl...
Quote:
Originally Posted by
>or spans,
>or position:relative
>>
>>
>>
>>
>
>
Hello Thunder,
There is a lot of good information on how to do tableless layouts:
http://www.google.com/search?hl=en&q=tableless+layout
http://www.w3.org/2002/03/csslayout-howto (only covers three column layout
but adding the header and the footer aren't difficult)
http://www.positioniseverything.net/piefecta-rigid.html - covers alot of the
gotcha's and has a pointer at the bottom of the page to a script which will
generate layouts for you
A couple of good books:
Bulletproof Web Design
CSS Mastery
Stylin' with CSS
Javascript + CSS + DOM Magic
(The books speak to absolute versus relative positioning as well as fluid
versus static design of pages.)
--
enjoy - brians
http://www.limbertech.com
"ThunderMusic" wrote:
Quote:
Originally Posted by
ok, lets say I want a structure that looks like www.yahoo.com
>
a top bar (title), a left bar (navigation menu), a content pan, a right
bar(actually full of things on yahoo, but I would put publicity) and a
bottom bar (copyrights and such).
>
I tried to position everything in absolute, but, probably because I'm no
expert with css, I can't seem to make this simple structure work correctly.
Could you give me a little hint please?
>
thanks
>
ThunderMusic
>
>
"Horace Nunley" <biteme@.biteme.netwrote in message
news:e7hkKfn4GHA.4740@.TK2MSFTNGP03.phx.gbl...
Quote:
Originally Posted by
or spans,
or position:relative
>
>
>
the third link seems to be exactly what I need, so I'll look at it when I
have time... ;) thanks a lot
"brians[MCSD]" <briansMCSD@.discussions.microsoft.comwrote in message
news:D92D9B26-B2E9-44D9-9E86-07139C697650@.microsoft.com...
Quote:
Originally Posted by
Hello Thunder,
>
There is a lot of good information on how to do tableless layouts:
http://www.google.com/search?hl=en&q=tableless+layout
http://www.w3.org/2002/03/csslayout-howto (only covers three column layout
but adding the header and the footer aren't difficult)
http://www.positioniseverything.net/piefecta-rigid.html - covers alot of
the
gotcha's and has a pointer at the bottom of the page to a script which
will
generate layouts for you
>
A couple of good books:
Bulletproof Web Design
CSS Mastery
Stylin' with CSS
Javascript + CSS + DOM Magic
(The books speak to absolute versus relative positioning as well as fluid
versus static design of pages.)
--
enjoy - brians
http://www.limbertech.com
>
>
"ThunderMusic" wrote:
>
Quote:
Originally Posted by
>ok, lets say I want a structure that looks like www.yahoo.com
>>
>a top bar (title), a left bar (navigation menu), a content pan, a right
>bar(actually full of things on yahoo, but I would put publicity) and a
>bottom bar (copyrights and such).
>>
>I tried to position everything in absolute, but, probably because I'm no
>expert with css, I can't seem to make this simple structure work
>correctly.
>Could you give me a little hint please?
>>
>thanks
>>
>ThunderMusic
>>
>>
>"Horace Nunley" <biteme@.biteme.netwrote in message
>news:e7hkKfn4GHA.4740@.TK2MSFTNGP03.phx.gbl...
Quote:
Originally Posted by
or spans,
or position:relative
>
>
>
>
>>
>>
>>
Subscribe to:
Posts (Atom)