Vollständige Version anzeigen : Web-Design HTML Tabellen-Zwischenräume
Hallo,
Ich hab ein Problem was diesmal HTML betrifft. Ich bin grad dabei meine Website zu programmieren und bin auf ein erstes Hindernis gestoßen. Und zwar hab ich mein Header mit einer Tabelle gemacht, und zwischen der ersten und der zweiten Bildreihe ist so eine hässliche Spalte. :nixweiss:
Wie bekomm ich die weg?
http://www.jfv.de
blindguard
07.11.09, 18:56
da kann ich jetzt nichts zu sagen ...
hoffe aber das die leute die ahnung haben es jetzt hier eher finden ;)
Einen Fehler entdecke ich irgendwie auch nicht...
Was du vielleicht mal ausprobieren könntest:
Bei <tr> einfach mal <tr heigth="110px"> einsetzen. Vielleicht bringt das ja was...
Vielleicht könntest du auch probieren cellpadding="0px" zu schreiben, genauso bei cellspacing="0px", obwohl ich nicht glaube dass das was bringt :nixweiss:
Danke fürs Verschieben, Blindguard. Hatte in meinem Frust wohl überhastet gepostet.
Und zu tuffenuff: hab beide Sachen ausprobiert. Zeigen leider beide keine Wirkung. Es verändert sich absolut nichts. :(
http://www.photoshop-cafe.de/phoenix/undef/sosollssein.gif
Der Code ist schlichtweg grausig. Da fehlen zahlreiche </a>´s, da gibts Divs mitten in Tabellen drin ohne </div>´s, ... warum genau die Tabelle rund 5,6 px grösser war weiss ich nicht. Aber so kannst Du das Ding unmöglich ins Netz stellen. Da lässt Du besser PS ran.
Du musst die Pfade fixen:
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="./index.html"><img src="jfv/over_0_0.jpg" onmouseover="this.src='./JFV_Grunge/index/mouseover/over_0_0.jpg'" onmouseout="this.src='./JFV_Grunge/index/menu_0_0.jpg'" border="0" style="width: 200px; height: 110px; border-width: 0px;"></a>
</td>
<td>
<a href="./index.html"><img src="jfv/over_0_1.jpg" onmouseover="this.src='./JFV_Grunge/index/mouseover/over_0_1.jpg'" onmouseout="this.src='./JFV_Grunge/index/menu_0_1.jpg'" border="0" style="width: 200px; height: 110px; border-width: 0px;"></a>
</td>
<td>
<a href="./index.html"><img src="jfv/over_0_2.jpg" onmouseover="this.src='./JFV_Grunge/index/mouseover/over_0_2.jpg'" onmouseout="this.src='./JFV_Grunge/index/menu_0_2.jpg'" border="0" style="width: 200px; height: 110px; border-width: 0px;"></a>
</td>
<td>
<a href="./index.html"><img src="jfv/over_0_3.jpg" onmouseover="this.src='./JFV_Grunge/index/mouseover/over_0_3.jpg'" onmouseout="this.src='./JFV_Grunge/index/menu_0_3.jpg'" border="0" style="width: 200px; height: 110px; border-width: 0px;"></a>
</td>
<td>
<a href="./index.html"><img src="jfv/over_0_4.jpg" onmouseover="this.src='./JFV_Grunge/index/mouseover/over_0_4.jpg'" onmouseout="this.src='./JFV_Grunge/index/menu_0_4.jpg'" border="0" style="width: 200px; height: 110px; border-width: 0px;"></a>
</td>
</tr>
<tr>
<td><img alt=" " src="jfv/menu_1_0.jpg" style="width: 200px; height: 110px; border-width: 0px;"></td>
<td><img alt=" " src="jfv/menu_1_1.jpg" style="width: 200px; height: 110px; border-width: 0px;"></td>
<td><img alt=" " src="jfv/menu_1_2.jpg" style="width: 200px; height: 110px; border-width: 0px;"></td>
<td><img alt=" " src="jfv/menu_1_3.jpg" style="width: 200px; height: 110px; border-width: 0px;"></td>
<td><img alt=" " src="jfv/menu_1_4.jpg" style="width: 200px; height: 110px; border-width: 0px;"></td>
</tr>
</table>
Eduardo Da Vinci
08.11.09, 01:43
@Phonenix
jetzt weiß ich wenigstens, an wen ich mich wenden kann, wenn ich ein Prob mit meiner Homepage habe:idee:
Dafür ist das Forum doch da ;)
Also erstmal muss ich mich bedanken, dass du dir die Mühe machst. Aber irgendwie hat es immer noch nichts verändert, ich hab deinen Html Code kopiert und die pfade gefixt. Aber ich habe weiterhin diesesn zwischenraum zwischen den zeilen. Kannst du vielleicht nochmal ausführlicher erklären, was du genau gemacht hast?
MfG Jan
http://www.photoshop-cafe.de/phoenix/undef/test.html
Nicht wunder, die mouseover Bilder hatte ich nicht mit geladen.
Ich habe genau das gemacht was ich auch gepostet habe. Allen Müll raus und nur behalten was auch wirklich reingehört und alles was fehlte hinzugefügt.
dorftrottel
08.11.09, 17:49
Dominique, wenn ich deinen Link anklicke, dann über alle rüber fahre, werden sie blau und dann verschieb sich der gesamte Balken nach unten :nixweiss:
Muss das so sein, willst du damit etwas zeigen? :)
Nicht wunder, die mouseover Bilder hatte ich nicht mit geladen.
:whistling
dorftrottel
08.11.09, 18:01
Ja, das schon, aber warum verschiebt sich dann das ganze nach unten?
Ist das weil du auch keinen onmouseout eingefügt hast?
Ignorieren. Wenn die mouseover Bilder geladen würden, würde sich nichts verschieben.
also ich hab das jetzt mal in meine index.html geschrieben. es hat sich zwar etwas verändert, aber wirklich besser ist es nicht geworden.
http://www.jfv.de
Hi
Ich hab das mal ausprobiert bei mir. Versuch es mal damit, dann müsste der Zwischenraum weg sein. :)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>
JFV.de :: Home
</title>
</head>
<body style="background-image: url(./JFV_Grunge/index/Hintergrund.jpg);">
<table bgcolor="#00CCCC" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="./index.html"><img src="./JFV_Grunge/index/mouseover/over_0_0.jpg" onmouseover="this.src='./JFV_Grunge/index/mouseover/over_0_0.jpg'" onmouseout="this.src='./JFV_Grunge/index/menu_0_0.jpg'" style="width: 200px; height: 110px; border-width: 0px; vertical-align: bottom"></a>
</td>
<td>
<a href="./index.html"><img src="./JFV_Grunge/index/mouseover/over_0_1.jpg" onmouseover="this.src='./JFV_Grunge/index/mouseover/over_0_1.jpg'" onmouseout="this.src='./JFV_Grunge/index/menu_0_1.jpg'" style="width: 200px; height: 110px; border-width: 0px; vertical-align: bottom"></a>
</td>
<td>
<a href="./index.html"><img src="./JFV_Grunge/index/mouseover/over_0_2.jpg" onmouseover="this.src='./JFV_Grunge/index/mouseover/over_0_2.jpg'" onmouseout="this.src='./JFV_Grunge/index/menu_0_2.jpg'" style="width: 200px; height: 110px; border-width: 0px; vertical-align: bottom"></a>
</td>
<td>
<a href="./index.html"><img src="./JFV_Grunge/index/mouseover/over_0_3.jpg" onmouseover="this.src='./JFV_Grunge/index/mouseover/over_0_3.jpg'" onmouseout="this.src='./JFV_Grunge/index/menu_0_3.jpg'" style="width: 200px; height: 110px; border-width: 0px; vertical-align: bottom"></a>
</td>
<td>
<a href="./index.html"><img src="./JFV_Grunge/index/mouseover/over_0_4.jpg" onmouseover="this.src='./JFV_Grunge/index/mouseover/over_0_4.jpg'" onmouseout="this.src='./JFV_Grunge/index/menu_0_4.jpg'" style="width: 200px; height: 110px; border-width: 0px; vertical-align: bottom"></a>
</td>
</tr>
<tr>
<td style="width: 200px; height: 110px; background-image: url(./JFV_Grunge/index/menu_1_0.jpg)"></td>
<td style="width: 200px; height: 110px; background-image: url(./JFV_Grunge/index/menu_1_1.jpg)"></td>
<td style="width: 200px; height: 110px; background-image: url(./JFV_Grunge/index/menu_1_2.jpg)"></td>
<td style="width: 200px; height: 110px; background-image: url(./JFV_Grunge/index/menu_1_3.jpg)"></td>
<td style="width: 200px; height: 110px; background-image: url(./JFV_Grunge/index/menu_1_4.jpg)"></td>
</tr>
</table>
</body>
</html>
Ich würde es persönlich aber alles eher in eine extra css Datei machen, dann bräuchte man bei Änderungen immer nur eine Datei bearbeiten und nicht alle.
Hey, Wow! Danke! Es geht jetz! Aber kannst du mir auch verraten was du jetzt genau verändert hast? Bzw. was die Veränderungen im genauen bewirkt haben.
Super, freut mich. :)
Ich kann dir das erklären. Es ist ein bekanntes Problem, dass bei Bildern in Tabellen es so aussieht, als wenn unter dem Bild eine leere Zeile ist.
Dieses Problem kann man meistens mit vertical-align: bottom verhindern.
Wenn du den Doctype genauso hättest, wie bei phoenix,:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
dann brauchst du dieses vertical-align: bottom nicht extra mit angeben. :)
Ok gut, ich werds mir für die Zukunft merken. Vielen Dank nochmal für die Hilfe!
vBulletin® v3.8.7, Copyright ©2000-2025, Jelsoft Enterprises Ltd.