Solved

border around image

Posted on 2011-09-04
4
362 Views
Last Modified: 2012-05-12
put a border around image 105x105 image

put the words
canon eos 550D
DSLR Body

105x105 image

719 inc VAT



and put a border around it
using css
0
Comment
Question by:rgb192
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 15

Accepted Solution

by:
Jagadishwor Dulal earned 500 total points
ID: 36481959
You have two options like you can use background image for the particular div or can create a style sheet like below:
Your Style:
<style>
#product{
	width:140px;
	height:190px;
	border:1px solid #CCC;	
	-moz-border-radius: 10px;
	border-radius: 10px;
	float:left;
	margin-right:20px;
}
#product:hover{
	width:140px;
	height:190px;
	border:1px solid #333;	
	-moz-border-radius: 10px;
	border-radius: 10px;
}

#product .title{
	color:#06C;
	font-weight:bold;
	text-align:center;
	margin:3px;
}
#product img{
	margin:5px 15%;
}
#product .price{
	text-align:center;
	margin-top:10px;
	color:#06C;	
}
</style>

Open in new window


and html:
<div id="product">
<div class="title">Camera</div>
<img src="images/canon-550d.gif" alt="Camera" />
<div class="price">$300</div>
</div>
<div id="product">
<div class="title">Camera</div>
<img src="images/canon-550d.gif" alt="Camera" />
<div class="price">$300</div>
</div>
<div id="product">
<div class="title">Camera</div>
<img src="images/canon-550d.gif" alt="Camera" />
<div class="price">$300</div>
</div>

Open in new window

0
 

Author Comment

by:rgb192
ID: 36484571
what color is the title

it is grey color
0
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 36487981
Use #aaaaaa for title
0
 

Author Closing Comment

by:rgb192
ID: 36490323
thanks
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article discusses four methods for overlaying images in a container on a web page
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question