» »

CSS za specifično tabelo

CSS za specifično tabelo

Fukomuko ::

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

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

.krneki{ // css...

Fukomuko ::

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

Tody ::

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

Fukomuko ::

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

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-Factory.ai

Fukomuko ::

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

Lion29 ::

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-Factory.ai

Fukomuko ::

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

Lion29 ::

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-Factory.ai

Fukomuko ::

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

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
!

Vse, kar ste si želeli vprašati o CSS, pa si niste upali. (strani: 1 2 3 423 24 25 26 )

Oddelek: Izdelava spletišč
1297336943 (61092) htmltroubles
»

Prikaz strani na različni resoluciji-Joomla

Oddelek: Izdelava spletišč
151864 (1592) kr?en
»

poravnava li elementov

Oddelek: Izdelava spletišč
82054 (1919) boss-tech
»

Kontaknti obrazec - potrebujem pomoč

Oddelek: Programiranje
181097 (819) cobrica
»

CSS background-image in IE6?

Oddelek: Izdelava spletišč
132973 (2839) Road Runner

Več podobnih tem