How do i style this contact addres/contact banner

HTML & CSS
1

I seem to be having trouble in styling this contact banner/contact ad. I would rather code this than place it as an image.

2

Good idea. :slight_smile:

So, what code do you have so far? You can at least type up the content and post it here. You could perhaps use a UL or DL to organise that content.

3

The attachment has been approved now and is visible.

I’m not sure what part you were having trouble with as this is pretty straight forward styling much like any other elements.

Here’s a rough mock up for you anyway.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.visit {
	width:350px;
	padding:25px 50px;
	margin:auto;
	-moz-border-radius:6px 6px 0 0;
	-webkit-border-radius:6px 6px 0 0;
	border-radius:6px 6px 0 0;
	background: #faeac6; /* Old browsers */
	background: -webkit-gradient(linear, left top, left bottom, from(#faeac6), to(#fff)); /* Saf4+, Chrome */
	background: -webkit-linear-gradient(top, #faeac6, #fff); /* Chrome 10+, Saf5.1+ */
	background: -moz-linear-gradient(top, #faeac6, #fff); /* FF3.6 */
	background: -ms-linear-gradient(top, #faeac6, #fff); /* IE10 */
	background: -o-linear-gradient(top, #faeac6, #fff); /* Opera 11.10+ */
	background: linear-gradient(top, #faeac6, #fff); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#faeac6", endColorstr="#ffffff", GradientType=0 ); /* IE6-9 */
	color:#843a93;
}
.visit h3 {
	border-top:3px double #d9c588;
	border-bottom:3px double #d9c588;
	margin:0 0 1em;
}
.visit dl {
	padding:1px 20px;
	font-size:80%
}
.visit dt, .visit dd {
	display:inline-block;
 *display:inline;/* ie6/7 inline-block hack */
	zoom:1.0;/* ie6/7 inline-block hack */
	vertical-align:top;
	width:80px;
	padding:0 0 0 25px;
	margin:0 0 10px;
}
.visit dt {
	text-transform:uppercase;
	font-weight:bold;
}
.visit dd {
	width:195px;
	padding:0;
}
dt.address { background:url(images/address-icon.gif) no-repeat 0 0 }
dt.phone { background:url(images/phone-icon.gif) no-repeat 0 0 }
dt.mobile { background:url(images/mobile-icon.gif) no-repeat 0 0 }
</style>
</head>

<body>
<div class="visit">
		<h3>Visit Us!</h3>
		<dl>
				<dt class="address">Address:</dt>
				<dd>Lorem ispum dolor sit amet loerem ispum dolor sit amet loerem ispum dolor sit amet loerem ispum dolor sit amet loerem ispum dolor sit amet loerem ispum dolor sit amet loerem </dd>
				<dt class="phone">Phone:</dt>
				<dd>+00-0- 000</dd>
				<dt class="mobile">Mobile:</dt>
				<dd>+1234-567-8900<br>
						+2345-746-8900</dd>
		</dl>
</div>
</body>
</html>

Hope it helps:)