|
|||
3-Spalten-Layout: Mitte feste Weite, links und rechs und links flexible Weite
Hallo!
Mein Layout sieht folgendermaßen aus: Spalte links 50% Restbreite | Spalte mitte 980px fest | Spalte rechts 50% Restbreite Optimierung auf 1024px Breite, zentriert, die äußeren Spalten sollen nur soweit sichtbar sein, wie es die Auflösung erlaubt, bei 1024px also beide um 22px abgeschnitten, es darf aber keine Scrollbar dadurch entstehen, alle Spalten 100% Höhe. Hier noch mal etwas genauer: Spalte links: Bei mehr als 1024px Auflösung soll die Spalte min. 40px haben und die BG-Grafik soll rechts ausgerichtet y-kacheln. Bei 1024px Auflösung kann die Grafik nur 22px breit sichtbar sein, es darf aber keine x-Scrollbar entstehen. 100% Höhe. Spalte mitte: Feste breite 980px, zentriert, 100% Höhe. Spalte rechts: Bei mehr als 1024px Auflösung soll die Spalte min. 40px haben und die BG-Grafik soll rechts ausgerichtet y-kacheln. Bei 1024px Auflösung kann die Grafik nur 22px breit sichtbar sein, es darf aber keine x-Scrollbar entstehen. 100% Höhe. Meine Ansätze und Probleme: Ich habe versucht der Mitte eine feste breite und den Seiten Prozenwerte zu geben, das geht nicht. Beim IE bekomme ich in diesem Fall overflow:hidden nicht hin. Geht das überhaupt bei den beiden Außenspalten? Wer kann mir helfen? Danke! PS: Sorry für die Tippfehler im Titel (ist mein erstes Posting Und die PX-Angaben sind ca. Werte, da der Viewport-Rahmen noch hinzu kommt. Geändert von jogiwebster (25.02.2011 um 16:51 Uhr) |
Sponsored Links |
|
||||
Das wird einmal gehen, mit css3 calc, kann aber bisher nur der IE9. Hatte dafür letztens mal ein Beispiel wg. einer Frage in nem anderen Forum gebastelt, wie es mit js funktioniert... habs noch online: http://www.cebito.de/examples/variabel/ lässt sich leicht auf dein Problem anpassen. Wichtig für dich ist nur das Script am Ende der Seite (und natürlich jQuery), das andere war vom Fragesteller, wg. seinem Hintergrundbild...
Geändert von cebito (25.02.2011 um 16:42 Uhr) |
Sponsored Links |
|
||||
Hast du eine Grafik/Vorlage die du nachbauen möchtest?
Ich glaube du denkst viel zu kompliziert, wahrscheinlich lässt sich dein Problem mit einer normalen zentrierten Seite und einem Hintergrund für body oder/und html lösen. @cebito Wenn CSS3, dann brauchst du dafür kein calc, sondern kannst es ganz elegant mit flex boxes lösen. Geändert von inta (25.02.2011 um 16:42 Uhr) |
|
|||
@inta
CSS3 möchte ich eigentlich noch nicht bemühen. Das habe ich auch gedacht und zuerst einfach einen Container per margin:auto zentriert und die beiden Spalten (die nur eine y-kachelnde BG-Grafik beinhalten) über den Hintergrund für die eigentliche Seite realisiert. Das Problem dabei ist, dass die horizontale Position des Divs zur BG-Grafik beim Verändern der Viewportgröße um 1px "springt", es besteht also keine Genauigkeit, die ich für mein Layout aber benötige (möchte mein PS-Layout umsetzen). Geändert von jogiwebster (25.02.2011 um 16:52 Uhr) |
|
||||
Zitat:
@jogi - das js befindet sich am Ende des Quelltextes, den einfach mal anzeigen lassen. Edith sagt noch - zeig doch mal dein PS-Layout, wahrscheinlich denkst du wirklich nur zu kompliziert... |
|
|||
Hier noch eine optische Erläuterung, die grünen Linien zeigen an wo der Schatten bei 1024 abgeschnitten werden soll.
Und falls jemand es auf seinem Monitor nicht sieht, der Schatten geht jweils über die grüne Linie hinaus... Geändert von jogiwebster (25.02.2011 um 16:54 Uhr) |
|
||||
Ohne CSS3 oder JS: http://xhtmlforum.de/57653-3-div-con...tml#post438295
Deine bg-Bilder gehen an Elemente, die alle 3 Spalten umgeben, siehe FAQ 1.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
|
|||
Firefox 4.0 kennt -moz-calc()
__________________
Über Internet Explorer 8: Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt. Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt. Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt. Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard. |
Sponsored Links |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
3 Spalten Layout - aussen fixe Breite, mitte variabel | semikolon | CSS | 1 | 04.12.2005 18:14 |
3 Spalten | Aussen: variable Breite; Mitte: feste Breite | dreamshocker | CSS | 9 | 17.08.2005 17:23 |
3 Spalten, 100% Breite und Mitte feste breite | lookom | CSS | 0 | 23.07.2005 18:19 |
frage zu 3 spalten layout mit festem bereich in der mitte | otomo | CSS | 3 | 08.03.2005 02:41 |
Im 3 Spalten Layout geht Mitte "unten durch" | Zwacky | CSS | 3 | 16.12.2004 23:07 |