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
    Nov 2008
    Posts
    31
    Thanks
    6
    Thanked 0 Times in 0 Posts

    CSS Help with images

    I'm trying to finish my portfolio page for a web design/graphics business I'm going to be running soon, but I can't seem to get the larger view of an image to open beside the smaller image without pushing the rest of the page down.

    Any help is greatly appreciate...

    Here is my xhtml/css...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Webfinity Design-Portfolio | Websites we have created...</title>
    <meta http-equiv="Content-Language" content="en-us" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="main_layout.css" />
    </head>
    <body>
    
    <!--Portfolio Images Start-->
    
    <!-- Watts Mack Site -->
    <div id="wm">
    <a class="p1" href="http://www.macktrucks.com/wattsmack"><img class="thumbnail" src="images/wm2.jpg" alt="wm small" width="250px" height="138px" border="0" /><img src="images/wm2.jpg" alt="wm small" width="250px" height="138px" class="large" /></a>
    </div>
    <br />
    
    <!-- Absolute Elite Clan Text -->
    <ul>
    <li><a href="http://www.ugly-cars.com/ae" title="Absolute Elite Clan" target="_blank">Absolute Elite Clan</a></li>
    <li>A gaming clan for the FPS community</li>
    <li>HTML, CSS, PHP, JAVASCRIPT</li>
    </ul>
    
    <!-- Absolute Elite Clan Site -->
    <div id="ae">
    <a class="p1" href="index.html"><img class="thumbnail" src="images/ae2.jpg" alt="ae small" width="250px" height="138px" border="0" /><img src="images/ae2.jpg" alt="ae small" width="250px" height="138px" class="large" /></a>
    </div>
    <br />
    
    <!-- Big Mack Trucks Site -->
    <div id="bm">
    <a class="p1" href="http://www.bigmacktrucks.com/"><img class="thumbnail" src="images/bm2.jpg" alt="bm small" width="250px" height="138px" border="0" /><img src="images/bm2.jpg" alt="bm small" width="250px" height="138px" class="large" /></a>
    </div>
    <br />
    
    <!-- Ugly-Cars Site -->
    <div id="uc">
    <a class="p1" href="index.html"><img src="images/uc2.jpg" alt="uc small" width="250px" height="138px" border="0" /><img src="images/uc2.jpg" alt="uc small" width="250px" height="138px" class="large" /></a>
    </div>
    <br />
    
    <!-- Katsnet Site -->
    <div id="kn">
    <a class="p1" href="index.html"><img src="images/kn2.jpg" alt="kn small" width="250px" height="138px" border="0" /><img src="images/kn2.jpg" alt="kn small" width="250px" height="138px" class="large" /></a>
    </div>
    <br />
    
    <!-- Taurus Club of America Site -->
    <div id="tc">
    <a class="p1" href="http://www.taurusclub.com"><img src="images/tc2.jpg" alt="tc small" width="250px" height="136px" border="0" /><img src="images/tc2.jpg" alt="tc small" width="250px" height="136px" class="large" /></a>
    </div>
    <br />
    
    <!-- Matthew Klein Site -->
    <div id="mk">
    <a class="p1" href="index.html"><img src="images/mk2.jpg" alt="mk small" width="250px" height="138px" border="0" /><img src="images/mk2.jpg" alt="mk small" width="250px" height="138px" class="large" /></a>
    </div>
    <br />
    <!-- End Portfolio Images -->
    
    </body>
    </html>
    Code:
    body
    {
    color: black;
    width: 768px;
    }
    
    .resize img
    {
    border: none;
    }
    
    .resize:hover img
    {
    color: #FF00FF;
    width: 800px;
    height: 444px;
    border: none;
    }
    
    .thumbnail
    {
    z-index: 1;
    }
    
    #ae .p1:hover .large
    {
    display: block; 
    position: relative; 
    left: 285px; 
    top: -138px;
    width: 450px; 
    height: 249px; 
    border: 0;
    z-index: 100;
    }
    
    #ae .p1 .large 
    {
    display: block; 
    position: absolute; 
    width: 0; 
    height: 0; 
    border: 0; 
    }
    
    #uc .p1:hover .large
    {
    display: block; 
    position: relative; 
    left: 285px; 
    top: -137px;
    width: 450px; 
    height: 248px; 
    border: 0;
    z-index: 100;
    }
    
    #uc .p1 .large 
    {
    display: block; 
    position: absolute; 
    width: 0; 
    height: 0; 
    border: 0; 
    }
    
    #kn .p1:hover .large
    {
    display: block; 
    position: relative; 
    left: 285px; 
    top: -137px;
    width: 450px; 
    height: 249px; 
    border: 0;
    z-index: 100;
    }
    
    #kn .p1 .large 
    {
    display: block; 
    position: absolute; 
    width: 0; 
    height: 0; 
    border: 0; 
    }
    
    #mk .p1:hover .large
    {
    display: block; 
    position: relative; 
    left: 285px; 
    top: -137px;
    width: 450px; 
    height: 249px; 
    border: 0;
    z-index: 100;
    }
    
    #mk .p1 .large 
    {
    display: block; 
    position: absolute; 
    width: 0; 
    height: 0; 
    border: 0; 
    }
    
    #wm .p1:hover .large
    {
    display: block; 
    position: relative; 
    left: 285px; 
    top: -137px;
    width: 450px; 
    height: 249px; 
    border: 0;
    z-index: 100;
    }
    
    #wm .p1 .large 
    {
    display: block; 
    position: absolute; 
    width: 0; 
    height: 0; 
    border: 0; 
    }
    
    #bm .p1:hover .large
    {
    display: block; 
    position: relative; 
    left: 285px; 
    top: -137px;
    width: 450px; 
    height: 249px; 
    border: 0;
    z-index: 100;
    }
    
    #bm .p1 .large 
    {
    display: block; 
    position: absolute; 
    width: 0; 
    height: 0; 
    border: 0; 
    }
    
    #tc .p1:hover .large
    {
    display: block; 
    position: relative; 
    left: 285px; 
    top: -137px;
    width: 450px; 
    height: 245px; 
    border: 0;
    z-index: 100;
    }
    
    #tc .p1 .large 
    {
    display: block; 
    position: absolute; 
    width: 0; 
    height: 0; 
    border: 0; 
    }
    Last edited by andrewjs18; 11-21-2008 at 07:24 AM.

  • #2
    Regular Coder
    Join Date
    Apr 2008
    Location
    Manila, Philippines
    Posts
    263
    Thanks
    3
    Thanked 12 Times in 12 Posts
    you need to use float for that..

  • Users who have thanked jhaycutexp for this post:

    andrewjs18 (11-21-2008)

  • #3
    New Coder
    Join Date
    Nov 2008
    Posts
    31
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jhaycutexp View Post
    you need to use float for that..
    Thanks man.

  • #4
    Regular Coder
    Join Date
    Apr 2008
    Location
    Manila, Philippines
    Posts
    263
    Thanks
    3
    Thanked 12 Times in 12 Posts
    no problem...


  •  

    Posting Permissions

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