HTML div / Tabellen Problem :(

[ShadowS3]

Hallo Leute,

komm grade nicht weiter. Und zwar möchte ich das eine Gifdatei neben einem Youtube Video zentriert dargestellt wird ohne tabelle. Dies habe ich wie folgt eingegeben:

<div align="center">
<a target="_blank" href="http://www.url.de/">
<img src="http://url/atd.gif" style="border-style:none;" width="336" height="280"></a>

<iframe width="444" height="250" src="http://www.youtube.com/embed/url" frameborder="0" allowfullscreen></iframe>
</div>

Es wird zwar nun nebeneinander dargestellt nur verschiebt sich das youtube Video nach oben ??? Hat jemand nen Plan danke!!!

 

[Keepers]

Warum ein iframe?
Warum styling Informationen im Code?

--
Screenshots der Darstellungen und des gewollten erleichtern das Verständnis.

 

[ShadowS3]

ich kenn mich da nicht so aus. Wie würde denn der tag richtig aussehen ?

 

[Keepers]

Styling Informationen, wie du sie mit dem Attribut style="" eingebunden hast, sind eingebettete CSS Informationen.

Diese pflegt man heutzutage aber in einer externen CSS Datei und weißt über IDs und Klassen den Objekten, und somit ihrer Seite, das gesamte Aussehen zu.

http://w3schools.com/css/default.asp
http://w3schools.com/html/default.asp

Dort steht alles was man wissen muss, mit Beispielen.
Wenn du dabei auf Fragen stößt die du dir nicht beantworten kannst, kannst du hier drauf zurückkommen.

 

[ShadowS3]

erstmal danke für den tip nur muss ich da unbedingt ne 2. datei für machen? Denn das Bild und das Video sollen in einem Forum in einer Vorhandenen Box eingeblendet werden.

 

[Keepers]

Nein, in diesem Fall kannst du gar keine zusätzliche CSS Datei einbinden, da du dort ja sehr wahrscheinlich nichts hochladen und eigenständig laufen lässt.

Eingebetteter HTML Code der nur als so ein kleiner Schnipsel laufen soll, kann und braucht dann natürlich die Styling Informationen im Code. Es kann dir höchstens passieren, dass dieser nicht ausgeführt wird. Der Fall erscheint mir aber sehr unwahrscheinlich.

 

[ShadowS3]

das heißt also für mich?

 

[Spike S.]

Ausprobieren...

<div align="center" style="vertical-align:middle; display:inline-block;">
<a target="_blank" href="http://www.url.de/">
<img src="http://url/atd.gif" style="border:none;" width="336" height="280"></a>

<iframe width="444" height="250" src="http://www.youtube.com/embed/url" frameborder="0" allowfullscreen></iframe>
</div>

 

[Keepers]

Dein Post mangelt es an Informationskontext um das Problem herum ;-)
Dass es sich um embedded HTML in einem Forum handelt kam ja nun erst später.

Stell sicher, dass das Forum es tatsächlich so darstellen kann, wie du es möchtest.
Zum anderen benötigst du zusätzliche Informationen.

Dein Bild und das Video-Objekt sollten auf der Seite "floaten" und nebeneinander, zB "align: left" sein. Dazu müssen sie zB in eine weitere Box (div) gepackt werden, welche sie kapselt.

Deine jetzige Box ist mittig angeordnet und in ihr werden, je nach Browser, die Elemente unterschiedlich angezeigt. Das ist die Qual der Browser Engine.

 

[ShadowS3]

danke spike aber das problem bleibt genau das gleiche.

Ergänzung (8. November 2012)

<div align="center">

<div align="center">
<a target="_blank" href="http://www.XXXX.de/">
<img src="http://XXXXX/atd.gif" style="border-style:none;" width="336" height="280"></a>
</div>

<div align="center">
<iframe width="478" height="269" src="http://www.youtube.com/embed/pp-XXXXXXXXrel=0" frameborder="0" allowfullscreen></iframe>
</div>

</div>

so habe ich es jetzt genau untereinander zentriert hinbekommen. Jetzt sollte das youtube Video einfach noch rechts neben dem gif liegen....

 

[Kausalat]

Der Quellcode ist grässlich, verstößt gegen jegliche Semantik, funktioniert aber ...

<div align="center">
<a target="_blank" href="http://www.schmuddelseite.de/">
<img src="http://obszöne-inhalte.de/atd.gif" style="border-style:none; display: inline;" width="336" height="280" /></a>
<iframe style="display: inline;" width="478" height="269" src="http://www.youtube.com/embed/pp-kopulationXrel=0" frameborder="0" allowfullscreen></iframe>
</div>

 

[ShadowS3]

funzt auch nicht anbei ein screenshot...

 

[Kausalat]

Poste einmal den unverschleierten Quellcode. Am besten wäre ein Direktlink zur Seite.

 

[ShadowS3]

<div align="center">
<a target="_blank" href="http://www.pkxxxx.de/">
<img src="http://xxxxxxxxxxxxxxf" style="border-style:none;" width="336" height="280"></a>

<iframe width="478" height="269" src="http://www.youtube.com/embed/ppxxxx?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

 

[Keepers]

<div align="center">
<div style="float: left;">
<a target="_blank" href="http://www.pkwteile.de/">
<img src="http://tts-freunde.de/werbung/atd.gif" style="border-style:none;" width="336" height="280"></a>
</div>
<div style="float: left;">
<iframe width="478" height="269" src="http://www.youtube.com/embed/pp-aDz2u2bM?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>

Einfach nur berücksichtigen, was ich schrieb...

http://imgur.com/kDSgG

Wenns im Forum nicht klappt, beschränkt das Code des Forums rundherum.

 

[Rain]

<div align="center">
<a target="_blank" href="http://www.pkwteile.de/">
<img src="http://tts-freunde.de/werbung/atd.gif" style="border-style:none;" width="336" height="280"></a>

<iframe width="478" height="269" src="http://www.youtube.com/embed/pp-aDz2u2bM?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

sieht bei mir so aus:



Mit:

<iframe style="vertical-align: top;" ......

 

[ShadowS3]

im html editor sieht das bei mir auch alles so aus wie bei euch, sobald ich den code aber einfüge verschiebt es das bild wie oben im screenshot zu sehen. ...

 

[Keepers]

im html editor sieht das bei mir auch alles so aus wie bei euch, sobald ich den code aber einfüge verschiebt es das bild wie oben im screenshot zu sehen. ...

Wie schon mehrmals in diesem Thread erwähnt, kann die Konstellation des HTML-Codes des Forums dazu führen, dass es einfach nicht klappt. (Dennoch vlt. in einem anderen Browser funktioniert).

Gründe können nicht ausreichender Darstellungsplatz, ineinandergreifende Stylings und vieles mehr sein. Wenns nicht geht dort, geht es nicht.

Mein geposteter Code ist noch genauer, was die Darstellungsvorgabe angeht. Wenn dieser auch nicht geht, tendiere ich dazu, dass das Forum nicht mehr hergibt dort.

 

[ShadowS3]

ok schade danke dennoch!

 

[Spike S.]

Das einzige was du noch tun kannst, ist mit Firebug oder ähnlichen Entwickler Tools schauen, wodurch dein DIV an der Stelle beeinflusst wird.

Als pragmatische Lösung würde ich vorschlagen die Höhe des äußeren DIVs festzulegen (Inhalt hat ja eine feste Größe). Dann sollten die Inhalte zumindest weniger stark versetzt zueinander sein.
<div style="height:280px;">