Splitting Category Nodes

[Dynamic]

Hey guys, sorry for all the questions. Hopefully it will help others out too.

Is there a way to split up the node list to display a different "table" for each category?

Right now it looks like this

|--------------------------------------|
|Cat Name |
| |
|Node1 |
|Node2 |
|Node3 |
|Node4 |
| |
|Cat Name |
| |
|Node1 |
|Node2 |
|Node3 |
|Node4 |
| |
|Cat Name |
| |
|Node1 |
|Node2 |
|Node3 |
|Node4 |
|---------------------------------------|

I would like it to look like this

|--------------------------------------|
|Cat Name |
| |
|Node1 |
|Node2 |
|Node3 |
|Node4 |
|---------------------------------------|

|--------------------------------------|
|Cat Name |
| |
|Node1 |
|Node2 |
|Node3 |
|Node4 |
|---------------------------------------|


|--------------------------------------|
|Cat Name |
| |
|Node1 |
|Node2 |
|Node3 |
|Node4 |
|---------------------------------------|

Any help would be great

Thanks.

 

[Forsaken]

Hey guys, sorry for all the questions. Hopefully it will help others out too.

Is there a way to split up the node list to display a different "table" for each category?

Right now it looks like this

|--------------------------------------|
|Cat Name |
| |
|Node1 |
|Node2 |
|Node3 |
|Node4 |
| |
|Cat Name |
| |
|Node1 |
|Node2 |
|Node3 |
|Node4 |
| |
|Cat Name |
| |
|Node1 |
|Node2 |
|Node3 |
|Node4 |
|---------------------------------------|

I would like it to look like this

|--------------------------------------|
|Cat Name |
| |
|Node1 |
|Node2 |
|Node3 |
|Node4 |
|---------------------------------------|

|--------------------------------------|
|Cat Name |
| |
|Node1 |
|Node2 |
|Node3 |
|Node4 |
|---------------------------------------|


|--------------------------------------|
|Cat Name |
| |
|Node1 |
|Node2 |
|Node3 |
|Node4 |
|---------------------------------------|

Any help would be great

Thanks.

http://www.se7ensins.com/forums/

Something similar to the way their categories are?

 

[Dynamic]

Yeah dude! Exactly like that

 

[Forsaken]

Yeah dude! Exactly like that

.category
{
padding:10px; 
}

You'll have to do whatever else you need to it, but that is what I used when coding Se7ensins.

 

[Dynamic]

Hi Forsaken,

It did not work. It moved the titles down, but did not make each of them their own little box. The background colour is still visible between the lists.

Thanks.

 

[Forsaken]

.nodeList .category { 
background-color: #FFFFFF;
border-bottom-color: #E0E0E0;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: #E0E0E0;
border-left-style: solid;
border-left-width: 1px;
border-right-color: #E0E0E0;
border-right-style: solid;
border-right-width: 1px;
border-top-color: #E0E0E0;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-top-style: solid;
border-top-width: 1px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
position: relative;
}

Thats the code I used for Se7enSins, so it should work.

 

[Dynamic]

Worked!!

Thanks heaps man, I really appreciate that

 

[MichaelDance]

Thank you

 

[gldtn]

.nodeList .category {
background-color: #FFFFFF;
border-bottom-color: #E0E0E0;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: #E0E0E0;
border-left-style: solid;
border-left-width: 1px;
border-right-color: #E0E0E0;
border-right-style: solid;
border-right-width: 1px;
border-top-color: #E0E0E0;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-top-style: solid;
border-top-width: 1px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
position: relative;
}

How about turning that into this

.nodeList .category {
    background-color: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 5px;
    padding: 5px;
    position: relative;
}

 

[Forsaken]

How about turning that into this

.nodeList .category {
    background-color: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 5px;
    padding: 5px;
    position: relative;
}

The previous code was copy and pasted from the editor of my browser so it didn't use shorthand.