zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Zentrierter Hintergrund wird beim Verkleinern im Firefox falsch dargestellt

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 10.04.2007, 13:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.04.2007
Beiträge: 14
Alien befindet sich auf einem aufstrebenden Ast
Standard Zentrierter Hintergrund wird beim Verkleinern im Firefox falsch dargestellt

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ß
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 10.04.2007, 13:26
Benutzerbild von kampfgnom
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 22.11.2006
Ort: Radebeul
Beiträge: 1.808
kampfgnom befindet sich auf einem aufstrebenden Ast
Standard

also bei mir passt es....
ansonsten is margin:auto;
sehr schön^^
__________________
Meine Spielwiese: http://blog.kanedo.net
Ich bei Flickr? Da: Flickr: Fotostream von kanedo-projekt
Für open Source Liebhaber: open Com

Auch ich Zwitschere als @kanedo
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 10.04.2007, 15:48
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.838
RoToRa wird schon bald berühmt werden
Standard

Zitat:
Zitat von Alien Beitrag anzeigen
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
Mit Zitat antworten
  #4 (permalink)  
Alt 10.04.2007, 22:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.04.2007
Beiträge: 14
Alien befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 11.04.2007, 13:27
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.838
RoToRa wird schon bald berühmt werden
Standard

Zitat:
Zitat von Alien Beitrag anzeigen
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
Mit Zitat antworten
  #6 (permalink)  
Alt 13.04.2007, 20:36
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.04.2007
Beiträge: 14
Alien befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


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


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:27 Uhr.