Slowly learning but have reached an image problem

HTML & CSS
1

I have been slowly transforming my site to CSS but have now reached an image problem.

The web page is www.c5d.co.uk/young.php

I have two images at the top which I want to be both 234px x 60 px.

If I specify this is the HTML then it works fine. I can’t seem to get it to work though by using CSS

At present one image is miles bigger than the other.

I think this is the relevant bit from the HTML

<div id=“advert1”>
<a href=“http://www.jdoqocy.com/click-5433512-10520381” target=“_top”>
<img src=“http://www.awltovhc.com/image-5433512-10520381” width=“234” height=“60” alt=“234x60: I am, your Nan” border=“0”></a></div>
<!–START MERCHANT:merchant name Find My Past from affiliatewindow.com.–>
<div id=“advert2”><a href=“http://www.awin1.com/cread.php?s=265538&amp;v=2114&amp;q=126749&amp;r=127588”><img src=“http://www.awin1.com/cshow.php?s=265538&amp;v=2114&amp;q=126749&amp;r=127588” alt=“264x60” border=“0”></a></div>
<!–END MERCHANT:merchant name Find My Past from affiliatewindow.com–>

And this is the relevant bit from the CSS

img.ionian {padding-top: 50px;padding-left:350px;height:length;160px;}
img.young {height:length:450px; width:382px;}
img.young { display: block; margin-left: auto; margin-right: auto; }

p.keftext{text-align:center; padding-top: 120px}
p.keftext2{text-align:center; padding-top: 20px}

table {margin:auto;a:link, a:visited {color:#000000; font-size: 15px;font-weight:bold;}}

#advert1 {float:left; display:inline-block; background:#000; width:250px;}

#advert2 {float:right; display:inline-block; background:#000; width:250px;}

As always, any help appreciated

Thanks

Antony

2

Hi there,
It is perfectly valid to specify the dimensions of your image in the HTML.
You can use CSS to resize a background image, but this is probably not what you want to do here.

Also, please be aware that specifying the size thus <img src=“” width=“123” height =“123”> doesn’t actually resize the image, rather tells the browser what scaling to apply, that is to say, the full size image is still downloaded.

The best thing to do would be for you to resize your images using an image manipulation program, then to include them in your page as you have been doing.

P.S. Please use code tags in your future posts. It makes your code easier to read.

3

HI,

You can do it with the following css but take into account the important points Pullo mentioned above:


#advert1 img,#advert2 img{
width:234px;
height:60px;
}

This code is invalid:


img.young {height:length:450px; width:382px;}

height:length:450px; ??

It should be height:450px;width:382px - if that’s what you meant to say.

This is invalid also:


table {margin:auto;a:link, a:visited {color:#000000; font-size: 15px;font-weight:bold;}}

Look like it should have been:


table {margin:auto}
a:link, a:visited {color:#000000; font-size: 15px;font-weight:bold;}

Unless you meant to target the links in the table only then it would be:


table {margin:auto}
table a:link,
table a:visited {
color:#000000;
 font-size: 15px;
font-weight:bold;
}

Always run your css through the validator to pick up easily found typos.:slight_smile:

4

Thanks for the tip.

It is meant to specify the links only.

I shall amend the CSS

Thank you

Antony