zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Unterschiedlicher Hintergrund

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.12.2008, 13:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.12.2008
Beiträge: 9
Mikkel befindet sich auf einem aufstrebenden Ast
Standard Unterschiedlicher Hintergrund

Hallo Community!

Ich arbeite gerade an einer Seite, wo der Inhalt zentriert dargestellt werden soll. Das war auch kein Problem. Ich habe das ungefähr so gelöst:
Code:
<html>
<head>
<title>Test</title>

<style type="text/css">
#container {
width: 100%;
border: 1px solid red;
height: 400px;
}
#content {
margin: 0px auto;
width: 600px;
border: 1px solid blue;
height: 100%;
}
</style>
</head>

<body>
<div id="container">
	<div id="content">Content</div>
</div>
</body>
</html>
Nun möchte ich aber links vom Inhaltsbereich einen anderen Hintergrund als rechts haben. Wie kann ich das mit Hilfe von CSS realisieren, dass sowohl Firefox als auch der IE das dann richtig darstellen?
Wahrscheinlich wäre es am einfachsten, wenn ich dafür Tabellen verwenden würde. Doch wenn es eine Möglichkeit gibt, dass es auch mit div-Tags funktioniert, dann würde ich diese Lösung auf jeden Fall bevorzugen.

Ich hoffe, jemand kann mir helfen.

Mit freundlichen Grüßen
Mikkel
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.12.2008, 15:46
Benutzerbild von domsson
Rookie @ HTML/CSS/PHP/SQL
neuer user
 
Registriert seit: 11.02.2008
Ort: Berlin
Beiträge: 88
domsson wird schon bald berühmt werden
Standard

Ich weiss nicht, ob das in deinem konkreten Fall so umsetzbar ist, aber eventuell geht es ja so:

Pack die beiden Hintergrundbilder, die jeweils rechts und links angezeigt werden sollen, in eine Bilddatei, die entsprechend zugeschnitten ist. Diese Bilddatei kannst Du dann deinem Body (oder container-div) als Hintergrundbild zuweisen, dabei "background-position: center" festlegen. Da dein content-div eine feste Breite und eine bekannte Position (naemlich horizontal zentriert) hat, sollte das ganze kein Problem sein.

Ich hoffe, diese Methode ist eine moegliche Loesung fuer dein Problem. Denn so braeuchtest Du weder Tabellen noch zusaetzliche divs.

EDIT: http://domsson.do.funpic.de/mikkel/ - laeuft, oder?
__________________
Wenn Du mich fragst, was mir beim Erlenen von Webentwicklung am meisten Probleme bereitet, dann antworte ich: IE.

Geändert von domsson (21.12.2008 um 15:52 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.12.2008, 19:08
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.12.2008
Beiträge: 9
Mikkel befindet sich auf einem aufstrebenden Ast
Standard

Hallo!

Erstmal danke für deine schnelle Antwort. Die Idee gefällt mir sehr gut, werde ich auch gleich einmal ausprobieren. Nur was passiert, wenn ein User eine sehr hohe Auflösung hat? Dann muss man ja ein extrem großes Hintergrundbild festlegen, damit es noch funktioniert, oder?

Nochmals danke für die Hilfe.

Mit freundlichen Grüßen
Mikkel
Mit Zitat antworten
  #4 (permalink)  
Alt 22.12.2008, 00:12
Benutzerbild von domsson
Rookie @ HTML/CSS/PHP/SQL
neuer user
 
Registriert seit: 11.02.2008
Ort: Berlin
Beiträge: 88
domsson wird schon bald berühmt werden
Standard

Zitat:
Zitat von Mikkel Beitrag anzeigen
Erstmal danke für deine schnelle Antwort. Die Idee gefällt mir sehr gut, werde ich auch gleich einmal ausprobieren. Nur was passiert, wenn ein User eine sehr hohe Auflösung hat? Dann muss man ja ein extrem großes Hintergrundbild festlegen, damit es noch funktioniert, oder?
Das ist richtig. Ich selbst benutze zum Beispiel 1600*1200px, einige Leute nutzen noch hoehere Aufloesungen (Breitbildmonitore). Mit einer jpg-Komprimierung sollte das in der Regel aber machbar sein. Da kommt es dann auch darauf an, ob die Seite unbedingt auch fuer 56k-Modem-Nutzer noch superschnell ladbar sein muss.

Es gibt aber noch andere Taktiken, die Du dann fahren koenntest. Du koenntest dein Hintergrundbild z.B. nur 1300px breit machen und fuer solche User, die hoehere Aufloesungen haben, das Hintergrundbild zu beiden Seiten mit einem ansprechenden Rand beenden, der als solcher zu erkennen ist - ueber den Rand hinaus ist dann eben die Hintergrundfarbe zu sehen. Noch eleganter liesse sich das vielleicht sogar mit einem Verlauf "FARBE->Transparenz" zu beiden Seiten machen - dann wuerde der Hintergrund auf beiden Seiten in die (eine) Hintergrundfarbe uebergehen. Dafuer muesstest Du dann aber wohl PNG benutzen und da ist die Kompression nicht so hoch. Probier einfach mal ein bisschen rum. Vielleicht solltest Du auch Statistiken zum Thema Bildschirmaufloesung konsultieren, damit Du weisst, welchen Teil der User es betreffen wuerde, wenn das Hintergrundbild nur x Pixel breit waere.

PS: das hochgeladene Beispiel nehme ich dann demnaechst wieder offline, Du brauchst es vermutlich nicht mehr, oder?

EDIT: besonders geschickt waere natuerlich, wenn der Hintergrund ein Muster waere. Dann muesstest Du die Grafik nur wenige Pixel hoch gestalten, je nach Muster vielleicht zwischen 10 und 100 Pixel. Da stoert die Breite dann auch nicht mehr viel, die Dateigroesse wuerde auf jeden Fall human bleiben.
__________________
Wenn Du mich fragst, was mir beim Erlenen von Webentwicklung am meisten Probleme bereitet, dann antworte ich: IE.

Geändert von domsson (22.12.2008 um 00:31 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 22.12.2008, 01:49
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.12.2006
Beiträge: 887
threadi sorgt für eine eindrucksvolle Atmosphärethreadi sorgt für eine eindrucksvolle Atmosphäre
Standard

Sollte links und recht die selbe Farbe sein, aber in der Mitte nicht:

Code:
#container {
width: 100%;
border: 1px solid red;
height: 400px;
background-color: red;
}
#content {
margin: 0px auto;
width: 600px;
border: 1px solid blue;
height: 100%;
background-color: green;
}
Sollte links und rechts jeweils das selbe Hintergrundbild sein könntest Du wie gesagt Probleme mit großen Browserfenstergrößen haben. Wenn du links oder/und rechts jeweils unterschiedliche Bilder haben möchtest (z.B. als Dekorierung) ginge es aber auch über obiges Beispiel plus zusätzliches div für ein Hintergrundbild am rechten Rand.

Tabellen wegen sowas zu verwenden ist absolut der falsche Weg.
Mit Zitat antworten
  #6 (permalink)  
Alt 22.12.2008, 17:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.12.2008
Beiträge: 9
Mikkel befindet sich auf einem aufstrebenden Ast
Standard

Danke für eure Tipps. Die Idee mit dem Hintergrundbild und dem Rahmen gefällt mir sehr gut. Genau so werde ich es machen. Ist ja eigentlich eine ganz einfache Art, um das umzusetzen. Doch selber wäre ich nicht darauf gekommen.
Bin echt froh, dass ich ohne Tabellen mein Projekt realisieren kann.

@domsson: Vielen Dank, für dein Beispiel, hat mir sehr geholfen. Hab es mir auch kopiert, also kannst du es wieder offline nehmen.

Danke - Mit freundlichen Grüßen
Mikkel
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
Frage: Wie Text vor Hintergrund in einem Fenster scrollen? wbiebel CSS 2 19.08.2009 19:49
Hintergrund Yada` CSS 10 21.09.2008 18:03
Div Orientierung Leonidus CSS 22 30.05.2007 18:05
Hintergrund SPMan CSS 0 16.05.2007 09:58
Hintergrund wird im IE abgehackt lekim CSS 0 29.03.2006 15:14


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:52 Uhr.