scrollbare Box gleiche Höhe wie Bild

[freestyler]

Hallo!

Ich habe ein Problem.
Ich möchte neben einem Bild eine scrollbare Div-Box (mit viel Text) erstellen. Diese scrollbare Divbox soll die gleiche Höhe wie das Bild haben. Der übrige Text soll (wie bereits erwähnt) scrollbar sein.
Ich möchte jedoch keine definierten Höhenangaben vergeben, sondern will einfach, dass sich diese Div-Box dem Bild "anschmiegt".

Ich hab es schon mit "floaten" versucht, aber ich komm und komm einfach nicht drauf und bin über Hilfe sehr dankbar.

Lieben Gruß!

[Camping_RIDER]

Aloha ;)

ich würde dir gerne helfen, mir fehlt aber noch elementares Verständnis der Fragestellung. Kannst du noch genauer ins Detail gehen und / oder am besten ein Beispiel bringen?

Nachdem deine Frage hier schon etwas unbeantwortet steht, gehts schätzungsweise nicht nur mir so.

Grüße,

RIDER

[freestyler]

Es tut mir leid, wenn ich schon wieder lästig bin.

soweit passt wirklich alles TOP!!!!

Ich wende dieses Figure-Figcapture-System auf mehreren Seiten an. Und auf einer Seite habe ich etwas weniger Text...

nuuuunnn: Der Scrollbalken hängt sich automatisch an den Text an und sollte jedoch (so wie bei den andren Seiten mit viel Text) ganz rechts sei. Bei wenig Text (zB nur ein Satz) ist der Scrollbalken auf einmal mitten im Bild...

Kann mir da nochmal bitte wer den Dreh verraten???

Dankeschön!!!!

[Matthias Apsel]

Om nah hoo pez nyeetz, freestyler!

nuuuunnn: Der Scrollbalken hängt sich automatisch an den Text an und sollte jedoch (so wie bei den andren Seiten mit viel Text) ganz rechts sei. Bei wenig Text (zB nur ein Satz) ist der Scrollbalken auf einmal mitten im Bild...

Kann mir da nochmal bitte wer den Dreh verraten???

overflow-y: auto;?

Matthias

[freestyler]

okay, ich versuch mein Problem mal näher zu bringen.

Ich möchte ein Bild links anbringen (240x471 px, Hochformat). Um das Bild soll ein gepunkteter Rahmen sein.
Direkt rechts von dem Bild sollte eine scrollbare Box angebracht sein in der ganz viel Text steht...diese Box soll nicht höher als 471px sein (gleich hoch wie das Bild). Die Breite sollte über den restlichen Bildschirm gehen.

Also mit Rahmen usw. das brauchen wir ja wohl nicht zu diskutieren. Das funktioniert. Nur wenn ich die Höhe der Box mit 471px definiere, ist diese überhaupt nicht gleich hoch wie das Bild....

Ach ja: Bild+Box sollten 95% der Breite nicht überschreiten. das Bild sollte 19% Breit sein...

ich versuchs mal mit nem Auszug:

  
<div id="alles">  
<div id="left">  
<img src="./images/005.jpg">  
</div>  
<div class="auto">  
<p>  
ganz viel Text....so viel Text dass eine Scrollbar von Nöten ist, blablabla  
</div>  
</div>  
<br style="clear:left;">  

  
.auto {  
overflow: scroll;  
width: 76%;  
height: 471px;  
border: thin dotted white;  
padding: 10px;  
}  
  
#alles{  
width: 95%;  
}  
  
#left{  
width: 19%;  
height: 471px;  
float:left;  
border: thin dotted white;  
}  

Ich hoffe, ihr könnt mir nun helfen???

[Der Martin]

Hallo,

okay, ich versuch mein Problem mal näher zu bringen.

gute Idee. ;-)

Ich möchte ein Bild links anbringen (240x471 px, Hochformat).

Du kennst die Maße des Bildes? Dann wird's doch einfach. Ich dachte, das sollte mit einer beliebigen, unbekannten Bildgröße funktionieren.

Um das Bild soll ein gepunkteter Rahmen sein.
Direkt rechts von dem Bild sollte eine scrollbare Box angebracht sein in der ganz viel Text steht...diese Box soll nicht höher als 471px sein (gleich hoch wie das Bild). Die Breite sollte über den restlichen Bildschirm gehen.

Also mit Rahmen usw. das brauchen wir ja wohl nicht zu diskutieren. Das funktioniert. Nur wenn ich die Höhe der Box mit 471px definiere, ist diese überhaupt nicht gleich hoch wie das Bild....

Natürlich nicht, weil Rahmen (border), ggf. auch margin und padding zur angegebenen Höhe hinzukommen. Die musst du also abziehen, oder ein anderes Box-Model verwenden.

Ach ja: Bild+Box sollten 95% der Breite nicht überschreiten. das Bild sollte 19% Breit sein...

Die Gesamtbreite wäre mit max-width für den umschließenden Container zu erledigen; 19% Breite fürs Bild widerspricht aber der oben genannten festen Breite von 240px. Das solltest du dir nochmal überlegen.

Ciao,
 Martin

[freestyler]

Danke für deine rasche Antwort!

Ja, das meinte ich ja, dass ich eben keine fixen Größenangaben bzw. Pixelangaben definieren möchte. Möchte hauptsächlich mit % arbeiten.

Habe es auch schon versucht ohne die Pixelangaben zu definieren. Funktioniert nicht. vor allem nicht bei .auto (da ist dann gar nix mehr zum scrollen und ist diese Box bis so groß wie der Text).

mit der Breite ist es auch gar kein Problem (max-width). Mir geht es hauptsächlich darum, dass die Länge des Bildes und die Länge der scrollbaren Box gleich sein sollen (ggf. auch auf dem Smartphone, das sollte jetzt auch nicht so das Problem sein, oder?)

Mich quält dieses Problem schon Tage und ich komm nicht dahinter....

[Camping_RIDER]

Aloha ;)

Eine Idee hätte ich da noch. Du kennst ja das Seitenverhältnis des Bilds. Und du kennst die Breite in %, die es nachher einnehmen soll. Es sollte also möglich sein, die Höhe in % über einen simplen Dreisatz zu berechnen. Diese Höhe kannst du dann sowohl Bild als auch div verpassen und du hast dann einerseits das Bild in der Größe, das es ohnehin hätte und die div genau gleich "hoch" (groß).

Bleibt noch das Problem mit margin, padding und Co. Das ist mit CSS nicht unproblematisch zu lösen. So wie ich es gerade sehe (vielleicht übersehe ich auch etwas) hast du zwei Möglichkeiten:

1. Wegstreichen von border, margin und co. Border könntest du noch durch outline ersetzen, outline wird imho nicht in die Box eingerechnet.

2. Angabe von margin und padding in %, Ersetzen von border durch outline (siehe 1.) Dann kanst du die width und height der div so anpassen, dass du je beide padding und margin-werte noch abziehst und erhältst auch das was du haben willst. Zwar variiert der Abstand zwischen Text und rahmen dann mit der Fensterbreite (und Höhe), das ist aber imho die einzige "sichere" möglichkeit, wenn du Ungenauigkeiten vermeiden willst.

Noch ein letztes: Wenn du die Boxen absolut auf die Fensterbreite beziehen willst und diese nicht Kind eines wie auch immer gestylten Elternelement sein sollen, solltest du über die Verwendung von vm und vh als Einheit statt Prozent nachdenken. % geht natürlich schon auch und ist für eine gewisse Zeit im Sinne der Abwärtskompatibilität vielleicht noch sicherer... Ich weiß nur aus eigener Erfahrung, dass ich in der Vergangenheit an vielen Stellen mit % gearbeitet habe an denen ich eigentlich korrekterweise vm und vh gemeint habe ;) Natürlich ist die Anzeige u.U. dieselbe.

Grüße,

RIDER

[freestyler]

bild und text gehören tatsächlich zusammen! Wusste nicht, dass dies ein wichtiges Faktum ist!

Mit figure und figcaption funktioniert es (zumal in der "Vorschau"). Ich dank euch wirklich von ganzem Herzen!!!!

Das Problem hat mich schon seit Tagen verfolgt!!! Oftmals hat man einen riesigen Denkfehler und ein Brett vor dem Kopf!

Ich bedanke mich nochmals auf das herzlichste!!!

[Camping_RIDER]

Aloha ;)

bild und text gehören tatsächlich zusammen! Wusste nicht, dass dies ein wichtiges Faktum ist!

Das ist tatsächlich ein wichtiges Faktum. Die Darstellung ist zwar die gleiche, ob man Semantik beachtet oder nicht, es ist aber so, dass semantische Auszeichnung tatsächlich eigentlich die Hauptaufgabe (streng genommen sogar die einzige Aufgabe) von HTML ist. Nicht umsonst eine Markup-Language. Eine Auszeichnungssprache.

Daher sollte sich schon jeder Webentwickler, der etwas auf sich und seine Kunst hält (wohlgemerkt Kunst in Abgrenzung zur monetär gesteuerten Fließbandarbeit, die in einem anderen Thread gerade lang und breit diskutiert wurde) darum bemühen, sein Markup so semantisch wie nur möglich zu gestalten.

Ich bedanke mich nochmals auf das herzlichste!!!

Keine Ursache, gerne wieder ;)

Grüße,

RIDER

[Matthias Apsel]

Om nah hoo pez nyeetz, freestyler!

Mich quält dieses Problem schon Tage und ich komm nicht dahinter....

Ein Bild soll seine Höhe an sein Geschwisterelement vererben.

<figure>  
  <img src="…" alt="…">  
  <figcaption>Langer Text zum Bild, vielleicht besser p?</figcaption>  
<figure>

figure {  
  position: relative;  
}  
img {  
  display: table-cell;  
}  
figcaption {  
  position: absolute;  
  top: 0;  
  bottom: 0;  
  overflow-y: scroll;  
  padding-left: Breite des Bildes :-(  
}

Matthias

[Matthias Apsel]

Om nah hoo pez nyeetz, Matthias Apsel!

Om nah hoo pez nyeetz, freestyler!

Mich quält dieses Problem schon Tage und ich komm nicht dahinter....

Ein Bild soll seine Höhe an sein Geschwisterelement vererben.

<figure>

<img src="…" alt="…">
  <figcaption>Langer Text zum Bild, vielleicht besser p?</figcaption>
<figure>

>   
> ~~~css

figure {  

>   position: relative;  
> }  
> img {  
>   display: table-cell;  
> }  
> figcaption {  
>   position: absolute;  
>   top: 0;  
>   bottom: 0;  
>   overflow-y: scroll;  
>   padding-left: Breite des Bildes :-(  
> }

und auch seine Breite

figure {  
  position: relative;  
  display: table-cell;  
}  
img {  
  display: table-cell;  
}  
figcaption {  
  position: absolute;  
  top: 0;  
  bottom: 0;  
  left: 105%;  
  right: -105%;  
  overflow-y: auto;  
}

Matthias

[Camping_RIDER]

Aloha ;)

<figure>

<img src="…" alt="…">
  <figcaption>Langer Text zum Bild, vielleicht besser p?</figcaption>
<figure>

  
Hm, was die Semantik angeht ist das aber zweifelhaft. Der TO hat uns ja (imho) noch nicht verraten, was im Textkörper stehen soll. Bild und Text in eine `<figure>`{:.language-html} zu packen, ist aber in meinen Augen semantisch nur dann sinnvoll, wenn es zwischen Text und Bild einen tatsächlichen Bezug gibt (wie z.B bei `<figcaption>`{:.language-html} gegeben.  
  
Dein Weg ist sicher gut, aber nur wenn Bild und Text tatsächlich derart zusammenhängen. Beispiel: Text ist ein Herbstgedicht, Bild ein herbstlicher Baum. Dann dient das Bild zur Illustration des Textes und nicht umgekehrt, ergo gehört der Text imho nicht in eine `<figure>`{:.language-html}, die ihrer Bedeutung und Semantik nach zumindest nach meinem Verständnis (das englische figure entspricht in meister Anwendung ja dem deutschen Abbildung) immer vom Bild dominiert wird.  
  
Vielleicht leistet ein anderes HTML5-Element ähnliches semantisch korrekter? `<section>`{:.language-html} zum Beispiel? Ich muss zugeben: was HTML 5 angeht, bin ich ein Greenhorn. Mit CSS3 bin ich ja langsam vertraut, aber was Markup angeht arbeite ich meist immer noch nach XHTML 1.0 ;)  
  
Grüße,  
  
RIDER  
  

-- 
Camping\_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller  
  
ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[  

[Matthias Apsel]

Om nah hoo pez nyeetz, Camping_RIDER!

Hm, was die Semantik angeht ist das aber zweifelhaft. Der TO hat uns ja (imho) noch nicht verraten, was im Textkörper stehen soll. Bild und Text in eine <figure> zu packen, ist aber in meinen Augen semantisch nur dann sinnvoll, wenn es zwischen Text und Bild einen tatsächlichen Bezug gibt (wie z.B bei <figcaption> gegeben.

Dein Weg ist sicher gut, aber nur wenn Bild und Text tatsächlich derart zusammenhängen. Beispiel: Text ist ein Herbstgedicht, Bild ein herbstlicher Baum. Dann dient das Bild zur Illustration des Textes und nicht umgekehrt, ergo gehört der Text imho nicht in eine <figure>, die ihrer Bedeutung und Semantik nach zumindest nach meinem Verständnis (das englische figure entspricht in meister Anwendung ja dem deutschen Abbildung) immer vom Bild dominiert wird.

Ich stimme zu. Wenn kein Zusammenhang zwischen Bild und Text gegeben ist, dann einfach div, img und p. Auch in HTML5. Denn dann ist das div einfach gruppierendes Element.

Aber auch das ist ohne Kenntnis des Inhalts reine Spekulation.

Matthias