zurück zur Startseite
  

Registrieren Hilfe Benutzerliste Suchen Heutige Beiträge Alle Foren als gelesen markieren

Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Website mit 2 Hintergrundbildern

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.04.2010, 17:47
Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 22.05.2005
Beiträge: 56
theonlyrobi befindet sich auf einem aufstrebenden Ast
Standard Website mit 2 Hintergrundbildern
Hallo Leute,

ich versuche derzeit, eine Website zu machen, wo der Inhaltsbereich mit einer festen Breite mittig ausgerichtet ist. Links und rechts davon werden zwei unterschiedliche Hintergrundbilder angezeigt.

Das Ganze habe ich über drei ineinander verschachtelte DIVs auch hinbekommen. Allerdings bekomme ich das Folgende einfach nicht hin:
  • Wenn der Inhaltsbereich kleiner als Das Browserfenster ist, dann soll der Hintergrund des Inhaltsbereichs trotzdem komplett bis zum unteren Rand des Browserfensters reichen.
  • Wenn der Inhaltsbereich größer als das Browserfenster ist, dann sollen die Hintergrundbilder fixed stehen bleiben und der Inhalt nach untenscrollen.
Ich bekomme aber beide Anforderungen nicht zusammen umgesetzt, sondern es sieht egal was ich versuche immer nur für eine Anforderung gut aus. Hier mein Minimalbeispiel und unten auch noch mal der Code zur Ansicht. Mit zu langem Text sieht es gut aus, mit zu kurzen text nicht.

Wie würdet Ihr diese Aufgabe angehen? Vielleicht gibts ja auch eine viel bessere Lösung und ich stehe auf einem riesen Schlauch. Bin für jeden Tip dankbar.

Robert

HTML-Code:
<?xml version="1.0" encoding="iso-8859-15"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
    <style type="text/css">
<!--
* {margin:0; padding: 0;}
html, body, #container {width: 100%; height: 100%;}
#leftbar, #rightbar {width: 100%; min-height: 100%;}
#leftbar {background: #000 url(http://design.contrend.de/bg-test/bg-right.jpg) no-repeat fixed left top;}
#rightbar {text-align: center; background: transparent url(http://design.contrend.de/bg-test/bg-right.jpg) no-repeat fixed right top;}
#content {margin:0 auto; width:900px; background-color: #c0c0c0; min-height: 100%;}
#middle {min-height: 100%;}
-->
    </style>
</head>
<body>
    <div id="container">
        <div id="leftbar">
            <div id="rightbar">
                <div id="middle">
                    <div id="content">
                        <h1>Überschrift 1. Ebene</h1>
                        <p>Lorem ipsum dolor sit amet, <a href="#" title="Linktitel">consectetuer sadipscing elitr</a>, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                        <h2>Überschrift 2. Ebene</h2>
                        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                        <h3>Überschrift 3. Ebene</h3>
                        <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
                        <h4>Überschrift 4. Ebene</h4>
                        <p>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                        <h5>Überschrift 5. Ebene</h5>
                        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                        <h6>Überschrift 6. Ebene</h6>
                        <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
                        <h1>Aufzählungsliste</h1>
                        <ul>
                            <li>1. Listenpunkt</li>
                            <li>2. Listenpunkt</li>
                            <li>3. Listenpunkt</li>
                            <li>4. Listenpunkt</li>
                            <li>5. Listenpunkt</li>
                        </ul>
                        <h1>Nummerierte Liste</h1>
                        <ol>
                            <li>Listenpunkt 1</li>
                            <li>Listenpunkt 2</li>
                            <li>Listenpunkt 3</li>
                            <li>Listenpunkt 4</li>
                            <li>Listenpunkt 5</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
__________________
www.tritum.de - Webdesign und Printdesign aus Jena
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.04.2010, 17:55
Benutzerbild von Scheppertreiber
Chaot und Nonkonformist.
XHTMLforum-Kenner
  
Registriert seit: 13.03.2007
Ort: Steinmark im Spessart
Beiträge: 7.457
Scheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein Lichtblick
Standard
Das HTML ist etwas "unglücklich"

Nimm 2 floatende div links und rechts mit fester Breite, die mittlere div richtet
sich dann in ihrer Beite nach dem verfügbaren Platz (der irgendwann auch nicht
mehr ausreichen wird).

Das wäre der 2te Punkt. Für den ersten siehe mal in den FAQ nach "faux columns".

HTML-Code:
    <div id="container">
        <div id="leftbar">
        </div>
        <div id="rightbar">
        </div>
        <div id="content">
        </div>
    </div>
Code:
#leftbar { float:left; width:300px; }
#rightbar { float:right; width:300px; }
__________________
Grüße aus dem Spessart, Joe

{ table-layout: biertischistbesser; }
Der Mausinator
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 15.04.2010, 16:00
Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 22.05.2005
Beiträge: 56
theonlyrobi befindet sich auf einem aufstrebenden Ast
Standard
Hallo Joe,

danke für die Antwort. Drei DIVs nebeneinander zu floaten war auch mein erster Gedanke. Jedoch ist dieser Ansatz für mich leider nicht geeignet, da das mittlere DIV mittig positioniert und eine feste Breite haben soll. Die beiden äußeren Hintergrundbilder sollen immer den gesamten Platz des Browserfensters ausfüllen. Das bekomme ich imho mit drei nebeneinander gefloateten DIVs nicht hin.

Robert
__________________
www.tritum.de - Webdesign und Printdesign aus Jena
Mit Zitat antworten
  #4 (permalink)  
Alt 15.04.2010, 16:11
Benutzerbild von Scheppertreiber
Chaot und Nonkonformist.
XHTMLforum-Kenner
  
Registriert seit: 13.03.2007
Ort: Steinmark im Spessart
Beiträge: 7.457
Scheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein Lichtblick
Standard
Dann probiere doch mal 2 div mit jeweils einem der Hintergründe übereinander
und dann die mittlere div mit fester Breite zentriert ? Wird etwas tüftelig, die
beiden Hintergrundbilder zu gestalten, müßte aber auch gehen.
__________________
Grüße aus dem Spessart, Joe

{ table-layout: biertischistbesser; }
Der Mausinator
Mit Zitat antworten
  #5 (permalink)  
Alt 15.04.2010, 16:55
Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 22.05.2005
Beiträge: 56
theonlyrobi befindet sich auf einem aufstrebenden Ast
Standard
Hallo Joe,

danke für Deine Eingebung! Bin mir nicht sicher, ob Du es auch so gemeint,hast, aber ich habe mein Problem wie folgt lösen können: Die beiden DIVs mit den Hintergrundbildern habe ich absolut positioniert innerhalb des Container-DIV. Das Inhalts-DIV habe ich relativ gelassen und mittig in dem Container positioniert. Mit der beschriebenen Kombination aus min-heights und heights kommt genau das Ergebnis, das ich wollte. Hier noch einmal für andere, die das Problem haben: Minimalbeispiel und Quellcode:
HTML-Code:
<?xml version="1.0" encoding="iso-8859-15"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
    <style type="text/css">
<!--
* {margin:0; padding: 0;}
html, body {width: 100%; height: 100%;}
#container {position: relative; text-align: center; min-height: 100%; background-color: #c0c0c0;}
#leftbar, #rightbar {width: 100%; min-height: 100%; position: absolute; top: 0;}
#leftbar {left: 0; background: transparent url(http://design.contrend.de/bg-test/bg-left.jpg) no-repeat fixed left top;}
#rightbar {right: 0; background: transparent url(http://design.contrend.de/bg-test/bg-right.jpg) no-repeat fixed right top;}
#content {margin:0 auto; width:900px; min-height: 100%;}
-->
    </style>
</head>
<body>
    <div id="container">
        <div id="leftbar"></div>
        <div id="rightbar"></div>
        <div id="content">
            <h1>Überschrift 1. Ebene</h1>
            <p>Lorem ipsum dolor sit amet, <a href="#" title="Linktitel">consectetuer sadipscing elitr</a>, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            <h2>Überschrift 2. Ebene</h2>
            <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
            <h3>Überschrift 3. Ebene</h3>
            <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
            <h4>Überschrift 4. Ebene</h4>
            <p>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            <h5>Überschrift 5. Ebene</h5>
            <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
            <h6>Überschrift 6. Ebene</h6>
            <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
            <h1>Aufzählungsliste</h1>
            <ul>
                <li>1. Listenpunkt</li>
                <li>2. Listenpunkt</li>
                <li>3. Listenpunkt</li>
                <li>4. Listenpunkt</li>
                <li>5. Listenpunkt</li>
            </ul>
            <h1>Nummerierte Liste</h1>
            <ol>
                <li>Listenpunkt 1</li>
                <li>Listenpunkt 2</li>
                <li>Listenpunkt 3</li>
                <li>Listenpunkt 4</li>
                <li>Listenpunkt 5</li>
            </ol>
        </div>
    </div>
</body>
</html>
Also danke noch mal! Robert
__________________
www.tritum.de - Webdesign und Printdesign aus Jena
Mit Zitat antworten
  #6 (permalink)  
Alt 15.04.2010, 17:00
Benutzerbild von Scheppertreiber
Chaot und Nonkonformist.
XHTMLforum-Kenner
  
Registriert seit: 13.03.2007
Ort: Steinmark im Spessart
Beiträge: 7.457
Scheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein Lichtblick
Standard
Sers Robert,

viele Wege führen nach Rom

Denke dran: es gibt viele Browser, darunter auch bockige
__________________
Grüße aus dem Spessart, Joe

{ table-layout: biertischistbesser; }
Der Mausinator
Mit Zitat antworten
  #7 (permalink)  
Alt 15.04.2010, 17:12
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
  
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.087
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard
Zitat:
Zitat von theonlyrobi Beitrag anzeigen
aber ich habe mein Problem wie folgt lösen können: Die beiden DIVs mit den Hintergrundbildern habe ich absolut positioniert innerhalb des Container-DIV. Das Inhalts-DIV habe ich relativ gelassen und mittig in dem Container positioniert. Mit der beschriebenen Kombination aus min-heights und heights kommt genau das Ergebnis, das ich wollte. Hier noch einmal für andere, die das Problem haben:
sorry, wenn ich ein wenig Wasser in deinen Wein kippen muss, aber deine Lösung ist imho kein gutes Beispiel für andere und nicht zu empfehlen.

Niemals leere divs für HG-Bilder hernehmen. Das ist uralte Tabellendenke.
Gib z.B. body ein horizontal zentriertes Hg-Bild, wo in der Mitte der Platz für den Content in der Hg-Farbe des Contents frei bleibt.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #8 (permalink)  
Alt 15.04.2010, 17:36
Benutzerbild von Scheppertreiber
Chaot und Nonkonformist.
XHTMLforum-Kenner
  
Registriert seit: 13.03.2007
Ort: Steinmark im Spessart
Beiträge: 7.457
Scheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein Lichtblick
Standard
Zitat:
Zitat von hubspe Beitrag anzeigen
Gib z.B. body ein horizontal zentriertes Hg-Bild, wo in der Mitte der Platz für den Content in der Hg-Farbe des Contents frei bleibt.
Bitmap, 2 MB, ISDN *umpf*
__________________
Grüße aus dem Spessart, Joe

{ table-layout: biertischistbesser; }
Der Mausinator
Mit Zitat antworten
  #9 (permalink)  
Alt 16.04.2010, 14:33
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
  
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.087
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard
Zitat:
Zitat von Scheppertreiber Beitrag anzeigen
Bitmap, 2 MB, ISDN *umpf*
jpg, mit vielen Filtern: Speichern unter... 6 Mb
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
Antwort

« Vorheriges Thema | Nächstes Thema »
Themen-Optionen
Ansicht
Linear-Darstellung Linear-Darstellung

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
Teile der Website verschieben sich bei Auflösung Panamajack (X)HTML 7 19.06.2010 15:53
Norwegische Webmaster gegen veraltete Browser Schelm.isch Offtopic 255 23.04.2009 22:27
analysetool für websites opa-rudi Site- und Layoutcheck 23 05.08.2008 15:33
Bitte um Feedback zu meiner überarbeiteten Website Sen-nefer Site- und Layoutcheck 9 08.02.2008 16:49


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:09 Uhr.

Datenschutzerklärung - Impressum - Archiv - Nach oben

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2021, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020