|
|||
Für Profis: Dynamische Positionierung
Hallo liebe Community,
ich arbeite zur Zeit an einem ziemlich komplexen Layout. Dabei bin ich über ein Problem gestolpert, das ich trotz (meiner Einbildung nach) fortgeschrittener Kentnisse nicht mit CSS zufriedenstellend lösen kann. Problem-Testcase: Testpage Man beachte den 3D-Effekt der Balken links und wie sich das ganze bei Größenänderung verhält. Bis ca 1500px Breite kleben die 3D-Balken am Inhalt, danach wachsen die Balken dynamisch und die 3D-Erweiterung klebt am Rand. Genau so soll es aussehen! Problem dabei ist:
Ideal wäre also die gleiche Funktionalität, jedoch müsste die "3D-Erweiterung" beim Verkleinern immer weiter an den Inhalt rutschen und danach aus dem Viewport verschwinden - jedoch muss das rechte Ende stets am Inhalt bleiben, weil der Effekt sonst nicht mehr hinhaut. Alle Klarheiten beseitigt? Ich experimentiere im Moment damit rum, das 3D-Div mittels negativem Margin aus dem Inhalts-Div wachsen zu lassen - allerdings kriege ich es dann nicht bei großer Darstellung an den rechten Rand, was die Idee wieder kaputt macht. Bin für alle Ideen zu haben, sollte aber eine reine CSS-Lösung sein. JavaScript mag ich bei sowas nicht. Kompliziert, ich weiß - ich hoffe es ist für den ein oder anderen eine Herausforderung Fragen bitte immer stellen, werden Vormittags oder nachts beantwortet. Vielen Dank im Voraus! |
Sponsored Links |
|
|||
Quick&Dirty-Fix bis jetzt:
Problem: schön ist das noch immer nicht, würde gerne die letzten Pixel rausholen. Ideen? |
Sponsored Links |
|
|||
Zitat:
Die -moz-Angabe solltest du entfernen, da dieser Wert nicht gut dokumentiert ist, nicht browserübergreifend funktioniert und er wohl in Zukunft entfernt wird. Zitat:
Zitat:
Das 3D-Bild (linke obere Ecke) soll immer sichtbar sein. Bei Breiten Viewports sollen sich die Balken verlängern, so wie es jetzt schon funktioniert. Was soll bei schmalen Vieports passieren? Soll das Bild weiterhin stehen bleiben und sich ggfs die Inhalte anpassen. Oder soll das Bild zusätzlich verschwinden (letzteres ist evtl. nicht möglich). 960 Pixel sind nie ein Design-Ziel.
__________________
Ü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. |
|
|||
Huhu, danke für die Antworten soweit -
Zitat:
Typo, gemeint war natürlich das Overflow-Attribut vom HTML-Tag. Zitat:
Aber ein Nice-To-Have, meiner Meinung nach! Wenn ich mir die Logs angucke, benutzen erschreckend viele User noch 1024x768er Auflösung... |
|
|||
Du meinst das html-Element
Zitat:
HTML-Code:
<div id="grundgerüst"> <img src="3d-balken.png" alt="" id="optionales-seitenteil"/><!--auf diese Zeile könnte man verzichten, siehe CSS--> <div id="inhalt">Inhalt der Seite</div> </div> Code:
#grundgerüst { position: relative; margin: 0 auto; max-width: 40em; } #optionales-seitenteil { position: absolute; top: 0; left: -500px; /* 'left' ist minus "Breite des Bildes" */ } /* Alternativ ab IE8 möglich (dann wird kein img-Element benötigt): #grundgerüst:before { content: url('3d-balken.png'); position: absolute; top: 0; left: -500px; } 'left' ist minus "Breite des Bildes" */ Das Effektbild wird dadurch zwar größer, aber da es nur wenige Farben enthält kannst du das ganze mit PNG gut komprimieren. Auch nicht Nice-To-Have. Besser ist, wenn sich die Breite an den Text anpasst und nicht mehr als 80 Zeichen pro Zeile zulässt. Dann ist der Lesefluss noch effektiv. |
Stichwörter |
ausrichtung, float, margin, positionierung |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Firefox 4 und Positionierung | ChOpSueY! | CSS | 2 | 09.05.2011 23:04 |
dynamische bildgröße und absolute positionierung | kalrheinzotto | CSS | 5 | 28.04.2011 16:58 |
Positionierung z-index und IE | Blub | CSS | 4 | 09.12.2007 16:51 |
komplexe Positionierung | new user | CSS | 1 | 19.09.2007 12:51 |
Fixer "Footer"-Div an dynamische "Content-Höh | methodfive | CSS | 13 | 29.10.2005 09:51 |