Jump to content


Photo

**SOLVED** OO style CSS ?


  • Please log in to reply
4 replies to this topic

#1 anatak

anatak
  • Members
  • PipPipPip
  • Advanced Member
  • 406 posts
  • LocationJapan, Fukuoka prefecture, Kitakyushu City

Posted 04 October 2006 - 08:03 AM

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
takasi.8008@docomo.ne.jp
tourokum@0508.jp

#2 ToonMariner

ToonMariner
  • Members
  • PipPipPip
  • Advanced Member
  • 3,342 posts
  • LocationNewcastle upon Tyne, UK

Posted 04 October 2006 - 12:06 PM

Yes that is the cascade....

<table>
<tr>
  <td class="left"></td>
  <td></td>
  <td class="right"></td>
<tr>
</table>

td {
border: none;
text-align: center;
}

.left {
text-align: left;
}

.right {
text-align: right;
}
follow me on twitter @PHPsycho

#3 anatak

anatak
  • Members
  • PipPipPip
  • Advanced Member
  • 406 posts
  • LocationJapan, Fukuoka prefecture, Kitakyushu City

Posted 19 October 2006 - 08:34 AM

thanks
this is what I was looking for

sorry for the late reply

takasi.8008@docomo.ne.jp
tourokum@0508.jp

#4 anatak

anatak
  • Members
  • PipPipPip
  • Advanced Member
  • 406 posts
  • LocationJapan, Fukuoka prefecture, Kitakyushu City

Posted 19 October 2006 - 10:20 AM

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

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

here is the css part with the tables
/*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;
}

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 ?
takasi.8008@docomo.ne.jp
tourokum@0508.jp

#5 anatak

anatak
  • Members
  • PipPipPip
  • Advanced Member
  • 406 posts
  • LocationJapan, Fukuoka prefecture, Kitakyushu City

Posted 19 October 2006 - 11:04 AM

hmm putting in
margin: 0 auto;
solved the problem
takasi.8008@docomo.ne.jp
tourokum@0508.jp




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users