Newbie Q in CSS layout

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
Hi. I'm trying to implement something done in table style in tableless.
The original was something like this (actually, uglier; this is just the
skeleton of the original design):

<table bgcolor="#CFDAEB">
    <td height="10" width="10">
      <img height="10" width="10" src="icon.gif">
    <td bgcolor="#F0F1F4">

The closest I've managed to come is this:

.item {
  font-size: smaller;
  font-family: "trebuchet ms", verdana, arial, helvetica, sans-serif;
  margin: 10px 0;
.item .title {
  padding: 2px;
  font-size: larger;
  font-weight: bold;
  vertical-align: bottom;
.item .footer {
  padding: 1px 2px;
  font-size: smaller;
  font-family: verdana, arial, helvetica, sans-serif;
  text-align: right;
.item .content {
  padding: 2px;
} {
  background-color: #CFDAEB;
  border: thick solid #CFDAEB;
} div.title {
  background-color: #F0F1F4;
} div.footer {
  background-color: #F0F1F4;

<div class="item blue">
  <div class="title">
  <div class="content">

My problem is that I do not know how to position the icon. If I just put
the IMG tag in front of the title DIV, the title goes into the next
line; if I put float: left on the IMG, it covers the title; if I float
both of them, the title is not full-width any more.

Any hint would be appreciated.

Goran Topic

Re: Newbie Q in CSS layout

Amadan wrote in message ...
Quoted text here. Click to load it

I can't answer your question, but it would have been so *simple* with tables,
and they work just as effectively as CSS despite lots of folk saying "Oh but
you *must* do that in CSS".

Steve  :~)

Re: Newbie Q in CSS layout

Amadan said:

Quoted text here. Click to load it

a URL would be nice

09/December/2003 09:48:00 am kilo

Re: Newbie Q in CSS layout

Quoted text here. Click to load it

Sorry, no URL yet - everything's still on my HD. That was the output
from our designer, who designed, and it looks cool, but she did it in
Dreamweaver, and did it with nested tables, and... I abhor such code, so
I went to try to rewrite it nicely.

And to answer another question, it *would* have been easier with tables,
but I would really like to learn something. Tables I know (and hate with
passion, after having to browse through the code I receive - we use a
templating engine, so that all the code I receive from the designer I
have to rewrite anyway). CSS looks like a very clean tool - I would love
to be able to change the layout and design without having to dig through
four nested table levels, as it is the case now. That's not happening
any time soon, but one step at a time, maybe... :)


Re: Newbie Q in CSS layout

Amadan wrote:
Quoted text here. Click to load it

Learing something new is good. But it sounds as though your experience with
nested tables may be pushing you to an extreme. Not all use of tables for
layout involves such a level of nesting!

I've been comparing table-layout, tableless-layout, and hybrid methods.

I've come to the conclusion that much of what has been said (both ways!) in
this "holy war" doesn't stand up to scrutiny. One thing I've discovered (the
hard way) is that, in order to be able to layout your page using tableless
methods, you typically still have to put in mark-up specifically for the
layout you have chosen. If you want a 3-column display, it is likely to show
in the mark-up as well as the CSS, and if you want to change it to some other
layout, you would have to change the mark-up as well as the CSS. You typically
have to change some of the content too, such as images & forms.

The most disappointing thing I've found is that what I think is the most
important advantage over tables that CSS positioning should give, the use of
floating so that boxes can slide under one-another, has such variable
browser-support that I still haven't found the "ideal" 5-box 3-column
tableless-layout method. And if you can't float the boxes under one-another,
you might as well use simple tables.

(But I'm still experimenting. I've been trying lots of stuff found on the web.
Perhaps the next tableless-method I try will be "the one").

Barry Pearson / / /

Site Timeline