Zentrierter Hintergrund wird beim Verkleinern im Firefox falsch dargestellt

Alien · #1 (**permalink**) 10.04.2007, 12:22

Hi,

bin noch relativ unerfahren wenn es um CSS geht. Bin bei meinem ersten großen Projekt jetzt auf folgendes Problem gestoßen:

Ich möchte ein Hintergrundbild zentriert auf eine Seite setzen. Wird die Seite so weit verkleinert, dass das Hintergrundbild nicht mehr volständig angezeigt werden kann, sollen Scrollbalken erscheinen.
Im IE hat das ganze sofort geklappt. Firefox verliert die Zentrierung und zeigt den Hintergrund linksbündig, sobald man das Browserfenster verkleinert.

Wer kann mir das weiter helfen, bzw. erklären wie ich das Problem behebe. Hier noch mal das Beispiel zum ansehen:

Hotel Adler in Frankfurt am Main

Die css-Datei liegt unter:
http://www.hotel-adler-frankfurt.de/.../standard2.css

Danke schon mal

Gruß

kampfgnom · #2 (**permalink**) 10.04.2007, 12:26

also bei mir passt es....
ansonsten is margin:auto;
sehr schön^^

RoToRa · #3 (**permalink**) 10.04.2007, 14:48

Zitat:

Zitat von Alien

Wird die Seite so weit verkleinert, dass das Hintergrundbild nicht mehr volständig angezeigt werden kann, sollen Scrollbalken erscheinen.

Selbst wenn es dafür eine Lösung gibt, würdest du nur bei den nächsten Schritt große Probleme haben, nämlich den Inhalt sauber "über" dem Hintergrund zu positionieren.

Ich würde vorschlagen das Bild aufzuteilen.

Zum einen in die Kopfgrafik, den du dann als normales Bild mit entsprechendem Alternativ-Text einbindest, denn "Hotel Adler" ist eindeutig *Inhalt*. (Und wenn du dabei bist, nimm GIF oder PNG statt JPEG, denn die Kompression von JPEG lässt Logo und Schriftzug "fusselig" aussehen).

Zum anderen die Tapetenmusterblume ohne Rahmen, aber dafür so, dass es sich kacheln lässt, denn eine fixe Höhe für Webseiten ist in der Regel keine gute Idee (das gilt eigentlich auch für die Breite aber da halten sich die Nachteile in Grenzen). Dein Layout sollte wunderbar auch flexibel umsetzbar sein.

Alle Rahmen und die Balken oben und unten lassen sich besser mit CSS-Border erstellen.

Robin

Alien · #4 (**permalink**) 10.04.2007, 21:46

wenn ich das design nun zerschneide in einen header, content und footer, kannst du mir dann jetzt weitere tips geben, wie ich das ganze am besten in container packe, diese mittig positioniere und alle genau untereinander?

das scheint mir kompliziert zu werden. Ich sollte noch erwähnen, dass die seite vier Menüs enthalten wird. Hier das design als Prototyp, allerdings in Tabellen aufgebaut:

Hotel Adler in Frankfurt am Main

Mein Ziel war es nun das komplette Design in css zu konvertieren, was sich aber als schwer herausgestellt hat.

Hoffe mir kann einer konkretere Tips geben. Ungefähr bringt mir nichts

RoToRa · #5 (**permalink**) 11.04.2007, 12:27

Zitat:

Zitat von Alien

wenn ich das design nun zerschneide in einen header, content und footer, kannst du mir dann jetzt weitere tips geben, wie ich das ganze am besten in container packe,

Genau das ist das wichtigeste beim Arbeiten mit "Trennung von Inhalt und Präsentation": die Strukturierung des Inhalts. Du solltest den Layout erstmal vergessen (oder zumindest in den Hinterkopf schieben) und erstmal reines, striktes (X)HTML schreiben um die Inhalt zu strukturieren. In deinem Fall ist es recht einfach:

Code:

<div id="alles">
<h1>Hotel Adler</h1>
<div id="kopf">
  <ul id="sprachen">
    <li><a href="..">Deutsch</a></li>
    <li><a href="..">English</a></li>
    ...
  </ul>
  <ul id="hauptmenue">
     <li><a href="...">Home</a></li>
     <li><a href="...">Ausstattung</a></li>
     ...
  </ul>
</div>
<ul id="untermenue">
   <li><a href="...">Willkommen</a></li>
   ...
</ul>
<div id="inhalt">
...
</div>
<ul id="fussmenue">
   <li><a href="...">AGB</a></li>
   ...
</ul>
</div>

Zitat:

diese mittig positioniere

Suche in dem Forum oder bei Google: css zentrieren - Google Search
Ergibt z.B.: FAQ Bubax.net – Elemente mit CSS zentrieren

Zitat:

und alle genau untereinander?

Das passiert ganz von alleine.

Zitat:

das scheint mir kompliziert zu werden.

Die Struktur ist einfach. Das Design in CSS umzusetzen ist als (CSS-)Anfänger jedoch mit viel Lernarbeit verbunden, aber gerade dieses Layout würde ich nicht als komplizert bezeichnen.

Hier die ersten Ansätze:
- Der Hotel-Name ist in meine Code oben Text. Als Anfänger ist es warscheilich am einfachsten, wenn du dort stattdessen direkt die entsprechende Grafik einsetzt (<img ...>), ansonsten schau die sogenannte "Image-Replacement"-Technologien an:
image-replacement - Google Search
- Ansonsten dden Hotel-Namen (also das H1) rechts floaten.
- Die Menüs sollen horizontal dargestellt werden. Siehe dazu beispielsweise: Listamatic: one list, many options - Using CSS and a simple list to create radically different list options

Arbeite ausserdem unser FAQ-Thread durch: http://xhtmlforum.de/40267-faq-haeuf...d-haeufig.html

Ganz grobes, erstes, ungetestetes CSS:

Code:

* {
   margin: 0; padding: 0;
}
#alles {
   width: 740px; /* entsprechend anpassen; besser wäre jedoch eine eine flexibele Breite */
   margin: 0 auto; /* Siehe "Zentrieren mit CSS" */
}
h1 {
   width: 270px; /* Auch nur geraten */
   float: right.
}
#untermenue {
   clear: right;
}
#untermenue, #fussmenue {
   background-color: #D7C69B;
   border: 1px solid #A2997C;
}
#sprachen li, #hauptmenue li, #untermenue li, #fussmenue li {
   display: inline; /* Alternativ float:left, das kommt auf diverse Umstände drauf an. */
}
#inhalt {
   border: 1px solid #A2997C;
   background-color: #F2E7C7
   background-image: url("blumen.gif"); /* Hier NUR das Blumenmuster, NICHT den gesamten Hintergrund */
}

Zitat:

Ich sollte noch erwähnen, dass die seite vier Menüs enthalten wird.

Die Anzahl der Menüs ist irrelevant fürs CSS.

Zitat:

Hier das design als Prototyp, allerdings in Tabellen aufgebaut:

Hotel Adler in Frankfurt am Main

Drück mal Strg-[+] in Firefox zwei-, dreimal. Das sollte bei der Umsetzung verhindert werden.

Zitat:

Hoffe mir kann einer konkretere Tips geben. Ungefähr bringt mir nichts

Dafür haben die wenigsten hier warscheinlich Zeit - ich habe schon viel zu viel Zeit verschwendet

. Wenn du es Stück für Stück machst (erstmal das umsetzten was ich angedeutet habe), sehen wir weiter.

Robin

Alien · #6 (**permalink**) 13.04.2007, 19:36

Erstmal danke für deine ausführliche Hilfe. Ich hab das Design jetzt in drei Teile Unterteilt: Header, COntent und Footer. Das Ergebnis ist jetzt hier zu sehen:

Hotel Adler in Frankfurt am Main

UNd die CSS Datei:
http://www.hotel-adler-frankfurt.de/...s/standard.css

Jetzt habe ich noch drei kleine Fehler drin:

1. Ich bekomme es nicht hin um die zwei Bilder im Content einen 1px breiten Border zu zeichnen. Der normale Border-Befehl zeichnet einen viel zu großen Rahmen drum

2. Dadurch, dass ich im Footer gesagt habe "float: right" wird die Liste jetzt falsch herum angezeigt. Gibt es da einen Befehl die wieder richtig herum zu bekommen oder muss ich im HTML Code die Liste andersherum aufschreiben?

3. Den Text im COntent habe ich jetzt auf "Position: absolute" gesetzt. Weil der sich irgendwie nicht von der stelle bewegen wollte. Wenn man jetzt den Zoom vergrößert bleibt der Text natürlich stehen. Wie bekomme ich ihn an die richtige Position rechts neben den Bildern.

Danke

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Firefox und IE6 interpretieren width falsch	bolshi	CSS	5	13.10.2009 15:06
Firefox bei Links aus anderen Anwendungen im Hintergrund	E\|H	Offtopic	2	31.08.2006 02:15
Firefox stellt den Hintergrund nicht ganz dar	Maxefix	CSS	2	20.08.2006 15:46
Hintergrund wird im alten Firefox nicht gezeigt	alexpetri	CSS	4	08.08.2006 12:06
[GELÖST] Firefox 1.0.6 Problem mit Hintergrund!	mar123	(X)HTML	0	15.04.2006 18:45