Log in

View Full Version : Box Type in CSS


dawebboy
07-16-2008, 03:44 PM
Hello Friends

i am new to this community and new to css. i need some help for building a box in css . i am sorry if i call it in wrong manner

here is a preview for what i want to build

http://img329.imageshack.us/img329/9820/img49dp3.gif

any help please

Regards

Dawebboy
Nile
07-17-2008, 03:45 AM
Here's the first, you can make the rest:


<html>
<head>
<style type="text/css">
.div1 {
margin: 0;
border: 1px solid #006666;
padding: 15px;
width: 225px;
height: 95px;
font-family: arial;
}
.div1 .head {
font-family: arial;
font-size: 14px;
color: #993333;
border-bottom: 1px solid #993333;
}
.div1 dl {
font-size: 12px;
list-style-type: square;
color: #CC6699;
padding-left: 10px;
}
</style>
</head>
<body>
<div class="div1">
<p class="head"><b>mas</b> controls</p>
<dl>
<li>LabLink<small><sub>TM</sub>&nbsp;<sup>XL</sup></small></li>
<li>MAS<small><sup>&reg;</sup></small> Control Products</li>
<li>Watch Video</li>
</dl>
</div>
</body>
</html>
TheJoshMan
07-20-2008, 02:57 AM
Here you go, I did a little editing to the first one that Niles made and also whipped up the other two as well since I'm bored out of my mind at the moment.



<html>
<head>
<style type="text/css">
.div1 {
margin: 0;
border: 1px solid #006666;
padding: 15px;
width: 280px;
height: 95px;
font-family: arial;
}
.div1 .head {
font-family: arial;
font-size: 14px;
color: #993333;
border-bottom: 1px solid #993333;
}
.div1 dl {
font-size: 12px;
list-style-type: square;
color: #CC6699;
padding-left: 10px;
}

.div1 dl b{
color:#006666;
font-weight:normal;
}



.div2 {
margin: 0;
border: 1px solid #006666;
padding: 15px;
width: 280px;
height: 95px;
font-family: arial;
}
.div2 .head {
font-family: arial;
font-size: 14px;
color: #006666;
border-bottom: 1px solid #006666;
}
.div2 dl {
font-size: 12px;
list-style-type: square;
color: #006666;
padding-left: 10px;
}




.div3 {
margin: 0;
border: 1px solid #006666;
padding: 15px;
width: 280px;
height: 95px;
font-family: arial;
}
.div3 .head {
font-family: arial;
font-size: 14px;
color: #0099CC;
border-bottom: 1px solid #0099CC;
}

.div3 dl {
font-size: 12px;
list-style-type: square;
color: #66CCCC;
padding-left: 10px;
}

.div3 dl b{
color:#006666;
font-weight:normal;
}
</style>
</head>

</style>
</head>
<body>
<div style="display:inline; padding:15px;">

<div class="div1">
<p class="head"><b>mas</b> controls</p>
<dl>
<li><B>LabLink<small><sub>TM</sub>&nbsp;<sup>XL</sup></small></B></li>
<li><B>MAS<small><sup>&reg;</sup></small> Control Products</B></li>
<li><B>Watch Video</B></li>
</dl>
</div>

<br />

<div class="div2">
<p class="head"><b>Casco</b> document standards</p>
<dl>
<li>DOCUMENT Web Services</li>
<li>CAL&bull;VER<sup>®</sup> Linearity Standards</li>
</dl>
</div>

<br />

<div class="div3">
<p class="head"><b>Drug</b> monitoring & immunoassays</p>
<dl>
<li><B>Assays</B></li>
<li><B>Drugs of Abuse</B></li>
<li><B>Calibrators and Controls</B></li>
<li><B>Theraputic Drug Monitoring</B></li>
</dl>
</div>

</div>
</body>
</html>


Note: There is a messy hack in the CSS to change the text color and make it different from the bullet color... If anyone knows a better way of achieving this, feel free to post it up!
TheJoshMan
07-20-2008, 04:46 AM
Does anyone know a better way to achieve what I was shooting for with that messy hack?

I've been curious every since I did it.
TheJoshMan
07-20-2008, 08:18 AM
...Nobody?