Umbruch erzwingen (divs mit Flash-Videos)

[KaetheS]

Folgendes Problem:

Ich habe mehrere DIVs (float left) mit Flash-Videos drin. Die sollen mit Überschriften voneinander abgesetzt werden.

Das ganze sieht also in etwa so aus:

<h2>bla bla</h2>

<div class=xy>video gedöns1</div>
<div class=xy>video gedöns2</div>
<div class=xy>video gedöns3</div>
<div class=xy>video gedöns4</div>

<h2>blub blub</h2>

<div class=xy>video gedöns5</div>
<div class=xy>video gedöns6</div>
<div class=xy>video gedöns7</div>
<div class=xy>video gedöns8</div>

Jetzt hätte ich gerne, dass die zweite Überschrift (blub blub) in einer neuen Zeile erscheint.
Stattdessen quetscht er sie mir immer oben rechts in die Seite.
<p> hilft nicht, <br> hilft auch nicht.

Hängt das an dem Float=left?

Wenn ja, wie kann ich die Einstellung ändern, dass die Videos schön in einer Reihe sind, linksbündig und die Überschriften dann jeweils in einer neuen Zeile beginnen?

Also:

Überschrift

Video  Video  Video  Video

Überschrift2

Video  Video  Video  Video

Wäre super, wenn ihr mir helfen könnt!

Danke!!!  ;o)

[suit]

Hängt das an dem Float=left?

Ja

Wenn ja, wie kann ich die Einstellung ändern, dass die Videos schön in einer Reihe sind, linksbündig und die Überschriften dann jeweils in einer neuen Zeile beginnen?

Lasse die Überschriften den Textfluss wiederherstellen.

[ChrisB]

Hi,

Jetzt hätte ich gerne, dass die zweite Überschrift (blub blub) in einer neuen Zeile erscheint.
Stattdessen quetscht er sie mir immer oben rechts in die Seite.
<p> hilft nicht, <br> hilft auch nicht.

Hängt das an dem Float=left?

Natürlich.

Wenn ja, wie kann ich die Einstellung ändern, dass die Videos schön in einer Reihe sind, linksbündig und die Überschriften dann jeweils in einer neuen Zeile beginnen?

Informiere dich über die Eigenschaft clear.

MfG ChrisB

[KaetheS]

Hey, danke für die schnellen Antworten!!!

Okay, clear kann ich ja aber nicht nem einfachen Text, sprich der Überschrift zuweisen.
Muss ich dann die Überschrift wieder in ein extra div packen?

Sorry, wenn ich aufm Schlauch stehe...

»»
»» Hängt das an dem Float=left?

Natürlich.

»» Wenn ja, wie kann ich die Einstellung ändern, dass die Videos schön in einer Reihe sind, linksbündig und die Überschriften dann jeweils in einer neuen Zeile beginnen?

Informiere dich über die Eigenschaft clear.

MfG ChrisB

[Gunnar Bittersmann]

@@KaetheS:

nuqneH

Okay, clear kann ich ja aber nicht nem einfachen Text, sprich der Überschrift zuweisen.

Was verleitet dich zu diesem Irrglauben?

Muss ich dann die Überschrift wieder in ein extra div packen?

Natürlich nicht.

Qapla'

PS: Bitte kein TOFU!

[KaetheS]

Erstmal sorry für "Tofu"!

Was verleitet dich zu diesem Irrglauben?

Ich müsste doch dann einen neuen CSS-Style erstellen. Im HTML <h2> habe ich diese Möglichkeit doch nicht, oder?

Du siehst zum Irrglauben verleitet mich meine Unkenntnis.
Aber ich will es ja lernen!

[ChrisB]

Hi,

Was verleitet dich zu diesem Irrglauben?

Ich müsste doch dann einen neuen CSS-Style erstellen.

Nein, wenn dann höchstens eine neue CSS-Regel.

Im HTML <h2> habe ich diese Möglichkeit doch nicht, oder?

Du hast sie theoretisch mit inline-Styleangaben.
Da gehören sie aber nicht hin - sondern ausgelagert in ein externes Stylesheet.

Du siehst zum Irrglauben verleitet mich meine Unkenntnis.
Aber ich will es ja lernen!

Dann solltest du erst mal die Grundlagenkapitel zum Thema durcharbeiten.
http://de.selfhtml.org/css/

MfG ChrisB

[KaetheS]

Nein, wenn dann höchstens eine neue CSS-Regel.

Kannst Du mir bitte noch den entscheidenden Tipp geben, wie ich die Überschrift definieren muss?

Ich habe ein externes .css file. Dort kann ich einen neuen Eintrag machen.

[ChrisB]

Hi,

Kannst Du mir bitte noch den entscheidenden Tipp geben, wie ich die Überschrift definieren muss?

Wie machst du es denn für andere Elemente?

MfG ChrisB

[KaetheS]

Wie machst du es denn für andere Elemente?

Andere Elemente (z.B. images etc) stecken in einem div, dessen Eigenschaften im externen .css file definiert sind.
(z.B. <div class=videobox>

Ja, die Seite ist eine Aneinanderreihung von etlichen divs. Aber bevor du schimpfst: Ich habe die so übernommen.

[ChrisB]

Hi,

Wie machst du es denn für andere Elemente?

Andere Elemente (z.B. images etc) stecken in einem div, dessen Eigenschaften im externen .css file definiert sind.

Ich wiederhole die Frage: Und wie?

MfG ChrisB

[KaetheS]

Ich wiederhole die Frage: Und wie?

Mann, Du bist aber auch hart...

Also, ich habe es jetzt so gelöst:
<div style="clear:left;"><h2>bla bla</h2></div>

Also noch eine weitere div-Schachtel. Ich dachte, das sollte man vermeiden, aber ich weiß leider nicht wie...

[Harlequin]

Yerf!

Also, ich habe es jetzt so gelöst:
<div style="clear:left;"><h2>bla bla</h2></div>

Also noch eine weitere div-Schachtel. Ich dachte, das sollte man vermeiden, aber ich weiß leider nicht wie...

Was hindert dich daran, das style-Attribut direkt in <h2> zu notieren oder besser einen der http://de.selfhtml.org/css/formate/zentrale.htm@title=hier erwähnten Selektoren zu verwenden um die Überschrift direkt zu formatieren?

CSS funktioniert nicht nur mit Divs, sondern mit jedem HTML-Element. Um genau zu sein interessiert sich CSS nicht dafür, welches Element man formatiert, somit ist die Vorgehensweise bei Divs 1:1 auf jedes andere Element übertragbar.

Gruß,

Harlequin

[KaetheS]

Was hindert dich daran, das style-Attribut direkt in <h2> zu notieren

Stimmt, <h2 style="clear:left;">bla bla</h2> funktioniert genauso.
Was mich daran hindert?
Dass ich eine Webseite pflegen muss, obwohl ich kein Webdesigner bin...

Danke für eure Hilfe!!

Ich denke, das Problem ist gelöst. Hoffe nur, dass das jetzt auch in allem Browsern gut aussieht.

LG,
  Kaethe

[Gunnar Bittersmann]

@@KaetheS:

nuqneH

Stimmt, <h2 style="clear:left;">bla bla</h2> funktioniert genauso.

Nur dass du diese Angabe nicht inline notieren solltest, sondern in deinem externen Stylesheet. Wie [ChrisB] und [Harlequin] schon sagten.

Dort wie in CSS üblich:
Selektor {Eigenschaft: Wert}

also
h2 {clear: left}

Qapla'

[KaetheS]

Dort wie in CSS üblich:
Selektor {Eigenschaft: Wert}

also
h2 {clear: left}

Das geht leider nicht, da ja nicht alle Überschriften zweiter Ordnung so reagieren sollen, sondern halt eben nur die auf dieser Videoseite.

[Klawischnigg]

Hi there,

Das geht leider nicht, da ja nicht alle Überschriften zweiter Ordnung so reagieren sollen, sondern halt eben nur die auf dieser Videoseite.

Das lässt der Gunnar aber nicht zu, daß jemand direkt in den Tag ein style-Attribut 'reinschreibt. Da bekommt er einen ganz komischen Blutdruck, wenn er hier so etwas liest. Deshalb wäre eine Möglichkeit, Deinem <h2> eine ID zu verpassen, und auf diese dann in Deinem externen Stylesheet Bezug zu nehmen. Weils besser wartbar ist und der Gunnar dann wieder ruhiger schlafen kann...

[KaetheS]

Weils besser wartbar ist und der Gunnar dann wieder ruhiger schlafen kann...

Gunnars Schlaf in allen Ehren. Aber das ist nur eine popelige SEite und das CSS ist eh schon so verknorkst und unübersichtlich... Ich lass das jetzt so. Schau es mir noch in verschiednen Browsern an und gut ist...

[Gunnar Bittersmann]

@@KaetheS:

nuqneH

das CSS ist eh schon so verknorkst und unübersichtlich...

Und mit Inline-Styles machst du es noch verknorkster und unübersichtlicher.

'style'-Attribute sind böse[tm]. Meide sie!

Qapla'

[suit]

Aber das ist nur eine popelige SEite und das CSS ist eh schon so verknorkst und unübersichtlich..

Vorher sagtest du noch folgendes:

»» »» Dass ich eine Webseite pflegen muss, obwohl ich kein Webdesigner bin...

Wie kannst du beurteilen, ob die Seite "popelig" ist oder das CSS verkorkst? Ggf. ist die Sache wohl durchdacht, nur außerhalb deines Kenntnisstands.

[Gunnar Bittersmann]

@@Klawischnigg:

nuqneH

Deshalb wäre eine Möglichkeit, Deinem <h2> eine ID zu verpassen, und auf diese dann in Deinem externen Stylesheet Bezug zu nehmen. Weils besser wartbar ist und der Gunnar dann wieder ruhiger schlafen kann...

Kommt ganz darauf an, ob in „da ja nicht alle Überschriften zweiter Ordnung so reagieren sollen, sondern halt eben nur die auf dieser Videoseite“ mit „die“ Singular oder Plural gemeint ist.

Die Überschrift_en_ auf dieser Videoseite wollen ganz sicher nicht dieselbe ID bekommen.

Dann könnte ich nicht ruhig schlafen.

Qapla'

[KaetheS]

Kommt ganz darauf an, ob in „da ja nicht alle Überschriften zweiter Ordnung so reagieren sollen, sondern halt eben nur die auf dieser Videoseite“ mit „die“ Singular oder Plural gemeint ist.

Dann könnte ich nicht ruhig schlafen.

Plural. Es werden genau 4 Überschriften sein.

[Klawischnigg]

Hi there,

Plural. Es werden genau 4 Überschriften sein.

Dann musst Du, und nicht nur im Sinne einer ungestörten Bittersmann'schen Nachtruhe, Klassen verwenden anstelle einer einmaligen ID. (Wobei es die Frage ist, ob es in dem Fall nicht wirklich gescheiter wäre, diese Überschriften gleich richtig auszuzeichnen und nicht einfach über die gesamte Seite eine h2-Sauce zu verwenden...

[ChrisB]

Hi,

h2 {clear: left}

Das geht leider nicht,

Nicht gleich "geht nicht" sagen, wenn du nur nicht weisst, wie.

da ja nicht alle Überschriften zweiter Ordnung so reagieren sollen, sondern halt eben nur die auf dieser Videoseite.

Man kann Selektoren auch kombinieren.

Bspw. könnte der body dieser Seite eine ID oder Klasse bekommen - und dann unter Zuhilfenahme des Nachfahrenselektors die h2 innerhalb von diesem speziell formatiert werden.

MfG ChrisB

[Gunnar Bittersmann]

@@KaetheS:

nuqneH

»» h2 {clear: left}

Das geht leider nicht, da ja nicht alle Überschriften zweiter Ordnung so reagieren sollen, sondern halt eben nur die auf dieser Videoseite.

Dann musst die Videoseite also irgendwie selektieren können:

<body id="videoseite">

wenn es genau eine davon in deiner Website gibt und du diese identifizieren willst bzw.

<body class="videoseite">

wenn es mehrere davon in deiner Website geben kann und du diese klassifizieren willst.

Dann per Nachfahrenselektor [CSS2 §5, http://de.selfhtml.org/css/formate/zentrale.htm#verschachtelte_elemente@title=SELFHTML]:

#videoseite h2 {clear: left}

bzw.

.videoseite h2 {clear: left}

Qapla'

[Gunnar Bittersmann]

@@KaetheS:

nuqneH

»» h2 {clear: left}

Das geht leider nicht, da ja nicht alle Überschriften zweiter Ordnung so reagieren sollen, sondern halt eben nur die auf dieser Videoseite.

Äh Moment mal, was stört dich das 'clear: left' für alle 'h2'-Elemente auf allen Seiten?

Qapla'

[Gunnar Bittersmann]

@@Harlequin:

nuqneH

Was hindert dich daran, das style-Attribut direkt in <h2> zu notieren

Die Vernunft.

Qapla'

[Gunnar Bittersmann]

@@KaetheS:

nuqneH

Folgendes Problem:
Ich habe mehrere DIVs (float left) mit Flash-Videos drin.

Warum sind die Videos in 'div'-Elementen? Das Problem hätte gar nicht erst entstehen müssen.

Qapla'

[KaetheS]

Hmm, weil ich so so gut positionieren kann.
Gibt es eine elegantere Möglichkeit?

@@KaetheS:

nuqneH

»» Folgendes Problem:
»» Ich habe mehrere DIVs (float left) mit Flash-Videos drin.

Warum sind die Videos in 'div'-Elementen? Das Problem hätte gar nicht erst entstehen müssen.

Qapla'

[Gunnar Bittersmann]

@@KaetheS:

nuqneH

Hmm, weil ich so so gut positionieren kann.
Gibt es eine elegantere Möglichkeit?

Den vorhandenen Elemente ('object') die entsprechenden CSS-Eigenschaften geben.

'object'-Elemente sind Inline-Elemente, die werden auch ohne 'float' nebeneinander dargestellt.

Qapla'

[KaetheS]

Den vorhandenen Elemente ('object') die entsprechenden CSS-Eigenschaften geben.

'object'-Elemente sind Inline-Elemente, die werden auch ohne 'float' nebeneinander dargestellt.

Du meinst so Objects, wie <http://de.selfhtml.org/html/multimedia/objekte.htm#flash@title=hier >beschrieben?

Mein Quellcode beginnt aber nicht mit object=bla bla, sondern da steht noch ein Java-Skript davor (Skin des Flash-Videos):

<div class="videobox">
          <script type="text/javascript">
XXYYY
        </script>
          <noscript>
<object classid="bla bla"
</object>
      </noscript>