• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

body Hintergrund

Status
Für weitere Antworten geschlossen.
A

Atlan

Neues Mitglied
Hi,

ich habe ja schon ein paar Dinge hier gelernt und achte deswegen jetzt sehr stark darauf, divs zu vermeiden und semantisch sinnvollen Code zu schreiben.

Deshalb habe ich mir gedacht, ich bin ganz geschickt und binde einen Großteil meines Designs als Hintergrundbild des body-tags ein. Leider musste ich feststellen, dass bei den modernen Zoomfunktionen der Browser, bei denen nicht nur der Text vergrößert wird, dieses Hintergrundbild sich weniger vergrößert, als der Rest der Seite. Da das Hintergrundbild mein Design ist, ist nach der Vergrößerung der Text sehr deplaziert gewesen.

Wie kann man das ändern?

Ich habe es vorerst mit einem div gelöst, aber gibt es da auch andere Möglichkeiten? Den Hintergrund in ein schon existierendes Element zu integrieren funktioniert leider in diesem Fall nicht. Oder ist es in so einem Fall legitim ein div für den Hintergrund zu verwenden?

Danke für die Antworten im Voraus
MfG
 
Werbung:
Ich würde grundsätzlich davon abraten Das Design einer Seite als ein riesiges Hintergrundbild im <body> zu platzieren. Besser wäre es das Design zu slicen und bei einfarbigen Elementen einen Farbcode zu verwenden.
 
Das beißt sich ja dann aber wieder mit meiner div-Säuberung. Wie bekommt man das denn hin ohne zusätzliche divs zu verwenden?

MfG
 
Werbung:
Hallo Atlan,

zunächst einmal ist es gut, dass Du die Probleme von riesigen Hintergrundbildern erkannt hast und anerkennst.

Für semantisch wertvollen Quelltext reicht es nicht aus, so wenig div-Tags wie möglich zu verwenden. Vielmehr sollte es das Ziel sein, zunächst den Inhalt richtig auszuzeichnen (Überschriften, Absätze, Listen, Tabellen, Bilder, Zitate, wichtige Textpassagen, Adressen, ...) und dann zusammengehörende Elemente mit div-Tags zu gruppieren, wo es nötig ist. Somit hat man am Ende in der Regel mehr als genügend Elemente, um sie mit CSS anzusprechen/zu formatieren und das gewünschte Gesamtbild zu erreichen. Hürden, die dabei auftreten, entstehen durch Farbverläufe und Rundungen.

Da ich weiß, um welche Seite es bei Dir geht, habe ich mich mal daran versucht. Das von euch gewünschte Design ist sehr extravagant (viele Rundungen, Farbverläufe) und daher äußerst schwer für eine Webseite zu realisieren. Um die Seite flexibel zu machen, bedarf es jeder Menge ineinander übergehender Hintergrundbilder, Überlappung und CSS-"Tricks". Mit ein paar Kompromissen am Design sollte aber auch dieses umsetzbar sein.

Darf ich den Link zum Versuch hier posten?

Gruß
Junny
 
Hi Junny,

es ging mir nun eigentlich um eine Seite von einem Kunden, die ich nochmal überarbeitet habe, aber unsere eigene Seite hat ja auch noch Aufholbedarf in genau diesem Bereich. Finde es super, dass du dir die Zeit genommen hast. Kannst du gerne hier posten!

MfG
 
Hallo Atlan,

mir ging es hauptsächlich um folgende Aspekte:
  • Sauberer und semantisch reicher HTML-Quelltext
  • Funktionserhaltung der Schriftgrößeneinstellung im Browser
  • Gute Bedienbarkeit und gutes Aussehen bei verschiedenen Viewportgrößen
Die Herausforderungen habe ich vor allem in dem außergewöhnlichen Menü und dem geschwungenen Farbverlauf um dem Contentbereich gesehen. Beide Bereiche habe ich erstmal für sich behandelt.

Menü

[Argh, wenig Zeit die Technik zu beschreiben. Schaus Dir schonmal an, morgen können wir gerne über die Techniken reden. Die Grafiken sind erstmal so hingeklatscht, mir ging es hauptsächlich um die Zusammenfügung per CSS.]

KL-Design - Menüidee

Contentbereich

Der Farbverlauf außen wurde nach der von Bernhard empfohlenen Technik gemacht: http://www.html.de/css/22878-abgerundete-raender.html#post180001 . Die Wellen werden anschließend durch Überlappung von den angrenzenden Elementen erzeugt. Das ist wichtig, damit die Contentbox eine variable Breite und Höhe haben kann. Links müsste man mit dem Menü irgendeine Wellenform erzeugen. Das Ganze wäre natürlich noch zu verfeinern und mit besseren Grafiken zu bestücken, aber vielleicht ists ja ne kleine Anregung: KL-Design - Wellenidee

Gruß und bis morgen
Junny
 
Werbung:
Hi Junni,

danke für die Vorschläge! Ich glaube den Code verstanden zu haben. Mit deinem Vorschlag müsste ich mich mal mit meinem Kollegen zusammensetzen. Denn es wird da, so ist meine Befürchtung, einige Schwierigkeiten mit geben.

Als Beispiel:
Der allgemeine Hintergrund hat ein Muster, das Fehler im Übergang zu den Bildern bekommen wird, wenn man die entsprechenden Bereiche der Bilder nicht transparent darstellt. (Muss ja Pixelgenau passen)

Trotzdem vielen Dank. Deine Mühe war nicht umsonst. Irgendwie werden wir diese Probleme lösen. Bei dem Kundendesign habe ich übrigens auch schon eine Idee, wie ich das hinbekommen könnte. Mal sehen obs was wird ;-)

MfG

Edit:
Noch eine Frage zu divs. Ich habe einen Footer folgender Struktur:
Code: 
    [Button zu externer Seite]

      Copyright (c) NameFirma
     Design by NameAndereFirma
Ein Absatz ist es ja nicht, eine ungeordnete Liste auch nicht. Wie zeichnet man solch einen Footer sinnvoll aus? Ich muss das leider in irgendein Element packen (momentan div), um es zu positionieren.
 
Zuletzt bearbeitet:
Atlan schrieb:
Ein Absatz ist es ja nicht, eine ungeordnete Liste auch nicht.
Zum Vergrößern anklicken....
Kann man so oder so sehen.
Ich würde es als Liste schreiben. Absatz ist auch ok.
Denkbar währe auch <address>.

Wenn Zeilenumbrüche dargestellt werden sollten bietet sich <ul> an.
Mit <p> müßtest du inline-Elemente mit css display: block oder <br /> verwenden.

Wenn ich mir nicht sicher bin verwende ich eher <ul>. Die nötigen Selektoren sind dann bereits durch die Elemente (<li>) gegeben.
Siehe dir den Footer mal ohne css an. Dann erkennst du besser was du mit dem Inhalt ausdrücken möchtest.
Wenn Items nicht zum logischen Inhalt passen würden verwende halt keine Liste.
Wenn sie dich nur optisch stören entferne sie mit css.

Eine pauschale, richtige Antwort gibt es darauf nicht. Nur Meinungen.
Letzteres solltest du selber entwickeln.

Die Firma (nicht die eigene) würde ich vielleicht mit <strong> oder <em> hervorheben.
Ich entscheide so etwas auch aus SEO-Sicht.
Aber auch das können andere ganz anders handhaben.
 
Zuletzt bearbeitet:
Hi Atlan,

das mit dem gepunkteten Hintergrund habe ich auch erst für ein Problem gehalten, aber den Übergang sehe ich jetzt nur, wenn ich ganz genau hinschaue. Kann natürlich auch an meiner hohen Auflösung und meinem kleinen Bildschirm liegen... :-)

Ist aber eigentlich egal, da ich ja vielmehr zeigen wollte, dass man Bilder nicht als feste Objekte verwenden muss, auf die dann Text geschrieben wird, sondern dass man Überlappung etc. fürs Gesamtbild nutzen kann.

Im Zweifel sind immer Kompromisse zugunsten der Nutzbarkeit zu machen.

Viel Erfolg bei Euren folgenden Projekten!

Gruß
Junny
 
Werbung:
Vielen Dank euch beiden.

Ich werde mich, sobald wir fertig sind, im entsprechenden Thema vom Websitecheck melden.
 
Java

Es wäre auch mit einem relativ einfachen Javascript möglich, das das Hintergrundbild, sofern in mehreren Auflösungen vorhanden je nach Auflösung des Betrachters wechselt. Das Problem dabei wäre das die Auflösung nicht unbedingt etwas über die Größe des Browserfensters aussagt.
 
Hmm, du beziehst dich auf meinen ersten Beitrag?

Erhält Javascript nach dem Zoomen andere Werte für die Größe des Browserfensters? Wenn ja, dann ist das gut zu wissen, aber ich glaube es hilft in diesem Fall nicht so wirklich weiter. Dann wäre ein alles umschließendes Div doch leichter als ein Javascript-Code, den nichteinmal alle Besucher aktiviert haben.
Ich habe es jetzt übrigens so umgesetzt, dass der Header mit h1 gekennzeichnet das komplette Headerbild beinhaltet und die Navigation (ul) das Bild der Navileiste plus den seitlichen Schatten, der noch weiter nach unten ragt. Damit habe ich zwar nicht viel geslicet, aber bei mehr Einzelbildern wäre eine Div-Suppe entstanden ;)

MfG
 
Zuletzt bearbeitet:
Werbung:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben