CSS za specifično tabelo @ Slo-Tech

Forum » Izdelava spletišč »
CSS za specifično tabelo

CSS za specifično tabelo

Fukomuko :: 3. sep 2011, 02:50

Želim oblikovati eno tabelo v članku (uporabljam Joomlo). Naredil sem CSS datoteko, vendar ko jo vstavim v HTML kodo članka, se mi spremenijo vse tabele na celotni spletni strani, saj Joomla uporablja css datoteke globalno (tako si jaz predstavljam). A je kakšna varianta, da bi to naredil samo za specifično tabelo?

Hvala za pomoč.

table {
  border-collapse: collapse;
  border: 0px solid #C5BA85;
  font: normal 10px verdana, arial, helvetica, sans-serif;
  color: #333333;
  background: #73cbe9;
  }

.prva {
	background-color: #3dbeea;
}
  
caption {
  padding: 0 .4em .4em;
  text-align: left;
  font-size: 1em;
  font-weight: bold;
  text-transform: uppercase;
  color: #333333;
  background: transparent;
  }
td, th {
  color: #000000;
  border: 0px solid #cc9;
  padding: .3em;
  }
thead th, tfoot th {
  font: normal 11px georgia, verdana, arial, helvetica, sans-serif;
  border: transparent;
  text-align: left;
  font-size: 1em;
  font-weight: bold;
  color: #333333;
  background: #C5BA85;
  }
tbody td a {
  background: transparent;
  color: #72724c;
  text-decoration: none;
  }
tbody td a:hover {
  background: transparent;
  color: #636363;
  }
tbody th a {
  font: normal 11px georgia, verdana, arial, helvetica, sans-serif;
  background: transparent;
  color: #333333;
  text-decoration: none;
  font-weight:normal;
  }
tbody th a:hover {
  background: transparent;
  color: #333333;
  }
tbody th, tbody td {
  vertical-align: top;
  text-align: left;
  }
tfoot td {
  border: 1px solid #C5BA85;
  background: #C5BA85;
  }
.odd {
  background: #c5e7f3;
  }
tbody tr:hover {
  color: #333444;
  background: #DDCFAE;
  }
tbody tr:hover th,
tbody tr.odd:hover th {
  background: #C5BA85;
  }

J-e-r-r-y :: 3. sep 2011, 02:56

<table class="krneki"> <!-- html... -->

.krneki{ // css...

Fukomuko :: 3. sep 2011, 13:04

Hmm žal ne deluje, tabela je brez slogov. v CSS imam zdaj:

 
.krneki{ 

table {
  border-collapse: collapse;
  border: 0px solid #C5BA85;
  font: normal 10px verdana, arial, helvetica, sans-serif;
  color: #333333;
  background: #73cbe9;
  }

.prva {
	background-color: #3dbeea;
	}
  
caption {
  padding: 0 .4em .4em;
  text-align: left;
  font-size: 1em;
  font-weight: bold;
  text-transform: uppercase;
  color: #333333;
  background: transparent;
  }
td, th {
  color: #000000;
  border: 0px solid #cc9;
  padding: .3em;
  }
thead th, tfoot th {
  font: normal 11px georgia, verdana, arial, helvetica, sans-serif;
  border: transparent;
  text-align: left;
  font-size: 1em;
  font-weight: bold;
  color: #333333;
  background: #C5BA85;
  }
tbody td a {
  background: transparent;
  color: #72724c;
  text-decoration: none;
  }
tbody td a:hover {
  background: transparent;
  color: #636363;
  }
tbody th a {
  font: normal 11px georgia, verdana, arial, helvetica, sans-serif;
  background: transparent;
  color: #333333;
  text-decoration: none;
  font-weight:normal;
  }
tbody th a:hover {
  background: transparent;
  color: #333333;
  }
tbody th, tbody td {
  vertical-align: top;
  text-align: left;
  }
tfoot td {
  border: 1px solid #C5BA85;
  background: #C5BA85;
  }
.odd {
  background: #c5e7f3;
  }
tbody tr:hover {
  color: #333444;
  background: #DDCFAE;
  }
tbody tr:hover th,
tbody tr.odd:hover th {
  background: #C5BA85;
  }
  
 }

V HTML pa

<LINK href="tabele.css" rel="stylesheet" type="text/css">

<table class="krneki" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr class="prva">....

Zgodovina sprememb…

spremenil: Fukomuko (3. sep 2011 ob 13:05)

Tody :: 3. sep 2011, 14:01

heh, seveda ne deluje če si pa dal isti css kot si ga imel prej samo drugače si ga poimenoval.

Če hočeš da ma neka tabela samo drugače obrobe, skopiraj cel CSS v .krneki {} in samo dodaj recimor border-color="red". Prav tako pazi na to kdaj je ta css poklican če je poklican pred glavnim css (globalnim) potem bo delal drugače pa bo imel globalni prednost.

Zgodovina sprememb…

spremenil: Tody (3. sep 2011 ob 14:03)

Fukomuko :: 3. sep 2011, 15:17

Naredil sem CSS s kodo

.krneki{ 
background-color: #3dbeea
}

In dejansko deluje. Ampak ko pa skopiram moj CSS znotraj .krneki{}, kot je prikazano v zgornji kodi, pa iz tega ni nič. Ne vem, kako bi uveljavil vse stilske lastnosti iz mojega CSS?

Lion29 :: 3. sep 2011, 15:48

v plain CSS ne mores gnezdit.... torej ne pride v postev

.krneki{
     table{
     }
}

naredi preprosto

table.krneki{
  border-collapse: collapse;
  border: 0px solid #C5BA85;
  font: normal 10px verdana, arial, helvetica, sans-serif;
  color: #333333;
  background: #73cbe9;
}

Founder and CTO @ Article-Fatctory.ai

Fukomuko :: 3. sep 2011, 16:40

Ampak potem verjetno ne bom mogel uporabit vseh stilskih lastnosti iz mojega CSS? Cilj je podobna tabela kot Lestvica 1. SFL.

Lion29 :: 3. sep 2011, 17:23

seveda da lahko... zdaj ali si omisli neko css knjiznico tipa LESS in bos lahko gnezdil pravila.... ker pa delas prek joomle pac tega "ne bos mogu" in bos mogu it normalno... torej vsakemu pravilu po cascading metodi pripet selector

 
 
.krneki table {
  border-collapse: collapse;
  border: 0px solid #C5BA85;
  font: normal 10px verdana, arial, helvetica, sans-serif;
  color: #333333;
  background: #73cbe9;
  }
 
.krneki .prva {
    background-color: #3dbeea;
    }
   
.krneki caption {
  padding: 0 .4em .4em;
  text-align: left;
  font-size: 1em;
  font-weight: bold;
  text-transform: uppercase;
  color: #333333;
  background: transparent;
  }
.krneki td, th {
  color: #000000;
  border: 0px solid #cc9;
  padding: .3em;
  }
.krneki thead th, tfoot th {
  font: normal 11px georgia, verdana, arial, helvetica, sans-serif;
  border: transparent;
  text-align: left;
  font-size: 1em;
  font-weight: bold;
  color: #333333;
  background: #C5BA85;
  }
.krneki tbody td a {
  background: transparent;
  color: #72724c;
  text-decoration: none;
  }
.krneki tbody td a:hover {
  background: transparent;
  color: #636363;
  }
//etc.....

Founder and CTO @ Article-Fatctory.ai

Fukomuko :: 4. sep 2011, 15:45

Super, smo že čisto blizu. Sedaj mi deluje deloma, in sicer samo ozadje v 1. vrtici (.prva), ozadja v lihih vrsticah (.odd) in hover effect. Verjetno je napaka v html kodi:

<table class="krneki" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr class="prva"><th class="krneki">Naziv</th><th>T</th><th>Z</th><th>N</th><th>To</th></tr>
<tr class="krneki">
<td>FSK Stripy</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="odd">
<td>Fragmat Extrem</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<!-- itd.

Moj CSS

.krneki table {
  border-collapse: collapse;
  border: 0px solid #C5BA85;
  font: normal 10px verdana, arial, helvetica, sans-serif;
  color: #333333;
  background: #73cbe9;
  }

.krneki .prva {
	background-color: #3dbeea;
	}
  
.krneki caption {
  padding: 0 .4em .4em;
  text-align: left;
  font-size: 1em;
  font-weight: bold;
  text-transform: uppercase;
  color: #333333;
  background: transparent;
  }
.krneki td, th {
  color: #000000;
  border: 0px solid #cc9;
  padding: .3em;
  }
.krneki thead th, tfoot th {
  font: normal 11px georgia, verdana, arial, helvetica, sans-serif;
  border: transparent;
  text-align: left;
  font-size: 1em;
  font-weight: bold;
  color: #333333;
  background: #C5BA85;
  }
.krneki tbody td a {
  background: transparent;
  color: #72724c;
  text-decoration: none;
  }
.krneki tbody td a:hover {
  background: transparent;
  color: #636363;
  }
.krneki tbody th a {
  font: normal 11px georgia, verdana, arial, helvetica, sans-serif;
  background: transparent;
  color: #333333;
  text-decoration: none;
  font-weight:normal;
  }
.krneki tbody th a:hover {
  background: transparent;
  color: #333333;
  }
.krneki tbody th, tbody td {
  vertical-align: top;
  text-align: left;
  }
.krneki tfoot td {
  border: 1px solid #C5BA85;
  background: #C5BA85;
  }
.krneki .odd {
  background: #c5e7f3;
  }
.krneki tbody tr:hover {
  color: #333444;
  background: #DDCFAE;
  }
.krneki tbody tr:hover th,
.krneki tbody tr.odd:hover th {
  background: #C5BA85;
  }

EDIT: Spremenil sem ".krneki table" v "table.krneki" in ".krneki caption" v "caption.krneki". Sedaj tabela zgleda tako kot mora. Kako je to mogoče?

Zgodovina sprememb…

spremenil: Fukomuko (4. sep 2011 ob 15:49)

Lion29 :: 4. sep 2011, 15:52

mas cel kup napak... na prvi uc... th ne spada v tbody ampak thead.... torej struktura html tabele mora biti nekako tako

<table>
  <thead>
    <tr><th>naslov 1</th></tr>
  </thead>
  <tbody>
    <tr><td> podatki 1</td></tr>
  </tbody>
</table>

kot drugo, tr ima class krneki, cemu?

v htmlju moras definirat vrstica izmenicno odd in even class in ne krneki ali prva... prva spada samo v naslovno vrstico

Founder and CTO @ Article-Fatctory.ai

Fukomuko :: 4. sep 2011, 16:04

Očitno je ravno toliko napak, da tabela v vseh brskalnikih izgleda in deluje točno tako, kot sem si zamislil, zato se bom zaenkrat raje držal načela "if it ain't broke, don't fix it"

Kakorkoli, najlepša hvala za konkretno pomoč, ko bi le bila taka podpora na Joomla forumu...

Vredno ogleda ...

	Tema	Sporočila	Ogledi	Zadnje sporočilo
	Tema	Sporočila	Ogledi	Zadnje sporočilo
!	Vse, kar ste si želeli vprašati o CSS, pa si niste upali. (strani: 1 2 3 4 … 23 24 25 26 ) Tody Oddelek: Izdelava spletišč	1297	330996 (55145)	htmltroubles 27. feb 2021 23:15:17
»	Prikaz strani na različni resoluciji-Joomla jugostyle Oddelek: Izdelava spletišč	15	1810 (1538)	kr?en 26. jun 2014 18:57:18
»	poravnava li elementov boss-tech Oddelek: Izdelava spletišč	8	1980 (1845)	boss-tech 1. okt 2012 08:19:03
»	Kontaknti obrazec - potrebujem pomoč dasooo Oddelek: Programiranje	18	1072 (794)	cobrica 18. sep 2012 11:24:25
»	CSS background-image in IE6? para! Oddelek: Izdelava spletišč	13	2925 (2791)	Road Runner 12. jun 2008 19:07:09

Več podobnih tem

Zadnje novice

Zadnji članki

Išči:

Forum » Izdelava spletišč »
CSS za specifično tabelo

CSS za specifično tabelo