Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Mar 2011
    Posts
    62
    Thanks
    3
    Thanked 2 Times in 2 Posts

    Resizing <img src> in a div

    I have image link buttons in a div in the middle of a webpage, and I made them with a graphic generator.

    They are each 160px wide. How can I resize their width to be a certain % of size of the div box they are in, so that it works on all resolutions?

    Thank you.

    BTW I have them in there as .....<a href:"....."><img src="....." alt="..."></a>.....
    Last edited by BoyWander; 04-05-2011 at 04:41 AM.

  • #2
    New Coder
    Join Date
    Mar 2011
    Posts
    62
    Thanks
    3
    Thanked 2 Times in 2 Posts
    BTW here is the code of that particular section.


    [HTML]
    <div id="GamesArea">
    <style type="text/css">
    #GamesArea {position:relative;float:left;
    width:55.1%;margin:10px;height:380px;}
    </style>



    <table width="100%" height="33%" style="position:relative;margin:auto;margin-left:2%;">
    <tr><td><a href="Euchre.html"><img src="http://weplaycards247.com\Images\Euchre.png" alt="Euchre"></a></td>
    <td><a href="Canasta.html"><img src="http://weplaycards247.com\Images\Canasta.png" alt="Canasta"></a></td>
    <td><a href="Bridge.html"><img src="http://weplaycards247.com\Images\Bridge.png" alt="Bridge"></a></td></tr>
    </table>

    <table width="100%" height="33%" style="position:relative;margin:auto;margin-left:2%;">
    <tr><td><a href="Hearts.html"><img src="http://weplaycards247.com\Images\Hearts.png" alt="Hearts"></a></td>
    <td><a href="Cribbage.html"><img src="http://weplaycards247.com\Images\Cribbage.png" alt="Cribbage"></a></td>
    <td><a href="Pinochle.html"><img src="http://weplaycards247.com\Images\Pinochle.png" alt="Pinochle"></a></td></tr>
    </table>


    <table width="100%" height="33%" style="position:relative;margin:auto;margin-left:2%;">
    <tr><td><a href="Rummy.html"><img src="http://weplaycards247.com\Images\Rummy.png" alt="Rummy"></a></td>
    <td><a href="Spades.html"><img src="http://weplaycards247.com\Images\Spades.png" alt="Spades"></a></td>
    <td><a href="Pitch.html"><img src="http://weplaycards247.com\Images\Pitch.png" alt="Pitch"></a></td></tr>
    </table>

    </div>[/HTML]

  • #3
    Registered User
    Join Date
    Feb 2011
    Posts
    82
    Thanks
    15
    Thanked 3 Times in 3 Posts
    if you created it with a graphic generator - recreate it w/ the desired dimensions

    idk exactly what's your question, but try

    #middle img {
    width: 120%
    }

    I'm not sure but I g2g. sorry for the sloppy/probably incorrect answer

  • #4
    New Coder
    Join Date
    Mar 2011
    Posts
    62
    Thanks
    3
    Thanked 2 Times in 2 Posts
    Well I dont think the image generator will allow me to set the width as a %, only fixed pixel - but thanks Aurora for the help!


    Anyways I think I got it taken care of. Now it's on to getting a user login system to work, I've been working on it for 4 days and haven't gotten very far.

    php is a little more difficult than html/css...


  •  

    Posting Permissions

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