zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Box-Model und Scrollen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 23.03.2020, 19:19
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.10.2008
Beiträge: 30
emmis befindet sich auf einem aufstrebenden Ast
Standard Box-Model und Scrollen

Hallo Forum,

ich stelle gerade ein Uralt-Projekt von Frames und Single-File um.
Der Versuch hier das BoxModel zu verwenden läuft an sich ganz gut.

Ausgang ist hier ein 2-spaltiges Design mit einer Fixen und einer variablen Spalte. In der variablen Spalte funktioniert alles wie gedacht, wenn man diese Spalte komplett scrollen lässt, wenn es mehr Inhalt hat als jene Spalte fassen kann.

ABER:
Ich hätte jetzt ganz gern in der variablen Spalte 2 Boxen untereinander, in der z.B.
- die obere Box eine feste Höhe hat und für den Inhalt eine min-width gilt und in keinem Fall gescrollt werden soll
- die untere Box eine variable Höhe hat und in der gescrollt werden soll, sobal die Inhalte zu gross für die Box werden.
Das funktioniert auch richtig gut ... solange man den Browser nicht schmaler zieht als die obere Box Platz durch die feste Breite an Platz benötigt.
Wirds schmaler, verschwindet der vertikale Scrollbalken. Irgendwie erscheint mir das Ganze auch (fast) logisch aber ich finde keinen Weg dies aufzubrechen.

In der jsfiddel habe ich mal durch Reduktion aus dem Gesamtprojekt versucht etwas Verständliches zusammenzustellen. Dort lässt sich das Verhalten auch recht schön nachvollziehen.

https://jsfiddle.net/pooleleven/apmfbxo2/4/

Vielleicht kann jemand einen Denkanstoss geben ... LG
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 23.03.2020, 22:23
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.10.2008
Beiträge: 30
emmis befindet sich auf einem aufstrebenden Ast
Standard

NACHTRAG

... eine, meiner Meinung nach nicht so schöne Lösung gefunden. Würde auch mit nem verschachteltem absolut-div in einem 100% breiten relative-div funktionieren.

HTML-Code:
<div  style="position:relative; width:100%; height:45px; background-color:#F00;">
<div style="display: table-cell; width:850px; height:inherit; ">BOESER STREIFEN</div>
</div>
https://jsfiddle.net/pooleleven/apmfbxo2/7/

Gibt es da aber nicht ein schönere Lösung?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 24.03.2020, 09:01
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.075
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Ehrlich gesagt habe ich keine Ahnung was genau dein Problem ist und was du erreichen willst.
Kannst du vielleicht eine skizze erstellen wo du anschaulich erklärst wie die Seite funktionieren soll?
Erweckt für mich den Eindruck als ob du jetzt ein starres frames-Design nachbauen willst, eben nur ohne frames?
Mit Zitat antworten
  #4 (permalink)  
Alt 24.03.2020, 09:37
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.10.2008
Beiträge: 30
emmis befindet sich auf einem aufstrebenden Ast
Standard

... ok, ich stell mich wohl auch etwas umständlich an aber Danke erst einmal für die schnelle Reaktion!

Wenn man in der Fiddle:
https://jsfiddle.net/pooleleven/apmfbxo2/4/
den Ausgabebereich horizontal so klein zieht, dass der rote (boese) Streifen grösser wird, als der ihn umgebende Container verschwindet der Scrollbalken des "Zeilen" enthaltenden DIVs unter dem umgebenden Container.
Der eigentlich unabhängige "boese Streifen" beeinflusst das Verhalten des "Zeilen" enthaltenden DIVs.

https://www.dropbox.com/s/hhnc46r1ni...ns_f4.png?dl=0

In der Fiddle:
https://jsfiddle.net/pooleleven/apmfbxo2/7/
ergibt sich das korrekte Bild: Der Scrollbalken bleibt sichtbar, das "Zeilen" enthaltende DIV wird trotz der Breitenangabe im "Bosen Streifen" richtig skaliert:

https://www.dropbox.com/s/adq6i9apwi...ns_f7.png?dl=0

Ich bin mir jedoch nicht sicher, ob dies nicht auch ohne "table_cell"-Lösung und eleganter gelöst werden könnte.
Mit Zitat antworten
  #5 (permalink)  
Alt 24.03.2020, 11:02
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.075
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Du verwendest viel zu viele unnötige divs. ein div, welches dann nur ein weiteres div als direktes Unterelement hat kann weg.

Zweitens: Warum werden fixe breiten verwendet? Wenn du statt width max-width im ersten Beispiel für deinen Header verwendest dann passt es doch?

Interessehalber die Frage: Was ist der Vorteil dieses "bösen streifen"? Warum wird dieser so speziell behandelt?
Mit Zitat antworten
  #6 (permalink)  
Alt 24.03.2020, 11:33
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.10.2008
Beiträge: 30
emmis befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank für die Antwort:
Die restlichen Ebenen enthalten ebenfalls Elemente, die ich zur Reduktion entfernt habe. So gesehen ... liegts Du aber absolut richtig, Da ist noch viel mehr ...

Die festen Breiten sind z.B. nötig, wenn dort per float nebeneinander Links z.B. für einen Reiter stehen, die nicht Teil des Scrollbereiches sein sollen und auch nicht umgebrochen werden, sondern dann einfach nur nicht mehr sichtbar sein sollen, wenn der Browser schmaler gezogen wird.


https://www.dropbox.com/s/gy04o0ehuy...lprob.png?dl=0

Nachtrag wegen der Frames: Es ist keine "Webseite", sondern eine Anwendung ... zu der es auch eine extra umgesetzte Mobil-Variante geben wird ... also ohne jede Form eines responsive Designs ...

Geändert von emmis (24.03.2020 um 11:41 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 24.03.2020, 14:31
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.075
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Zitat:
Zitat von emmis Beitrag anzeigen
Die festen Breiten sind z.B. nötig, wenn dort per float nebeneinander Links z.B. für einen Reiter stehen, die nicht Teil des Scrollbereiches sein sollen und auch nicht umgebrochen werden
Wenn du es schon neu programmierst wieso setzt du dann auf 10 Jahre alte Technologien? Verwende flexbox, dann kannst du Elemente nebeneinander stellen ohne dass sie umbrechen. Auch ohne solche fixen breiten.
Oder, falls IE nicht mehr unterstützt werden soll, kannst du sogar grid verwenden.
Floats braucht es eigentlich nur noch um Bilder von Text umfließen zu lassen.
Das nur als Hinweis, natürlich kannst du es auch mit floats umsetzen. Aber falls du den Hinweis direkt am Anfang bekommst ist es vielleicht noch einfacher möglich das zu berücksichtigen. Nachträglich von float auf flexbox umzustellen ist doch mehr Aufwand.
Mit Zitat antworten
  #8 (permalink)  
Alt 24.03.2020, 15:50
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.10.2008
Beiträge: 30
emmis befindet sich auf einem aufstrebenden Ast
Standard

Du hast vollkommen Recht. Die Hoffnung hier ein Mix aus Floats im Kleinen und und Flex im Grossen (statt der Frames) ist wohl doch nicht so günstig und zielführend. Wenn schon ... denn schon
Danke für den Tritt!
Mit Zitat antworten
Antwort

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
Rand beim Box Model Argon007 CSS 2 20.06.2010 20:15
ich habe totale Schwerigkeiten mit Absolute und Relative Positionierung?!? damonster CSS 12 27.08.2008 16:56
IE 6 Box Model Bug trequ CSS 0 11.12.2007 10:55
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:27 Uhr.