SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Slowly learning but have reached an image problem.

    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. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    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. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

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

    Code:
    #advert1 img,#advert2 img{
    width:234px;
    height:60px;
    }
    This code is invalid:

    Code:
    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:
    Code:
    table {margin:auto;a:link, a:visited {color:#000000; font-size: 15px;font-weight:bold;}}
    Look like it should have been:
    Code:
    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:

    Code:
    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.

  4. #4
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the tip.

    It is meant to specify the links only.

    I shall amend the CSS

    Thank you

    Antony


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •