Fixes Layout trotz veränderbarer Browsergrösse

[Umberto]

Hallo zusammen!

Ich sitze momentan an einem Projekt und komme einfach nicht weiter.

Folgendes soll gegeben Sein:

Die Seite soll mit CSS aufgebaut werden. Egal wie gross der Browser ist soll rechts immer ein weisser Balken von 150px zu sehen sein. Soweit nicht kompliziert - aber jetzt kommts: Die Seite wird horizontal scrollbar sein - hat also effektiv eine Breite von 5x Browserbreite.

Mit width:100% komm ich also nicht weiter da der div dann auf die komplette Breite gezogen wird.

Die Breite des Browsers auslesen und über Javascript in den Style schreiben geht auch nicht weil der Rückgabewert auch wieder die Breite des bodys zurückgibt.

Hat irgendwer eine Idee wie man das lösen könnte?

[Matthias Apsel]

Om nah hoo pez nyeetz, Umberto!

Die Seite soll mit CSS aufgebaut werden. Egal wie gross der Browser ist soll rechts immer ein weisser Balken von 150px zu sehen sein

spricht für border-right des html-Elements

Matthias

[Umberto]

Om nah hoo pez nyeetz, Umberto!

Die Seite soll mit CSS aufgebaut werden. Egal wie gross der Browser ist soll rechts immer ein weisser Balken von 150px zu sehen sein

spricht für border-right des html-Elements

Matthias

Wie meinst du das? Um border-right benutzen zu können darf ein Element nicht grösser als der sichtbare Bereich sein.

[Matthias Apsel]

Om nah hoo pez nyeetz, Umberto!

Zitiere bitte sinnvoll, nur das, worauf du dich beziehst.

Um border-right benutzen zu können darf ein Element nicht grösser als der sichtbare Bereich sein.

Dieser Gedanke ist falsch.

Matthias

[Umberto]

Matthias - erstmal Danke fürs antworten. Wenn du dir aber schon die Mühe machst dann les doch bitte im Hauptpost nach der ersten Zeile weiter. Das Problem ist nich wie ich einen weissen Balken nach rechts bekomme sondern wie ich das mache in Kombination mit einer horizontal scrollenden Webseite.

[Umberto]

Hier mal eine Beispielgrafik damit klar wird was ich meine.

[Matthias Apsel]

Om nah hoo pez nyeetz, Umberto!

Du könntest zum Beispiel ein div- oder aside-Element fix positionieren und mit einem entsprechenden z-index versehen.

Matthias

[Umberto]

Irgendwie hilft mir das nicht weiter. Kann es sein dass nicht ganz verständlich ist was ich meine?

[Tabellenkalk]

Kann es sein dass nicht ganz verständlich ist was ich meine?

Das ist immer denkbar. Möglicherweise verschweigst du aber auch dein eigentliches Problem. Mehrere Seiten nebeneinander sind im Internet nicht unbedingt üblich. Warum benötigst du dieses?

Gruß
Kalk

[Umberto]

Wenn ich mein eigentliches Problem verschweigen wollen würde, müsste ich mich nicht an die User hier im Forum wenden ;-)

Die Frage nach dem Warum ist irrelevant. Es geht einzig und allein darum ob und wie es lösbar ist.

Habe ich in der body Klasse eine Breite von sagen wir 12000 pixel definiert, funktioniert alles soweit super. Ich kann 5 divs anlegen mit jeweils 2500 pixel und die liegen schön nebeneinander. Allerdings berücksichtige ich dadurch noch nicht die individuelle Browsergrösse des users. Und da mein Layout voraussetzt, dass ich immer relativ zum rechten (sichtbaren) Browserrand positioniere, hätte ich gerne dass mein DIV für den content so gross ist wie der sichtbare Bereich im Fenster - und nicht so breit wie der Body des Dokuments (12000px). Da muss es doch irgendeine Möglichkeit oder einen workaround geben!?

Ich hab auch schon versucht über Javascript die innerWidth auszulesen, in ne variable zu schreiben und dann bei body onLoad in den Style des divs zu schreiben - ohne Erfolg. Ich bekomme zwar den richtigen Wert ausgegeben wenn ich die Variable trace aber der Div ist immer so breit wie der Body - also 12000px.

[Umberto]

hier noch nen bissel Quelltext dazu:

...  
<style>  
[code lang=css]#red {  
	border-left:5px #F3F3F4 solid;  
/* rechter Rand um zu überprüfen wann ein DIV anfäng und aufhört */  
	border-right:5px #FFF solid;  
	position:absolute;  
	height:100%;  
	left:0px;  
	right:0px;  
	top:0px;  
	bottom:0px;  
	background-color:#8B0E13;  
	float:left;  
}

</style>

<script type="text/javascript">  
function fensterbreite () {  
  breite = window.innerWidth;  
  document.getElementById("red").style.width = breite;  
  document.getElementById("red").style.backgroundColor = "#FF0000";  
}  
</script>

</head>
<body onload="fensterbreite()">
<div id="red" style="width:1000px;"></div>
</body>...[/code]

[ChrisB]

Hi,

<script type="text/javascript">

function fensterbreite () {
  breite = window.innerWidth;
  document.getElementById("red").style.width = breite;

  
Da weist du einen ungültigen Wert zu.  
  
MfG ChrisB  
  

-- 
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

[Umberto]

Wieso ungültig? Wenn du damit meinst das die "px" angabe fehlt - auch das hab ich versucht mit ~~~javascript breite = window.innerWidth;

document.getElementById("red").style.width = breite+"px";

  
Hat nix gebracht :-(

[Multi]

Hat nix gebracht :-(

heisst das, der Wert wird nicht zugewiesen oder der Wert hat keinen Einfluss auf dein Design?

[Umberto]

Der Wert wird zugewiesen, wirkt sich aber nicht aus. Ich hab den Rückgabewert der Variablen 2 mal getraced. Einmal nach dem Auslesen der Grösse durch das Script und ein mal nach Übergabe an den neuen Stil. Geht nicht!

[Gast]

Habe alles durchgelesen und doch nicht ganz verstanden, was dein Problem ist.

Du möchtest einen rechten "Balken von 150px" immer darstellen und den linken Rest zum horizontalen Scrollen nutzen? Der Balken soll dabei nicht mitscrollen?

Erste Überlegung: Kann es Fenster geben, die nicht wesentlich breiter sind als 150px, etwa Mobilgeräte? Wenn ja, ist der Inhalt nicht zu sehen, nur der Balken.

Zweite Überlegung: Du kannst ein beliebiges "Fenster" mit Breite und Höhe definieren und darin einen weit größeren Inhalt darstellen. Gezeigt wird davon nur, was das "Fenster" zulässt. Bekannt etwa durch Google Maps, wo du ja eine undendliche Landkarte im briefmarkengroßen Fenster beliebig verschieben kannst.

Ist das dein Problem?

Gruß, Gast

[Umberto]

Nee nicht wirklich. Hast du die Beispielgrafik gesehen die Ich hochgeladen hab? Die verdeutlicht das Problem glaub ich ganz gut.

[Vinzenz Mai]

Hallo Umberto,

Nee nicht wirklich. Hast du die Beispielgrafik gesehen die Ich hochgeladen hab? Die verdeutlicht das Problem glaub ich ganz gut.

hast Du Dir meinen Lösungsvorschlag angesehen?

Freundliche Grüße

Vinzenz

[Vinzenz Mai]

Hallo,

Die Seite soll mit CSS aufgebaut werden. Egal wie gross der Browser ist soll rechts immer ein weisser Balken von 150px zu sehen sein. Soweit nicht kompliziert - aber jetzt kommts: Die Seite wird horizontal scrollbar sein - hat also effektiv eine Breite von 5x Browserbreite.

Hat irgendwer eine Idee wie man das lösen könnte?

Folgendes sah in den aktuellen Versionen von Firefox, Opera, Chrome und IE so aus, wie ich Deine Beschreibung verstanden habe:

<!DOCTYPE html>  
<html>  
<head>  
    <title>Test</title>  
    <style>[code lang=css]  
        html {  
            margin: 0;  
            padding: 0;  
            background-color: white;  /* weißer Balken  */  
            overflow: scroll;         /* stets im Blick */  
        }  
  
        body {  
            margin:  0;  
            padding: 0;  
            position: absolute;       /* damit bekommen wir */  
            top: 0;  
            right: 150px;             /* 150 Pixel rechts   */  
            bottom: 0;  
            left: 0;  
            overflow-y: hidden;       /* ohne vertikalen Scrollbalken */  
        }  
				  
        #container {  
            width: 500%               /* Fünffache Breite */  
        }	  
		  
        div {  
            width: 20%;               /* und jeder einzelne */  
            margin:  0;               /* wieder 100% Breite */  
            padding: 0;  
            display: inline-block;    /* hübsch nebeneinander */  
            vertical-align: middle;   /* nur für die Demo     */  
            font-size: 5em;           /* nur für die Demo     */  
            text-align: center;       /* nur für die Demo     */  
        }  
		  
        #c1 {  
            background-color: #033;   /* Farben für die Demo  */  
        }  
  
        #c2 {  
            background-color: #066;  
        }  
  
        #c3 {  
            background-color: #099;  
        }  
  
        #c4 {  
            background-color: #0BB;  
        }  
  
        #c5 {  
            background-color: #0FF;  
        }

</style>
</head>
<body>
    <div id="container">
        <!-- Kein Whitespace! Oder unterdrücke es mit CSS ... -->
        <div id="c1">1</div><div id="c2">2</div><div id="c3">3</div><div id="c4">4</div><div id="c5">5</div>
    </div>
</body>
</html>[/code]

Mit weniger Markup bin ich nicht ausgekommen. Vielleicht weiß ja Gunnar, wie man auf das "Container"-Div verzichten kann ...

Freundliche Grüße

Vinzenz

[Umberto]

Der Ansatz gefällt mir. Auf die width="500%" hätt ich kommen können. Auch display:block sollte ich mir mal genauer ansehen. Hab ich so noch nie verqendet. Ich probiers nachher gleich mal aus! Vielen Dank schonmal! :-)