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] To table or not to table, the form question
That a good solution but I think you could simplify it by this :
label
input /
Whatever your term that must appear after your input text box
/label
Where :
label {float: left; clear: none; width: 49%;}
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Kornel Lesinski
Sent: April 30, 2005 16:51
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] To table or not to table, the form question
On Sat, 30 Apr 2005 21:41:11 +0100, tee [EMAIL PROTECTED] wrote:
I need to create a complex online order form that look something like
this:
http://www.melsmarket.com/cgi-bin/orderonline.cgi
Haven't start yet but I already imagine it will be a big headache if
using CSS, especially copying with the IE, not to mention the tedious
code for the float left float right and clear both.
There you go:
divinput /label /div
div class=oddinput /label /div
div {float: left; clear: right; width: 49%;}
* html div {clear: both;}
div.odd {float: right; width: 49%;}
h3 {clear: both;}
--
regards, Kornel Lesiski
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
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] best practice?
Hello Bob, This might help you for layout positionning : http://www.bluerobot.com/ http://glish.com/css/ Hugues Brunelle Concepteur graphique // ECHO tridimension 2139 rue Masson Montral QC H2H 1A8 1-(514)5211360 [EMAIL PROTECTED] ** 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] Where should information go
Hello Tim,
I've been thinking about the subject a while ago and after consulting some
of my friends, we thought about these possibilities (because everyone has
it's own methods and thoughts) :
- H stand for headings... Then the business name would be in H1 tag (playing
with span for IR to call the logo with CSS), slogan or descriptive
statement in H2, and then H3 for text title, etc. Depending on your content
page logic. Design it with no style to see what it looks like and simply
call the headings logically in your code.
- Other way to do it is to consider Headings elements as independent tags
inside element. Let say for exemple that you have the first title of your
page, then you would use H1, for this text, you have a subtitle too, then
you use H2 and so on. In the same page, you have a form too, and inside this
form, you must put a title (lets say legend tags are taken for other
purpose). Well then, you should restart heading numbering by H1, H2, etc.
because your inside another element (form).
In css now you can design
body h1 {
/* Whatever you like */
}
body h2 {
/* Whatever you like */
}
form h1 {
/* Whatever you like */
}
...
I don't know if it sounds clear?
Normally, I use the first method but when it comes to particular websites
with tons of content and when I know I would make use of H46 if it
existed, I used the second method.
Hope it guides you and let me know of other method you could think of.
Hugues Brunelle
Concepteur graphique
//
ECHO tridimension
2139 rue Masson
Montreal QC H2H 1A8
1-(514)5211360
[EMAIL PROTECTED]
**
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] Blockquote or Q?
Hi Cole,
Blockquote for sure, and like Alan suggest, make use of
normal tags inside.
And let me give you a nice trick to insert language
specific quotemarks :
If you declare the language in your HTML tag
likehtml lang="fr-ca" ... you can define inside
your CSS what kind of quote mark to insertbefore and after
yourblockquote, so then you do not have to manually insert those quote
marks and forget about them:)
blockquote:lang(fr-ca) {
quotes: " «" " »" " " " ";
}
blockquote:before {
content: open-quote;
}
blockquote:after {
content: close-quote;
}As you can see an exemple at http://www.echo3d.com/faq/Later,Hugues BrunelleConcepteur graphique//ECHO tridimension2139 rue MassonMontréal QC H2H 1A81-(514)5211360[EMAIL PROTECTED]
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Cole Kuryakin -
x7mSent: April 19, 2005 07:41To:
wsg@webstandardsgroup.orgSubject: [WSG] Blockquote or
Q?
Hi everyone.
I'm working on a site that contains 1 boxed quote per page. By
boxed, I mean there's a red border that encloses the quote.
These aren't famouse quotes - or anything particulary special
-just quotes from people who have read the pre-release of a new
book.
So, semantically speaking, should I be using Blockquote or Q
tags?
I don't think Cite is appropriate, and I'm not sure about Q
either as I've read that Q should be used for quotations within a block of
inline text.
I'm leaning toward blockquote (stripping the indention via
css), but I wanted to throw this question out and see if anyone had a strong
opinion about this matter as it pertains to this particular
project.
Sample test page is here: http://www.x7m.us/_clients/danielik/dev/testing/index.htm
Thanks to all in advance,
Cole
RE: Re[2]: [WSG] Blockquote or Q?
You're right. And I would not call any fixes with javascript. So like everything, you can decide to use these CSS declarations or not :) Hugues -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Martin Heiden Sent: April 19, 2005 09:59 To: Hugues Brunelle Subject: Re[2]: [WSG] Blockquote or Q? Hugues, HB Blockquote for sure, and like Alan suggest, make use of normal tags inside. HB And let me give you a nice trick to insert language specific quotemarks : HB If you declare the language in your HTML tag like html lang=fr-ca HB ... you can define inside your CSS what kind of quote mark to HB insert before and after your blockquote, so then you do not have to HB manually insert those quote marks and forget about them :) What about IE? This doesn't work in IE. You could of cause do some magic trickery with JavaScript, but what about users without CSS and/or JavaScript? I would prefer your way, but I don't think that is already usable nowadays. Martin ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** 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] Awards / Endorsements for quality websites?
Hello Siggy, I know about these 2 other websites: http://www.webstandardsawards.com/ http://www.stylegala.com/ Hugues Brunelle Concepteur graphique // ECHO tridimension 2139 rue Masson Montréal QC H2H 1A8 1-(514)5211360 [EMAIL PROTECTED] ** 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] Fixed pixel fontsize - resizable font size
Hello Neerav,
You can even use em unit for your element dimensions too. So all your
layout can zoom in/out too.
The easy way I know is to define what 1em is by telling first in pixels :
html {
font-size: 10px !important; /* understood and respected by browsers
except for IE that will take the last identical attribute */
font-size: x-small; /* IE equivalent for 10px */
}
And then tell the next element to appear in your code :
body {
font-size: 1em;
}
And then, if you want a div to be 200 by 345 pixels :
div {
width: 20em;
height: 34.5em;
}
Or in case only height should be zoomable
div {
width: 200px;
height: 34.5em;
}
So now when you use text size / increase (zoom), all your element will zoom
too.
Hope it helps
Hugues Brunelle
Concepteur graphique
//
ECHO tridimension
2139 rue Masson
Montréal QC H2H 1A8
1-(514)5211360
[EMAIL PROTECTED]
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Neerav
Sent: April 14, 2005 03:21
To: WSG
Subject: [WSG] Fixed pixel fontsize - resizable font size
Hi all
Im doing a bit of pro bono work at the moment and not having ever used fixed
font sizes, was wondering if there are any percentage or em equivalents or
formulas to convert from:
FONT-SIZE: 11px;
FONT-SIZE: 22px;
FONT-SIZE: 10px;
FONT-SIZE: 14px;
FONT-SIZE: 16px;
etc
to more accessible font size units
--
Neerav Bhatt
http://www.bhatt.id.au
Need a Sydney based web standards contractor? You need my services.
Recent projects for Glassonion, Freshweb, Cogentis, Ceneka ...
http://www.bhatt.id.au/blog/ - Ramblings Thoughts
http://bookcrossing.com/referral/neerav
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
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] Fixed pixel fontsize - resizable font size
Hi Mike,
Only partially at the moment because I have no time :(
But, if you don't mind the background image problem, my actual Website is a
good exemple : http://www.echo3d.com (and if you go under portfolio, click a
project, and look at the content image. It use the same technique so you'll
be able to scale it, of course quality drops when you do but as soon as IE
support entirely PNG24 I'll be able to put good resolution pictures and
forget about quality).
My under dev page is more like it http://dev.echo3d.com/services (it's the
only page available at the moment)
Cheers,
H.
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Mike Foskett
Sent: April 14, 2005 08:29
To: wsg@webstandardsgroup.org
Subject: RE: [WSG] Fixed pixel fontsize - resizable font size
Hi Hugues,
Do you have an online version demonstrating this technique?
Mike 2k:)2
Mike Foskett
Web Standards, Accessibility Testing Consultant Multimedia Publishing
and Production British Educational Communications and Technology Agency
(Becta) Milburn Hill Road, Science Park, Coventry CV4 7JJ
Email: [EMAIL PROTECTED]
Tel: 02476 416994 Ext 3342 [Tuesday - Thursday]
Fax: 02476 411410
www.becta.org.uk
-Original Message-
From: Hugues Brunelle [mailto:[EMAIL PROTECTED]
Sent: 14 April 2005 14:48
To: wsg@webstandardsgroup.org
Subject: RE: [WSG] Fixed pixel fontsize - resizable font size
Hello Neerav,
You can even use em unit for your element dimensions too. So all your
layout can zoom in/out too. The easy way I know is to define what 1em is by
telling first in pixels :
html {
font-size: 10px !important; /* understood and respected by browsers
except for IE that will take the last identical attribute */
font-size: x-small; /* IE equivalent for 10px */
}
And then tell the next element to appear in your code :
body {
font-size: 1em;
}
And then, if you want a div to be 200 by 345 pixels :
div {
width: 20em;
height: 34.5em;
}
Or in case only height should be zoomable
div {
width: 200px;
height: 34.5em;
}
So now when you use text size / increase (zoom), all your element will zoom
too. Hope it helps
Hugues Brunelle
Concepteur graphique
//
ECHO tridimension
2139 rue Masson
Montréal QC H2H 1A8
1-(514)5211360
[EMAIL PROTECTED]
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Neerav
Sent: April 14, 2005 03:21
To: WSG
Subject: [WSG] Fixed pixel fontsize - resizable font size
Hi all
Im doing a bit of pro bono work at the moment and not having ever used fixed
font sizes, was wondering if there are any percentage or em equivalents or
formulas to convert from:
FONT-SIZE: 11px;
FONT-SIZE: 22px;
FONT-SIZE: 10px;
FONT-SIZE: 14px;
FONT-SIZE: 16px;
etc
to more accessible font size units
--
Neerav Bhatt
http://www.bhatt.id.au
Need a Sydney based web standards contractor? You need my services. Recent
projects for Glassonion, Freshweb, Cogentis, Ceneka ...
http://www.bhatt.id.au/blog/ - Ramblings Thoughts
http://bookcrossing.com/referral/neerav
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
This email and any files transmitted with it are confidential and
intended solely for the use of the individual or entity to whom they
are addressed. If you have received this email in error please notify
the system manager.
This footnote also confirms that this email message has been swept by
MIMEsweeper for the presence of computer viruses.
www.mimesweeper.com
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
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] CSS Document layout/structure
Hi Charlie,
I know what you mean, I did many redesign stuff and find out that I wasn't
able to understand my own css file (that was awful).
You can see a sample at http://www.echo3d.com/css/screen.css
It looks complex but if you pay attention, you'll see that everything is
in order.
Here is some simple rules I apply and know what? I am not lost anymore in my
CSS :)
Hugues Brunelle
Concepteur graphique
//
ECHO tridimension
2139 rue Masson
Montréal QC H2H 1A8
1-(514)5211360
[EMAIL PROTECTED]
4 simple rules :
1.0 Divide your one and only (I split CSS only for different media, not for
different part of design.) CSS structure into 3 main themes like
/* GENERIC ELEMENTS : HTML 4.01 */
/* SPECIFIC ATTRIBUTES : ID */
/* RECURRING ATTRIBUTES : CLASS */
2.0 Use alphabetic because code should not rule the way you design (think
about when you start shifting stuff on top and moving others on bottom)
/* GENERIC ELEMENTS : HTML 4.01 */
a {
}
abbr {
}
acronym {
}
/* SPECIFIC ATTRIBUTES : ID */
/* RECURRING ATTRIBUTES : CLASS */
3.0 Make good use of descendant selectors
/* GENERIC ELEMENTS : HTML 4.01 */
a {
}
abbr {
}
acronym {
}
h1 {
}
h1 em {
}
h1 em a {
}
/* SPECIFIC ATTRIBUTES : ID */
/* RECURRING ATTRIBUTES : CLASS */
4.0 Choose the appropriate terminology to keep alphabetic order logical and
respect it no matter what (avoid terms like red-text or 1em in your
class or id name)
/* GENERIC ELEMENTS : HTML 4.01 */
a {
}
abbr {
}
acronym {
}
h1 {
}
h1 em {
}
h1 em a {
}
/* SPECIFIC ATTRIBUTES : ID */
div#content {
}
div#content_body {
}
div#content_foot {
}
div#content_head {
/* RECURRING ATTRIBUTES : CLASS */
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
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] CSS Document layout/structure
Yes you're right, it it just because I'm always changing my declarations so I let them on the long formulation :) I know that soon I'll have to simplified these declarations. Hugues -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Kornel Lesinski Sent: April 7, 2005 07:33 To: wsg@webstandardsgroup.org Subject: Re: [WSG] CSS Document layout/structure On Thu, 07 Apr 2005 14:17:01 +0100, Hugues Brunelle [EMAIL PROTECTED] wrote: You can see a sample at http://www.echo3d.com/css/screen.css It looks complex but if you pay attention, Why aren't you using shorthand properties? border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0.1em; border-left-width: 0px; border-top-style: none; border-right-style: none; border-bottom-style: dotted; border-left-style: none; border-bottom-color: #781B11; equals: border: 0; border-bottom: 0.1em dotted #781B11; and you probably could just leave second rule. -- regards, Kornel Lesiski ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
