SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2013
    Location
    Philippines
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do i style this contact addres/contact banner

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

    contact_ad.jpgcontact_ad.jpg

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,333
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by clestcruz View Post
    I would rather code this than place it as an image.
    Good idea.

    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. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    <!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


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •