nicht angemeldet
Link soll folle Höhe einer Tabellenzelle füllen
Hallo,
ich bin gerade beim Erstellen von http://www.i-ki.de und bin auf ein Problem gestoßen. Ich möchte, dass einige Links, bestehend aus jeweils zwei Bildern und einem kurzen Text, den ganzen Raum einer Zelle füllen. Dass sie die gesamte Breite füllen, habe ich mithilfe eines Tips aus diesem Forum schon hingekriert.
Hier der Code von dem "Navigationsframe" (ist aber auch schon online sichtbar bzw. zu erreichen und http://www.i-ki.de):
<html>
<head>
<title>Forum für Informatik und Künstliche Intelligenz</title>
<link rel="STYLESHEET" type="text/css" href="style/navi.css">
<base target="Hauptframe">
</head>
<body bgColor="#EFEFEF" leftMargin="0" rightMargin="0">
<font face="Verdana" size="3">
<table style="width:100%; height:350">
<tr>
<td bgColor="#EFEFEF"
OnMouseOver="this.style.backgroundColor='#FAFAFA'; this.style.cursor='hand';"
OnMouseOut=this.style.backgroundColor="#EFEFEF">
<a href="home.htm" style="display:block; width:100%;">
<img src="pics/leer.gif" border="0"><img src="pics/home.gif" border="0"> Home
</a>
</td>
</tr>
<tr>
<td bgColor="#EFEFEF"
OnMouseOver="this.style.backgroundColor='#FAFAFA'; this.style.cursor='hand';"
OnMouseOut=this.style.backgroundColor="#EFEFEF">
<a href="aktuell.htm" style="display:block; width:100%;">
<img src="pics/leer.gif" border="0"><img src="pics/news.gif" border="0"> Aktuell
</a>
</td>
</tr>
<tr>
<td bgColor="#EFEFEF"
OnMouseOver="this.style.backgroundColor='#FAFAFA'; this.style.cursor='hand';"
OnMouseOut=this.style.backgroundColor="#EFEFEF">
<a href="projekte.htm" style="display:block; width:100%;">
<img src="pics/leer.gif" border="0"><img src="pics/gbook.gif" border="0"> Projekte
</a>
</td>
</tr>
<tr>
<td bgColor="#EFEFEF"
OnMouseOver="this.style.backgroundColor='#FAFAFA'; this.style.cursor='hand';"
OnMouseOut=this.style.backgroundColor="#EFEFEF">
<a href="publikationen.htm" style="display:block; width:100%;">
<img src="pics/leer.gif" border="0"><img src="pics/lexikon.gif" border="0"> Publikationen
</a>
</td>
</tr>
<tr>
<td bgColor="#EFEFEF"
OnMouseOver="this.style.backgroundColor='#FAFAFA'; this.style.cursor='hand';"
OnMouseOut=this.style.backgroundColor="#EFEFEF">
<a href="downloads.htm" style="display:block; width:100%;">
<img src="pics/leer.gif" border="0"><img src="pics/download.gif" border="0"> Downloads
</a>
</td>
</tr>
<tr>
<td bgColor="#EFEFEF"
OnMouseOver="this.style.backgroundColor='#FAFAFA'; this.style.cursor='hand';"
OnMouseOut=this.style.backgroundColor="#EFEFEF">
<a href="forum.htm" style="display:block; width:100%;">
<img src="pics/leer.gif" border="0"><img src="pics/forum.gif" border="0"> Forum
</a>
</td>
</tr>
<tr>
<td bgColor="#EFEFEF"
OnMouseOver="this.style.backgroundColor='#FAFAFA'; this.style.cursor='hand';"
OnMouseOut=this.style.backgroundColor="#EFEFEF">
<a href="links.htm" style="display:block; width:100%;">
<img src="pics/leer.gif" border="0"><img src="pics/links.gif" border="0"> Links
</a>
</td>
</tr>
<tr>
<td bgColor="#EFEFEF"
OnMouseOver="this.style.backgroundColor='#FAFAFA'; this.style.cursor='hand';"
OnMouseOut=this.style.backgroundColor="#EFEFEF">
<a href="mitglieder.htm" style="display:block; width:100%;">
<img src="pics/leer.gif" border="0"><img src="pics/aktuell.gif" border="0"> Mitglieder
</a>
</td>
</tr>
<tr>
<td bgColor="#EFEFEF"
OnMouseOver="this.style.backgroundColor='#FAFAFA'; this.style.cursor='hand';"
OnMouseOut=this.style.backgroundColor="#EFEFEF">
<a href="impressum.htm" style="display:block; width:100%;">
<img src="pics/leer.gif" border="0"><img src="pics/info.gif" border="0"> Impressum
</a>
</td>
</tr>
</table>
</font>
</body>
</html>
Robert Blutner
-
Hallo,
Ich möchte, dass einige Links, bestehend aus jeweils zwei Bildern und einem kurzen Text, den ganzen Raum einer Zelle füllen. Dass sie die gesamte Breite füllen, habe ich mithilfe eines Tips aus diesem Forum schon hingekriert.
Gib den Links doch einfach noch ein 'height: 100%;' ;-)
Indem du zusätzlich noch ':hover' für diese Links definierst, kannst du dir
dann auch das ganze Javascript-Gedöns in den <td>s sparen.Übrigens:
<body bgColor="#EFEFEF" leftMargin="0" rightMargin="0">
<font face="Verdana" size="3">würdest du all das besser mit CSS lösen (und einiges mehr)
<table style="width:100%; height:350">
Ist '350' ohne Maßeinheit keine gültige Angabe
<img src="pics/leer.gif" border="0"><img src="pics/home.gif" border="0">
fehlt bei deinen Bilder das alt-Attribut, daß immer angegeben werden muß
und bei den Bildern, die anscheinend Menüpunkte darstellen, sogar extrem
wichtig ist.Gruß, Jan
-
Hallo,
Gib den Links doch einfach noch ein 'height: 100%;' ;-)
wenn ich noch height:100%; hinzufüge, ist der Link nicht mehr in der Mitte sondern rutscht nach oben.
Indem du zusätzlich noch ':hover' für diese Links definierst, kannst du dir
dann auch das ganze Javascript-Gedöns in den <td>s sparen.
Ich hab gerade erst angefangen, mich mit CSS zu beschäftigen. Vielleicht könntest du mir ja sagen, wie ich das anstellen kann.
Ist '350' ohne Maßeinheit keine gültige Angabe
Und warum funktioniert es dann trotzdem?
Robert Blutner
-
Hallo,
Gib den Links doch einfach noch ein 'height: 100%;' ;-)
wenn ich noch height:100%; hinzufüge, ist der Link nicht mehr in der Mitte sondern rutscht nach oben.Ja. Ich würde das lösen, indem ich der Tabelle (die eigentlich auch nicht
brauchst) keine feste Höhe zuweisen würde, sondern den einzelnen Links oben
und unten ein größeres 'padding' gäbe.Indem du zusätzlich noch ':hover' für diese Links definierst, kannst du »» »» dir dann auch das ganze Javascript-Gedöns in den <td>s sparen.
Ich hab gerade erst angefangen, mich mit CSS zu beschäftigen. Vielleicht könntest du mir ja sagen, wie ich das anstellen kann.Du kannst mit ':hover' bestimmen wie sich die Links beim Überfahren mit der
Maus verhalten sollen.http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_hover_active_focus
Ist '350' ohne Maßeinheit keine gültige Angabe
Und warum funktioniert es dann trotzdem?In welchem Browser testest du das?
Ich würde für die Navigation eine Liste verwenden und die nur mit CSS
formatieren. Schau dir am besten mal http://css.maxdesign.com.au/listamatic/
an. Da findest du viele Beispiele wie man sowas umsetzt.Gruß, Jan
-
Danke für Eure Antworten.
Ich teste das ganze mit Mozilla Firefox 1.0 und Internetexplorer 6.
Robert Blutner
-
-
Gib den Links doch einfach noch ein 'height: 100%;' ;-)
wenn ich noch height:100%; hinzufüge, ist der Link nicht mehr in der Mitte sondern rutscht nach oben.Dann musst du die Link noch mit vertical-align:middle; formatieren.
Übrigens ist es sinnvoller die Links zu einem Blockelement zu machen:
a{ display:block;}und in einer Liste zu formatieren (s. Link zu listamatic von Jan)
Struppi.
-
-