3 replies [Last post]
RavenStrider
RavenStrider's picture
Offline
newbie
QC, Philippines
Last seen: 19 years 1 week ago
QC, Philippines
Timezone: GMT+8
Joined: 2003-11-26
Posts: 1
Points: 0

Hullo, everyone!

URL:
http://inner-circle.obsolence.com/entries-test.html

Problem: Nested Floats Inside Absolute DIVs
* the page doesn't render as how I would like it to be
* in an attempt to write semantically correct XHTML markup, ULs and LIs were used, however, it wasn't rendered as expected

History:
I was able to pull this technique through before. Look at this URL:
http://ekmisao.obsolence.com
* this follows the same concept yet this markup is more simple (less nesting of DIVs)
* this page has 4 skins, each skin is a separate CSS
* no nesting of floats inside absolute DIVs

Target Layout / Objective:
I wanted to achieve this layout:
http://inner-circle.obsolence.com/helix.gif
* the list for each image will appear below it

Plead: Not guilty! (hehe) Seriously, can anybody help me? ^_~.

I've been trying all techniques I could think of to remedy the layout.

Many thanks,

RavenStrider

P.S.
I would highly appreciate if somebody out there who could help would try to get in touch with me thru IMs. I have YM, MSN and AIM.

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 19 years 2 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Nested Floats Inside Absolute DIVs

Ok

Think I can see your problem

Before I get into this - maybe someone could tell me why people are doing this

<h1 class="explorer"><span>Explorer</span></h1>

When this is correct (or so I thought) and takes less time

<h1 class="explorer">Explorer</h1>

The span achieves nothing as the heading is already spanned by the heading tags. If there is a difference please advise.

You have 2 problems

1) the floats are breaking outside of the containing block - IE bug - But you do not need to float them anyway. Get rid of the floats and it will work.

h1.composer { float: left; width: 150px; height: 47px; 
              background: url("composer.gif") no-repeat;}

Should Be

h1.composer { width: 150px; height: 47px; 
              background: url("composer.gif") no-repeat;}
 etc......

2) You lists are too big for the block, and therefore break down below the original line and push the next list item further out.

Use this instead

ul li { padding-left: 0px; margin-left: 0px; 
        list-style-type: square; 
        font-family: Arial; color: #000000; font-size: 12px; }

By the way do not use PT instead of px for sizes (ie font-size: 12pt is wrong)

Now that should work, but it does not really reflect what was in your image. I think you left out the lists in your image.

You may also need to fiddle with the padding top and bottom.

Regards
Day

The only way to learn is to do it yourself

navid
Offline
newbie
Last seen: 18 years 49 weeks ago
Joined: 2003-12-19
Posts: 2
Points: 0

Nested Floats Inside Absolute DIVs

Daybreak_0 wrote:
By the way do not use PT instead of px for sizes (ie font-size: 12pt is wrong)

What? Why is 12pt wrong? I use them and validate XHTML 1.0 Strict. Should I no be using them?? Please inform.

Thanks and sorry to hi-jack, but it appears everything is in order.

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 6 years 43 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Nested Floats Inside Absolute DIVs

12pt is a valid font size - I think Daybreak will have a reason for prefering to use pixels instead!

Quote:
<h1 class="explorer"><span>Explorer</span></h1>
When this is correct (or so I thought) and takes less time
<h1 class="explorer">Explorer</h1>

No idea.

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.