Script-solution.de » Community » Support-Board » Foren » Allgemeines » Allgemeines Board » in tabelle jede zweite zeile mit css einfärben?

  • Willkommen, Gast!
  • Donnerstag, 17. Mai 2012, 10:27:13
 
Thema: "in tabelle jede zweite zeile mit css einfärben?" [ Seite 1 2 ]

Kein neuer Beitrag RommY , 27.11.2008, 23:33
Beitrag #1   

IP: n/a
Rang: * * * * * * O
Registrierung: 03.03.2007, 18:18
Homepage: http://www.pic-monster.de
Wohnort: Derben bei Magdeburg (Deuts...
 

Forum-Beherrscher mit 532 Punkte, 396 Beiträge
hallo.
ich möchte eine tabelle erstellen inder jede zweite zeile eine andere farbe hat (hintergrundfarbe).

zeile1 -> roter hintergrund
zeile2 -> grüner hintergrund
zeile3 -> roter hintergrund
zeile4 -> grüner hintergrund
zeile5 -> roter hintergrund
zeile6 -> grüner hintergrund
usw...

habe schon ewig lang gegoogelt und auch was gefunden.
bisher aber immer nur für php.
ich würde das gern in css regeln wenn das möglich ist.
habe leider nix gefunden.
kennt da jemand nen css code bzw ne möglichkeit das in css und html umzusetzen?
bitte um andworten.


pm_admin_style.css
Code:
1
2
3
4
5
6
7
8
9
10
11
 td.admin_inhalt 
{
   border-right: 1px solid #EAEAEA;
   border-bottom: 1px solid #EAEAEA;
   padding-bottom:    10px;
   padding-top:    10px;
   padding-left:   10px;
   padding-right:   10px;
   background: #FFFFFF;
   text-align: left;
}


admin_achiv.tpl
Code:
1
2
3
4
5
6
7
8
9
10
11
 <!-- bild_archiv_box -->
<tr>
   <td class="admin_inhalt" align="center">{upload_bild_upload_id}</td>
   <td class="admin_inhalt">{bild_name_gekürzt}</td>
   <td width="100" class="admin_inhalt">{bild_user}</td>
   <td width="150" class="admin_inhalt">{bild_datum}</td>
   <td width="150" class="admin_inhalt">{bild_tage}</td>
   <td width="150" class="admin_inhalt">{bild_bewertung}</td>
   <td width="100" class="admin_inhalt">{bild_ip} {bild_delte} {bild_bearbeiten} </td>
</tr>
<!-- /bild_archiv_box -->


das währe jetzt die normale zeilenlösung die ich aber ändern mochte.
in zwei farben ums übersichtlicher zu machen.
gruss, rommy.

 
Kein neuer Beitrag Nils , 28.11.2008, 07:02
Beitrag #2   

IP: n/a
Rang: * * * * * * *
Registrierung: 01.07.2003, 18:55
Homepage: http://www.script-solution.de
Wohnort: Marburg
 

Forum-Gott mit 7620 Punkte, 7386 Beiträge
Hallo,

du musst die Zeilen schon irgendwie unterscheidbar machen, sei es nun durch Verwendung
verschiedener CSS-Klassen für die td's oder indem du dem tr-Element ne CSS-Klasse gibts oder wie
auch immer. D.h. entweder legst du alle Zeilen per Hand an und benutzt da bei jeder zweiten was
anderes (was bei dir vermutlich nicht geht, wenn du das gleiche Template für alle Zeilen nehmen
willst), oder du sorgst mit einer Serverseitigen Sprache dafür, dass das entsprechend generiert wird.
Also vergib z.B. eine CSS-Klasse für jedes tr-Element. Lass mit PHP einen Zähler beim abarbeiten
der Zeilen mitlaufen und abhängig davon was ($zaehler % 2) ist vergibst du die eine oder andere
CSS-Klasse. Dann brauchst du nur noch mit CSS festzulegen welche Zeile welche Attribute bekommt:
Code:
1
2
3
4
5
6
 tr.variante1 > td {
  ...
}
tr.variante2 > td {
  ...
}


mfg Nils

 
Kein neuer Beitrag RommY , 29.11.2008, 01:09
Beitrag #3   

IP: n/a
Rang: * * * * * * O
Registrierung: 03.03.2007, 18:18
Homepage: http://www.pic-monster.de
Wohnort: Derben bei Magdeburg (Deuts...
 

Forum-Beherrscher mit 532 Punkte, 396 Beiträge
da ich grad auf arbeit bin konnt ichs noch nicht ausprobieren.
aber kann man das nicht auch irgendwie ohne php lösen?
weil davon hab ich jetzt wieder zu wenig ahnung .
und ja einzeln anlegen kann ichs leider nicht da das achiv automatisch generietz wird.
somit müssten die zeilen automatisch formatiert werden.
da ja auf einer achivseite unterschiedlich viele zeilen sein können.
je nach dem wieviele achiveinträge auf der aktuellen seite vorhanden sind.
das mit dem php hab ich schonmal sowas ähnliches gefunden.
wobei aber dort alles über php lief.

mal ne zusammenfassung.

das genannte php script mit den zahlen vergiebt jede zweite zeile entweder den wehrt 1 oder 2
zeile1 zahl 1
zeile2 zahl 2
zeile3 zahl 1
zeile4 zahl 2


das css script hat somit einmal die daten zu 1 und einmal die daten für 2.
hab ich das so richtig verstanden?


gruss, rommy.

 
Kein neuer Beitrag Nils , 29.11.2008, 08:43
Beitrag #4   

IP: n/a
Rang: * * * * * * *
Registrierung: 01.07.2003, 18:55
Homepage: http://www.script-solution.de
Wohnort: Marburg
 

Forum-Gott mit 7620 Punkte, 7386 Beiträge
Ja, richtig. Du wirst nicht drumherum kommen serverseitig verschiedene CSS-Klassen (oder ähnlich)
zu vergeben. Ich wüsste auch nicht was dagegen spricht. Du benutzt doch ohnehin PHP und es soll nur
auf deinem Server laufen, oder nicht?
Der Benutzer merkt doch nichts davon was auf dem Server abläuft. Alles was auf dem Server abläuft
hat nun mal den Vorteil, dass es nicht von der Umgebung des Clients abhängt ob es funktioniert.
Clientseitige Dinge hingegen können abhängig von Browser, OS, Auflösung usw. sein.
Insofern: Selbst wenn es mit irgendeinem CSS-Hack ginge, wieso willst du damit riskieren, dass es
womöglich irgendwo nicht funktioniert?

mfg Nils

 
Kein neuer Beitrag RommY , 30.11.2008, 15:24
Beitrag #5   

IP: n/a
Rang: * * * * * * O
Registrierung: 03.03.2007, 18:18
Homepage: http://www.pic-monster.de
Wohnort: Derben bei Magdeburg (Deuts...
 

Forum-Beherrscher mit 532 Punkte, 396 Beiträge
nee das nicht. nur ich wüsste jetzt nicht wie ich das endgültig realisieren soll.
da ich garned weis wo ich anfangen soll und bzw find ich grad auch kein tut drüber.
gruss, rommy

 
Kein neuer Beitrag Nils , 01.12.2008, 08:24
Beitrag #6   

IP: n/a
Rang: * * * * * * *
Registrierung: 01.07.2003, 18:55
Homepage: http://www.script-solution.de
Wohnort: Marburg
 

Forum-Gott mit 7620 Punkte, 7386 Beiträge
Dafür eignet sich der Modulo-Operator (%). Der ermittelt den Rest einer Division. Daher kannst du
einfach Modulo 2 rechnen und gucken ob 0 oder 1 rauskommt und jeweils die entsprechende CSS-Klasse
benutzen.

mfg Nils

 
Kein neuer Beitrag VaiT , 01.12.2008, 13:20
Beitrag #7   

IP: n/a
Rang: * * * * * O O
Registrierung: 27.08.2006, 22:45
Homepage: http://www.vait.de
Wohnort: Kassel
 

Supporter mit 438 Punkte, 348 Beiträge
Ich misch mich hier einfach mal ein, weil ich denke, vielleicht hab ich für Rommy eine alternative,
für ihn besser geeignete Variante. Du könntest das ganze nämlich auch einfach via JavaScript
realisieren. Dank Jquery, einer der absolut besten JS-Libraries dieses Planeten, ist das auch ganz
furchtbar einfach.
Ich zeig dir hier mal ein Beispiel, wie man das ganz schnell umsetzen kann:

  1. Gib deiner Tabelle einen Klassennamen z.B. "zebra"
  2. Füge in deine CSS-Datei folgende zwei Zeilen ein:
    Code:
    1
    2
    		 table.zebra tr.even td, table.zebra tr.even th { background:#FFF; }
    table.zebra tr.odd td { background:#EBEBEB; }

  3. Füge am Ende deiner Seite folgenden Javascript-Code ein:
    Code:
    1
    2
    3
    4
    5
    6
    7
    		 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    <script type="text/javascript">
    $( function(){
      $(”table.zebra tr:even”).addClass(”even”);
      $(”table.zebra tr:odd”).addClass(”odd”);
    });
    </script>

Das wars auch schon. Das Ganze könnte dann wie folgt aussehen: Table Zebra-Look


VAIT.de

 
Kein neuer Beitrag Nils , 01.12.2008, 13:53
Beitrag #8   

IP: n/a
Rang: * * * * * * *
Registrierung: 01.07.2003, 18:55
Homepage: http://www.script-solution.de
Wohnort: Marburg
 

Forum-Gott mit 7620 Punkte, 7386 Beiträge
Jo, mit JS gehts natürlich auch.
Aber hier nochmal der Hinweis: Die Variante setzt voraus, dass der User Javascript aktiviert hat,
erfordert das Herunterladen einer zusätzlichen Datei (jquery.min.js) und das Javascript muss nach
dem Laden der Seite erst ausgeführt werden und die gewünschten Tabellen verändern. Insofern musst
du überlegen ob das Ganze wirklich Sinn macht, da es ja eine einfache und bei jedem funktionierende
Alternative ohne zusätzlichen Download und Ladezeit gibt...

mfg Nils

 
Kein neuer Beitrag VaiT , 01.12.2008, 18:21
Beitrag #9   

IP: n/a
Rang: * * * * * O O
Registrierung: 27.08.2006, 22:45
Homepage: http://www.vait.de
Wohnort: Kassel
 

Supporter mit 438 Punkte, 348 Beiträge
Klar nur für die Tabelle allein ist die Verwendung einer zusätzlichen Bibliothek natürlich eher
fraglich. Aber eventuell gibt es auf der Seite ja noch weitere funktionale Aspakte, die dank jQuery
deutlich vereinfacht oder aber auch verbessert werden können.

Wenns wirklich nur um die Tabelle geht macht php natürlich deutlich mehr Sinn.
VAIT.de

 
Kein neuer Beitrag RommY , 02.12.2008, 00:21
Beitrag #10   

IP: n/a
Rang: * * * * * * O
Registrierung: 03.03.2007, 18:18
Homepage: http://www.pic-monster.de
Wohnort: Derben bei Magdeburg (Deuts...
 

Forum-Beherrscher mit 532 Punkte, 396 Beiträge
momentan ist die tabellen hervorhebung nur für meine administrationen gedacht.
die planung zieht sich natürlich auch sicherlich irgendwann in die gastseiten.
daher habt ih da sicherlich recht das php da die bessere lösung ist.

da wüsste ich jetzt aber nicht wie genau bzw was genau ich bei google eingeben muss um ein gutes
tut zu finden.
da fehlt mir jetzt der genaue fachbegriff für.

vielleicht kann mir den mal jemand posten?
gruss, rommy.

 
Kein neuer Beitrag ghost , 02.12.2008, 14:24
Beitrag #11   

IP: n/a
Rang: * * * * O O O
Registrierung: 01.03.2007, 21:04
Homepage: http://www.lg-neustadt.de
Wohnort: Neustadt /Wstr.
 

Erfahren mit 290 Punkte, 226 Beiträge
Ich denke, dafür gibt es keinen Fachbegriff, da das "problem" gar kein richtiges Problem ist
sondern eines der grundlegendsten Dinge.

Wie Nils oben schon sagte, brauchst du zwei CSS-Klassen für die zwei unterschiedlichen Layouts.

In deiner Schleife, die die Zeilen generiert, lässt du einen Counter mitlaufen. Z.B. so:
Code:
1
 $counter++;


Nun kommt der Modulo-Operator ins Spiel. Modulo gibt den Rest einer Division an.
Nun prüfst du:

Code:
1
2
3
4
5
6
 if ($counter % 2 == 0) {
 $class = 'Namer der 1. Klasse'
}
else {
 $class = 'Namer der 2. Klasse'
}


und in den <td>-Tag kommt dann also
Code:
1
2
 ...
 ' ... class="'.$counter.'" ...';



Gruß Nico

 
Kein neuer Beitrag RommY , 02.12.2008, 18:12
Beitrag #12   

IP: n/a
Rang: * * * * * * O
Registrierung: 03.03.2007, 18:18
Homepage: http://www.pic-monster.de
Wohnort: Derben bei Magdeburg (Deuts...
 

Forum-Beherrscher mit 532 Punkte, 396 Beiträge
heißt das dann jetzt auch das ich den html code der tabelle (datei: beispiel.tpl) in die php datei
einfügen muss?
oder kann ich meine einfache tpl oberfläche so lassen wie bissher und nur die styles austauschen?
bzw mit dem php und den zwei klassen arbeiten.

ich stell mir das gerade so vor

beispiel.css

td.klasse1
font: arial

td.klasse2
font: arial_black


->->->->

beispiel.php


if ($counter % 2 == 0) {
$class = 'Namer der 1. Klasse'
}
else {
$class = 'Namer der 2. Klasse'
}


->->->->->

beispil.tpl

<Table>
<tr>
<td class="'.$counter.'">{username}</td>
</tr>
</table>

meiner meinung nach, würd ich jetzt ein problem bekommen, weil die tabelle ja nicht in der php
datei drinn seckt sondern nur includet wird das nen template ist.


oder liege ich jetzt falsch?
gruss, rommy.

 
Kein neuer Beitrag ghost , 02.12.2008, 18:27
Beitrag #13   

IP: n/a
Rang: * * * * O O O
Registrierung: 01.03.2007, 21:04
Homepage: http://www.lg-neustadt.de
Wohnort: Neustadt /Wstr.
 

Erfahren mit 290 Punkte, 226 Beiträge
richtig, so wirst du probleme bekommen.

Ich weiß nicht, was für ein Templatesystem du nutzt. Das müsste man als erstes einmal wissen, um
dir helfen zu können.

Gruß Nico

 
Kein neuer Beitrag RommY , 02.12.2008, 22:15
Beitrag #14   

IP: n/a
Rang: * * * * * * O
Registrierung: 03.03.2007, 18:18
Homepage: http://www.pic-monster.de
Wohnort: Derben bei Magdeburg (Deuts...
 

Forum-Beherrscher mit 532 Punkte, 396 Beiträge
hm.
auf diese frage hab ich jetzt keine korrekte antwort.
aber ich versuchs mal.
dies ist eine beispiel php seite die der user aufrufen kann und das template über eine .tpl datei
aufruft.

hier mal das beispiel beatmixx.php (http://pic-monster.de/beatmixx.php)
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 <?php
// include Config      
define('IN_MONSTER', "true");
require_once('./config.inc.php');

$Monster_Design->Laden("index_body", "header");

$Monster_Design->Values(array("{wobinich}" => "BeatMixX"));

$Monster_Design->Laden("beatmixx_body", "beatmixx_body");

// Lade Desingdatei Footer
$Monster_Design->Laden("index_body", "footer");
// Desingdatei Ausgeben
$Monster_Design->Ausgeben();
$monster_sql->sql_close();
?>



beatmixx_body.tpl
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
 <!-- beatmixx_body -->
<table class="table_inhalt" cellpadding="0" cellspacing="0">
      <tr>
            <td>
                  <table width="100%" cellpadding="0" cellspacing="0">
                              <tr>
                                    <td class="box_titel_a" width="25"></td>
                                    <td class="box_titel_b" align="left">Camming Soon... </td>
                                    <td class="box_titel_c" width="25"></td>
                              </tr>
                  </table>
            </td>
      </tr>
            <tr>
                 <td>
                       <form name="schreibe" method="get" action="{script_ordner}/{GRUPPEN_PHP}">
                        </form>
                        <table width="100%" cellpadding="0" cellspacing="0">
                                 <tr>
                                      <td class="box_rechts">                        
                                               <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber2" height="31">
                                                                <tr>
                                                                  <td width="15" height="26">&nbsp;</td>
                                                                  <td height="26">
                                                                  <p align="right"></td>
                                                                  <td height="26">                        
                                               <p align="center">
                                                              <img src="{script_ordner}/design{design_ordner}/images/pic-monster_cammin-soon1.png" alt="" style="padding-left: 0px; padding-top: 15px;padding-bottom:15px;" /></td>
                                                                  <td height="26">&nbsp;</td>
                                                                  <td width="16" height="26">&nbsp;</td>
                                                                </tr>
                                       </td>
                                 </tr>
                        </table>
                        </form>
                 </td>
            </tr>
         
<div align="center">


<td class="box_balken">
               <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber4">
                 <tr>
                   <td>&nbsp;</td>
                   <td align="center">Information</td>
                   <td>&nbsp;</td>
                 </tr>
               </table>
                </td>

                     <table width="100%" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" cellspacing="0">
          
              <tr>
              <td class="news_box_info">
            <table width="100%" cellpadding="0" cellspacing="0" align="center" height="41">
            <tr>
            <td align="left" width="15" height="22"></td>
            <td align="center" height="22"><font size="2">&nbsp;</font>Diese 
                Seite ist leider noch nicht verfügbar. </td>
            <td align="right" width="15" height="22"></td>

            <tr>
            <td align="left" width="15" height="19">&nbsp;</td>
            <td align="center" height="19"><!-- seiten_links -->
                Wird aber in den Nächsten Tagen für Sie bereitstehen.</td>
            <td align="right" width="15" height="19">&nbsp;</td>

            </table>
                &nbsp;</td>
                 </tr>
</table>

                                                                  <table width="100%" cellpadding="0" cellspacing="0">
                                             <tr>
                                                   <td class="box_titel_a-down"></td>
                                                   <td class="box_titel_b-down">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </td>
                                                   <td class="box_titel_c-down"></td>
                                             </tr>
                                             </table>


</div>
</table>
<!-- /beatmixx_body -->



so werden die einzelnen seiten zusammengefügt.
hoffe das könnte deine frage beantworten.
gruss, rommy.

 
Kein neuer Beitrag Henrik , 03.12.2008, 20:45
Beitrag #15   

IP: n/a
Rang: * * * * * * O
Registrierung: 03.07.2003, 19:49
Homepage: http://www.script-solution.de
Wohnort: Hamburg
 

Forum-Beherrscher mit 621 Punkte, 601 Beiträge
Hi,
Du müsstest einen eigenen Abschnitt für die Spalte definieren. Dann mit einer foreach-Schleife das
Array mit den Daten durchgehen
und
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
 $counter = 0;
foreach($bla as $wert) {
if ($counter % 2 == 0) {
 $class = 'Namer der 1. Klasse'
}
else {
 $class = 'Namer der 2. Klasse'
}
  $Monster_Design->Values(array("{class}" => $class,"{wert}"=>$wert));

  $Monster_Design->Laden("beatmixx_tr", "beatmixx_tr");

}


mfg
Henrik
Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.
Dieser Beitrag wurde insgesamt 1 mal editiert. Das letzte mal 03.12.2008, 20:46 von Henrik.


n/a n/a 1 2     ( Anzeige: 1 - 15 , Gesamt: 23 ) Weiter Letzte Seite
User in diesem Thema: 0 Registrierte, 0 Versteckte, 1 Gast, 0 Bots
Keine
Thema-Aktionen:

Toggle Ähnliche Themen zu "in tabelle jede zweite zeile mit css einfärben?"
  Antworten Aufrufe Themeneröffnung Letzter Beitrag
Keine neuen Beiträge, nicht wichtig Keine neuen Beiträge, kein 'heißes Thema'
Keine neuen Beiträge, offen Keine neuen Beiträge, nicht verschoben 		  transparenter tabellenhintergrund
Boardsolution » Boardsolution v1.4x » Fragen zu Änderungen
 3 1198 20.03.2012, 17:38
Von: Kevin 		22.03.2012, 20:13
Von: Kevin Zum letzten Beitrag
Keine neuen Beiträge, nicht wichtig Keine neuen Beiträge, kein 'heißes Thema'
Keine neuen Beiträge, offen Keine neuen Beiträge, nicht verschoben 		  Tabellenfarbe und Darstellung
Sonstige Produkte » Linksolution
 3 1990 01.11.2011, 18:22
Von: AlexH 		03.11.2011, 00:11
Von: Rafioso Zum letzten Beitrag
Keine neuen Beiträge, nicht wichtig Keine neuen Beiträge, kein 'heißes Thema'
Keine neuen Beiträge, offen Keine neuen Beiträge, nicht verschoben 		  Browser Adresszeile auslesen
Allgemeines » Allgemeines Board
 8 1397 09.08.2011, 13:11
Von: RommY 		11.08.2011, 08:21
Von: Mars Zum letzten Beitrag
Keine neuen Beiträge, nicht wichtig Keine neuen Beiträge, 'heißes Thema'
Keine neuen Beiträge, offen Keine neuen Beiträge, nicht verschoben 		  BBCode Tabelle   [ Seiten 1 2 ]
Boardsolution » Boardsolution v1.4x » Boardsolution v1.40 Beta
 20 17410 10.06.2009, 20:49
Von: Mars 		17.06.2010, 18:59
Von: Nils Zum letzten Beitrag
Keine neuen Beiträge, nicht wichtig Keine neuen Beiträge, 'heißes Thema'
Keine neuen Beiträge, offen Keine neuen Beiträge, verschoben 		  BBCode für Tabellen   [ Seiten 1 2 ]
Boardsolution » Boardsolution v1.3x » Mod-Anleitungen
 27 28342 27.09.2007, 15:30
Von: ghost 		10.02.2010, 18:14
Von: Nils Zum letzten Beitrag
  • 0.156262 Sek., 11 DB-Zugriffe, 6.554 MiB
  • Boardsolution v1.43 | © Nils Asmussen 2003-2009
Valid XHTML and CSS © 2003 - 2009 script-solution.de, Powered by Joomla!