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

any help please

Regards

Dawebboy

**Nile** · 07-17-2008, 03:45 AM

Here's the first, you can make the rest:

Code:

<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.

Code:

<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?

Thread: Box Type in CSS

Thread Tools

Search Thread

Box Type in CSS

I was bored...

Just curious...

Bookmarks

Bookmarks

Posting Permissions