[WSG] SV: digest for wsg@webstandardsgroup.org
Use the CSS Background Properties:
http://www.w3schools.com/css/css_background.asp
Butthe picturewill not display with CSS
off...
Heine
Fra: wsg@webstandardsgroup.org
[mailto:[EMAIL PROTECTED] Sendt: 2. juli 2005
15:50Til: wsg@webstandardsgroup.orgEmne: digest for
wsg@webstandardsgroup.org
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.
--No virus found in this incoming message.Checked by AVG
Anti-Virus.Version: 7.0.323 / Virus Database: 267.8.8/37 - Release Date:
01.07.2005
--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.323 / Virus Database: 267.8.8/37 - Release Date: 01.07.2005
[WSG] Image Thumnail Advice
Hello All - I'm having a mess of a time getting sharp thumbnails of the site's I've built into a thumbnail format. Here's what I do: 1. Load the home page of a site into a browser 2. Use a screen capture utility to snap an image of the home page 3. paste the capture into PhotoShop 4. Transform/Scale the image from it's captured size (760 pixels x 550 pixels) down to a165x 115 pixel thumbnail And...everything turns to mud - or pretty close to it. If I sharpen the thumb, it's slightly better, but sharpen too much and it's "halo" city. Yuck. I know it's an issue of pixel loss during the reduction, but what to do? Surely there must be a better way as I've seen some sites with small thumbs of large images that are excellent looking. What are they doing (or what are YOU doing) that I'm not? Thanks to al in advance, Cole
Re: [WSG] Image Thumnail Advice
Cole Kuryakin - x7m wrote: What are they doing (or what are YOU doing) that I'm not? i size my thumbnails from the original. dwain -- Dwain Alford [EMAIL PROTECTED] http://www.alforddesigngroup.com The artist may use any form which his expression demands; for his inner impulse must find suitable expression. Wassily Kandinsky, Concerning The Spiritual In Art ** 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] Image Thumnail Advice
Use save for web then use the resize tab below the output options. Chose jpeg medium from the top. Should be good quality output. Chris Dawes From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Cole Kuryakin - x7m Sent: Sunday, 3 July 2005 12:28 PM To: wsg@webstandardsgroup.org Subject: [WSG] Image Thumnail Advice Hello All - I'm having a mess of a time getting sharp thumbnails of the site's I've built into a thumbnail format. Here's what I do: 1. Load the home page of a site into a browser 2. Use a screen capture utility to snap an image of the home page 3. paste the capture into PhotoShop 4. Transform/Scale the image from it's captured size (760 pixels x 550 pixels) down to a165x 115 pixel thumbnail And...everything turns to mud - or pretty close to it. If I sharpen the thumb, it's slightly better, but sharpen too much and it's halo city. Yuck. I know it's an issue of pixel loss during the reduction, but what to do? Surely there must be a better way as I've seen some sites with small thumbs of large images that are excellent looking. What are they doing (or what are YOU doing) that I'm not? Thanks to al in advance, Cole
Re: [WSG] SV: digest for wsg@webstandardsgroup.org
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 .
I think this is the better solution than the background image. You don't
need to declare image size but the margin or padding and float left or
right.
For example:
.image {
float: right; /* or left */
border: 2px solid #d3d3d3;
margin-left: 10px;
}
When image inserts to the p, your text will float around image according.
Examples from a site I was working:
http://clients.lotusseeds.com/dojoprocedures.html (I have the image
temporarily inserted in front of h3 )
http://clients.lotusseeds.com/style.html (image is inserted in the p tag)
If you want different padding/margin, border and float declared but don't
want to bother to create different classes in your css files, you can do
this:
p img src=yourimage.jpg alt= width=95 height=151 style=float:
left; margin-left: 0.7em; margin-bottom: 0.5em/
Blah blah blah /p
tee
**
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] Image Thumnail Advice
You wrote: 3. paste the capture into PhotoShop 4. Transform/Scale the image from it's captured size (760 pixels x 550 pixels) down to a165x 115 pixel thumbnail First, don't use transform/scale. Use the Image...Image Size command. It should already be set correctlyto 72 dpi, constrain dimensions (checked), resample...bicubic (checked). If not, make it so. Now, resize in steps. If you're starting with 760, half it. Now resize again at least once more. I'd probably divide the max dimension intothree or fourand resize it progressively down. Next apply an Unsharp Mask (Filter...Sharpen...Unsharp Mask). Somewhere between 50 and 100% should do the trick. Every once in awhile there is value to sharpening after each resize. It depends on the image. You could also use bicubic sharpen but honestly I usually see better results with a sharpen only applied on the final image. Alternately, if you're trying to include thumbnails of screenshots in a print portfolio (?), go toImage...Image Size and change the resolution to 300.Keepthe constrain dimensions checked, but this time change the resample dropdown to"Nearest Neighbor" (checked). This last part will avoid anti-aliasing. Key is saving it as a TIF or similar at this point...If you "save for web..." you'll end up back at 72 dpi. Jona Web Services MEA
RE: [WSG] Image Thumnail Advice [THREAD CLOSED]
Ok, enough on that thanks. This is a 'PhotoShop how to'rather thana Web Standards discussion. Peter
