Video/Image rechts anzeigen lassen

[movejockey]

Hey Leute,

für mein Schulprojekt habe ich eine Seite bauen müssen. Es funktioniert alles tadellos, bis auf die Tatsache das bei einer Auflösung über/unter 1366x768Px das bislang eingesetzte Video (von Youtube Embed) vor- bzw. verschoben wird.

Über die CSS ist die Seitenbreite fest geregelt. Dahinter startet der Text, der nach rechts "gefloated" wird.

Im nachhinein kommt eine Tabelle, die ebenfalls nach links "gepadded" wird (zur Gestaltung eben).

Nun halt das Problem: im Anschluss habe ich versucht das Problem folgendermaßen mit den Videos zu lösen:

<div style="position:absolute; top:480px; right:250px;">  
Video1 bla bla</br>  
Video2 bla bla</div>

Nun benötige ich eine alternative dazu.
Wäre euch echt dankbar danke! :)

[Gast]

Hi,

mit "position:absolute; top:480px; right:250px;"

ist das Video keinesfalls rechts, sondern 250px vom rechten Rand des Elternelements entfernt, falls dies mit position:absolute oder position:relative definiert wird.

Gibt es kein (Urgroß-, Groß- oder) Elternelement mit position: ist das Video 250px vom rechten Rand des Viewports entfernt.

Bei rechts wäre right:0 richtig.

Du solltest auch mit float:right statt positio:absolute experimentieren, dann fließt der Text drumherum.

Gruß,
Gast

[movejockey]

leider wird dann aber der ganze code quasi zerstört
ich habe float right jetzt mal angewendet und die videos erscheinen unten und der footer ist ebenfalls nicht mehr zentriert.

[Gast]

leider wird dann aber der ganze code quasi zerstört

Hää? Du meinst wohl, die Anzeige kommt durcheinander?

ich habe float right jetzt mal angewendet und die videos erscheinen unten

Okay, mit float:right erscheinen Elemente vertikal (von oben) an der Stelle, wo auch normaler Text erscheinen würde ohne float. Wenn dein Element dort nicht erscheint, haben offenbar andere floats oder andere position:xxx Vorrang.

und der footer ist ebenfalls nicht mehr zentriert.

Nach dem Text, der um ein Element floaten soll, ist ein clear angebracht, sonst floatet auch der nächste Text (footer) noch.

<div style="clear:both"></div>

tut da gute Dienste.

Nach deiner Beschreibung scheinen sich Elemente um den Platz zu streiten und du bist nicht Herr deiner Seite - richtig?

Gruß, Gast

[Gast]

Ich denke, du bist einem Missverständnis aufgesessen.

Das Element, das die Angabe "float" bekommt, fließt selbst gar nicht.

<div style="float:left">...</div>
bedeutet im Klartext: Setze **dieses** Element an den linken Rand des Elternelements und lasse dann **die folgenden** Elemente rechts herumfließen.

Und zwar so lange fließen, bis vor das Element, das mit style="clear:left" oder "clear:both" definert ist.

[Ole]

Hi

"position" grade in Verbindung mit "absolute" sollte man nur einsetzen wenn man wirklich weiß was man macht. Und wenn das der Fall ist, wird man i.d.R. mehrere elegantere Möglichkeiten kennen/finden die es einem ersparen "position" nutzen zu müssen.

Aus deiner Fragestellung geht hervor, dass du nicht wirklich weißt was du tust, daher rate ich dir einen vollständig anderen Ansatz zu erarbeiten ... ohne "position".

Einfach nur das "position" durch "float" zu ersetzen kann nichts bringen, da der Rest deines Codes nicht dazu passt.

Lass uns deinen vollständigen Code sehen oder besser, stell die Seite irgendwo online wo wir sie uns ansehen können. Oder erstelle ein auf deinem Code basierendes Beispiel z.B. bei jsfiddle

Nur mit deiner schwammigen Beschreibung und dem Codefragment können wir dir nicht wirklich helfen.

Gruß
Ole

[movejockey]

Hi

"position" grade in Verbindung mit "absolute" sollte man nur einsetzen wenn man wirklich weiß was man macht. Und wenn das der Fall ist, wird man i.d.R. mehrere elegantere Möglichkeiten kennen/finden die es einem ersparen "position" nutzen zu müssen.

Aus deiner Fragestellung geht hervor, dass du nicht wirklich weißt was du tust, daher rate ich dir einen vollständig anderen Ansatz zu erarbeiten ... ohne "position".

Einfach nur das "position" durch "float" zu ersetzen kann nichts bringen, da der Rest deines Codes nicht dazu passt.

Lass uns deinen vollständigen Code sehen oder besser, stell die Seite irgendwo online wo wir sie uns ansehen können. Oder erstelle ein auf deinem Code basierendes Beispiel z.B. bei jsfiddle

Nur mit deiner schwammigen Beschreibung und dem Codefragment können wir dir nicht wirklich helfen.

Gruß
Ole

das wäre dann diese: jsfiddle

[Ole]

Oha (Ò_o)

Da liegt so einiges im Argen.

• entferne inline-Styles aus deinem Code und nutze konsequent entweder einen separaten CSS-Block oder, besser, eine CSS-Datei.

• entferne alle Attribute aus deinem Code die etwas mit dem Aussehen zu tun haben und nutze statt dessen CSS

• entferne alle veralteten und solche die nur zum verändern des Aussehens gedachten Elemente aus deinem Code (z.B. <center>)

• verzichte auf Layouttabellen

• Menüs sind Listen, keine Tabellen

• nutze die korrekten semantischen Elemente und ersetze deine Div-Suppe (z.B. <nav>, <section>, <header>, <footer> ...)

• verzichte auf <br> und "&nbsp;" zur Gestaltung. Dafür gibt es CSS (z.B. margin, padding, width ...)

• <body> ist ein hervorragender Wrapper, zwei weitere sind da überflüssig

• Hintergrundmusik die automatisch startet ohne die Möglichkeit sie zu muten ist sehr schlecht!

Das sind nur die Sachen die mir auf den ersten Blick aufgefallen sind.

Gruß
Ole

PS: Da die Links auf die Original-Seite im Beispiel zu sehen sind, wäre es einfacher gewesen gleich auf das Original zu verweisen.

[Matthias Apsel]

Ergänzung:

Schau dich in unserem Wiki um, unter anderem deprecated.

Matthias

[Matthias Apsel]

Om nah hoo pez nyeetz, movejockey!

Bitte vermeide Vollzitate, sie sind in diesem Forum weder notwendig noch erwünscht. Zitiere immer nur das, worauf du dich gerade konkret beziehst.

Matthias