zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden box in variabler breite

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.05.2010, 19:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.07.2009
Beiträge: 5
double-x befindet sich auf einem aufstrebenden Ast
Böse box in variabler breite

Hallo,

ich komme nicht weiter und brauche Hilfe.

Ich will eine box links ausrichten (das ist nicht das Problem) welche sich aber zwischen min-width und max-width an die größe des Browserfensters anpasst. Die Contentbox danneben hat eine feste Breite. Beide Boxen sind in einer gemeinsammen box welche 100% höhe und breite haben muss.

Ich komme nicht weiter.
Um das Problem unabhängig von allen anderen Faktoren anzugehen habe ich eine ganzeinfache html geschreiben die das Problem zeigt:

HTML-Code:
<html>
<body>
<div style="width:100%; height:100%; border:1px solid green;">

<div style="min-width:100px; max-width:380px; width:auto; position:relative; height:100%; float:left; display:inline; border:1px solid red;">bla</div>

<div style="width:630px; position:relative; height:100%; float:right; display:inline; border:1px solid blue;">blub</div>
</div>
</body>
Danke für eure Hilfe.

double-x
</html>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.05.2010, 20:50
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

Floats schrumpfen auf ihre notwendige Weite. Sie dehnen sich nicht beliebig aus wie normale Blockelemente (bei denen daher max-width sinnvoll sein kann)

10.3.5 Floating, non-replaced elements
If 'width' is computed as 'auto', the used value is the "shrink-to-fit" width.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.05.2010, 21:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.07.2009
Beiträge: 5
double-x befindet sich auf einem aufstrebenden Ast
Standard besser

Ok.

ich habe jetzt die floats entfernt. Die beiden Boxen sind nebeneinander. Jedoch ist die linke box nur so breit wie der Inhalt. Sie spricht nicht mal auf min-width an. Wenn ich ehrlich bin habe ich nicht alles in deinem Link verstanden.

Hier nochmal der aktuelle Code.

Kannst du nochmal helfen?

Danke

HTML-Code:
<html>
<body>
<div style="width:100%; height:400px; border:1px solid green;">
<div style="min-width:100px; max-width:300px; width:auto; position:relative; height:100%; display:inline; border:1px solid red;">t</div>
<div style="width:630px; position:relative; height:100%; margin:auto; display:inline; border:1px solid blue;">t</div>
</div>
</body>
</html>
Mit Zitat antworten
  #4 (permalink)  
Alt 13.05.2010, 23:33
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

Du hast float entfernt, und display:inline stehen gelassen.
(Warum stand das vorher überhaupt da? Float ließ die Inlines eh zu Block werden.)

Nun, Inlines ignorieren jegliche Weitenangabe. So geht es nicht.

Ist es denn überhaupt nötig, dass der rechte Container im Code nach dem linken kommt?

Was soll passieren, wenn die Gesamtweite kleiner als 730px wird?

Warum sind die Dinger relativ positioniert?
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken

Geändert von IChao (13.05.2010 um 23:43 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 14.05.2010, 08:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.07.2009
Beiträge: 5
double-x befindet sich auf einem aufstrebenden Ast
Standard erst rechts dann link

Danke.

Ich habe nun also inlines entfernt. Weiterhin habe ich umgestellt: zuerst wird die rechte und dann die Linke box im Code generiert.

Die sind auch nebeneinander und die linke box hat eine variable breite. Sehr gut.

Nur wird nun die min- und max-width irnoriert.

Du hattest noch gefragt was bei einer kleineren breite als 730px pasieren soll. nun eigentlich soll dann gescrollt werden. Also nicht wie momentan das die linke box dann unter die rechte rutscht.

hier nochmal der aktuelle code.

HTML-Code:
<html>
<body>
<div style="width:100%; height:100%; border:1px solid green;">
<div style="width:630px; height:100%; float:right; border:1px solid blue;">t</div>
<div style="min-width:100px; max-width:300px; width:auto; height:100%; border:1px solid red;">t</div>
</div>
</body>
</html>
das letzt float bekomme ich auch nicht weg.

Danke
Mit Zitat antworten
  #6 (permalink)  
Alt 14.05.2010, 10:27
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

min/max wird nicht ignoriert. Man sieht es nur nicht, weil:
Floats werden von nachfolgenden Elementen ignoriert (nur die inliegenden Textzeilen machen dem Float Platz). Die nachfolgende linke Box streckt sich also aus, wie sie will und kann.
Hätte sie einen rechten margin, der die Breite des Floats einnimmt, könnte man min/max aktiv sehen.

margin-right: 630px;

Dieser Margin schiebt sich in z-Richtung unter das Float (wird also vom vorangehenden Float verdeckt), und min-max wird sichtbar.

Das ganze funktioniert nicht im IE6
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
Antwort

Stichwörter
width auto

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
Box variabel in Breite und Höhe Black Fladder CSS 2 12.04.2008 17:31
Div mit variabler Breite durch Fenstergröße Dwarf CSS 2 16.01.2007 15:38
Kniffliges Layout mit float Roadrunnerle CSS 6 14.03.2006 12:26
#boxes a:hover.info: 2.posting mit css !!! marioN CSS 5 25.01.2004 18:04
#box a:hover .info: css-layout: ie6.0/win, moz.1ie5.0/mac, marioN CSS 2 19.01.2004 18:17


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:34 Uhr.