PDA

Vollständige Version anzeigen : Web-Design HTML Tabellen-Zwischenräume


G-sus
07.11.09, 18:17
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 ;)

tuffenuff
07.11.09, 19:24
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:

G-sus
07.11.09, 20:32
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. :(

phoenix
08.11.09, 00:48
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:

phoenix
08.11.09, 01:58
Dafür ist das Forum doch da ;)

G-sus
08.11.09, 14:43
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

phoenix
08.11.09, 16:07
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? :)

phoenix
08.11.09, 17:59
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?

phoenix
08.11.09, 18:12
Ignorieren. Wenn die mouseover Bilder geladen würden, würde sich nichts verschieben.

G-sus
08.11.09, 20:49
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

sirena
09.11.09, 12:59
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.

G-sus
09.11.09, 17:15
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.

sirena
09.11.09, 17:28
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. :)

G-sus
09.11.09, 18:07
Ok gut, ich werds mir für die Zukunft merken. Vielen Dank nochmal für die Hilfe!

sirena
09.11.09, 18:08
Kein Problem. :)