Subject: [css-d] Can this be done with DIV instead of TABLE?

From: incoming at kubaton.com ([email-masked])
Date: Mon, 28 Apr 2003 16:42:39 -0400

Can this be done with DIV instead of TABLE?

http://riotgrrrl.com/

The "riotgrrrl.com" is going to be at the top of every page and I like
having it stretch. I've designed the rest of my site without tables but I
couldn't find a way to do this without them. Anyone know a way to do it?

_Lea

---

From: csslist at theparagon.org ({ schaapy })
Date: Mon, 28 Apr 2003 17:01:39 -0400

I would do something like:

#header {
    height: 15px;
}

#header.letters {
    float: left;
}

<div id="header">
    <div class="letters">r</div>
    <div class="letters">i</div>
    <div class="letters">o</div>
    <div class="letters">t</div>
</div>

Give each letter a transparent background - this will let you change the
color of the top bar if you so choose.

------------------------------
Aaron Schaap
www.theparagon.org

They tell me the internet never sleeps ...
... Evidently, that means I don't get to either.

> From: <[email-masked]>
> Date: Mon, 28 Apr 2003 16:42:39 -0400
> To: "'Css-D'" <[email-masked]>
> Subject: [css-d] Can this be done with DIV instead of TABLE?
> 
> ______________________________________________________________________
> css-discuss [[email-masked]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>

---

From: ckestes at bewb.org (Jason Estes)
Date: Mon, 28 Apr 2003 16:13:30 -0500

> couldn't find a way to do this without them. Anyone know a way to do it?

Here you go, I couldn't tell if it worked perfectly cause I didn't have the
images, but looks ok from what I can tell.

<!DOCTYPE HTML PUBLIC "-//W3C//Ddiv HTML 4.01 Transitional//EN">

<html>
<head>
 <title>Untitled Document</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <link href="global.css" rel="stylesheet" type="text/css">
   <style type="text/css">
    body {
    margin:0;
    padding:0;
}
   .piece {
    text-align:center;
 width:6%;
 background-image:url(images/top/background.png) repeat-x;
 float:left;
 }
   .heading2 {
    clear:both;
 }
   </style>

</head>

<body>

<div id="topbanner">
  <div class="piece"><img src="images/top/left.png" width="16" height="42"
alt="riotgrrrl.com"></div>
  <div class="piece"><img src="images/top/r.png" width="36" height="42"
alt="riotgrrrl.com"></div>
  <div class="piece"><img src="images/top/i.png" width="36" height="42"
alt="riotgrrrl.com"></div>
  <div class="piece"><img src="images/top/o.png" width="36" height="42"
alt="riotgrrrl.com"></div>
  <div class="piece"><img src="images/top/t.png" width="36" height="42"
alt="riotgrrrl.com"></div>
  <div class="piece"><img src="images/top/g.png" width="36" height="42"
alt="riotgrrrl.com"></div>
  <div class="piece"><img src="images/top/r2.png" width="36" height="42"
alt="riotgrrrl.com"></div>
  <div class="piece"><img src="images/top/r3.png" width="36" height="42"
alt="riotgrrrl.com"></div>
  <div class="piece"><img src="images/top/r4.png" width="36" height="42"
alt="riotgrrrl.com"></div>
  <div class="piece"><img src="images/top/l.png" width="36" height="42"
alt="riotgrrrl.com"></div>
  <div class="piece"><img src="images/top/dot.png" width="36" height="42"
alt="riotgrrrl.com"></div>
  <div class="piece"><img src="images/top/c.png" width="36" height="42"
alt="riotgrrrl.com"></div>
  <div class="piece"><img src="images/top/o2.png" width="36" height="42"
alt="riotgrrrl.com"></div>
  <div class="piece"><img src="images/top/m.png" width="36" height="42"
alt="riotgrrrl.com"></div>
  <div class="piece"><img src="images/top/right.png" width="16" height="42"
alt="riotgrrrl.com"></div>
</div>

<p class="heading2">New &amp; Improved Coming Soon</p>

</body>

</html>

Jason Estes
The BEWB
www.bewb.org

---

From: ckestes at bewb.org (Jason Estes)
Date: Mon, 28 Apr 2003 16:26:14 -0500

>     <div class="letters">t</div>

The only problem with this is that you didn't explicitly set the width of
the letters, which is required for floats.  That is until CSS 2.1 is
finalized.  If you use this without explicit declaration of width it will
break in IE 5.x on the mac, most other browsers will display it
appropriately..

Jason Estes
The BEWB
www.bewb.org

---

From: steve at mrclay.org (Steve Clay)
Date: Mon, 28 Apr 2003 19:20:41 -0400

Monday, April 28, 2003, 4:42:39 PM, [email-masked] wrote:
ikc> Can this be done with DIV instead of TABLE?
ikc> http://riotgrrrl.com/

Fun stuff.  http://mrclay.org/secret/riot/
This uses all spans and background-images, so no messy imgs or block
containers in markup.  A min-width prevents wrap.

Moz/Opera7: works great.
IE6: fine, but right piece is missing.
Others: shudder to imagine.

Since this is all basically presentational markup, I'd make an
average-sized img and put it in a noscript element, then
document.write in all this markup from an external .js file.  At least
you'll have cleaner documents and the mess cached.

Or you might experiment with an img stretched horizontally with CSS,
it might not look as tight, but would be much cleaner and possibly
more reliable:

<img (left piece) /><img style="width:80%" ... /><img (right piece) />

Steve
-- 
http://mrclay.org

---

From: css-discuss at alex.cloudband.com (Alex Robinson)
Date: Tue, 29 Apr 2003 00:36:12 +0100

>Fun stuff.  http://mrclay.org/secret/riot/

Wow, looks like everyone's stepped up to the bat on this one - mine's not a
million miles from Steve's though I think mine is just that bit sleeker.
However, what with the embarrassment of riches now on display, I can't be
bothered to finish it but I think the proof of concept is there.

<http://www.fu2k.org/alex/css/cssjunk/Riotgirl.mhtml>

Of course, I'd junk the images as text and just justify the text but that's
just me...