...

View Full Version : CSS Help Styling Divs



blow
04-29-2011, 09:49 PM
Im tring to make a custom page for vbulletin, but im having trouble styling the div containers.

http://s2.imgkeep.com/i/00009/pz6kupwsdr50.png

See the colored boxes, i want them to look like this:

http://s2.imgkeep.com/i/00009/9yyc917ij9fv.png

Here's my code:


$stylevar[htmldoctype]
<html dir="$stylevar[textdirection]" lang="$stylevar[languagecode]">
<head>
<!-- no cache headers -->
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="Cache-Control" content="no-cache" />
<!-- end no cache headers -->
<title><phrase 1="$vboptions[bbtitle]">$vbphrase[x_powered_by_vbulletin]</phrase></title>

<style type="text/css">
.outer {
width:100%;
height: 500px;
border:1px solid red;
padding: 0px;
}
.first {
float:left;
width: 219px;
height: 200px;
margin: 5px 5px 5px 5px;
background: url(images/styles/boss/style/tcat.gif) repeat-x top left;
border:1px solid black;
}

.second {
float:left;
width: 218px;
height: 200px;
margin: 5px 0px 5px 0px;
background: url(images/styles/boss/style/tcat.gif) repeat-x top left;
border:1px solid black;
}

.third {
float:left;
width: 218px;
height: 200px;
margin: 5px 0px 5px 5px;
background: url(images/styles/boss/style/tcat.gif) repeat-x top left;
border:1px solid black;
}

.forth {
float:left;
width: 219px;
height: 200px;
margin: 5px 5px 5px 5px;
background: url(images/styles/boss/style/tcat.gif) repeat-x top left;
border:1px solid black;
}

</style>

$headinclude </head> <body> $header $navbar
<table width="100%" height="100%" border="0" align="center" cellpadding="0" cellspacing="$stylevar[cellspacing]" class="all">
<thead>


<div class="outer">
<div class="first">50</div><div class="second">50</div><div class="third">50</div><div class="forth">50</div>
</div>


<font size="2"><font face="Verdana, Arial, Helvetica, sans-serif"></font></font></div></td>
<if condition="$vboptions[showmoderatorcolumn]"> </if> </tr>
</thead>
$forumbits
<tbody>
</tbody>
</table>
$footer
</body>
</html>


I've added the background image at the top of the box to the div, thats ok
but then how do i add a alt image inside the box? Below that image?

And a separate little box around the date posted?

http://s2.imgkeep.com/i/00009/ate5z3gcvxwh.png

blow
04-30-2011, 05:21 PM
Just to summarize:
Really i need to know how to split each box into sections, so i can use my tcat image for the top of the box, & my alt image for the rest of it. Right now when i add the tcat image to the css for the box, i then cant add another image for below it.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum