Re: [WSG] tables to standards problem...
akella wrote:
http://www.champion.com.ua/ or here http://pravda.com.ua/
The problem is: How to implement it with CSS so that text will not be
under the image. The obvious img{float:left} is not good - client
dont want the text to be displayed under the image.
This solution imitates parts of a table-layout:
div class=container
img ... style=float: left; /* or float: right; */ /
div style=display: table; _height: 0 /* for IE-win */;
h3some heading/h3
psome text/p
pmaybe some more text.../p
/div
/div
Does work in Opera 8, Firefox 1.0, Safari 1.2.4 IE/win. Not sure about
IE/Mac.
regards
Georg
--
http://www.gunlaug.no
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] tables to standards problem...
Hi Akella,
For articles, I
would suggest something like :
http://www.echo3d.com/lab/akella.html
Regards,
Hugues
Brunelle
Concepteur graphique, multimédia et
Web
---
Coopérative de travail en multimédia
ECHO tridimension
2139, rue Masson
Montréal (Québec) H2H
1A8
Canada
+1 514 521-1360
[EMAIL PROTECTED]
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of
akellaSent: July 1, 2005 09:03To:
wsg@webstandardsgroup.orgSubject: [WSG] tables to standards
problem...
Hi,on this site http://www.champion.com.ua/ or here http://pravda.com.ua/in main column you can
see a lot of news boxesi mean image+heading+paragraph of textIt is
implemented as a table.image is first cell and text is second. The
problem is:How to implement it with CSS so that text will not be under the
image.The obvious img{float:left} is not good - client dont want the text to
be displayed under the image.If all images ware the same size - it would be
simple - just add margin to p, but its not like that... :(And i hate
creating classes like that: .img110px .img180px .So how can i
implement this table-like thing?Can it be done with "standards"? i mean
without non-semantic-table.I cant find the wayAny
ideas?-- glhf,akella.
Re: [WSG] tables to standards problem...
Hugues Brunelle
,
Tnx, but it only works if i know maximum height of so called newsbox.
But 10x anyway
Gunlaug Sørtun,
its just some kind of magic, but it works!
Tnx tnx tnx! :)
thats the way im going to implement it...
On 7/1/05, Hugues Brunelle [EMAIL PROTECTED] wrote:
Hi Akella,
For articles, I
would suggest something like :
http://www.echo3d.com/lab/akella.html
Regards,
Hugues
Brunelle
Concepteur graphique, multimédia et
Web
---
Coopérative de travail en multimédia
ECHO tridimension
2139, rue Masson
Montréal (Québec) H2H
1A8
Canada
+1 514 521-1360
[EMAIL PROTECTED]
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED]] On Behalf Of
akellaSent: July 1, 2005 09:03To:
wsg@webstandardsgroup.orgSubject: [WSG] tables to standards
problem...
Hi,on this site http://www.champion.com.ua/ or here
http://pravda.com.ua/in main column you can
see a lot of news boxesi mean image+heading+paragraph of textIt is
implemented as a table.image is first cell and text is second. The
problem is:How to implement it with CSS so that text will not be under the
image.The obvious img{float:left} is not good - client dont want the text to
be displayed under the image.If all images ware the same size - it would be
simple - just add margin to p, but its not like that... :(And i hate
creating classes like that: .img110px .img180px .So how can i
implement this table-like thing?Can it be done with standards? i mean
without non-semantic-table.I cant find the wayAny
ideas?-- glhf,akella.
-- glhf,akella.
Re: [WSG] tables to standards problem...
Sorry,Hugues Brunelle
i didnt understood your hint clearly
now im even in doubt which way is better.
Great tnx too!
On 7/1/05, akella [EMAIL PROTECTED] wrote:
Hugues Brunelle
,
Tnx, but it only works if i know maximum height of so called newsbox.
But 10x anyway
Gunlaug Sørtun,
its just some kind of magic, but it works!
Tnx tnx tnx! :)
thats the way im going to implement it...
On 7/1/05, Hugues Brunelle [EMAIL PROTECTED]
wrote:
Hi Akella,
For articles, I
would suggest something like :
http://www.echo3d.com/lab/akella.html
Regards,
Hugues
Brunelle
Concepteur graphique, multimédia et
Web
---
Coopérative de travail en multimédia
ECHO tridimension
2139, rue Masson
Montréal (Québec) H2H
1A8
Canada
+1 514 521-1360
[EMAIL PROTECTED]
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED]] On Behalf Of
akellaSent: July 1, 2005 09:03To:
wsg@webstandardsgroup.orgSubject: [WSG] tables to standards
problem...
Hi,on this site http://www.champion.com.ua/ or here
http://pravda.com.ua/in main column you can
see a lot of news boxesi mean image+heading+paragraph of textIt is
implemented as a table.image is first cell and text is second. The
problem is:How to implement it with CSS so that text will not be under the
image.The obvious img{float:left} is not good - client dont want the text to
be displayed under the image.If all images ware the same size - it would be
simple - just add margin to p, but its not like that... :(And i hate
creating classes like that: .img110px .img180px .So how can i
implement this table-like thing?Can it be done with standards? i mean
without non-semantic-table.I cant find the wayAny
ideas?-- glhf,akella.
-- glhf,akella.
-- glhf,akella.
RE: [WSG] tables to standards problem...
You might try using a definition list.
You can float the different elements, the
image in a dd floated to the right, the headline in a dt, the text in a dd are
floated to the right, give the dl a border, background, margin, etc.
A variation can be seen here: http://www.csatravelprotection.com/csa-executives-insurance.do
The executive bio images and titles are
sitting in a dl.
Ted
From:
[EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of akella
Sent: Friday, July 01, 2005 7:48
AM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] tables to
standards problem...
Sorry,Hugues Brunelle
i didnt understood your hint clearly
now im even in doubt which way is better.
Great tnx too!
On 7/1/05, akella
[EMAIL PROTECTED] wrote:
Hugues Brunelle ,
Tnx, but it
only works if i know maximum height of so called newsbox.
But 10x anyway
Gunlaug Sørtun,
its just some kind of magic, but it works!
Tnx tnx tnx! :)
thats the way im going to implement it...
On 7/1/05, Hugues
Brunelle [EMAIL PROTECTED]
wrote:
Hi Akella,
For articles, I would
suggest something like :
http://www.echo3d.com/lab/akella.html
Regards,
Hugues Brunelle
Concepteur graphique,
multimédia et Web
---
Coopérative de travail
en multimédia ECHO tridimension
2139, rue Masson
Montréal
(Québec) H2H 1A8
Canada
+1 514 521-1360
[EMAIL PROTECTED]
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED]]
On Behalf Of akella
Sent: July 1, 2005 09:03
To: wsg@webstandardsgroup.org
Subject: [WSG] tables to standards
problem...
Hi,
on this site http://www.champion.com.ua/
or here http://pravda.com.ua/
in main column you can see a lot of news boxes
i mean image+heading+paragraph of text
It is implemented as a table.
image is first cell and text is second.
The problem is:
How to implement it with CSS so that text will not be under the image.
The obvious img{float:left} is not good - client dont want the text to be
displayed under the image.
If all images ware the same size - it would be simple - just add margin
to p, but its not like that... :(
And i hate creating classes like that: .img110px .img180px .
So how can i implement this table-like thing?
Can it be done with standards? i mean without non-semantic-table.
I cant find the way
Any ideas?
--
glhf,
akella.
--
glhf,
akella.
--
glhf,
akella.
Re: [WSG] tables to standards problem...
tnx Ted
now the last problem is: additional DIV or creating DL.
The first thing i consider a sin.
But what do u think about semantics of the second? Dont u think H2 is better for the headline of the article?
And what about SEO? i think h2 has more weight than dt dt strong? or im wrong?
now the markup is as simple as it can be:
a href=#img src
=./i/trio.jpg alt=trio //
ah2a href=#headline/
a/h2ptext/p
Just thinking how to minimize markup and make SEO-manager happy.
i see that wrapper for the H2 and P is inavitable.
is it?
You might try using a definition list.
You can float the different elements, the
image in a dd floated to the right, the headline in a dt, the text in a dd are
floated to the right, give the dl a border, background, margin, etc.
A variation can be seen here:
http://www.csatravelprotection.com/csa-executives-insurance.do
The executive bio images and titles are
sitting in a dl.
Ted
From:
[EMAIL PROTECTED] [mailto:
[EMAIL PROTECTED]] On Behalf Of akella
Sent: Friday, July 01, 2005 7:48
AM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] tables to
standards problem...
Sorry,Hugues Brunelle
i didnt understood your hint clearly
now im even in doubt which way is better.
Great tnx too!
On 7/1/05, akella
[EMAIL PROTECTED] wrote:
Hugues Brunelle
,
Tnx, but it
only works if i know maximum height of so called newsbox.
But 10x anyway
Gunlaug Sørtun,
its just some kind of magic, but it works!
Tnx tnx tnx! :)
thats the way im going to implement it...
On 7/1/05, Hugues
Brunelle [EMAIL PROTECTED]
wrote:
Hi Akella,
For articles, I would
suggest something like :
http://www.echo3d.com/lab/akella.html
Regards,
Hugues Brunelle
Concepteur graphique,
multimédia et Web
---
Coopérative de travail
en multimédia ECHO tridimension
2139, rue Masson
Montréal
(Québec) H2H 1A8
Canada
+1 514 521-1360
[EMAIL PROTECTED]
From:
[EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED]]
On Behalf Of akella
Sent: July 1, 2005 09:03
To: wsg@webstandardsgroup.org
Subject: [WSG] tables to standards
problem...
Hi,
on this site http://www.champion.com.ua/
or here http://pravda.com.ua/
in main column you can see a lot of news boxes
i mean image+heading+paragraph of text
It is implemented as a table.
image is first cell and text is second.
The problem is:
How to implement it with CSS so that text will not be under the image.
The obvious img{float:left} is not good - client dont want the text to be
displayed under the image.
If all images ware the same size - it would be simple - just add margin
to p, but its not like that... :(
And i hate creating classes like that: .img110px .img180px .
So how can i implement this table-like thing?
Can it be done with standards? i mean without non-semantic-table.
I cant find the way
Any ideas?
--
glhf,
akella.
--
glhf,
akella.
--
glhf,
akella.
-- glhf,akella.
RE: [WSG] tables to standards problem...
I think you could wrap the elements in a
div and it would still be semantic. This is a chunk of information and yes, an
h2 would have more seo power. However, for semantic reasons, I would tend to
use an h3 and save the h2 as the summary of the maincontent section and the h3
as the summary of the news article.
This is a case of which you feel more
comfortable with. I tend to get giddy with the definition lists.
Ted
From:
[EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of akella
Sent: Friday, July 01, 2005 8:49
AM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] tables to
standards problem...
tnx Ted
now the last problem is: additional DIV or creating DL.
The first thing i consider a sin.
But what do u think about semantics of the second? Dont u think H2 is better
for the headline of the article?
And what about SEO? i think h2 has more weight than dt dt strong? or im wrong?
now the markup is as simple as it can be:
a href=#img src=./i/trio.jpg alt=trio //a
h2a href=#headline/a/h2
ptext/p
Just thinking how to minimize markup and make
SEO-manager happy.
i see that wrapper for the H2 and P is inavitable.
is it?
You might try using a definition list.
You can float the different elements, the image in a dd
floated to the right, the headline in a dt, the text in a dd are floated to the
right, give the dl a border, background, margin, etc.
A variation can be seen here: http://www.csatravelprotection.com/csa-executives-insurance.do
The executive bio images and titles are sitting in a dl.
Ted
From: [EMAIL PROTECTED]
[mailto:
[EMAIL PROTECTED]] On Behalf
Of akella
Sent: Friday, July 01, 2005 7:48
AM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] tables to
standards problem...
Sorry,Hugues
Brunelle
i didnt understood your hint clearly
now im even in doubt which way is better.
Great tnx too!
On
7/1/05, akella [EMAIL PROTECTED]
wrote:
Hugues Brunelle ,
Tnx, but it only works
if i know maximum height of so called newsbox.
But 10x anyway
Gunlaug Sørtun,
its just some kind of magic, but it works!
Tnx tnx tnx! :)
thats the way im going to implement it...
On
7/1/05, Hugues Brunelle [EMAIL PROTECTED]
wrote:
Hi Akella,
For articles, I would suggest something like
:
http://www.echo3d.com/lab/akella.html
Regards,
Hugues Brunelle
Concepteur graphique, multimédia et Web
---
Coopérative de travail en multimédia ECHO
tridimension
2139, rue Masson
Montréal (Québec) H2H 1A8
Canada
+1 514 521-1360
[EMAIL PROTECTED]
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED]]
On Behalf Of akella
Sent: July 1, 2005 09:03
To: wsg@webstandardsgroup.org
Subject: [WSG] tables to standards
problem...
Hi,
on this site http://www.champion.com.ua/
or here http://pravda.com.ua/
in main column you can see a lot of news boxes
i mean image+heading+paragraph of text
It is implemented as a table.
image is first cell and text is second.
The problem is:
How to implement it with CSS so that text will not be under the image.
The obvious img{float:left} is not good - client dont want the text to be
displayed under the image.
If all
images ware the same size - it would be simple - just add margin to p,
but its not like that... :(
And i hate creating classes like that: .img110px .img180px .
So how can i implement this table-like thing?
Can it be done with standards? i mean without non-semantic-table.
I cant find the way
Any ideas?
--
glhf,
akella.
--
glhf,
akella.
--
glhf,
akella.
--
glhf,
akella.
