Newbie Q in CSS layout

A

Amadan

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">
<tr>
<td height="10" width="10">
<img height="10" width="10" src="icon.gif">
</td>
<td bgcolor="#F0F1F4">
Title
</td>
</tr>
<tr>
<td>
Text
</td>
</tr>
</title>

The closest I've managed to come is this:

<style><!--
..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;
}

div.item.blue {
background-color: #CFDAEB;
border: thick solid #CFDAEB;
}
div.item.blue div.title {
background-color: #F0F1F4;
}
div.item.blue div.footer {
background-color: #F0F1F4;
}
--></style>

<div class="item blue">
<div class="title">
Title
</div>
<div class="content">
Text
</div>
</div>

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
 
S

Sreve R.

Amadan wrote in message ...
Hi. I'm trying to implement something done in table style in tableless.
The original was something like this.

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 :~)
 
B

brucie

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):

a URL would be nice
 
A

Amadan

a URL would be nice

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... :)

Goran
 
B

Barry Pearson

Amadan wrote:
[snip]
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... :)

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.
http://www.barry.pearson.name/articles/layout_5_3/tableless_flexible_00.htm

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").
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top