[WSG] Re: WSG Digest
Could just make a CSS table, this is sort of what it could look like:
div class=table
div class=row
div class=col1 colcontent/div
div class=col2 colcontent/div
div class=col3 colcontent/div
div class=col4 colcontent/div
/div
div class=row
div class=col1 colcontent/div
div class=col2 colcontent/div
div class=col3 colcontent/div
div class=col4 colcontent/div
/div
div class=row
div class=col1 colcontent/div
div class=col2 colcontent/div
div class=col3 colcontent/div
div class=col4 colcontent/div
/div
/div
style
.table{
width:960px;
overflow:hidden;
margin:0 auto;
}
.row{
display:block;
}
.col{
padding:5px;
width:240px;
display:inline-block;
}
/style
Regards,
Dale
Dale Hurley
http://createmy.com.au
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
[WSG] Re: WSG Digest
Hi Marvin
Good to see you have an interest in web design. This is a great industry
with a lot of friendly competitors.
The JavaScript:
At the end of each line you need to have semi-colon ;
Why the three changes to the same element in one call?
b1 element does not exist
The layout needs work you can find a good tutorial on building a layout
from scratch @
http://net.tutsplus.com/tutorials/design-tutorials/design-and-code-a-slick-website-from-scratch-%E2%80%93-part-i/
Using the principles in this guide should help you for a much more slicker
looking site.
Other notes:
You need to make your elements semantic i.e. put the prices in span tags
e.g. span class=price$3.99/span and address in
address/address tags
When you use tables you need to have a heading row which describes the
column content. This helps with accessibility
The Bananas in the navigation should be in the CSS as they are layout
and not content. Try the CSS below
#nav a{
display:block;
height: 60px;
background:url('../images/fruit_banana.jpg') no-repeat;
vertical-align:bottom;
}
Your site is not Valid XHTML as it states in the bottom right hand
corner
Joe's Fruit's address is Anytown
Contrast really bad, red on dark green when you mouse over a link is not
a good idea
On the staff page you have some wonderful imagery of fruit these should
be incorporated into the front page
The Mango image is missing
To get you started try this CSS instead (example @
http://createmy.com.au/temp/CropperCapture%5B18%5D.jpg). It is very basic,
once you make your XHTML more semantic you can do a lot more.
@import http://meyerweb.com/eric/tools/css/reset/reset.css;;
body{
background:#ff
url(http://www.sxc.hu/pic/m/t/th/thea0211/1197407__2.jpg;);
font-size:14px;
font-family:arial;
}
#content{
background:#ff;
width:960px;
margin:0 auto;
padding:20px;
overflow:hidden;
}
#nav1{
position:absolute;
top: 70px;
}
#nav p{
display:inline;
}
#nav img{
display:none;
}
#nav{
background:#ff;
margin:0 auto;
width:960px;
}
h1{
background:#ff;
margin:0 auto;
width:960px;
font-size:1.6em;
height:3em;
display:block;
padding:20px;
}
h2{
font-size:1.5em;
}
#content table{
width:660px;
float:left;
border-right:1px #e1e1e1;
margin-right:20px;
}
#content img{
float:right;
}
hr{
display:none;
}
Regards,
Dale
Dale Hurley
http://createmy.com.au
From: wsg@webstandardsgroup.org
To: wsg@webstandardsgroup.org
Date: 22/09/2009 05:00 AM
Subject:WSG Digest
*
WEB STANDARDS GROUP MAIL LIST DIGEST
*
From: Ted Drake tdr...@yahoo-inc.com
Date: Mon, 21 Sep 2009 11:50:21 -0700
Subject: RE: [WSG] my latest version of my page
Use semantic markup. The nav should be a list, not a stack of
paragraphs.
Ted
-Original Message-
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org]
On Behalf Of Dave Westell
Sent: Saturday, September 19, 2009 8:37 AM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] my latest version of my page
Hi Marvin,
OK I now see you are using mouseover () mouseOut() effects...
Your .js script is missing .
http://www.alacorncomputer.com/javascript/fruit.js
Also your page does not validate, you have one too many closing divides
/div after #nav1
Dave...
- Original Message -
From: Marvin Hunkin startrekc...@gmail.com
To: wsg@webstandardsgroup.org
Sent: Saturday, September 19, 2009 7:51 AM
Subject
[WSG] Re: WSG Digest
style
#main{
width:60%;
float:right;
background-color:#FAA;
}
#sidebar{
width:200px;
background-color:#AA;
}
/style
body
div id=wrapper
div id=mainMain/div
div id=sidebarSide/div
/div
/body
Regards,
Dale
Dale Hurley
Consultant
CreateMy.com.au
Sydney Associate Network Representative
Internet email :
d...@createmy.com.au
Mobile : +61 434 735 167
http://www.linkedin.com/in/dalehurley
http://www.twitter.com/dalehurley
From: wsg@webstandardsgroup.org
To: wsg@webstandardsgroup.org
Date: 17/08/2009 06:00 PM
Subject:WSG Digest
*
WEB STANDARDS GROUP MAIL LIST DIGEST
*
From: Ben Davies bendav...@he3.com.au
Date: Mon, 17 Aug 2009 13:34:36 +1000
Subject: Fixed Sidebar Fluid Content - Source Order Limitations
Hi Everyone,
I am working on a site with a fixed sidebar panel and fluid content. After
some research I think I have discovered a CSS source order limitation
particular to this layout. Can anyone confirm whether this sounds correct:
- To put my content first in the markup, my content needs to be floated
(for
a following sidebar)
- My content is fluid, so I can not assign a width
- According http://css.maxdesign.com.au/floatutorial/introduction.htm you
must set an explicit width on a floated elemented except img tags as per
the
W3C (he references http://www.w3.org/TR/CSS2/visuren.html#floats, but I can
not find exact statement).
- Therefore my fluid content can not appear with in my markup, my fixed
width sidebar must appear first and be floated instead.
Does that sound right? Regardless of W3C I could not get my content to
remain fluid, come first in the markup and still allow my fixed-width
sidebar to float up beside it.
Thanks for any feedback.
Ben Davies
*
From: Kepler Gelotte kep...@neighborwebmaster.com
Date: Mon, 17 Aug 2009 00:09:07 -0400
Subject: RE: [WSG] Fixed Sidebar Fluid Content - Source Order Limitations
- To put my content first in the markup, my content needs to be floated
(for
a following sidebar)
- My content is fluid, so I can not assign a width
You may want to try max-width on your main content. I'm not sure if that
will work for you since you didn't post a link.
Best regards,
Kepler Gelotte
Neighbor Webmaster, Inc.
156 Normandy Dr., Piscataway, NJ 08854
http://www.neighborwebmaster.com www.neighborwebmaster.com
phone/fax: (732) 302-0904
*
From: Jens-Uwe Korff jko...@fairfaxdigital.com.au
Date: Mon, 17 Aug 2009 14:39:40 +1000
Subject: RE: [WSG] Strange Bottom Margin on Floated Elements I Can't Get
Rid of
Hi Cole,
you can also specify {vertical-align:bottom} for the images.
Cheers,
Jens
-Original Message-
Sent: Friday, August 14, 2009 4:02 PM
Subject: Re: [WSG] Strange Bottom Margin on Floated Elements I Can't Get
Rid
of
Hi Cole,
Try setting those images to 'display: block;'
div.thumbs img {display: block;}
The reason this works is detailed here:
https://developer.mozilla.org/en/Images, Tables, and Mysterious Gaps
HTH
The information contained in this e-mail message and any
