homepage Welcome to WebmasterWorld Guest from 54.166.148.189
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
What is the most cross-browser method of creating a specific layout?
A layout with left de kind of Data and right the data
12inch




msg:1188753
 1:57 pm on May 8, 2003 (gmt 0)

Does anybody know a way to create a cross-browser method of creating a layout like this:

Titel: a titel
Artist: an artist
Release Date: a release date

This layout comes next to an image on the rightside.
And I want to give the left-side of the layout (titel, artist, release date) a fixed width, so that it alignes out.

I have tried it with lists en floats, but it doesn't seem to work. I think the best way is to do it with floats.

Does anyone know a good way for this?

 

Birdman




msg:1188754
 2:06 pm on May 8, 2003 (gmt 0)

I think cross-browser wise, tables are the safest solution but I have stopped using them for layout long ago.

This is what I'd do.

<img style="float: right;" />
<div style="width: 50%;">
<ul>
<li>Titel: a titel</li>
<li>Artist: an artist</li>
<li>Release Date: a release date</li>
</ul>
</div>

<div style="clear: both;">&nbsp;</div>

Then repeat.

12inch




msg:1188755
 2:31 pm on May 8, 2003 (gmt 0)

Hi Birdman, thanks for the reply. I think this will work, only the important part for me is that the leftside gets a fixed width of e.g. 100px. I can't get that part to work.

It doesn't seem to listen when I say width: 100px;
When I make it an inline or a block-level element, the browser won't listen. Strange enough, only IE5/Win listens.

12inch




msg:1188756
 2:55 pm on May 8, 2003 (gmt 0)

This is my CSS code now:
div.productinfo {
margin: 0px;
padding: 0px;
border: 1px dashed #000;
background-color: #666;
}

div.rowproductinfo {
display: block;
margin-bottom: 15px;
}

div.productinfo span.left {
background-color: #f00;
margin: 0px;
padding: 0px;
width: 100px;
text-transform: uppercase;
}

div.productinfo span.right {
background-color: #00f;
font-weight: bold;
}

And this is my HTML code now:

<div class="productinfo">
<div class="rowproductinfo">
<span class="left">titel</span>
<span class="right">EXAMPLE TITLE</span>
</div>
<div class="rowproductinfo">
<span class="left">artiest</span>
<span class="right">Various Artists</span>
</div>
</div>

BUT, the span.left just doesn't want to be 100px wide.

WibbleWobble




msg:1188757
 3:05 pm on May 8, 2003 (gmt 0)

Adding float: left to span.left fixes the width issue, though I expect it'll break something else. Display: block does the same, but it knocks the right span down a line, for obvious reasons (because its suddenly a block level element rather than an inline one).

I've only actually tested the two things above, very briefly.

12inch




msg:1188758
 3:15 pm on May 8, 2003 (gmt 0)

Yes indeed WibbleWobble, that solved the problem.
Thanx!

Birdman




msg:1188759
 3:16 pm on May 8, 2003 (gmt 0)

This should work but I don't have time to test it:


<img style="float: right;" />
<div style="width: 50%;">
<ul>
<li><span style="width: 100px;">Titel:</span> a titel</li>
<li><span style="width: 100px;">Artist:</span> an artist</li>
<li><span style="width: 100px;">Release Date:</span> a release date</li>
</ul>
</div>

<div style="clear: both;">&nbsp;</div>


WibbleWobble




msg:1188760
 3:32 pm on May 8, 2003 (gmt 0)

Why put the image outside the div? If its all clustered together, it makes sense [markup logic] to nest it within. It should still float correctly?

Birdman




msg:1188761
 3:42 pm on May 8, 2003 (gmt 0)

Correct you are. I still think that it's cleaner than what 12inch is using now. Like I said, I didn't test it either but it looks kosher. But yes, do put the image inside the div.

drbrain




msg:1188762
 3:43 pm on May 8, 2003 (gmt 0)

I would do:


<table summary="Something here like song information">
<tr><th>Title<td>the title
<tr><th>Artist<td>the artist
<tr><th>Release Date<td>release date
</table>

12inch




msg:1188763
 7:54 am on May 9, 2003 (gmt 0)

I thought it worked, but unfortunately it doesn't. Afcourse it works in Mozilla and Opera and almost in IE6. But not in IE5.

My CSS code is as follows:
div.productinfo {
margin: 0px;
padding: 0px;
border: 1px dashed #000;
background-color: #666;
}

div.rowproductinfo {
margin-bottom: 25px;
}

div.rowproductinfo span.left {
margin: 0px;
padding: 0px;
float: left;
background-color: #f00;
width: 100px;
text-transform: uppercase;
}

div.rowproductinfo span.right {
float: left;
background-color: #fff;
}

And my html code is:
<div class="rowproductinfo">
<span class="left">titel</span>
<span class="right">TEST TITLE</span>
</div>

<div class="rowproductinfo">
<span class="left">artiest</span>
<span class="right">TEST ARTIST</span>
</div>

<div class="rowproductinfo">
<span class="left">release datum</span>
<span class="right">TEST RELEASE DATE</span>
</div>

In Mozilla and Opera the widths are all correct 100px, and the div.rowproductinfo are all below each other. Only in IE6 it puts 2 below each other but the rest of the div.productinfo's it ignores it. And in IE5 it doesn't at all.

Does anyone know how to fix this in IE?

WibbleWobble




msg:1188764
 8:54 am on May 9, 2003 (gmt 0)

Remove the bottom margin from rowproductinfo and use <br /> tags to place them below eachother ;)

(With the bottom margin, in IE6, the release date seems to have a gap caused by the bottom margin of the artist's rowproductinfo. But the artist one doesn't have the same gap.)

HTH.

12inch




msg:1188765
 9:06 am on May 9, 2003 (gmt 0)

Yes, you are right.
Now that is solved, thanx, I have one last problem (i hope).

I used a containerDIV called div.productinfo. At the beginning and the end of this containerDIV I used a spacerDIV.

<div class="productinfo">
<div class="spacer"></div>

-----
content
-----

<div class="spacer"></div>
</div>

In the spacerDIV is the code: clear: both;.
This is so that the div.productinfo contains the floatingDIVS. This is a hack, but now I need a hack for a hack?

Only in IE5 and IE6/Win there is a gap on the top and the bottom. Afcourse in Mozilla and Opera it is all correct.

12inch




msg:1188766
 2:55 pm on May 9, 2003 (gmt 0)

The problem is solved.

I removed the spacerDIV's. They weren't necessary.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved