|
|
|
|
09-19-2006, 02:11 PM
|
#1 |
sizing image in css
I am experimenting with placing images on a page using float and setting the
image size. I am using an external style sheet. Below is my code in the external style sheet, and below that is my code in the html page. I have used different numbers for width and height plus px but the images are huge, but the right ones, float to the left and right. What am I doing wrong, I have scanned the internet with no help. As you can see I am struggling with CSS. external css sheet #photo1 {width: 2; height: 2; float: left; } #photo2 {width: 2; height: 2; float: right;} html page <body> <div id="photo1"><img src="Twins.jpg"></div> <div id="photo2"><img src="stuart2.jpg"></div> -- Bruce Wombatwal |
|
|
|
09-19-2006, 02:39 PM
|
#2 |
|
Posts: n/a
|
Re: sizing image in css
Wombatwal wrote:
> I am experimenting with placing images on a page using float and setting the > image size. > I am using an external style sheet. Below is my code in the external style > sheet, and below that is my code in the html page. > I have used different numbers for width and height plus px but the images > are huge, but the right ones, float to the left and right. > What am I doing wrong, I have scanned the internet with no help. As you can > see I am struggling with CSS. > > external css sheet > #photo1 {width: 2; height: 2; float: left; } > #photo2 {width: 2; height: 2; float: right;} 2 what? hobnobs?  I'm just guessing these aren't really 2 pixel images, so I've invented a width and height of 100px: #photo1{width:100px;height:100px;float:left;} #photo2{width:100px;height:100px;float:right;} > <div id="photo1"><img src="Twins.jpg"></div> > > <div id="photo2"><img src="stuart2.jpg"></div> That gives the width and height to the divs, not the images. <img id="photo1" src="Twins.jpg" alt="twins"> <img id="photo2" src="stuart2.jpg" alt="Stuart"> Also: you are saying the images are huge. Even after managing width and height through CSS, this means the original size is downloaded to the visitor's browser. Means the page will load slower than needed, and also the image won't look very good. Resize the images to the size you want in the page, and you're eliminating both problems. HTH -- Els http://locusmeus.com/ accessible web design: http://locusoptimus.com/ Now playing: Dave Edmunds - I Knew The Bride (when She Used To Rock And Roll) |
|
|
|
09-19-2006, 02:53 PM
|
#3 |
|
Posts: n/a
|
Re: sizing image in css
Wombatwal wrote:
> I am experimenting with placing images on a page using float and setting the > image size. > I am using an external style sheet. Below is my code in the external style > sheet, and below that is my code in the html page. > I have used different numbers for width and height plus px but the images > are huge, but the right ones, float to the left and right. > What am I doing wrong, I have scanned the internet with no help. As you can > see I am struggling with CSS. > > external css sheet > #photo1 {width: 2; height: 2; float: left; } > > #photo2 {width: 2; height: 2; float: right;} > > > html page > <body> > <div id="photo1"><img src="Twins.jpg"></div> > > <div id="photo2"><img src="stuart2.jpg"></div> Errors: #1 width: 2 <-What? Pixels, inches, feet, miles? Unlike HTML attributes length values in CSS must have units { width: 2px; }. Exception is line-height which can take a decimal value. #2 Resizing images by constraining markup and not resampling is a very bad idea. The algorithm used by browsers is crude compared to that of image editing software and shows quite "clearly" in the results! Also when your reduce an image digitally unlike the old days in the dark room the image tends to loose detail and requires tweaking with smoothing and sharpen filters, (which your browser does not do). Lastly, as digital images increase in dimensions their associated file sizes increases not linearly but geometrically. So that 5-6 mega-pixel fresh-from-the-digital-camera monster will top out about 2-3 MB! constraining with markup to 400 pixels *will not* reduce what has to be downloaded from the server! If you resample to 400 pixels then not only will you get a better looking results but the download will only be about 30KB! Recommendation: Always resample and optimize images to the exact size required when using in a webpage. If you need thumbnails create a second set of images resample to the thumbnail dimensions. Do not use the full size images constrained with markup. -- Take care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com |
|
|
|
09-19-2006, 03:13 PM
|
#4 |
|
Posts: n/a
|
Re: sizing image in css
Jonathan N. Little wrote:
> Wombatwal wrote: >> I am experimenting with placing images on a page using float and >> setting the image size. <snip> > > Errors: > > #1 width: 2 <-What? Pixels, inches, feet, miles? Unlike HTML attributes <snip my lengthy dissertation> Wow I am just too slow in typing, Els beat me to the punch, or maybe I don't need to include the complete theory of computing in my posts! -- Take care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com |
|
|
|
09-19-2006, 03:22 PM
|
#5 |
|
Posts: n/a
|
Re: sizing image in css
On Tue, 19 Sep 2006, Jonathan N. Little wrote:
> Recommendation: Always resample and optimize images to the exact > size required when using in a webpage. This is a fine recommendation in many caaes, indeed; but there are exceptions. If you want to size images to match your text, then you can use CSS to size them in em units. See discussion at http://ppewww.ph.gla.ac.uk/~flavell/...g-em-size.html hth -- If the crash doesn't occur immediately, the [development] cycle is broken, and the result is called a release. -- detha, in the monastery. |
|
|
|
09-19-2006, 03:37 PM
|
#6 |
|
Posts: n/a
|
Re: sizing image in css
Jonathan N. Little wrote:
> Wow I am just too slow in typing, Els beat me to the punch, or maybe I > don't need to include the complete theory of computing in my posts! <g> I do type fast, but I'm also just too lazy to write very long stories in usenet posts -- Els http://locusmeus.com/ accessible web design: http://locusoptimus.com/ Now playing: AC/DC - Thunderstruck |
|
|
|
09-19-2006, 03:59 PM
|
#7 |
|
Posts: n/a
|
Re: sizing image in css
> > -- > > Now playing: AC/DC - Thunderstruck A dam fine song indeed. Although, it's one of the only ACDC albums I don't have, (although I got a copy of Jale Break a while ago). -- Regards Chad. http://freewebdesign.cjb.cc |
|
|
|
09-19-2006, 04:52 PM
|
#8 |
|
Posts: n/a
|
Re: sizing image in css
Chaddy2222 wrote:
>> -- > >> Now playing: AC/DC - Thunderstruck > > A dam fine song indeed. > Although, it's one of the only ACDC albums I don't have, (although I > got a copy of Jale Break a while ago). Naw, I was a Uriah Heep fan, give me Salisbury or Easy Livin' -- Take care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com |
|
|
|
09-19-2006, 04:55 PM
|
#9 |
|
Posts: n/a
|
Re: sizing image in css
Chaddy2222 wrote:
>> Now playing: AC/DC - Thunderstruck > > A dam fine song indeed. > Although, it's one of the only ACDC albums I don't have, (although I > got a copy of Jale Break a while ago). I don't have anything else by them really, just that one song  -- Els http://locusmeus.com/ accessible web design: http://locusoptimus.com/ Now playing: The Clash - Louie Louie |
|
|
|
09-19-2006, 05:48 PM
|
#10 |
|
Posts: n/a
|
Re: sizing image in css
"Wombatwal" <> wrote in message news:Y%RPg.32208$... >I am experimenting with placing images on a page using float and setting >the image size. > I am using an external style sheet. Below is my code in the external style > sheet, and below that is my code in the html page. > I have used different numbers for width and height plus px but the images > are huge, but the right ones, float to the left and right. > What am I doing wrong, I have scanned the internet with no help. As you > can see I am struggling with CSS. > > external css sheet > #photo1 {width: 2; height: 2; float: left; } > > #photo2 {width: 2; height: 2; float: right;} > Width and height must be defined with something such as px (pixels); inches, millimeters and so on. You show floating left and right. Which do you want? It is not both. Then declare the float property only on the first item. All others follow the pattern until the next break . If you had more photos, each subsequent photo would float along the same order beside the last one. Or you could just continue using "left" with each. Until you need to drop a line, in which case you would use float:clear. Plenty of websites that illustrate this. Search for "CSS Float attributes". Also, spaces are not needed after the :. Division size for images should be sized according to the image size. If you need to, resize the image with an editor. You might want to try using PNG, instead of JPG, as PNG has a much smaller footprint. www.1-small-world.com/index2.html Just so you can get a better idea of what to expect. Just foolin around with it for now. > > html page > <body> > <div id="photo1"><img src="Twins.jpg"></div> > > <div id="photo2"><img src="stuart2.jpg"></div> > -- > Bruce > |
|
|
