What is the css for this in 1 single go?

HTML & CSS
1

Hello,

I am trying to convert the tabled box below into css…but i end up using 3 divs for it…how to do it using 1 div so it covers title and content in it ?

                <table border="1" width="100%" cellspacing="0" cellpadding="5" bordercolor="#C0C0C0" style="border-collapse: collapse">
                <tr>
                        <td class="tblhead">Some title</td>
                </tr>
                <tr>
                        <td bgcolor="#ED7D0F" height="5"></td>
                </tr>
                <tr>
                        <td bgcolor="#F9F9F9">Some content</td>
                </tr>
                </table>

Thanks.

2

Hi,

Being minimalist you could do this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.wrap {
    border:1px solid #c0c0c0;
    min-height:0;
    background:#ED7D0F;
}
* html .wrap {
    height:1&#37;;
    overflow:visible
}
.wrap h2 {
    font-size:100%;
    color:#000;
    margin:0 0 10px;
    padding:5px;
    background:#fff;
    border-bottom:1px solid #c0c0c0;
    font-weight:normal;
}
p {
    background:#fff;
    margin:0;
    padding:5px 5px;
    border-top:1px solid #c0c0c0;
}
</style>
</head>
<body>
<div class="wrap">
    <h2>Some title</h2>
    <p>Some content</p>
</div>
</body>
</html>

However if you want more p elements in that section then the p should be wrapped in a div and the p styles applied to the div instead.

3

Something a little bit like this (no div needed at all):

HTML

<h1>Some Title</h1>

<p>Some content.</p>

CSS


h1 {
  margin: 0 0 5px;
  padding: 5px;
}

p {
  margin: 0;
  padding: 5px;
}

EDIT: ah silly me, I didn’t notice those colors. Nice one, Paul.

4

Hi,

Thanks it works great. One small thing more…i have 3 boxes like that side by side of 200 width each but after using your css version i have used it on many other places where the 100% width is working great. So how can i have 3 boxes from same code side by side ?

Thanks.

5

Ok i achieved that using float: left and width: 200px; but now when i have put li’s and br’s in the content area the background color is coming as orange instead of grey how to fix that ?

Thanks.

6

Hi,

As I suggested in my first post that if you had more elements to cater fo you would need and extra wrapper. :slight_smile:

e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.wrap {
    border:1px solid #c0c0c0;
    min-height:0;
    background:#ED7D0F;
    width:200px;
    float:left;
    margin:10px;
    display:inline;
}
* html .wrap {
    height:1&#37;;
    overflow:visible
}
.wrap h2 {
    font-size:100%;
    color:#000;
    margin:0 0 10px;
    padding:5px;
    background:#fff;
    border-bottom:1px solid #c0c0c0;
    font-weight:normal;
}
div {
    background:#fff;
    margin:0;
    padding:5px 5px;
    border-top:1px solid #c0c0c0;
}
p {
    margin:0 0 1em
}
</style>
</head>
<body>
<div class="wrap">
    <h2>Some title</h2>
    <div>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
    </div>
</div>
<div class="wrap">
    <h2>Some title</h2>
    <div>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
    </div>
</div>
<div class="wrap">
    <h2>Some title</h2>
    <div>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
    </div>
</div>
</body>
</html>
7
  • html .wrap {
    height:1%;
    overflow:visible
    }

Am I correct in saying this is the holy hack and expands the container to fit the inside contents for IE6?

And why set it to 0?:

.wrap {
min-height:0;
…

I have used these before but just trying to get a better understanding.

8

Hi,

Thanks for this but it has screwed the layout of the box. Please check. I also noticed that this is going to cause a lot of issues. Can using the earlier I can have split it into 2 div so by doing the following i can achieve ?

<div class=“heading”>Some heading</div>
then the heading with orange bar below comes

and

<div class=“somecont”>anything goes here</div>
any i can put anything like p, li, table etc. without causing any issues… ?

Thanks.

9

The height:1% is to force haslayout and although it was previously called the “holly hack” it is better classed as a haslayout trigger or IE6.

However it’s not needed now that the element has been afforded a width as haslayout will be triggered by the dimension. I just forgot to pull the unneeded code out.

The overflow:visible was a precautionary measure because a lot of people use overflow:hidden as a clearing mechanism for floats but setting overflow;hidden and height:1% together would ensure that nothing is visible if the 1% can be resolved. IE6 auto clears floats when haslayout is in effect anyway so overflow;hidden isn’t needed and can be set back to visible.

And why set it to 0?:

min-height:0 is a haslayout trigger for IE7 and the reason that zero is used because that using it will have no impact on the layout at all as far as changing the appearance. It gives ie7 haslayout while leaving the elements styling completely unchanged.

Again it is not needed in the latest example I offered.

10

In what way has the layout changed? It looks exactly like it is supposed to look (see attachment for a screenshot). You may have to explain in detail what “screwed the layout” means exactly as I can’t see a difference at all.:slight_smile:

Can using the earlier I can have split it into 2 div so by doing the following i can achieve ?

<div class=“heading”>Some heading</div>
then the heading with orange bar below comes
<div class=“somecont”>anything goes here</div>

No you should never do something like this:
<div class=“heading”>Some heading</div>

It should always be the most semantic html element for the job in hand:

e.g.
<h2>Heading title </h2>

Only wrap a div around it if you want more elements in that section but that wasn’t what you asked for.:wink:

The two element need to be in a container so you do need a div around the whole lots as in my example.

any i can put anything like p, li, table etc. without causing any issues… ?

Here is a list element added to my previous code with no problem at all.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.wrap {
    border:1px solid #c0c0c0;
    background:#ED7D0F;
    width:200px;
    float:left;
    margin:10px;
    display:inline;
}
.wrap h2 {
    font-size:100%;
    color:#000;
    margin:0 0 10px;
    padding:5px;
    background:#fff;
    border-bottom:1px solid #c0c0c0;
    font-weight:normal;
}
div {
    background:#fff;
    margin:0;
    padding:5px 5px;
    border-top:1px solid #c0c0c0;
}
p {
    margin:0 0 1em
}

ul{
    margin:1em 0;
    padding:0 0 0 1.5em
}
</style>
</head>
<body>
<div class="wrap">
    <h2>Some title</h2>
    <div>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <ul>
            <li><a href="#">A linked list</a></li>
            <li><a href="#">A linked list</a></li>
            <li><a href="#">A linked list</a></li>
            <li><a href="#">A linked list</a></li>
            <li><a href="#">A linked list</a></li>
            <li><a href="#">A linked list</a></li>
            <li><a href="#">A linked list</a></li>
        </ul>
    </div>
</div>
<div class="wrap">
    <h2>Some title</h2>
    <div>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
    </div>
</div>
<div class="wrap">
    <h2>Some title</h2>
    <div>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
    </div>
</div>
</body>
</html>

If your requirements have changed since the first post then you may need to provide an example with the content that you are using so that we can see in detail what is required. However the code I gave above is easily changed to suit. If you want more elements in the heading then just transfer the styles to a parent div instead. You can use exactly the same format.

e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.wrap {
    border:1px solid #c0c0c0;
    background:#ED7D0F;
    width:200px;
    float:left;
    margin:10px;
    display:inline;
}
.header {
    font-size:100%;
    color:#000;
    margin:0 0 10px;
    padding:5px;
    background:#fff;
    border-bottom:1px solid #c0c0c0;
    font-weight:normal;
}
.header h2 {
    font-size:120%;
    margin:0;
    padding:0 0 .5em
}
.main {
    background:#fff;
    margin:0;
    padding:5px 5px;
    border-top:1px solid #c0c0c0;
}
p {
    margin:0 0 1em
}
ul {
    margin:1em 0;
    padding:0 0 0 1.5em
}
</style>
</head>
<body>
<div class="wrap">
    <div class="header">
        <h2>Some title</h2>
        <p>Some more stuff</p>
    </div>
    <div class="main">
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <ul>
            <li><a href="#">A linked list</a></li>
            <li><a href="#">A linked list</a></li>
            <li><a href="#">A linked list</a></li>
            <li><a href="#">A linked list</a></li>
            <li><a href="#">A linked list</a></li>
            <li><a href="#">A linked list</a></li>
            <li><a href="#">A linked list</a></li>
        </ul>
    </div>
</div>
<div class="wrap">
    <div class="header">
        <h2>Some title</h2>
        <p>Some more stuff</p>
    </div>
    <div class="main">
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
    </div>
</div>
<div class="wrap">
    <div class="header">
        <h2>Some title</h2>
        <p>Some more stuff</p>
    </div>
    <div class="main">
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
    </div>
</div>
</body>
</html>

Hope that helps :slight_smile:

11

Hi,

Basically i created a html template in frontpage using tables later when i tried to put that in joomla i reliased that it needs css thing. Then i asked you that css box which i had in table. Now when i used joomla (my first experiment) i saw that it puts a lot of stuff on its own on the heading and content so i cannot use your earlier code and i need that layout in 2 different classes so that i can assign that it my style sheet and joomla picks it up.

Hope i make sense.

Thanks.

12

Ok - the last example should be what you want as it contains the content in a couple of divs so you can add as much as you like in there.

Try it and see and if you still have problems then come back and we’ll see if there’s something else we can do :slight_smile:

13

Hi,

I changed the css code to this and its fine. I just need 2 things in this one:

.rght_box
{
    border:1px solid #000;
    min-height:0;
    background:#ED7D0F;
}
* html .rght_box
{
    height:3px;
    overflow:visible
}
.rght_box h2
{
    font-size:100&#37;;
    font-weight: bold;
    color:#fff;
    margin:0 0 3px;
    padding:5px;
    background:#000;
    border-bottom:1px solid #000;
    text-align: center;
}

.rght_box p
{
        background:#F9F9F9;
        margin:0;
        padding:5px 5px;
}

.rght_box li
{
        background-color: #F9F9F9;
        padding-left: 20px;
}

.rght_box center
{
        background-color: #F9F9F9;
}
  1. I should be able to put other elements like li’s, table etc. in the content area.
  2. I should be able to assign it to any element to convert it into the box. Example:

If i want to make a h2 the heading then i should do: <h2 class=“boxheading”>Some heading</h2> and it should become the header with orange line below and i have text content so i just do: <p class=“boxcontent”>Some content</p> and it becomes that.

Thanks.

14

I’d need to see the html you are using but the last example I posted already has lists and other elements in the content area. Once the div has been defined as the container you can put what you like in there.

  1. I should be able to assign it to any element to convert it into the box. Example:

Didn’t quite follow that :slight_smile:

If i want to make a h2 the heading then i should do: <h2 class=“boxheading”>Some heading</h2> and it should become the header with orange line below and i have text content so i just do: <p class=“boxcontent”>Some content</p> and it becomes that.

Thanks.

If the element is unique within context you can style it from the parent (.wrap h2) without adding an extra class which will ensure the code stays as clean as possible.

The orange line was just the background of .wrape showing through and became visible by the margins I applied to reveal just a portion of it. That technique was used to save adding anther element into the mix.

It’s a little hard to give specifics as I am still referring to the code I posted rather than the actual html you are using so you may need to run us up a full demo of your code if none of the above helps :slight_smile:

15

Hi,

Your code is absolutely fine. But the issue is that joomla won’t let me specify <div class=“wrap”> coz its dynamic thing. But i can override its style using my style code. So i need the whole thing without the <div class=“wrap”>.

And as you said that I must keep headings in h2 or similar tags and content like that also, so i need so that i can just specify the class of heading to the heading code in joomla and class of content to content code.

Where as now i have to put <h2>Some heading</h2> inside the wrap and then it works. I need h2 to work without the wrap like this: <h2 class=“boxhead”>Some heading</h2>
and then i should be able to specify content similarly: <p class=“boxcont”>Some content</p>

So earlier:

<div class=“wrap”>
<h2>Some heading</h2>
<p>some content</p>
</div>

Now i need:
<h2 class=“boxhead”>Heading</h2>
<p class=“boxcont”>Content</p>

Hope i explained well this time :slight_smile:

Thanks.

16

The height:1% is to force haslayout and although it was previously called the “holly hack” it is better classed as a haslayout trigger or IE6.
Thanks.

The overflow:visible was a precautionary measure because a lot of people use overflow:hidden…
Glad you mentioned it, I was thinking exactly along those lines.

min-height:0 is a haslayout trigger for IE7 and the reason that zero is used because that using it will have no impact on the layout at all as far as changing the appearance…
Yes starting to understand haslayout now, only really started using/understanding the haslayout recently a bit more reading I think and thanks for the good explanations :slight_smile:

So IE6 / IE7 need separate haslayout techniques?

Many reason being I went for a job interview last week, 3 floors with 2500 workstations running IE6 he told me they might be updating sometime in August to IE7, so for everybody (including myself) IE6 is still a major concern… the client (if anybody interested) was a big bank… still using frontpage (:

Tapan - I’ve done a bit of Joomla in the past I know exactly whats happening. Read up on template overrides and you’ll be able to override the out-of-the-box styles with your own. And yes this will remove the need for any <tables> in your markup, a steep learning curve if you want to style each individually module but well worth it, Joomla has all kinds of unnecessary code and javascript librarys that take up all the processing power and slows down your sites/applications dramatically.

Hope this helps and thanks Paul :slight_smile:

17

There are better CMSs out there—ones that don’t interfere with your code at all. They give you a blank page to work with, so that the code is all yours, pure and clean. Examples include MODx and ExpressionEngine.

No, coz it’s a yucky thing. :wink:

18

So earlier:

<div class=“wrap”>
<h2>Some heading</h2>
<p>some content</p>
</div>

Now i need:
<h2 class=“boxhead”>Heading</h2>
<p class=“boxcont”>Content</p>

Although I could style those two elements as you wanted (more or less) it would not give a usable structure unless they could be wrapped in a parent element to group them together so that they can be floated in blocks as you requested.

It might be better if you could provide the exact html that you need to use and to see if we can style it as required. However if you can’t add anything to the html I don’t see how we can get around this.

It may be something hat you have to over-ride as mentioned by computerbarry.

I can show you how things should be coded but then you need to take that information and make it work for your situation. I don’t get involved in CMS (thank god) so I don’t envy you.

19

Hi,

Ya i am checking on override thing. I’ll get back if i have any further ques.

Thanks.