• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

2 Fragen zu Tabele

T

Tomhalo

Neues Mitglied
Also ich habe eine tabele die so aufgebaut ist

______________________
|Bildchen -|Link ---------|
|________|____________|
|Bildchen -|Link -------- |
|________|____________|
|Bildchen -|Link ---------|
|________|____________|

Und jetzt Wil ich Hover rein Bringen in der Spalte Wo die links sind wie mache ich das ??

und 2. frage ich habe also die Tabele
______________________
|Bildchen -|Link ---------|
|________|____________|
|Bildchen -|Link ---------|
|________|____________|

ich wil jetzt aber in der nächsten reihe aber 3 spalten haben so ungefähr

______________________
|Bildchen -|Link ---------|
|________|____________|
|Bildchen -|Link----|Zahl |
|________|_______|____|

also unter zahl halt die anzahl der neuen pn's aber das dürfte irelevant sein
und iwe bringe ich jetzt nur in dieser reihe diese 3. spalte ein ?
 
Die Spalte, wo die Links drin sind, braucht eine extra CSS Klasse, dann kannst du ganz easy einen Hover-Effekt reinbauen.

HTML: 
<table>
	<tr>
		<td>Bild</td>
		<td class="mitEffekt">Link</td>
	</tr>
	<tr>
		<td>Bild</td>
		<td class="mitEffekt">Link</td>
	</tr>
</table>

So, und nun legste dir noch eine Klasse .mitEffekt an und kannst die wie folgt nutzen

Code: 
.mitEffekt:hover {
background-color: #F00;
}
 
Zuletzt bearbeitet:
ich wil jetzt aber in der nächsten reihe aber 3 spalten haben so ungefähr

______________________
|Bildchen -|Link ---------|
|________|____________|
|Bildchen -|Link----|Zahl |
|________|_______|____|
Zum Vergrößern anklicken....
Das geht, indem du in jeder Zeile (ausgenommen der letzten natürlich) jeweils dem 2. td-Element das Attribut "colspan" gibst, welches beschreibt, wie viele Spalten zusammenfügt werden sollen.

Code: 
<table>
  <tr>
   <td>Bildchen</td>
   <td colspan="2">Link</td>
  </tr>
  <tr>
   <td>Bildchen</td>
   <td colspan="2">Link</td>
  </tr>
  <tr>
   <td>Bildchen</td>
   <td>Link</td>
   <td>Zahl</td>
  </tr>
</table>
 
Danke für eure hilfe ich werde es sofort ausprobieren

hmm ihrgend wie funktionirt der Hover nicht so wie ich wil ach und ich würde gerne ein rahmen haben also bei jeder zele ??
nicht nur um die ganze tabele besser gesagt er funktionirt garnicht xP

hier mein code

HTML: 
<html>
<head>
<title>Test</title>
</head>
<body>
<style type="text/css">
.efekt:hover {
background-color: #fffff;
}
</style>
<table style="border: 1px solid red;">
  <tr>
   <td><img src="iconset/delet.gif"></td>
   <td colspan="2" class="efekt"><a href="www.google.de">Start</a></td>
  </tr>
  <tr>
   <td><img src="iconset/delet.gif"></td>
   <td colspan="2" class="efekt"><a href="www.google.de">Profil</a></td>
  </tr>
  <tr>
   <td><img src="iconset/delet.gif"></td>
   <td class="efekt"><a href="www.google.de">PN Box</a></td>
   <td><font color="orange">5</font></td>
  </tr>
</table>
</body>
</html>
 
Zuletzt bearbeitet von einem Moderator:
CSS-Eigenschaften gehören in den Head, nicht in den Body. Wenn du um die einzelnen Element innerhalb einer Tabelle auch noch einen Rahmen haben willst, brauchst du folgendes

Code: 
table, tr, td {
 border: 1px solid black;
}
 
ich habe da mal eine ganz andere frage n dich :D

du nutzt doch wohl nicht tabellen für layout zwecke, also z.B. zum positionieren ;-), oder vll. doch???

für mich sieht es ganz danach aus und deshalb erkläre ich dir mal ein paar grundlegende dinge in sachen webprogrammierung.

Die auszeichnungssprache html, dazu gehört auch der table-tag, dient ausschließlich dazu, deinen inhalt semantisch korrekt auszuzeichnen, also mit den richtigen tags zu versehen. tabellen werden also nur dann verwendet, wenn du auch wirklich tabellarische daten hast ;-)
und die kann ich be dir nicht finden.
html ist also das aussehen einer website vollkommen egal. das design regelt nähmlich einzig und allein die layoutsprache css.

jetzt zu deinem problem xD
wenn also nicht als tabelle auszeichnen, als was dann?
in diesem fall wäre das div-element angebracht. dieses gruppiert mehrere elemente, so dass man sie z.B. via css positionieren kann.

das sieht bei dir dann so aus:

Code: 
<div>
   <img src="deinbild.jpg" alt="deinbild"/>
   <a class="link" href="deinlink.html">deinlink</a>
</div>
...
...
das ist dann auch schon in html alles. img und a sind inlineelemente, daher werden sie automatisch in linie angezeigt.
div ist ein blockelement, daher werden alle deine divs untereinander dargestellt.
das classenattribut brauche ich um css anzusprechen.
genau wie du es möchtest.
rahmen, abstände, hover-effekte, hintergrundfarben ... definierst du jetzt mit css.

ein hover, z.B. für deinen link sieht so aus:

Code: 
.link{
standardformatierung
}

.link:hover{
hoverformatierung
}
das war es auch schon.
wenn du jetzt nicht weist, mit welchen css-eigenschaften du das erreichen kannst, was du möchtest, dann google einfah danach ;-)
da solltest du alles finden.

zu deinem 2ten problem. da wir jetzt ja keine tabellen mehr haben ist colspan auch keine lösung mehr.
in diesem fall gibst du dem entsprechenden link oder bild wieder eine neue klasse oder halt id und weist ihm eine kleinere breite zu.

ich hoffe ich konnte dir etwas helfen und dich vom holzweg runterbringen :D

bei fragen einfach fragen xD

grüße hokage
 
auch wens in head ist sehe ich kein hover efekt :o vlt liegts am browser ich probieremal bei firefox xP

hmm funktionirt auch nicht :(

hmm ich wil nicht nur ein hover link das bekome ich nehmlich schon hin ich wil die zele als hover haben also maus drüber und die hintergrundfarbe der zele ändert sich
 
So wie es im Moment aussieht, ist die background-color für den hover-Effekt weiß (#ffffff). Da ich im Script keine Angabe zu Hintergrundfarbe der Seite sehe, gehe ich mal davon aus, dass die auch weiß ist. Da wirst Du wohl beim drüberfahren keine Veränderung feststellen können.

Gruß thuemmy
 
hokage555 schrieb:
deshalb erkläre ich dir mal ein paar grundlegende dinge in sachen webprogrammierung.
Zum Vergrößern anklicken....
Web-Programmierung umfasst nur JavaScript und serverseitige Programmiersprachen. Du erklärst aber etwas über die Semantik, das ist HTML, oder über Trennung von Inhalt und Layout, letzteres macht man mit CSS. Beides sind aber keine Programmiersprachen.

tabellen werden also nur dann verwendet, wenn du auch wirklich tabellarische daten hast
Zum Vergrößern anklicken....
Was hier allerdings definitiv nicht gegeben ist. Es ist nur ein Menü.

in diesem fall wäre das div-element angebracht. dieses gruppiert mehrere elemente, so dass man sie z.B. via css positionieren kann.
Zum Vergrößern anklicken....
Das ist allerdings verkehrt. Als erstes muss mal der Inhalt ordentlich ausgezeichnet werden. Das hast Du in Deinem Beispielcode unterlassen. Es ist nur eine Gruppe mit einem Image und einem Link. Keine Spur von Semantik.
In diesem Fall handelt es sich ja offensichtlich um ein Menü, also wird das als Liste ausgezeichnet (ohne div) und die Bildchen als Hintergrundgrafik dem Link zugewiesen.

ich hoffe ich konnte dir etwas helfen und dich vom holzweg runterbringen
Zum Vergrößern anklicken....
Naja :-)
 
Efchen schrieb:
Web-Programmierung umfasst nur JavaScript und serverseitige Programmiersprachen. Du erklärst aber etwas über die Semantik, das ist HTML, oder über Trennung von Inhalt und Layout, letzteres macht man mit CSS. Beides sind aber keine Programmiersprachen.
Zum Vergrößern anklicken....

mir war schon bewusst das das nicht ganz zutrifft^^ jetzt fragst du wahrscheinlich warum ich es dann geschrieben habe... hab halt einen allgemeinen begriff für meine einleitung gesucht. semantik wäre da passender gewesen, stimmt :D

Efchen schrieb:
Das ist allerdings verkehrt. Als erstes muss mal der Inhalt ordentlich ausgezeichnet werden. Das hast Du in Deinem Beispielcode unterlassen. Es ist nur eine Gruppe mit einem Image und einem Link. Keine Spur von Semantik.
In diesem Fall handelt es sich ja offensichtlich um ein Menü, also wird das als Liste ausgezeichnet (ohne div) und die Bildchen als Hintergrundgrafik dem Link zugewiesen.
Zum Vergrößern anklicken....

lol, dass es ein menu war habe ich noch gar nicht realisiert^^ wahrscheinlich zu oberflächlich gelesen. aber natürlich hast du recht. ein <ul> wäre in diesem fall angebracht ;-)

Efchen schrieb:
Naja :-)
Zum Vergrößern anklicken....

immerhin habe ich ihn vor den tabellen gerwarnt und ihm allgemeine dinge in sachen Semantik^^ erklärt xD
ergänzen wir noch die in diesem fall semantisch korrekte liste für das menu und ich finde mein beitrag hat durchaus was gebracht :D

daher verbitte ich mir so ein naja ;-)
immerhin war da hinter ein lachendes smiley ^^

grüße hokage
​
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben