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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jun 2011
    Posts
    119
    Thanks
    43
    Thanked 0 Times in 0 Posts

    Question CSS making the table appear too large

    Code:
    <style type="text/css">
    
    .hovergallery img{
    -moz-transform:scale(0.1); /*Mozilla scale version*/
    -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
    -moz-transition-duration: 0.5s; /*Mozilla duration version*/
    -o-transition-duration: 0.5s; /*Opera duration version*/
    opacity: .7; /*initial opacity of images*/
    margin: 0 10px 5px 0;  /* margin between images*/
    }
    
    .hovergallery img:hover{
    -webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
    -moz-transform:scale(1.1); /*Mozilla scale version*/
    -o-transform:scale(1.1); /*Opera scale version*/
    box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
    -webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
    -moz-box-shadow:0px 0px 30px red; /*Mozilla shadow version*/
    opacity: 1;
    }
    
    </style>
    I applied the above CSS on the below PHP code to get a hover effect of the uploaded images but the table containing the images is appearing too large .What do?

    PHP Code:
    <?php
        
    }
    if(
    $_GET[page]=="show")
        {
    ?>
                <table border=2 class='hovergallery'>
                <tr>
                    <td>Serial No</td>
                    <td>Image</td>
                    <td>Action</td>
                </tr>
    <?php  
    $c
    =1;
    while(
    $row=mysql_fetch_array($res))
            { 
                echo 
    "<tr>
                    <td>$c-$row[id]</td>
                    <td ><img src='$row[image]'></td> 
                     <td><a href='img.php?del=$row[id]'>Delete</a></td>
                </tr>"
    ;
                
    $c++;
            }
    ?>
                </table>
    p.s.: I am using Firefox 12 browser so please run the code in Firefox only.
    Last edited by ippo; 06-19-2012 at 02:48 PM.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,029
    Thanks
    23
    Thanked 588 Times in 587 Posts
    There are a number of ways of doing this. I'd just copy and paste a code snippet that does what you want. Check this on out http://www.shadowbox-js.com/

  • #3
    Regular Coder
    Join Date
    Jun 2011
    Posts
    119
    Thanks
    43
    Thanked 0 Times in 0 Posts
    Please someone give me some helpful answer!!

  • #4
    Regular Coder
    Join Date
    Jun 2012
    Location
    Near Chicago, USA
    Posts
    123
    Thanks
    7
    Thanked 19 Times in 19 Posts
    It would help to post the HTML code generated by the PHP, instead of the PHP code. Then we can see the actual HTML without having to either do a test with your PHP code or guessing.

    Quote Originally Posted by ippo View Post
    p.s.: I am using Firefox 12 browser so please run the code in Firefox only.
    Some people may use other browsers. Do you really mean to tell them not to bother with helping you?

    Will
    Numerology API for apps - Facebook, iPad, mobile phones. No charge to use API. [info]

  • #5
    Regular Coder
    Join Date
    Jun 2011
    Posts
    119
    Thanks
    43
    Thanked 0 Times in 0 Posts
    Some people may use other browsers. Do you really mean to tell them not to bother with helping you?
    No of course not.

    Sorry I specified Firefox because I haven't used CSS code for IE or Opera or Google Chrome but I am open to advice from all.


  •  

    Posting Permissions

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