nicht angemeldet
HTML/CSS Problem mit Hintergrundbild
Guten Tag,
Also Zuerst einmal zum Problem:
Ich habe mir zerst einmal eine ganz Simple HTML Seite aufgebaut
für das Layout habe ich mir von einem Kumpel ein Hintergrundbild machen lassen. Dies sollte also so die Basis bilden, dass ich nurnoch die Passenden Texte einfügen muss. Soweit so gut bei mir lief alles gut und im Vollbildmodus war für mich alles Perfekt. Wenn jedoch jemand mit einer anderen Bildschirmauflösung die HP öffnete oder das ganze minimert wurde wurde der Text bzw. das Hintergrundbild verschoben. Auserdem wird es beim minimieren einfach abgeschnitten.
Hier der Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<style>
body{
background:url("http://i.imgur.com/SV8M2.jpg");
background-repeat:no-repeat;
background-position:top;
width: 100%;
margin-left:285px;
margin-right:295px;
}
p{
font-family:"Comic Sans MS";
}
</style
</head>
<body>
<br>
<table width="23%" align=left>
<tr valign="top">
<td><a href="http://www.visibilityservers.de/index.html"><img src="http://i.imgur.com/yPMtb.gif" border="0"></a></td>
</tr>
<tr valign="top">
<td><a href="http://www.visibilityservers.de/AdminsMember.html"><img src="http://i.imgur.com/Zu8E9.gif" border="0" onmouseover="this.src='http://i.imgur.com/F2HG7.gif'" onmouseout="this.src='http://i.imgur.com/Zu8E9.gif'"></a></td>
</tr>
<tr valign="top">
<td><a href="http://www.visibilityservers.de/Clanbewerbung.html"><img src="http://i.imgur.com/MX1Gj.gif" border="0" onmouseover="this.src='http://i.imgur.com/Esm0T.gif'" onmouseout="this.src='http://i.imgur.com/MX1Gj.gif'"></a></td>
</tr>
<tr valign="top">
<td><a href="http://www.visibilityservers.de/Support.html"><img src="http://i.imgur.com/blCcY.gif" border="0" onmouseover="this.src='http://i.imgur.com/6z9Za.gif'" onmouseout="this.src='http://i.imgur.com/blCcY.gif'"></a></td>
</tr>
<tr valign="top">
<td><a href="http://www.visibilityservers.de/Partner.html"><img src="http://i.imgur.com/Ik7PM.gif" border="0" onmouseover="this.src='http://i.imgur.com/Oh6AO.gif'" onmouseout="this.src='http://i.imgur.com/Ik7PM.gif'"></a></td>
</tr>
<tr valign="top">
<td> </td>
</tr>
<tr valign="top">
<td> </td>
</tr>
<tr valign="top">
<td> </td>
</tr>
<tr valign="top">
<td> </td>
</tr>
<tr valign="top">
<td> </td>
</tr>
<tr valign="top">
<td> </td>
</tr>
</table>
<br><br><br><br><br><br>
<script language=javascript src="index.txt"></script>
<p style="color:#9600FF" align="right">Neue Member:</p>
<script language=javascript src="Trialmember.txt"></script>
<p> </p>
</body>
</html>
-
Es gibt einen direkten und einen indirekten Grund. Der direkte Grund ist, dass sich die Tabelle am linken Rand des Body's orientiert (margin-left des body) und das Hintergrundbild dies nicht tut. Dieses könntest Du zwar noch mit background-position:top left; beheben, allerdings nicht den indirekten Grund, nämlich das ein konkretes Seitenlayout/-konzept fehlt.
Bitte informiere Dich zunächst über ein sauberes CSS-basiertes Layout, zum Beispiel auf CSS 4 YOU oder im http://de.selfhtml.org/css/layouts/index.htm@title=wiki.
Ansonsten: lass Dich nicht abschrecken mit Deiner ersten Homepage.
Cheers,
Baba-
Hmm hab das jetzt mal nachgelesen und bin iwi. der Meihnung, dass es
bugfreier wäre wenn ich kein Hintergrundbild verwende sondern einfach ne schöne hintergrundfarbe und dazu 1 2 Logos oder sehe ich das jetzt falsch?
Achja und danke für die Antwort vorhin xD-
Hmm hab das jetzt mal nachgelesen und bin iwi. der Meihnung, dass es
bugfreier wäre wenn ich kein Hintergrundbild verwende sondern einfach ne schöne hintergrundfarbe und dazu 1 2 Logos oder sehe ich das jetzt falsch?Ja. Eine Hintergrundfarbe und ein paar passend plazierte Grafiken (Das dann evtl sogar absolut) halte ich in vielen Faellen auch fuer sinnvoller. Mit Bugfrei hat das allerdings nichts zu tun. Es ist kein Bug, wenn alles lauft, wie gedacht. Der Bug ist in den Koepfen, der Leute, die versuchen nen Hummer SUV in nen Parkhaus eines deutschen Supermarktes zu fahren und dort in eine Parkluecke zu stellen. ;)
Drei Anmerkungen am Rande: Dein Markup ist doch leicht gruslig. Eine Webseite ist gewoehnlich keine Tabelle und sollte allein deshalb aus semantischen Gruenden nicht in eine verpackt sein. Zumal ich schwer davon ausgehe, dass dein HTML durchaus uebersichtlicher wuerde. Aber gut. Das hat Baba schon erwaehnt und ich will da auch gar nicht drauf rumreiten.
Was anderes: Gib dein HTML doch mal einem Validator zu fressen. Ich weiss, dass Deine Seite noch ncith fertig ist, aber fang ruhig schonmal damit an, immer den aktuellen Stand zu validieren. Nimm z.B. den Validator vom W3C. Ich denke, Du koenntest dadurch noch etwas lernen. ;)
Als letztes: CSS hast Du ja entdeckt. Hast Du schonmal darueber nachgedacht, eine exterene CSS Datei zu verwenden und auf inline Styles zu verzichten? Das vereinfacht Veraenderungen und ist noch ein Schritt, Darstellung und Inhalt zu trennen.
--
Signaturen sind blöd!
-
-