|
|||
![]()
Guten Abend zusammen.
Das nimmt mich schon länger wunder, vielleicht weiß ja jemand eine sinnvolle Lösung. Szenario: Sich dynamisch verlängernde Webseite mit unterschiedlichem Verlauf links und rechts. Der Verlauf wird nach unten hin verlängert, wenn sich die Webseite verlängert, indem der unterste Streifen gekachelt wird. Nun möchte ich gerne das die Webseite zusätzlich nach links und rechts jeweils bis an den Bildschirmrand raus läuft. Entsprechend würde ich auch links und rechts wieder einen 1px breiten Streifen schneiden und diesen dann nach außen hin verlängern. Mir fehlt da noch ein sinnvoller Ansatz. Es sollte nicht nur der Contentbereich, sondern auch der Header und Footer nach aussen hin verlängert werden ... Mag jemand helfen? Im Anhang das Testszenario, möglichst einfach gehalten. Gruss, kp Geändert von keinplan (12.08.2010 um 19:30 Uhr) |
Sponsored Links |
|
||||
![]() Zitat:
Mir fällt jetzt spontan nur eine Lösung ein, in dem du links und rechts ein eigenes div setzt, dem du dann die jeweilige Grafik zuweist. Ähnlich wie hier: Flexi Floats - Multi Column CSS-P Layout nur die divs ebenfalls flexibel gestalten. |
|
|||
![]()
Oder 2 aufeinanderliegende div's die beide absolut positioniert sind und die gesamte Höhe und Breite des Fensters einnehmen. Beide haben dann je ein Hintergrundbild: das eine für links, das andere für rechts. Mit background-position noch die Position bestimmen - fertig. Und dran denken, dass das eine links und das andere rechts transparent sein muss um das darunterliegende auch anzeigen zu lassen.
|
|
|||
![]()
Ich bekomm das einfach nicht hin. Kann das jemand in mein Beispiel einbauen damit ich das nachvollziehen kann? Gerne auch einfach einfarbig ohne Grafik. Im Moment raucht einfach nur noch der Kopf. Links und rechts jeweils ein DIV der sich bis an den Browserrand streckt und dynamisch mit verlängert ...
![]() |
|
|||
![]()
setze einen Container als Platzhalter.
HTML-Code:
<div id="egal"> <div id="left"> <div class="leftcontent"></div> </div> <div id="right"> <div class="rightcontent"></div> </div> <div id="center"> <div class="maincontent"></div> </div> </div> Diese nimmste als index.css Datei. Code:
@import url(css/style.css); /* B O D Y ====================================*/ html, body { height: 101%; width: auto; text-align: center; overflow: hidden-x; } /* alle Elemente auf Null setzen ! ====================================*/ * { margin: 0px; padding: 0px; border: none; outline: 0; line-height: 140%; text-decoration: none; list-style-type: none; list-style-position: outside; overflow: hidden-x; } /* unterstrichene Verweise im Text ====================================*/ p a { text-decoration: underline; outline: none; } /* Standardauszeichnung Fonts ====================================*/ textarea, pre, tt, code { font-family: "Courier New", Courier, monospace; } /* font-size Bug im Opera ====================================*/ body { font-size: 100.01%; } /* dynamic-imagelink for IE ====================================*/ a:hover img { font-weight: bold; } /* keine ungewollten Selectboxen ====================================*/ option { padding-left: 0.4em; } /* Safari-Fix (100% sind zu groß) ====================================*/ input, textarea, select { font-size: 99%; } /* Platzhalter für vertikalen Spaltenbereich ------------------------------------ Dieser Eintrag MUSS gesetzt sein !!! ====================================*/ #egal { display: block; overflow: hidden; text-align: left; clear: both; } /* Spalte links ------------------------------------ innerhalb von id="egal"(Platzhalter) ====================================*/ #left { float: left; display: block; overflow: hidden; height: 1%; } /* Spalte rechts ------------------------------------ innerhalb von id="egal"(Platzhalter) ====================================*/ #right { float: right; display: block; overflow: hidden; height: 1%; } /* Spalte mitte (maincontent) ------------------------------------ innerhalb von id="egal"(Platzhalter) ====================================*/ #center { display: inline; width: auto; overflow: hidden; } /* undefinierte innere Box ------------------------------------ innerhalb von #center ====================================*/ #center div { display: block; width: auto; height: 100%; overflow: hidden; } Die eigentlichen Auszeichnungen erfolgen dann in einer weiteren importierten CSS-Datei. In etwa so: Code:
/* platzhalter ==================================*/ #egal { margin: 0px 0px 16px 0px; } /* left ==================================*/ #left { margin: 0px; } #left div.leftcontent { width: 23%; } /* right ==================================*/ #right { margin: 0px; } #right div.rightcontent { width: 23%; } /* center (content) ==================================*/ #center { margin: 0px; } #center div.maincontent { width: auto; } Vorsicht bei den ollen IE's !!!! Testen!!! |
|
||||
![]() Zitat:
|
Sponsored Links |
|
|||
![]()
Im Anhang der aktuelle Stand. Da sind jetzt noch genau 2 Probleme zu lösen. Die Divs links und rechts ändern ihre Höhe nicht und ich müsste links und rechts auch noch einen blauen Streifen für den Footer drunterhängen.
Auch Dir danke firehorse, aber zu einer Lösung für mein spezifisches Problem komme ich mit Deinem Code auch nicht. |
Sponsored Links |
![]() |
Themen-Optionen | |
Ansicht | |
|
|
![]() |
||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
CSS-Styles werden bei einem Linksprung von Webseite A auf Webseite B nicht geladen | Fools | (X)HTML | 3 | 13.09.2010 11:57 |