Jump to content

**SOLVED** OO style CSS ?


anatak

Recommended Posts

Hello,

This is probably a real stupid question.
first I am realy not good at CSS as it is a bit confusing for me.

I was wondering if it is possible to have some sort of inheritence in CSS.
say you want all your cells of your tables to have no borders.

you have a table with three rows (left , center, right)

you want all your cells to have no borders
td.noborder
{
  border: none;
}

but then you want
the cells on the left to allign left
the cells in the center to allign center
the cells in the right to allign right.

is there a way to "inherit" the no border ?
or do you have to declare everything separatly ?

I hope I made myself clear.
thank you
anatak
Link to comment
Share on other sites

  • 2 weeks later...
does anybody sees what is wrong with this ?

In IE everything is displayed as intended
in firefox I can not get the frame table to centre the index table

[code]
<table border="0" cellpadding="0" cellspacing="0" class="frame">
<tr><td class="frame"><h1>title</h1><br /><img src="http://forum.pbase.com/templates/pbase/images/lang_english/icon_profile.gif" />
</td></tr>
<tr><td class="frame">
<table border="0" cellpadding="0" cellspacing="0" class="index">


<tr><td class="index_top_left">top left</td>
<td class="index_top_center">top center</td>
<td class="index_top_right">top right</td></tr>

<tr><td class="index_center_left">center left</td>
<td class="index_center_center">center center</td>
<td class="index_center_right">center right</td></tr>

<tr><td class="index_bottom">bottom left</td>
<td class="index_bottom">bottom center</td>
<td class="index_bottom">bottom right</td></tr>

</table>
</td></tr>
</table>
[/code]

here is the css part with the tables
[code]
/*tekst opmaak*/
/*hex color 112233 11=RED 22=GREEN 33=BLUE*/
body {
background-color: #CCCCFF;
color: #000000;
font-size: 12pt;
}
/*table layout */


/*frame table layout (to center everything) */
table {
border: 0px none #00EEEE;
border-spacing: 0px;
text-align: center;
}

.frame {
width: 100%;
padding: 0px;
background-color: #EEEEEE; /*background-color*/
}

/*index page table opmaak*/
.index {
width: 800px;
padding: 0px;
background-color: #EEEEEE;
}

/*navigation table*/
.nav {
width: 100%;
padding: 2px;
background-color: #8888FF;
}

/*login password resend table opmaak*/
.log {
width: 150px;
padding: 0px;
background-color: #000000;
}

td {
border: 0px none #FFFFFF; /*border style thickness color*/
text-align: center;
font-size: 12pt; /*font-size*/
}

/*frame is the table that holds everything in 1 cel*/
.frame {
padding: 0px;
vertical-align: middle;
color: #EEEEEE; /*text color*/
background-color: #EEEEEE;  /*background-color*/
}

.index_top_left {
padding: 0px;
width: 150px;
height: 200px;
vertical-align: middle;
color: #000000;
background-color: #AAAAFF;
}

.index_top_center {
padding: 0px;
width: 500px;
height: 200px;
color: #000000;
background-color: #AAAAFF;
font-size: 20pt;
}

.index_top_right {
padding: 0px;
width: 150px;
height: 200px;
vertical-align: middle;
color: #000000;
background-color: #AAAAFF;
}

.index_center_left {
padding: 0px;
width: 150px;
color: #000000;
background-color: #CCCCFF;
}

.index_center_center {
padding: 0px;
width: 500px;
background-color: #EEEEEE;
color: #000000;
}

.index_center_right {
padding: 0px;
width: 150px;
background-color: #CCCCFF;
color: #000000;
}

.index_bottom {
padding: 0px;
color: #000000;
background-color: #AAAAFF;
}
[/code]

The thing I don't understand is that text is centered without problems but HTML tags not
for example if I put an extra row on top of the index table It centers the text and images.
when I put a table in there it puts the table to the left ???
Is there some workaround to center a table within a table in firefox ?
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.