...

View Full Version : Box Style in CSS



dawebboy
07-16-2008, 05:29 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 some wrong way

here is a preview for what i want to build

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

any help please

Regards

Dawebboy

abduraooft
07-16-2008, 05:43 PM
Have a look at

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#wrap div{
float:left;
border:1px solid #000;
width:30&#37;;
padding:5px;
}
#wrap h2{
border-bottom:1px solid #000;
}
#wrap ul{
list-style:square;
}
</style>
</head>

<body>
<div id="wrap">
<div>
<h2>A</h2>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div>
<h2>B</h2>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div>
<h2>C</h2>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
</body>
</html>

BoldUlysses
07-16-2008, 05:44 PM
Pretty easy. Make each of the boxes a separate div and float:left with margins in place to space them apart.

Something like this:


<div class="box">
<h3>Header</h3>
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</div>

with CSS applied:


.box {
float:left;
height:##px;
width:##px;
margin:##px;
}

Insert your own values to suit. Beyond that, style the text using the guidelines here (http://www.w3schools.com/css/css_reference.asp).

jcdevelopment
07-16-2008, 05:48 PM
well jus create a div called box1



.box1 {
width:300px;
height:300px;
border:1px solid #999;
}


Then for the rest, inside the box.

img.imageBox {/*for the image at the top [mas controls]*/
width:390px;
height:30px;
margin:0 auto;
}
ul.listBox li {
list-style-type:square;
list-style-position:inside;
}

HTML

<div class="box1">
<img src="img.gif" class="imageBox" alt="" />
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>

EDIT** wow im late!

dawebboy
07-16-2008, 06:46 PM
sorry posted twice check the below text

dawebboy
07-16-2008, 06:51 PM
thank you very much for your help guys

what i came up with is i created 3 individual boxes , 3 of them have 3 different colors .

what i am stuck right now is the border color & header should be the same & the other content should be in black with in the box , other problem is the bottom border is not displaying .can any one help with this issue ?

another issue is : ist possible to have the list-squares to be different color in each boxes ? else can you suggest me how to place image in different boxes

My code



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

#wrap div{
float:left;
width:25%;
padding:5px;
margin:10px;
}

#wrap .heading1{
color:#f30000;
border:1px solid #f30000;
border-bottom:1px solid #f30000;
}
#wrap .heading2{
border:1px solid #0069ac;
border-bottom:1px solid #0069ac;
}
#wrap .heading3{
border:1px solid #f46018;
border-bottom:1px solid #f46018;
}

#wrap ul{
list-style:square;
}
</style>

</head>

<body>
<div id="wrap">
<div class="heading1">
<h2> Heading 1</h2>
<ul>
<li>H1 txt1</li>
<li>H1 txt2</li>
<li>H1 txt3</li>
</ul>
</div>
<div class="heading2">
<h2>Heading 2</h2>
<ul>
<li>H2 txt1</li>
<li>H2 txt2</li>
<li>H2 txt3</li>
</ul>
</div>
<div class="heading3">
<h2>Heading 2</h2>
<ul>
<li>H3 txt1</li>
<li>H3 txt2</li>
<li>H3 txt3</li>
</ul>
</div>
</div>
</body>
</html>

BoldUlysses
07-16-2008, 07:17 PM
Try this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

#wrap div{
float:left;
width:25&#37;;
padding:5px;
margin:10px;
}

#wrap .heading1{
color:#f30000;
border:1px solid #f30000;
}
#wrap .heading2{
border:1px solid #0069ac;
}
#wrap .heading3{
border:1px solid #f46018;
}

#wrap .heading1 h2{
border-bottom:1px solid #f30000;
}
#wrap .heading2 h2{
border-bottom:1px solid #0069ac;
}
#wrap .heading3 h2{
border-bottom:1px solid #f46018;
}

#wrap ul{
list-style:square;
}
</style>

</head>

<body>
<div id="wrap">
<div class="heading1">
<h2> Heading 1</h2>
<ul>
<li>H1 txt1</li>
<li>H1 txt2</li>
<li>H1 txt3</li>
</ul>
</div>
<div class="heading2">
<h2>Heading 2</h2>
<ul>
<li>H2 txt1</li>
<li>H2 txt2</li>
<li>H2 txt3</li>
</ul>
</div>
<div class="heading3">
<h2>Heading 2</h2>
<ul>
<li>H3 txt1</li>
<li>H3 txt2</li>
<li>H3 txt3</li>
</ul>
</div>
</div>
</body>
</html>

dawebboy
07-16-2008, 07:47 PM
thanks a lot msuffern

it solves the issue . well any suggestion regarding the list-square , can we change the colors for the list-square , else how can i replace the list squares with images .

jcdevelopment
07-16-2008, 07:58 PM
list-style-image:url(image.gif);

not sure if ou can change the color.

BoldUlysses
07-16-2008, 08:23 PM
If you're going to replace the squares with an image, I'd do it this way:


li {
background:url("image.gif") left center no-repeat;
padding-left:12px;
}

...as recommended by Aero. Adjust left padding to space the text away from the list markers. It makes the vertical alignment of the list markers more consistent cross-browser.

dawebboy
07-18-2008, 01:06 AM
thanks a lot for the help guys . i almost fixed everything . but when i put individual colors for each heading , actual colors are not displaying in FF3 & they are working in IE 7 . any known issues ?

macwiz
07-18-2008, 01:10 AM
Are you using colors or hex codes? CSS supports statements like

color:blue;
but they can be different per browser. Try using hex values.

Also, FF3 just came out. It has bugs. Give it time.

dawebboy
07-20-2008, 12:56 AM
sorry for replying in late

well i am using hex codes , you were true. FF3 might take some time .

but normal hex colors has to be shown right ?

is there any other alternate solution mate



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum