|
|
Posted by richard on 09/19/06 16:48
"Wombatwal" <bartsimpson@hotmail.com> wrote in message
news:Y%RPg.32208$rP1.10957@news-server.bigpond.net.au...
>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
>
[Back to original message]
|