Simple CSS box question

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:

Re: Simple CSS box question

On Jul 26, 6:14 am, Froefel wrote:
> 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...

So I ask you. Is it worth the effort? What will your visitors gain?
Have you had people tell you they will never visit your site because
you used tables for layout? If you are having this much trouble with
"something very basic" what kind of trouble are you going to have when
you run into something more difficult?

Sorry, I don't believe the benefits outweigh the efforts in a straight
conversion of a site. Now, if you were starting from scratch? Then I
would say yea, take a look at CSS layout. But not if you are
converting just to convert.

Re: Simple CSS box question

Actually this is a brand new intranet application in which a lot of
things are a first for me... first ASP.NET project, first time trying
to implement table-less layout... and first time juggling the pros and
cons of Ajax.NET.

So, anyone wanting to help me get the style definition, please let me
know...

-- Hans


On Jul 26, 1:34 pm, Travis Newbury wrote:
> On Jul 26, 6:14 am, Froefel wrote:
>
> > 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...
>
> So I ask you. Is it worth the effort? What will your visitors gain?
> Have you had people tell you they will never visit your site because
> you used tables for layout? If you are having this much trouble with
> "something very basic" what kind of trouble are you going to have when
> you run into something more difficult?
>
> Sorry, I don't believe the benefits outweigh the efforts in a straight
> conversion of a site. Now, if you were starting from scratch? Then I
> would say yea, take a look at CSS layout. But not if you are
> converting just to convert.

Re: Simple CSS box question

On Jul 26, 10:28 am, Froefel wrote:
> Actually this is a brand new intranet application in which a lot of
> things are a first for me... first ASP.NET project, first time trying
> to implement table-less layout... and first time juggling the pros and
> cons of Ajax.NET.

First, top posting is a no-no here.

Now, if you post a URL of your problem you will receive a ton of
answers. Then slowly the conversation will turn to a Flash no flash
argument, and it will end in a huge group hug...

Re: Simple CSS box question

Well bust mah britches and call me cheeky, on Thu, 26 Jul 2007 10:14:20 GMT
Froefel scribed:

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

Put a div in a div, the outer of which has no border, margins, or padding.

--
Neredbojias
Half lies are worth twice as much as whole lies.

Re: Simple CSS box question

Froefel wrote:
> Actually this is a brand new intranet application in which a lot of
> things are a first for me... first ASP.NET project, first time trying
> to implement table-less layout... and first time juggling the pros and
> cons of Ajax.NET.
>

Sounds challenging. I hope you aren't doing this in a professional
environment, and it's just a try for yourself in order to get hands on
those completely new technologies for you.

> So, anyone wanting to help me get the style definition, please let me
> know...
>

give us a URL, and we will give you some hints. For a start: drop your
table wrapper. The box you would like to get should be structured as
follows:

Re: Simple CSS box question

On 2007-07-26, Froefel wrote:
> 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%;
^^^^^^^^^^

Leave this out

> 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%;
^^^^^^^^^^^

And this

> padding:5px;
> }
>
> The markup is something like this:
>

Re: Simple CSS box question

In article
<1185449656.672663.317530@l70g2000hse.googlegroups.com>,
Travis Newbury wrote:

> On Jul 26, 6:14 am, Froefel wrote:
> > 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...
>
> So I ask you. Is it worth the effort? What will your visitors gain?
> Have you had people tell you they will never visit your site because
> you used tables for layout? If you are having this much trouble with
> "something very basic" what kind of trouble are you going to have when
> you run into something more difficult?
>
> Sorry, I don't believe the benefits outweigh the efforts in a straight
> conversion of a site. Now, if you were starting from scratch? Then I
> would say yea, take a look at CSS layout. But not if you are
> converting just to convert.

Where did he say he had a site in tables and was wanting to
convert? Wanting to know how to do something he can easily do and
has done for a demo here in tables is quite different.

--
dorayme

Re: Simple CSS box question

In article
<1185444860.903353.11430@z28g2000prd.googlegroups.com>,
Froefel wrote:

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

Except that the table you provide the code for does not look
anything like the ASCII drawing you present as an illustration of
what is wanted. Best to at least get the table to express what is
wanted and to post a url.

--
dorayme

Re: Simple CSS box question

Thanks to Ben C I jumped a huge step forward. Knowing that tables need
a width=100% in order to take up the entire width of a container
whereas DIV's do that without specifying a width fixed all my problems
(well, at least the ones described in my post).

Armed with this knowledge, I can now go back and get rid of the
container table as well and use floating DIV's. Thanks to everyone for
your input.

-- Hans



On Jul 26, 11:06 pm, Ben C wrote:
> On 2007-07-26, Froefel wrote:
>
> > 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%;
>
> ^^^^^^^^^^
>
> Leave this out
>
> > 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%;
>
> ^^^^^^^^^^^
>
> And this
>
> > padding:5px;
> > }
>
> > The markup is something like this:
> >