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 8 of 8
  1. #1
    New Coder
    Join Date
    Apr 2008
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    display the picture at the bottom

    hi, i wan make the picture display at the bottom of the box, so any solutions for it? Thanks

    my code as below:


    <html>
    <head>

    <style type="text/css">
    .box {
    border:1px solid red;
    height:200px;

    }
    </style>
    </head>

    <body>
    <div class="box">
    <div align="left"><img src="images/download.jpg" width="43" height="61" align="bottom">

    </div>
    </div>
    </body>
    </html>

  • #2
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    .box {
         border:1px solid red;
         height:200px;
         width:200px;/*Change to what needed to fit picture/content.*/
         background:url("images/download.jpg") no-repeat scroll bottom left;
    }
    </style>
    </head>
    
    <body>
         <div class="box">
         <!--Your content here -->
         </div>
    
    </body>
    </html>
    Try that

    Regards,

    Drew
    Last edited by FWDrew; 05-15-2008 at 10:14 AM. Reason: I was lazy ;) and again...

  • #3
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,699
    Thanks
    0
    Thanked 233 Times in 228 Posts
    Hi there coffeeping,

    here is an alternative solution...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    #box {
        position:relative;
        border:1px solid red;
        height:200px;
     }
    #box img {
        position:absolute;
        left:0;
        bottom:0;
        width:43px;
        height:61px;
     }
    </style>
    
    </head>
    <body>
    
    <div id="box">
    <img src="images/download.jpg" alt="">
    </div>
    
    </body>
    </html>
    
    coothead
    Last edited by coothead; 05-15-2008 at 09:22 AM. Reason: can't tell my left from my right!!!

  • #4
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts
    Thats a nice way to do it coothead never thought of that before.

    Darn you for not being lazy and putting the correct doc type and mark up on, now I have to edit mine

    Drew

  • #5
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,699
    Thanks
    0
    Thanked 233 Times in 228 Posts
    Hi there FWDrew,
    Darn you for not being lazy and putting the correct doc type and mark up on, now I have to edit mine
    Well, I'm afraid that you will have to go back for a second edit, as you've missed out...
    <title></title>
    ...which will cause validation failure.

    coothead

  • #6
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts
    Coot,

    Well now your just showing off

    ...which will cause validation failure.
    Thanks, I just forgot it but I never knew it would cause the page to not validate, learn something new everyday I suppose

    Drew

  • #7
    New Coder
    Join Date
    Apr 2008
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks a lot.. but how i gonna to set the picture display at the center of the box since i got 2 type of pic, one 1 landscape & another one is potrait?

  • #8
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,699
    Thanks
    0
    Thanked 233 Times in 228 Posts
    Hi there coffeeping,

    have a look at this example, which, hopefully, addresses all of your anxieties...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    #box {
        position:relative;
        border:3px double #999;
        width:760px;
        height:469px;
        background-color:#eee;
        margin:20px auto;
     }
    #box #img1 {
        position:absolute;
        left:0;
        bottom:0;
        width:43px;
        height:61px;
        border:2px solid #666;
        margin:0 0 2px 2px;
     }
    #box #img2 {
        position:absolute;
        left:50%;
        top:50%;
        width:320px;
        height:196px;
        border:2px solid #666;
        margin-left:-162px;    /*half the (img+border) width*/
        margin-top:-100px;     /*half the (img+border) height*/
     }
    </style>
    
    </head>
    <body>
    
    <div id="box">
    <img id="img1" src="http://mysite.orange.co.uk/azygous/images/dog.jpg" alt="">
    <img id="img2" src="http://mysite.orange.co.uk/azygous/images/blood.jpg" alt="">
    </div>
    
    </body>
    </html>
    
    coothead


  •  

    Posting Permissions

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