0

Hi,

I am working with small academic project and I am stuck on creating presentation of single product from list of ptoducts.
I want to achieve something like that: (in attached graphic file) - may be without rounded corners.

I wrote code but it is not working properly...

<div style="width:405px; background-color:red; border:solid 1px; black">
	<div style="width:80px; background-color:yellow; float: left;">
		<div>
		there will be an image
		</div>
		description of an image
	</div>

	<div style="width:320px; background-color:lime; height:100%;">
		<div style="width:250px; background-color:blue; float:left; height:70%;">
		name of the product
		</div>
		<div style="width:65px; background-color: violet; float:right;">
		quantity
		</div>
		<div style="width:250px; background-color:navy; float:left;">
		description of the product
		</div>
		<div style="width:65px; background-color: grey; float:right;">
		price
		</div>
	</div>
</div>

Edited by questionary: n/a

Attachments Untitled.png 5.36 KB
3
Contributors
5
Replies
6
Views
8 Years
Discussion Span
Last Post by macneato
0
* {
			  margin: 0;
			  padding: 0;
			  border: 0;
			  font-family: sans-serif;
			  font-size: 1em;
			  font-weight: normal;
			  font-style: normal;
			  text-decoration: none;
			}
			
			
			
			.Productcontainer {
				width: 405px;
				height: 220px;
				border: 1px solid black;
				position:relative;
				margin: 10px auto;
				padding: 15px;
				
			}
			
			.Productimage {
				background: blue;
				width: 200px;
				height:200px; /* add 20px for desciption */
				position:relative;
				float:left;
			}
			
			.Productimage_desc {
				position:relative;
				height:20px;
			}
			
			.Productdetails {
				position:relative;
				margin-left: 210px; /* add 10px to img width, will give us decent padding */
			}
			
			.Productdetails p { /* Since i removed styling, this will add padding inbetween each of our paragraphs */
				padding-bottom:10px;
			}
<div class="Productcontainer">
        	<div class="Productimage">
        		<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Blue_Box_in_museum.jpg/200px-Blue_Box_in_museum.jpg">
        		<div class="Productimage_desc">This is the description</div>
        	</div>
			<div class="Productdetails">
				<p>Name of the product</p>
				<p>quantity</p>
				<p>description of the product</p>
				<p>price</p>
			</div>
		</div>
0

This would be my markup:

<div class="card">
	<img src="whatever"  />
	<p>description of an image</p>
        <ul>
             <li>name of the product</li>
	     <li>quantity</li>
	     <li>description of the product</li>
	     <li>price</li>
         </ul>
</div>

Notice the lack of presentation divs (no divitis).

This should make reading of the data in the absence of css a bit more 'real'.

You can achieve almost everything you need with CSS descendants:

/*do a reset css - i.e. give everything a value of 0/none etc. - including paddings and margins. Eric Meyer has an excellent version*/
/*assume the images in the markup will be 120px width X 80px height (change values accordingly)*/

.card{
  background-image: url(images/card.jpg); /*this gives the nice visuals/rounded edges etc without the hard work - BUT - text needs to ensure that it doesn't overrun the dimensions available to it*/
  background-repeat:no-repeat;
  width: 300px;
  height: 180px;
  padding: 20px; /*workable interior width = 300 - 2X20 = 260, height = 140px*/
}
.card p{
  width: 120px; /*set this to the width of the image so it fits nicely underneath*/
  margin-top: 5px; /*separate paragraph from image*/
}
.card ul{
  float:right;
  width: 120px /* this means that the 'data' will have a 20px gap between it and the image/paragraph*/
}
.card li{
 margin-bottom: 15px; /* just separates the list items from one another*/
}

.card ul li:first-child{
 font-size: 20px;/*make first list item BIGGER*/
 font-weight:bold;
}

CAVEAT: I haven't tried this - off the top of my head. You may find a considerable amount of tinkering is required here!

Edited by diafol: n/a

1

Cool approach. Should work. A few things i have noticed though.

IE 6 likes spaces when it comes to pseudo or it wont work

.card ul li:first-child/*note space */ {
font-size: 20px
font-weight:bold;
}

Secondly, ensure you dont get bullets

.card li{
margin-bottom: 15px
list-style: none
}

Fix some structure to get float

<div class="card">
			<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Blue_Box_in_museum.jpg/200px-Blue_Box_in_museum.jpg"  />
		        <ul>
		             <li>name of the product</li>
				     <li>quantity</li>
				     <li>description of the product</li>
				     <li>price</li>
		         </ul>
			<p>description of an image</p>		 
		</div>

finally add a clear both to the p

.card p{
			  width: 200px; /*set this to the width of the image so it fits nicely underneath*/
			  margin-top: 5px; /*separate paragraph from image*/
			  clear:both;
			}
Votes + Comments
Great couple of catches Mac - really appreciate it.
0

Yes well spotted Mac - rep to you. Like what you've done with it too.
Wrote it in a bit of a hurry, and missed a few things.

I had a little play with it and found that I forgot to float the image and paragraph. Doh! Unfortunately, this messed up the whole image -paragraph thingy. So I made these changes:

.card p img{
  display:block; /* in case image less than width of paragraph - don't want text wrapping*/
}
.card p{
  width: 120px; 
  margin-top: 5px; /*separate paragraph from image*/
  float:left;
}

Because I changed the image - paragraph relationship:

<div class="card">
	<p><img src="whatever"  />description of an image</p>
        <ul>
             <li>name of the product</li>
	     <li>quantity</li>
	     <li>description of the product</li>
	     <li>price</li>
         </ul>
</div>

I really don't know how you feel about that guys. Is it kosher? Image inside a p tag? If so, perhaps it's a little bit better than moving the p tag to below the list items. But I suppose that's just a matter of opinion.

0

Don't see why it shouldnt validate. A job well done!

Now it would be great, if "questionary" would log in, mark as solved and continue his small academic project

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.