...

View Full Version : Resolved CSS Help with images



andrewjs18
11-21-2008, 06:21 AM
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...



<!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>




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;
}

jhaycutexp
11-21-2008, 07:04 AM
you need to use float for that..

andrewjs18
11-21-2008, 07:24 AM
you need to use float for that..

Thanks man.

jhaycutexp
11-21-2008, 08:55 AM
no problem...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum