Grafiken verschieben sich

narsus

Cadet 3rd Year
Registriert
Apr. 2006
Beiträge
52
Hallo zusammen,
Ich hab mir gerade eine Website mit HTML erstellt und habe folgendes Problem.
Im Vollbild-Modus passt alles perfekt. Wenn ich jetzt aber mein Browser kleiner mache, verschieben sich die Grafiken und die ganze Seite ist ziemlich durcheinander...
Die HTML sieht ungefähr so aus...
Könnt ihr mir da weiterhelfen?

<html>

<head>

<title>Homepage - Musik</title>

</head>

<body bgcolor=black lang=DE link=blue vlink=blue>

<div class=Section1><div>

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <img width=1000
height=300 src=head3.gif hspace=60></p>

<u1:p></u1:p>

<table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 width=676
style='width:507.0pt;margin-left:131.55pt' vspace=0 hspace=200>
<tr>
<td style='padding:0cm 0cm 0cm 0cm'>
<p class=MsoNormal><a href="home.html"><span style='text-decoration:none'><img
border=0 width=144 height=49 src="images/Leiste1_01.gif"></span></a></p>
</td>
<td style='padding:0cm 0cm 0cm 0cm'>
<p class=MsoNormal><a href="spiele.html"><span style='text-decoration:none'><img
border=0 width=144 height=49 src="images/Leiste1_02.gif"></span></a></p>
</td>
<td style='padding:0cm 0cm 0cm 0cm'>
<p class=MsoNormal><a href="musik.html"><span style='text-decoration:none'><img
border=0 width=149 height=49 src="images/Leiste1_03.gif"></span></a></p>
</td>
<td style='padding:0cm 0cm 0cm 0cm'>
<p class=MsoNormal><a href="kontakt.html"><span style='text-decoration:none'><img
border=0 width=137 height=49 src="images/Leiste1_04.gif"></span></a></p>
</td>
<td style='padding:0cm 0cm 0cm 0cm'>
<p class=MsoNormal><a href="info.html"><span style='text-decoration:none'><img
border=0 width=102 height=49 src="images/Leiste1_05.gif"></span></a></p>
</td>
</tr>
</table>

</div>

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;

<a href="beispiel"><span style='text-decoration:none'><img
border=0 width=167 height=100 src=beispiel.gif alt=beispiel></span></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<a href="beispiel2"><span style='text-decoration:none'><img
border=0 width=427 height=79 src="beispiel2.jpg" alt=beispiel2></span></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<a href="beispiel3"><span style='text-decoration:none'><img
border=0 width=188 height=85 src=beispiel3.gif alt=beispiel3></span></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<a href="beispiel4"><span style='text-decoration:none'><img
border=0 width=347 height=70 src=beispiel4.gif alt=beispiel4></span></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<a href="beispiel5"><span style='text-decoration:none'><img
border=0 width=321 height=59 src="beispiel5.jpg"alt=beispiel5></span></a></p>

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<a href="beispiel6"><span style='text-decoration:none'><img
border=0 width=301 height=71 src="beispiel6.jpg"alt=beispiel6></span></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<a href="beispiel7"><span style='text-decoration:none'><img
border=0 width=213 height=100 src=beispiel7.gif alt=beispiel7></span></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<a href="beispiel8"><span style='text-decoration:none'><img
border=0 width=330 height=89 src="beispiel8.jpg" alt=beispiel8></span></a></p>

</div>

</body>

</html>


MfG

narsus
 
Hallo,

umschließe doch bitte einmal deinen Code mit dem HTML-Tags, so macht das das ganze ja noch unleserlicher als es jetzt schon ist. ;)

Als nächstes solltest du einmal einen DOCTYPE am Anfang deines Dokuments festlegen. Solltest du eine XHTML-Variante wählen, müssen auch alle Werte in Hochkommas gesetzt werden.
Diese ganzen geschützen Leerzeichen kannst du auch einmal herauslöschen und sie, sollten diese als Platzhalter dienen, durch ein "padding" oder "margin" der betroffenen Elemente ersetzen.

Poste den Code dann anschließend am besten noch einmal, denn so hat das ganze wirklich keinen Sinn, da nach irgendwelchen eventuellen Fehlern bzw. unschönheiten in der Darstellung zu suchen, die wahrscheinlich durch die ganzen aneinandergereihten, geschützen Leerzeichen hervorgerufen werden. ;)

MfG mh1001
 
Zurück
Oben