nicht angemeldet
Transparenter Layer soll aus dem Viewport raus ragen
0 0 0 
Struppi
Transparenter Layer soll aus dem Viewport raus ragen
Hallo zusammen!
Ich bastle grad am Layout einer Webseite, welche mit Typo3 umgesetzt wird, damit der Kunde die Seite später pflegen kann. Mein Problem selbst hat aber nichts mit Typo3 zu tun, sondern rein mit HTML bzw. CSS.
Folgende Problemstellung:
Der Inhaltsbereich der Seite ist 1000px breit und wird bei hohen Auflösungen zentriert dargestellt. Oben im Kopfbereich ist an einer Position ein Layer definiert, in dem mittels PHP bei jedem Aufruf ein Bild aus einem Ordner geladen wird. Über diesem Bild soll nun ein Layer gelegt werden, welcher ein transparentes PNG mit Linien enthält, die um das Bild laufen und es teilweise überschneiden...
Das ist nun soweit ja kein Problem. Problematisch ist allerdings, dass der Kunde möchte, dass die Linien bei einer 1024er Auflösung aus dem Viewport rechts herausragen und bei höheren Auflösungen dann komplett sichtbar sind...
Nun meine Frage: Wie bekomme ich das am besten hin, ohne dass dabei eine lästige horizontale Scrollbar entsteht? Ich habe schon ordentlich rumprobiert, doch leider immer mit dem Ergebnis der Scrollbars... Wenn ich overflow:hidden setze, hab ich zwar keine Scrollbar, aber bei hoher Auflösung abgeschnittene Linien... So langsam tut sich mir der Verdacht auf, dass ich nen falschen Denkansatz gemacht habe bzw. mein Vorhaben nicht möglich ist...
Hat jemand ne Idee? Ich hoffe ich habe mich einigermaßen verständlich ausgedrückt...
Gruß,
Drathy
-
Hi,
wenn du ein Bild als Background Image definierst, dann sollten keine Scrollbars entstehen.
Was meinst du mit Viewport? Ich verstehe darunter eigentlich das Browserfenster und Grafiken außerhalb davon geht natürlich nicht.
Gruß
Christian-
Hallo!
Ist es doch, sofern du IE 6 Benutzer nicht aussperren möchtest. Deren Browser kann transparente PNGs nämlich nur mit Hilfe von htc Skripten darstellen (es gibt allerdings fertige Bibliotheken).
Jap, das kenn ich...hab schon mehrfach mit transparenten PNGs gearbeitet und weiß wie ich dem IE6 die Transparenz beibringe... ;-)
Deinen Ansatz verstehe ich aber nicht ganz. Wenn ich den pngheader absolut positioniere, dann hängt er doch immer an der Position 0,0 in diesem Fall...und das egal, wie groß mein Browserfenster ist... So ist es dann doch unmöglich, den Layer mit den Linien immer "dynamisch" je nach Fenstergröße über dem Bild zu positionieren...
@Christian:
Wenn ich das Bild als Hintergrund definiere,dann muss ich dem Layer aber doch ne Breite und Höhe geben...und somit entstehen dann doch wieder Scrollbars...
Unter Viewport verstehe ich den sichtbaren Innenausschnitt des Browserfensters. Grafiken außerhalb gehen schon...und mittels overflow:hidden kann man auch das scrollen unterdrücken...nur leider sowohl horizontal und vertikal...Ich werde aber mal schauen, ob ich mit overflow-x:hidden zurecht komme..das kannte ich bislang nicht... ;-)
Gruß,
Drathy-
Hi Drathy,
weiß ja nicht genau wie dein Design / die PNGs aussehen. Wenn's stört, hast du natürlich Recht und dann musst du an der Positionierung noch fummeln. Z.B. beide als Vorder- und Hintergrund in ein div; oder mit ein bißchen Javascript (screen.width). Wenn deine PNGs immer gleich groß sind, dürfte das aber hinzukriegen sein. Wichtig ist body, html width 100% und das overflow-x: hidden für das div (nicht auf body wegen scrollen, aber das weißt du ;-).
Als Alternative könntest vielleicht auch versuchen, nicht absolut und mit z-index zu arbeiten, sondern dem unteren header ein float left zu geben. Dann müsste der pngheader drüber rutschen und das PNG als Hintergrund kriegen (um es positionieren zu können). Dann müsstest aber noch'n Container um alles für die horizontale Zentrierung legen.
Bekommst du schon hin... Schick mal'n Link, falls du's hinkriegst (mail siehe oben)
Gruß
Antipitch-
Hi Antipirch!
Danke für Deine ausführliche Antwort!
Der Ansatz hört sich gut an, doch in der Zwischenzeit hab ich weiter probiert und es soweit ich das beurteilen kann, auch vernünftig hinbekommen. Ich hab es nun so gemacht:
Das transparente PNG wie gewünscht positioniert, so dass der Teil, der über den Container hinausragt aufgrund fester Breite + overflow abgeschnitten wird. Der "Trick" bei mir ist nun, dass ich dem body den urspünglichen Hintergund gegeben habe, der sich horizontal immer wiederholt. Dann habe ich noch einen Container für einen weiterern Hintergrund erstellt (Breite + Höhe 100%), dem ich selbigen Hintergrund mit dem abgeschnittenen Teil der Linien gegeben habe und horizontal zentriert habe. Ich musste dann minimal Fummeln beim Erstellen der Grafik um die korrekte Position der abgeschnittenen Linien hinzubekommen, aber dafür klappt alles bestens... :)
Nen Link kann ich leider nicht liefern, da die Seite noch nicht über eine URL erreichbar ist...
Gruß,
Drathy
-
-
Drathy,
vergiss die Vorschläge von eben. Hier ist die Lösung (vorausgesetzt du kennst die Größe des PNG):
#pngheader {
position: absolute;
top: 0;
left: 50%;
margin-left: - die Hälfte der Breite des PNG px;
z-index: 10;
height: 200px;
overflow-x: hidden;
}Alles andere so lassen. War eigentlich logisch, sorry...
Gruß
Antipitch-
Hi Antipirch!
Oh, lese nun grad erst diese Antwort!
Ja, die Größe des PNG kenne ich... Das sieht in der Tat so aus, als würde es funktionieren und ergibt für mich einen Sinn bzw. ich verstehe den Gedanken dahinter... ;-)
Danke Dir!!!
Gruß,
Drathy
-
-
-
-
Hi Drathy
Über diesem Bild soll nun ein Layer gelegt werden, welcher ein transparentes PNG mit Linien enthält, die um das Bild laufen und es teilweise überschneiden... Das ist nun soweit ja kein Problem.
Ist es doch, sofern du IE 6 Benutzer nicht aussperren möchtest. Deren Browser kann transparente PNGs nämlich nur mit Hilfe von htc Skripten darstellen (es gibt allerdings fertige Bibliotheken).
Problematisch ist allerdings, dass der Kunde möchte, dass die Linien bei einer 1024er Auflösung aus dem Viewport rechts herausragen und bei höheren Auflösungen dann komplett sichtbar sind...
Nein, ist es nicht. Musst das Bild so breit machen wie du's haben willst und dann das hier schreiben (tested IE6, IE7, FF):
body, html {
margin: 0;
padding: 0;
border: 0 none;
width: 100%;
}
#pngheader {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 200px; //oder was immer
overflow-x: hidden;
}
#header {
width: 1000px;
margin: 0 auto 0 auto;
background: url(img/header.jpg) no-repeat 0 0;
height: 200px;
}
#content {
width: 1000px;
margin: 0 auto 0 auto;
}<body>
<div id="pngheader"><img src="img/pngheader.png" alt="" /></div>
<div id="header">normaler header mit navi oder was immer</div>
<div id="content">hier alles andere, p's div's etc</div>
</body>Gruß
Antipitch -
Folgende Problemstellung:
Der Inhaltsbereich der Seite ist 1000px breit und wird bei hohen Auflösungen zentriert dargestellt.1000 Pixel? Wer zieht sich denn sein Fenster so gross?
meins ist aktuell 930, meistens aber noch ein bisschen kleiner.
OK, wenn jemand Kurzsichtig ist und seine Schriftgröße größer einstellt, dann kann so eine Breite von Vorteil sein, aber in den Standardeinstellungen sind so breite Textzeilen nicht mehr schön zu lesen.Das ist nun soweit ja kein Problem. Problematisch ist allerdings, dass der Kunde möchte, dass die Linien bei einer 1024er Auflösung aus dem Viewport rechts herausragen und bei höheren Auflösungen dann komplett sichtbar sind...
Die Auflösung hat nicht viel mit dem Viewport zu tun. Im Gegenteil, es ist sehr wahrscheinlich, dass jemand mit einer Riesenmonitorauflösung sich sein Fenster entsprechend verkleinert, da die meisten Seiten ziemlich leer aussehen wenn du ein Fenster mit 2000 Pixel Breite hast (viele Seiten benutzen 780 Pixel als maximale Breite) und jemand der einen alten 15" Monitor hat seine Fenster maximiert. Zumindest bei mir ist es so, dass das Fenster auf dem 15" Monitor oft breiter war als das auf einem 19" Monitor.
Struppi.