Hello everyone!
First off let me say that Im sorta a newbie to the whole CSS and <div> stuff! But Im eagar to learn! So here's what I would like alittle help with if anyone would be kind enough help me out! Im creating a <div> box to display products in which has 3 images within the main <div> on the left-then next to these 3 images I have 1 large image that equals the height of the first 3-then I have 3 images that will go next to the center image on the right which will complete my product box! All 7 of these images with link to certain sections of my site! The problem Im having is I made the main box-and have placed the 3 images to the left-but I cant seem to figure out how to remove the space that is coming up in between each of the 3 images? I want each image to line up directly below the image above it with no gap!
My Code:
<div id="rhinestoneteesMainContainer">
<div id="leftContainer">
<div class="rhinestoneLogo">
<a href="http://www.mysite.com" onclick="return contentItemLink(this);">
<img src="/images/inForSpring_d1f_w_logo.gif" alt="Rhinestone Design" />
</a>
</div>
<div class="rockstar"> <a href="http://www.mysite.com" onclick="return contentItemLink(this);">
<img src="/images/inForSpring_d1f_w_01.jpg" alt="Rockstar Design" /> </a>
</div>
<div class="casino"> <a href="http://www.mysite.com" onclick="return contentItemLink(this);">
<img src="/images/inForSpring_d1f_w_02.jpg" alt="Casino Designs" /> </a>
</div>
</div>
</div>
My CSS:
}
#rhinestoneteesMainContainer {
background-color: #FFCCFF;
width:605px;
height:405px;
*overflow:hidden;
}
#leftContainer {
width:210px;
height:405px;
float:left;
background-color: #000000;
}
.rhinestoneLogo {
width:210px;
height:86px;
float:left;
cursor  ointer;
cursor:hand;
}
.rockstar {
width:210px;
height:184px;
float:left;
position:relative;
cursor ointer;
cursor:hand;
}
.casino {
width:210px;
height:135px;
float:left;
position:relative;
cursor ointer;
cursor:hand;
}
If anyone could help me out here I would greatly appriciate it!
Thank You,
Brian |
