zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Für Profis: Dynamische Positionierung

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.03.2012, 01:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.01.2011
Beiträge: 13
agent befindet sich auf einem aufstrebenden Ast
Standard 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:
  • Es gibt keine Scrollbars mehr, wenn das Fenster zu klein ist (liegt an 100% width vom div#outerWrapper)
  • Ist die Auflösung zu klein ( 1024x768 ), so bleibt ein Teil des Inhalts verborgen - genau das Gegenteil vom 960px-Design-Ziel

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!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 28.03.2012, 13:15
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.01.2011
Beiträge: 13
agent befindet sich auf einem aufstrebenden Ast
Standard

Quick&Dirty-Fix bis jetzt:
  • dem Head-Element horizontale Scrollbars erlauben, body und Wrapper passende Größen zuweisen
  • Größe vom 3D-Div prozentual festlegen (8%), mit in den inneren Wrapper ziehen, dem einen kleineren Sicherheitsabstand zuweisen (1130px), Hintergrund vom 3D-Div am rechten Rand ausrichten -> wächst dynamisch
  • Ergebnis: auch bei 1024x786 ists einigermaßen passend, Scrollbars sind vorhanden

Problem: schön ist das noch immer nicht, würde gerne die letzten Pixel rausholen. Ideen?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 28.03.2012, 13:58
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.820
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Zitat von agent Beitrag anzeigen
Es gibt keine Scrollbars mehr, wenn das Fenster zu klein ist (liegt an 100% width vom div#outerWrapper)
Kurze Antwort: Nein. Die Angabe overflow: -moz-scrollbars-vertical; verhindert im Firefox die Darstellung horizontaler Scrollbalken. In anderen Browsern wird dagegen fast immer eine horizontale Scrollbar angezeigt.

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 von agent Beitrag anzeigen
dem Head-Element horizontale Scrollbars erlauben, body und Wrapper passende Größen zuweisen
Das head-Element hat niemals Scrollbalken

Zitat:
Zitat von agent Beitrag anzeigen
Problem: schön ist das noch immer nicht, würde gerne die letzten Pixel rausholen. Ideen?
Lass mich kurz rekapitulieren:
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).

Zitat:
Zitat von agent Beitrag anzeigen
960px-Design-Ziel
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.
Mit Zitat antworten
  #4 (permalink)  
Alt 28.03.2012, 16:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.01.2011
Beiträge: 13
agent befindet sich auf einem aufstrebenden Ast
Standard

Huhu, danke für die Antworten soweit -


Zitat:
Zitat von gato Beitrag anzeigen
Kurze Antwort: Nein. Die Angabe overflow: -moz-scrollbars-vertical; verhindert im Firefox die Darstellung horizontaler Scrollbalken. In anderen Browsern wird dagegen fast immer eine horizontale Scrollbar angezeigt.

Die -moz-Angabe solltest du entfernen, da dieser Wert nicht gut dokumentiert ist, nicht browserübergreifend funktioniert und er wohl in Zukunft entfernt wird.
Stimmt, hatte ich mittlerweile auch bemerkt, siehe zweiter Post.


Zitat:
Zitat von gato Beitrag anzeigen
Das head-Element hat niemals Scrollbalken
Typo, gemeint war natürlich das Overflow-Attribut vom HTML-Tag.


Zitat:
Zitat von gato Beitrag anzeigen
Lass mich kurz rekapitulieren:
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).
Letzteres. Bei schmalen Viewports soll das Bild zusätzlich verschwinden - und ich befürchte ebenfalls, dass das nicht möglich ist. Aber ich dachte, vielleicht kennt ja jemand hier einen genialen Weg


Zitat:
Zitat von gato Beitrag anzeigen
960 Pixel sind nie ein Design-Ziel.
Aber ein Nice-To-Have, meiner Meinung nach! Wenn ich mir die Logs angucke, benutzen erschreckend viele User noch 1024x768er Auflösung...
Mit Zitat antworten
  #5 (permalink)  
Alt 29.03.2012, 09:27
Benutzerbild von Q Webdesigner Darmstadt
Neuer Benutzer
neuer user
 
Registriert seit: 29.03.2012
Ort: Darmstadt
Beiträge: 15
Q Webdesigner Darmstadt befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von agent Beitrag anzeigen

Aber ein Nice-To-Have, meiner Meinung nach! Wenn ich mir die Logs angucke, benutzen erschreckend viele User noch 1024x768er Auflösung...
Man denke auch an die iPad-Benutzer...
Mit Zitat antworten
  #6 (permalink)  
Alt 30.03.2012, 18:48
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.820
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Zitat von agent Beitrag anzeigen
Typo, gemeint war natürlich das Overflow-Attribut vom HTML-Tag.
Du meinst das html-Element

Zitat:
Zitat von agent Beitrag anzeigen
Letzteres. Bei schmalen Viewports soll das Bild zusätzlich verschwinden - und ich befürchte ebenfalls, dass das nicht möglich ist. Aber ich dachte, vielleicht kennt ja jemand hier einen genialen Weg
Es ist möglich, wenn du dein 3D-Bild soweit vergrößerst, dass die Balken am oberen Rand aufhören (nicht irgendwo an der Seite).

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"
*/
Hiermit zentrierst du deinen Inhaltsbereich. Das Seitenteil wird mit absoluter Positionierung in den Bereich des Außenabstandes geschoben und verschwindet mit diesem, wenn die Seite zu schmal wird.

Das Effektbild wird dadurch zwar größer, aber da es nur wenige Farben enthält kannst du das ganze mit PNG gut komprimieren.

Zitat:
Zitat von agent Beitrag anzeigen
Aber ein Nice-To-Have, meiner Meinung nach! Wenn ich mir die Logs angucke, benutzen erschreckend viele User noch 1024x768er Auflösung...
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.
Mit Zitat antworten
Antwort

Stichwörter
ausrichtung, float, margin, positionierung

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
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


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