473,405 Members | 2,160 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,405 software developers and data experts.

Tableless layout. Is it always divs with position:absolute?

Hi,
I think the subject says it all...

thanks

ThunderMusic
Sep 27 '06 #1
6 2858
or spans,
or position:relative


Sep 27 '06 #2
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" <bi****@biteme.netwrote in message
news:e7**************@TK2MSFTNGP03.phx.gbl...
or spans,
or position:relative


Sep 27 '06 #3
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" <No*************************@NoSpAm.comwrote in message
news:%2****************@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" <bi****@biteme.netwrote in message
news:e7**************@TK2MSFTNGP03.phx.gbl...
>or spans,
or position:relative



Sep 27 '06 #4
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" <No*************************@NoSpAm.comwrote in message
news:%2****************@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" <bi****@biteme.netwrote in message
news:e7**************@TK2MSFTNGP03.phx.gbl...
>or spans,
or position:relative



Sep 27 '06 #5
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" <bi****@biteme.netwrote in message
news:e7**************@TK2MSFTNGP03.phx.gbl...
or spans,
or position:relative




Sep 27 '06 #6
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]" <br********@discussions.microsoft.comwrote in message
news:D9**********************************@microsof t.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:
>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" <bi****@biteme.netwrote in message
news:e7**************@TK2MSFTNGP03.phx.gbl...
or spans,
or position:relative




Sep 28 '06 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
by: Mike | last post by:
I've been working on a pop-up menu, one of those where you mouse over a button and a submenu pops up. Because the client wanted the menu centered, I gave the starting point of the submenu an...
6
by: Harald Kirsch | last post by:
In the W3C document about CSS2, I read at http://www.w3.org/TR/REC-CSS2/visuren.html#choose-position the following: absolute The box's position (and possibly size) is specified with the...
4
by: Peter Pfannenschmid | last post by:
Hello experts, I would be very grateful if you would have a look at the following URL: http://www.omeganet.de/test.html The html file and the associated style have been validated...
4
by: KiwiBrian | last post by:
What would be the behaviour and characteristics of a div that was both positioned absolute, and floated? Are they contradictory or complementary regarding how the div is perceived by other...
6
by: alex | last post by:
I'm playing around with css popups a la http://www.meyerweb.com/eric/css/edge/popups/demo.html for here: http://www.redbrick.dcu.ie/~alex/golf/courseinfo.html (css)...
2
by: Laphan | last post by:
Hi All I have developed a site whereby it uses the contents of a folder (incs gifs, jpgs and css files) to display the web 'skin' of the site. This is OK, but each button on the site is an...
0
by: Pablito | last post by:
Hi at all, I have a little problem about position:absolute. I want to position absolutely a menu bar. if I write: menubar {position: absolute;top:5.2em;} with MSIE the menu bar is too height on...
6
by: Rob R. Ainscough | last post by:
Ok, I gotta say I now believe in Voodoo & Magic after working with VS 2005 developing web pages. I have a standard ASPX web page, the only two controls on the page are a Label Control...
6
by: Markus | last post by:
Hello I have a navigation structured as follows: <ul> <li> <a>Chapter1</a> <ul> <li><a>Chapter 1.1</a></li> <li><a>Chapter 1.2</a></li>
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.