CSS - Layoutproblem: Restliche Fensterbreite ausnutzen



  • Hi Community!

    Ich hab ein Layout mit drei Boxen:

    +-----------------------+
    |   Top                 |
    |                       |
    +-----------------------+
    +-----+ +---------------+
    | Nav | | Main          |
    |     | |               |
    |     | |               |
    |     | |               |
    |     | |               |
    |     | |               |
    |     | |               |
    +-----+ +---------------+
    

    Mein Problem: Ich möchte, dass das Main-DIV die ganze (restliche) Fensterbreite einnimmt, auch wenn nicht so viel Inhalt drin steht.

    Mein CSS sieht bisher so aus:

    .head
    {
    	/* Hintergrund */
    	background-color: white;
    	background-image:url(logos/kopfleiste_linie.gif); background-repeat:repeat-x;
    
    	/* Schrift */
    	text-align: right;
    	font-size: 12pt;
    	font-weight: bolder;
    	font-family: sans-serif;
    	color: darkblue;
    }
    
    .nav
    {
    	/* Hintergrund */
    	background-color:#eeeeee;
    
    	/* Position */
    	position: absolute;
    	width: 130pt;
    	margin-top: 10pt;
    	color: white;
    
    	/* Rand */
    	padding: 5pt;
    
    	/* Schrift */
    	white-space: nowrap;
    	color: darkblue;
    }
    
    .main
    {
    	/* Hintergrund */
    	background-color: white;
    
    	/* Position */
    	position: absolute;
    	left: 160pt;
    	margin-top: 10pt;
    	margin-right: 10pt;
    
    	display: block;
    }
    

    Wenn ich jetzt beim Main-DIV die Breite auf 100% setze, dann reicht das DIV-Element ja über den rechten Browserrand hinaus.

    Hoffe, ihr könnt mir helfen.

    Gruß
    Konstantin



  • http://root.sidewindershome.net/cache/unixtom.html

    Ein bißchen abändern sollte reichen.

    MfG SideWinder



  • wenn du position: absolut verwendest dann geht das nicht. Siehe mein Posting css vs frame.

    Die Nav hat z.B. 100px breite. In der Mauil dann 100% bedeutet aber die gesamte breite des Fenstern also auch die 100px dabei.
    Da shade ja sein wissen nicht teilen wollte habe ich dafür auch noch keine Lösung gefunden außer wieder JS zu verwenden und die breite auszurechnen.
    Vielleicht hilft dir aber sein Beitrag in meinem Posting. Da hat er es gezeigt.


  • Mod

    Unix-Tom schrieb:

    Da shade ja sein wissen nicht teilen wollte

    Schonmal wieder in den Thread gesehen?

    Ich habe lediglich gesagt, dass ich nicht _gerne_ bei soetwas helfe, weil Tipps nicht gut möglich sind (denn man muss rumprobieren und da helfen falsche tipps weniger als sie schaden - bzw. gibt es unendlich viele möglichkeiten ein layout zu erstellen, man kann es wie Side machen und position:absolute; verwenden, man kann über float:left; gehen. position:relative; geht auch oft, wenn man keine hintergrundfarbe pro layer hat, sondern nur eine pro seite - geht es wieder in 100 anderen varianten - tipps sind also nicht gut möglich, weil wenn jemand mit position:absolute; arbeitet und ich sage "schau dir mal float:left; an", wird ihn das eher verwirren (vorallem muss er dann seine komplette lösung die er hatte wegschmeissen um meinen tipp nutzen zu können)) muss man komplettlösungen (oder etwas was nahe dran ist) hergeben und das will ich eigentlich nicht.

    habe ich dafür auch noch keine Lösung gefunden außer wieder JS zu verwenden und die breite auszurechnen.

    Was stört dich an meiner letzten Lösung?
    und das angebot, dass du mir eine grafik machst wie es aussehen soll und ich mach das layout dazu steht auch noch. (ich will dich nicht verärgern, und wenn ich es getan haben sollte, dann tut es mir wirklich leid :()


Anmelden zum Antworten