|
|
Posted by Froefel on 07/26/07 10:14
I'm trying to do something very basic, using CSS instead of tables.
Doing it the table-way I would have been done in 5 minutes... trying
to accomplish it in CSS it's taken me over 2 hours already. I'm sure
someone with CSS knowledge has a 5-minute solution to my problem...
Anyway, just venting a little bit.. here goes:
I'm trying to create a box with a header, using DIVs. The box should
look like this:
----------------------------------------------
| Panel Header |
|--------------------------------------------|
| Panel Content |
| |
| |
|--------------------------------------------|
The Panel Header should have a left and rigfht margin of 5px and a top
and bottom margin of 2px. The Header has a gradient background image
and should not have a border.
The Panel Content should have an all-round margin of 5px and a 1px
border.
The CSS I have so far is:
..PanelHeader {
width:100%;
height:15px;
padding:2px 5px 2px 5px;
cursor: pointer;
vertical-align: middle;
background-image: url(images/bg-collapsepanel_green.png);
background-repeat:repeat-x;
color:#FFF;
font-weight:bold;
}
..PanelContent {
border:1px solid #334444;
width:100%;
padding:5px;
}
The markup is something like this:
<table cellspacing="0" cellpadding="0" style="width:100%">
<tr>
<td style="width:50%">Some content on the left</td>
<td style="width:50%">
<div class="PanelHeader">Header text</div>
<div class="PanelContent">Content text</div>
</td>
</tr>
</table>
I'm having 2 problems:
1. The Content portion stick out by 2px to the right instead of being
aligned with the Header portion
2. The Header and Content are wider than the TD in which they are
contained. Because the TD is part of a table that has a width=100%,
the Header and Content DIVs actually extend beyond the browser window.
Now I have read up on how both margin and padding add pixels to the
element's basic dimensions. but if that's the case, how on earth can
one create the effect of INNER margins or padding, like how it works
for tables??
Any help would be greatly appreciated.
-- Hans
Navigation:
[Reply to this message]
|