|
|||
Hintergrund verschiebt sich nicht wie gewollt
Hallo, ich bin neu hier.
Ich hätte mal eine Frage, und zwar bin ich gerade dabei eine Homepage mit HTML bzw CSS zu erstellen. Und hab schon mit dem Hintergrundbild meine Probleme. Wenn das Browserfenster voll geöffnet ist ist alles Okay. Aber wenn ich das Fenster seitlich verkleinere verschiebt sich das Hintergrundbild nicht so wie die Buttons, so dass die Buttons nicht mehr aufs Hintergrundbild passen, hier mal Bilder: So sieht es aus wenn das Fenster Breit genug geöffnet ist: http://www.abload.de/img/unbenannt-1dlmo.jpg So ist es wenn ich das Fenster verkleinere: http://www.abload.de/img/unbenannt-2wnsh.jpg Die Buttons bleiben am linken Fensterrand hängen aber das Hintergrundbild verschiebt sich weiter so das beides nichtmehr aufeinander passt. Nun möchte ich das das Hintegrundbild bzw. die komplette Seite auch am linken Bilderrand hängen bleibt wenn ich das Fenster verkleinere so wie z.B. bei kicker.de. Ist das irgendwie mit CSS/HTML möglich? Würde mich über hilfreiche Antworten freuen. HTML: HTML-Code:
<head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <ul> <li class="home"><a href="index.html">Home</a></li> <li class="Test1"><a href="index.html">Testseite 1</a></li> <li class="Test2"><a href="index.html">Testseite 2</a></li> <li class="Test3"><a href="index.html">Testseite 3</a></li> <li class="Test4"><a href="index.html">Testseite 4</a></li> </ul> </body> </html> HTML-Code:
body { background-image:url(images/background.jpg); background-repeat:no-repeat; background-position:center 43px; background-color:#202020; text-align:center; } ul { list-style:none; margin:422px auto; padding:0; overflow:auto; width: 1000px; } li { float:left; text-align:center; } li a { height:60px; display:block; font-family:Helvetica, Arial, sans-serif; text-decoration:none; line-height:60px; text-indent:-9999em; background:url(images/nav.gif) no-repeat 0 0; } li a:hover { color:#666; text-decoration:underline; } li.home a { width:200px; background-position:0 0; } li.home a:hover { background-position:0 -60px; } li.Test1 a { width:200px; background-position:-200px 0; } li.Test1 a:hover { background-position:-200px -60px; } li.Test2 a { width:200px; background-position:-400px 0; } li.Test2 a:hover { background-position:-400px -60px; } li.Test3 a { width:200px; background-position:-600px 0; } li.Test3 a:hover { background-position:-600px -60px; } li.Test4 { width:200px; background-position:-800px 0; } li.Test4 a:hover { background-position:-800px -60px; } |
Sponsored Links |
|
||||
Na ups.
Ich verstehe schon, aber wenn du erst angefangen hast, solltest Du auch richtig anfangen. Das erste was man braucht, ist eine Dokumenttyp Deklaration ... die Kopfdaten eben. Den Aufbau einer html lernen: SELFHTML: HTML/XHTML / Allgemeine Regeln fr HTML / Grundgerst einer HTML-Datei |
|
||||
Stell das mal online (Freehoster?).
Vermute mal, du hast eine große Grafik als Hintergrund? Zum lernen: http://little-boxes.de/little-boxes-teil1-online.html Manfred |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Hintergrund verschiebt sich beim ändern der Browsergröße | guitardude | Barrierefreiheit | 4 | 24.05.2012 12:49 |
Div Orientierung | Leonidus | CSS | 22 | 30.05.2007 18:05 |
div Hintergrund verschiebt sich im IE 6 | Steffu | CSS | 4 | 11.02.2007 18:48 |
Hintergrund Verschiebung bei änderung der Auflösung | mO_on | CSS | 3 | 31.08.2006 14:15 |
Hintergrund verschiebt sich wenn Fenster kleiner wird | jay | CSS | 6 | 22.10.2004 10:33 |