I'm trying to create a clothing website. I'm going to list my items as images with a "Details" button floating on the bottom-right corner of the image. I want to make a div container where i have multiple objects lined up in a row, with floating objects added with Z-index. Is there a way to-do this without having to set each "Details" object top,right,bottom,left in relative to my container? Because their all forced to be relative to the container so far, and it's becoming a hassle to manually adjust each one to my container, and my code is starting to look messy because i'm having to repeat this 8 times. The reason why i'm separating the "details" from the "model" image is because i would like to add a A:Hover affect to the "Details" buttons as links. In my mind this would be something like... <body> <div id="container"> <div id="model1"></div> <div id="details1"></div> <div id="model2"></div> <div id="details2"></div> </div> </body> <style> #container { width:500px; height:500px; background:#999; position:relative; display:block; } #model1 { width:100px; height:100px; background:orange; position:relative; left: 30px; z-index:30; display:block margin-bottom:20px; } #details1 { width:75px; height:50px; background:#FF3; position:absolute; left:50px; top:70px; z-index:50; display:block; } #model2 { width:100px; height:100px; background:#3CF; position:relative; z-index:30px; left:30px; display:block; } #details2 { width:75px; height:50px; background:#6F3; position:absolute; left:50px; top:186px; z-index:50; display:block; </style> HTML: Even though this gives me the affect I'm looking for my problem is i need to duplicate this 8 times per page. To-do so i have too manually adjust the smaller boxes to the container. Is there a simplified way to obtain the affect i'm looking for without having such messy code?
An idea i had was to put each "Model" and "Details" into it's own Div, and just Float the Divs Left within a Container with appropriate margins. But would this be too many Divs? I hate to clutter my code with divs.
1) I would NOT use ID's -- Id's are unique and as such you'd have a RIDICULOUS number of rules to apply. 2) I would ASSUME the cart image is supposed to 'add to cart' and the 'more details' would be an anchor to another page? You need to get semantic markup in there before you even THINK appearance. I'd have something like this for the markup: <div class="product"> <a href="/addToCart/product/1" class="addToCart"> <img src="images/cart.png" alt="Add To Cart" /> </a> <img src="/products/1/thumb.jpg" alt="Beach Bikini | Color - Block Black and White" class="productPreview" /> <a href="/products/1/details" class="detailLink">Details</a> <div> Beach Bikini<br /> Color-Block Black and White<br /> $37.99 </div> <!-- .product --></div> <div class="product"> <a href="/addToCart/product/2" class="addToCart"> <img src="images/cart.png" alt="Add To Cart" /> </a> <img src="/products/2/thumb.jpg" alt="Beach Bikini | Color - Block Black and White" class="productPreview" /> <a href="/products/2/details" class="detailLink">Details</a> <div> Beach Bikini<br /> Color-Block Black and White<br /> $37.99 </div> <!-- .product --></div> <div class="product"> <a href="/addToCart/product/3" class="addToCart"> <img src="images/cart.png" alt="Add To Cart" /> </a> <img src="/products/3/thumb.jpg" alt="Beach Bikini | Color - Block Black and White" class="productPreview" /> <a href="/products/3/details" class="detailLink">Details</a> <div> Beach Bikini<br /> Color-Block Black and White<br /> $37.99 </div> <!-- .product --></div> Code (markup): So on and so forth, since floats will wrap you don't need to count how many for things like tables or clearing. With the following CSS: .product { float:left; width:192px; /* whatever the image width is */ margin:0 0.5em 1em; } .productPreview { display:block; margin:0 auto; border:1px solid #C80; } .product .addToCart { position:relative; /* to depth sort over preview picture */ padding-top:12px; margin-bottom:-36px; /* == cart.png height + padding-top of this element */ } .product .addToCart img { display:block; height:24px; } .product .detailLink { float:right; padding:0.25em 1em; margin:-1.5em 12px 0.5em 0; /* top margin == eyeball it */ line-height:1.5em; color:#FFF; background:#0CC; } .product div { clear:both; overflow:auto; line-height:1.5em; height:6em; } Code (markup): That should roughly approximate what you are trying to do. Naturally you'd have to play with the numbers to get it 'exact'.
I'll look into that. I ended up using this solution to achieve the affect i was going for. <div id="shop_window"> <!--Right Side Panel For Models --> <div class="model_box"> <!--model1--> <section> <div class="details1"><img src="Womans_Page/images/Clothing_Site_Womans_03.png"/> </div> <img src="Womans_Page/images/images/model1.jpg" /> <article>Pricing $$</article> </section> </div> <div class="model_box"> <!--model2--> <section> <div class="details1"><img src="Womans_Page/images/Clothing_Site_Womans_03.png"/></div> <img src="Womans_Page/images/images/model2.jpg" /> <article>Pricing $$</article> </section> </div> <div class="model_box"> <!--model3--> <section> <div class="details1"><img src="Womans_Page/images/Clothing_Site_Womans_03.png"/></div> <img src="Womans_Page/images/images/model3.jpg" /> <article>Pricing $$</article> </section> </div> <div class="model_box"> <!--model4--> <section> <div class="details1"><img src="Womans_Page/images/Clothing_Site_Womans_03.png"/></div> <img src="Womans_Page/images/images/model4.jpg" /> <article>Pricing $$</article> </section> </div> <div class="model_box"> <!--model5--> <section> <div class="details1"><img src="Womans_Page/images/Clothing_Site_Womans_03.png"/></div> <img src="Womans_Page/images/images/model5.jpg" /> <article>Pricing $$</article> </section> </div> <div class="model_box"> <!--model6--> <section> <div class="details1"><img src="Womans_Page/images/Clothing_Site_Womans_03.png"/></div> <img src="Womans_Page/images/images/model6.jpg" /> <article>Pricing $$</article> </section> </div> <div class="model_box"> <!--model7--> <section> <div class="details1"><img src="Womans_Page/images/Clothing_Site_Womans_03.png"/></div> <img src="Womans_Page/images/images/model7.jpg" /> <article>Pricing $$</article> </section> </div> <div class="model_box"> <!--model8--> <section> <div class="details1"><img src="Womans_Page/images/Clothing_Site_Womans_03.png"/></div> <img src="Womans_Page/images/images/model8.jpg" /> <article>Pricing $$</article> </section> </div> </div> CSS: ----- #shop_window { width:800px; float:left; margin-bottom:50px; .model_box{ width:180px; float:left; margin-right:20px; position:relative; margin-bottom:20px; } .model_box img { position:relative; z-index:20; } .model_box .details1{ position:absolute; top:10px; left:1px; z-index:30; } Code (markup): Seems to work perfectly. The site is made of mostly HTMl5 tags to save room up on using tons of Divs for layout. I did this first before addressing what the "Details" will even link too. I wanted to see if i could even pull off what i had created in Photoshop. I'm thinking in the long-run im going to use some Java script to give the "Details" link a floating light box affect that will open up a new window that is fixed to the middle of the screen.
If you are using HTML 5 tags to save on DIV, why are you wrapping every single section with a classed DIV? What's with the DIV for nothing around the IMG? (much less the two separate images for... well... I dunno what) What on earth makes barely one line of text an "article"?!? That's what I mean by "HTML 5 stupidity" -- I really don't understand where people seem to think there are ANY legitimate advantages to that BS, particularly the allegedly semantic new structural tags. Most of the time it's like people are slapping "meanings" around things that don't need them, or mean the opposite of what they are. I don't think I'll ever understand why people seem to think HTML 5 so far as semantic markup goes does ANYTHING useful. Just seems to me to legitimize sloppy coding practices from a decade and a half ago. Of course, the APO is a bit wonky, much less the accessibility /FAIL/ of fixing the layout width.