nicht angemeldet
Streifen über Bildschirm hinaus ohne Bildlaufleiste
Matthias Apsel
Gunnar BittersmannHallo Zusammen!
Ich möchte ein Layout realisieren, bei dem ein Streifen auf der Seite des Inhalts, um 50px länger ist als dieser. Soweit so gut.
Nun möchte ich, dass wenn das Fenster niedriger als der Streifen ist, keine Bildlaufleiste angezeigt wird. Wenn das Fenster allerdings niedriger als der Inhalt ist, soll die Bildlaufleiste angezeigt werden.
Hier noch ein paar Bilder um zu verdeutlichen was ich meine:
So soll es aussehen wenn das Fenster gross genug ist:
So soll es aussehen wenn das Fenster zu kein für den Inhalt ist:
So sieht es aktuell aus wenn das Fenster etwas zu klein für den Streifen ist:
Und so sollte es aussehen:
Und noch der Code der Testseite:
<html><head><style type="text/css">
* {
margin: 0;
padding: 0;
}
#center {
margin: 0px auto;
width: 200px;
background-color: #22e;
}
#inhalt {
margin-left: 20px;
background-color: white;
padding-bottom: 50px;
}
</style></head><body>
<div id="center"><div id="inhalt">
<p>Text<br/>Mehr Text<br/><br/><br/><br/><br/><br/>
<br/><br/>text<br/>text<br/>text<br/>Letzte Zeile</p>
</div></div>
</body></html>
-
Om nah hoo pez nyeetz, Mento!
Es fehlt eine Doctype-Angabe.
Der Streifen ist Verzierung und hat im HTML nichts verloren. Erstelle dir mit linear-gradient ein schmales horizontales Hintergrundbild für das HTML-Element. Das bringst du mit background-repeat auf die gesamte Höhe. Das HTML-Element braucht für diesen Fall eine minimale-Höhenangabe und das main-Element einen entsprechenden linken Außenabstand.Benutzer mit alten Browsern können als Fallback ein echtes Hintergrundbild bekommen.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>aussagekräftiger Seitentitel</title> </head> <body> <main role="main">Hier dein Inhalt</main> </body> </html>Matthias
-
Om nah hoo pez nyeetz, Matthias Apsel!
Ergänzungen:
Ich habe ein dabblet gebaut.
Die Angabe von background-repeat und min-height sind nicht notwendig.(Die Spezifikation sagt: Der Hintergrund des Wurzel-Elements bedeckt den gesamten Viewport)
Benutzer mit alten Browsern können als Fallback ein echtes Hintergrundbild bekommen.
die brauchen dann aber background-repeat.
Matthias
-
@@Matthias Apsel:
nuqneH
Ich habe ein dabblet gebaut.
Was die Wünsche des OP nicht berücksichtigt. Der Streifen soll nicht über die gesamte Viewporthöhe gehen, sondern „ein Streifen auf der Seite des Inhalts, um 50px länger ist als dieser.“
Die Inhaltsbox soll also
padding-bottom: 50pxhaben. Allerdings soll dadurch kein Scrollbalken erscheinen, d.h. wenn der Inhalt noch gerade so in den Viewport passt, soll das Padding geringer sein.Außer JavaScript fällt mir da auch gerade nichts ein.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
@Matthias Apsel:
Dass es sich bei dem Beispiel um kein "schönes" HTML handelt ist mir klar. Der Code sollte auf das wesentliche beschränkt sein.@Gunnar Bittersmann:
Ja, so ist es gemeint.-
Om nah hoo pez nyeetz, Mento!
Ja, so ist es gemeint.
Mit JQuery (wenn man es denn vielleicht sowieso braucht) reduziert sich der Code auf einen Einzeiler.
<script src="http://code.jquery.com/jquery-1.11.0.js" type="text/javascript"></script> <script type="text/javascript"> [code lang=javascript] $(document).ready(function() { $('html').css('background-size','100% ' + ($('main').outerHeight() + 50) + 'px'); }); ~~~</script>[/code] [jsfiddle](http://jsfiddle.net/6rr7h/1/) Matthias -- Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [Pater und Paternoster](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=P#pater). -
@@Matthias Apsel:
nuqneH
Mit JQuery (wenn man es denn vielleicht sowieso braucht) reduziert sich der Code auf einen Einzeiler.
Nein. Man muss auch auf Änderungen der Viewportgröße / Orientierung reagieren.
Und eventuell auch auf sich dynamisch ändernden Inhalt.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
-
-
-
@@Gunnar Bittersmann:
nuqneH
Außer JavaScript fällt mir da auch gerade nichts ein.
Mit
position: stickyließe sich da sicher was basteln, aber das wird gegenwärtig nur experimentell von Safari unterstützt. Wer weiß, ob das je kommt.Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
-
-
-
-
Ich hab nun selbst eine Lösung gefunden. Es ist tatsächlich ganz ohne JavaScript möglich.
<html><head><style type="text/css"> * { margin: 0; padding: 0; } #center { margin: 0px auto; width: 200px; overflow: hidden; } #container { overflow: visible; } #inhalt { float: left; width: 100%; background-color: white; border-left: 20px solid blue; } #spacer { float: left; margin-bottom: -50px; padding-bottom: 50px; width: 20px; height: 0px; background: blue; } #ende { height: 100%; } </style></head><body> <div id="center"> <div id="container"> <div id="inhalt"> <p>Text<br/>Mehr Text<br/><br/><br/><br/><br/><br/> <br/><br/>text<br/>text<br/>text<br/>Letzte Zeile</p> </div> <div id="spacer"></div> </div> <div id="ende"></div> </div> </body></html>-
Om nah hoo pez nyeetz, Mento!
Von der Verwendung dieser Lösung rate ich ab.
Matthias
-
Es ist eine Möglichkeit. Nicht schön und außerdem funktioniert sie nicht in einem normalen HTML5 Dokument.
Kann und werde sie daher nicht verwenden und hoffe immer noch auf eine andere, schöne, JavaScript freie, Lösung.
-
-
