I’ve regarded myself as moderately knowledgeable with CSS, but this one is stumping me. I’m looking for some help.
A little preface: I’ve built this the way I thought it should have gone, and then as soon as I dropped it in my wordpress template it broke. So now I’m trying alternate routes.
What I’m wanting to do (if you know anything about the typical structure of wordpress templates, you’re already on track).
On the single post template page (single.php) I’m attempting to add a “tool box” to the end. Different categories will have different tool boxes, and once I get one down the rest should be easy to plug in later. It will go right under the post and needs to be divided into 4 horizontal sections (columns). Directly under that horizontal section, another will be present, seamingly attached, displaying social bookmarks with a few icons going horizontally in one column. Then a third horizontal section directly under that with the category specific tool, in this test example a link with a background image. All should take up the full width of the page (flush with the post area).
First I went the road of inline lists and I can’t get it to render properly. I can’t determine where my structure is off at. I am going to attempt to upload the supporting files for any help you may be able to render. I will name my first born child after the kind soul that helps solve my problem.
This is the CSS snippet for the specific area
.toolboxarea {
background: #E1EABC url(images/bcnd_toolbox.jpg) repeat-x top left;
border: 4px solid #748338;
color: #999933;
display: block;
}
.toolboxarea ul {
border: 0;
margin: 0;
padding: 0;
display: block;
list-style-type: none;
}
.toolboxarea li {
display: inline;
list-style-type: none;
float: left;
text-align: center;
padding: 0;
margin: 0;
}
/*--==labels==--*/
.tooldiscuss {
background: transparent url(images/bull_discuss.gif) no-repeat top left;
margin: 0 0 0 5px;
padding-top: 0;
padding-bottom: 0;
padding-left: 20px;
padding-right: 5px;
text-align: left;
font-size 50%;
}
.toolfeed {
background: transparent url(images/bull_feed.gif) no-repeat top left;
margin: 0 0 0 5px;
padding-top: 0;
padding-bottom: 0;
padding-left: 20px;
padding-right: 5px;
text-align: left;
font-size 50%;
}
.tooltrack {
background: transparent url(images/bull_track.gif) no-repeat top left;
margin: 0 0 0 5px;
padding-top: 0;
padding-bottom: 0;
padding-left: 20px;
padding-right: 5px;
text-align: left;
font-size 50%;
}
.catlabel {
background: transparent url(images/lab_cat.jpg) no-repeat top left;
margin: 0;
padding 0;
text-align: left;
width: 100px;
height: 15px;
}
.ratelabel {
background: transparent url(images/lab_rate.jpg) no-repeat top left;
margin: 0;
padding 0;
text-align: left;
width: 100px;
height: 15px;
}
.sblabel {
background: transparent url(images/lab_sb.jpg) no-repeat top left;
margin: 0;
padding 0;
text-align: left;
width: 160px;
height: 15px;
}
.listcon1 {
width: 60px;
}
.listcon2 {
width: 100px;
}
.listcon3 {
width: 110px;
}
.listcon4 {
width: 100px;
}
.listcon5 {
width: 200px;
}
.daynum {
border: none;
font-size: 180%;
font-weight: bold;
color: #666666;
margin: 0;
padding: 2px 5px;
}
.dayname {
border: none;
color: #666666;
font-size: 90%;
font-weight: bold;
margin: 0;
padding: 2px 5px;
}
.month {
font-size: 90%;
color: #666666;
margin: 0;
padding: 2px 5px;
}
.toollabel{
font-size: 50%;
text-transform: uppercase;
color: #666666;
margin: 0;
padding-top: 2px
padding-bottom: 0;
padding-left: 5px;
padding-right: 5px;
text-align: left;
}
.tooltext{
font-size: 50%;
color: #666666;
margin: 0;
padding-top: 0;
padding-bottom: 0;
padding-left: 5px;
padding-right: 5px;
text-align: left;
}
.toolbox a img {
border: none;
margin-bottom : 5px;
}
.toolbox a img:hover, .toolbox a img:focus, .toolbox a img:active {
border: none;
}
.divider {
background: transparent url(images/bcnd_divider.jpg) no-repeat top left;
margin: 10px 4px 1px 4px;
width: 1px;
height: 78px;
}
This is the markup
<head>
<link rel="stylesheet" href="style2.css" type="text/css" media="screen" />
</head>
<body>
<p class="toolboxarea">
<ul class="toolboxarea">
<li>
<p class="dayname">MAR</p>
<p class="daynum">14 2006</p>
</li>
<li>
<div class="divider"></div>
</li>
<li>
<div class="catlabel"></div>
<p class="tooltext">Wordpress, Other</p>
</li>
<li>
<div class="divider"></div>
</li>
<li>
<div class="ratelabel"></div>
<p class="tooltext">Ratings go here</p>
</li>
<li class="toolitem">
<div class="divider"></div>
</li>
<li>
<p class="toolfeed">Feed</p>
<p class="tooldiscuss">Respond</p>
<p class="tooltrack">Trackback</p>
</li>
</ul>
</p>
<div class="sblabel"></div>
<div class="toolsocial">
Sociable links
</div>
<div class="devbutton">
DEVELOP THIS
</div>
</body>
Im attaching the full markup and CSS as well, because all of that may have something to do with it. Thanks.
Okay, this board can’t accept file attachments at this time. If you’re able to help, I will be more than ready to send over the source files. my email is: .(JavaScript must be enabled to view this email address)