|
|
|
|
Like this code?
Show the author your appreciation.
|
|
| |
Here is a simple CSS Container which you can use to Highlite you Messages.
Good eye-caching look...
First make a folder with the name 'css' and save the following code with the name test2.css
|
body{
background: #fff;
line-height: 1.1;
color: #666;
font: small Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#content {
width: auto;
background: #fcfcff ;
padding: 0 6px .5em 12px;
overflow: visible;
min-width:250px;
clear: both!important;
top:1em!important;
margin-bottom:1em!important;
}
#columan {
float:left;
clear: left;
width:225px;
margin:0;
}
div.data{
width:auto!important;
width:100%;
background-color: #FFFAF0;
border:1px solid #730;
margin-bottom:1em ;
position: relative;
padding:.5em 0 .8em 0;
}
.clearfix {
display:block;
position:relative
}
#content div h3 {
font: normal .9em Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
height:1em;
padding:2px 1.5em 4px .5em;
clear: right;
color: #9B7355;
background:transparent url(bulletr-br.gif) right center no-repeat;
margin:0;
position:absolute;
right:-1px;
top:-.8em;
border:0 none;
}
div.data a:link, div.data a:visited{
color:#730
}
div.data *{
margin:4px 6px 6px 10px;
}
div.data * *{
margin:0;
}
div.data h4{
color: #E14900;
}
div.data ul, div.data ol{
margin: 5px 0 10px 5px;
padding:0 0 0 5px;
font-size:77%;
font-weight:bold;
}
div.data ul, div.data ol {
border-bottom: 1px #e0d0c0 solid;
}
div.data p {
font-size:77% ;
margin-bottom:10px
}
div.data li{
margin: 0px 5px 5px 18px;
padding:0;
} | |
Now See the power of test2.css by testing it using following XHTML code...
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>CSS Contener </title>
<link rel="stylesheet" type="text/css" media="all" href="css/test2.css" />
</head>
<body>
<div id="content" class="clearfix">
<div id="columan">
<div class="data clearfix">
<h3>Groupbox Title </h3>
<h5><a href="http://www.geocities.com/cdy2k2002/" rel="external">Here is a Good Title.!!!
</a></h5>
<p>Here is text message.. you can write what you want it...<br /></p>
<p>Here is text <strong>message</strong>.. you can write what you want it...<br /></p>
<p><a href="http://www.geocities.com/cdy2k2002/" rel="external">
Tell me more..</a></p>
</div>
</div>
</div>
</body>
</html> | |
|
|
| Rollover Image link effect using only single image.
Categories : Web Design, HTML, CSS, Beginner Guides | | | PHPtabZ.. PHP controlled CSS Tab Menu
Categories : PHP, CSS, Web Design | | | CSS Vertical Navigator , With Coll CSS Look
Categories : CSS, Web Design, Beginner Guides | | | How to make a scrolling Div
Categories : HTML, CSS | | | CSS Buttons Styles
Categories : CSS, HTML, Beginner Guides | | | Javascript animated menu items
Categories : DHTML, CSS, Java Script, HTML | | | An example of how to place elements on the footer of a page with CSS/HTML so that the elements are always on the bottom, regardless of the client resolution.
Categories : HTML, CSS, Interfaces | | | Date layout using CSS
Categories : CSS, Date Time, Web Design | | | Page Loading Message shown during the time your site's page is being loaded.
Categories : HTML, CSS, Java Script | | | Javascript Background Scroller
Categories : Java Script, CSS, HTML | | | How to keep your tables width stable even if you have long strings inside.
Categories : CSS, Web Browsers, HTML, Beginner Guides | | | Table editable dynamic form with edit + selection (select / option) + checkbox.
Categories : Java Script, DHTML, User Interface, CSS, HTML | | | <FORM> causing an extra line in HTML output on IE
Categories : Beginner Guides, HTML, CSS | | | Higly Customizable Javascript Calendar Script
Categories : Java Script, Calendar, Date Time, HTML, CSS | | | Simple Javascript CSS Digital Clock
Categories : Java Script, Date Time, CSS, Beginner Guides, Web Design | |
|
|
