Banner rechts einbinden

umucl · 17.02.2016

Hallo zusammen,

ich möchte auf einer Website rechts zusätzlich einen Banner einbinden.
Er sollte in Höhe des Main-Contents unterhalb der Navi sein.
Ich stehe gerade völlig auf dem Schlauch, da ich in HTML und CCS nicht gerade ein Held bin :neee:

Hier der Link zu der Website:

DANKE!!!

dn3d_fanboy · 17.02.2016

CSS float wäre hier der richtige Ansatz.

umucl · 17.02.2016

dn3d_fanboy schrieb:
CSS float wäre hier der richtige Ansatz.

Bitte etwas genauer. Habe ich schon versucht, aber es klappt nicht so, wie ich das möchte.

dn3d_fanboy · 17.02.2016

Der Main-Content bekommt float:left, dein neuer Bannerbereich bekommt float:right anschließend mit <div style="clear:both"></div> clearen.

http://www.w3schools.com/css/css_float.asp

umucl · 17.02.2016

dn3d_fanboy schrieb:
Der Main-Content bekommt float:left, dein neuer Bannerbereich bekommt float:right anschließend mit <div style="clear:both"></div> clearen.

http://www.w3schools.com/css/css_float.asp

kriege ich nicht hin. Habe ja schon ein Float wegen des anderen Bildes drin. Das zerreißt mir alles.
Wo wird denn in HTML das Bild eingefügt? Vor dem Text? Danach? Nach dem anderen Bild?

dn3d_fanboy · 17.02.2016

Aufbau HTML:

Bild 1 -> float: left
Text -> float: left
Bild 2 -> float: right

clear:both

Alternativ kannst du auch Flex Boxes benutzen, da kannst du die Reihenfolge per CSS festlegen. Das wird aber nicht von etwas älteren Browsern unterstützt.
http://the-echoplex.net/flexyboxes/

Jormungand · 18.02.2016

Im Augenblick ist es so, dass im Quelltext zuerst der Content kommt. Mit float:right ist er so konfiguriert, dass alles folgende sich links daneben anordnet. Deine Klasse "pic" erscheint dann auch links davon.

Wenn dein Banner also rechts vom Content erscheinen soll, musst du ihn im Quelltext vor #mainContent setzen und ihm im CSS ein float:right; geben.

Das heißt:

Dein Banner wird rechts gesetzt. Alles folgende ist links davon
Dein Content wird gesetzt. Da er auch float:right hat, ist alles folgende links davon.
Dein Bild wird gesetzt. Es ist jetzt ganz links.

Vergiss nicht die Regel: Wer floated muss auch clearen. Wenn du wieder auf die volle Breite willst, musst du ein clear:right; oder clear:both; verwenden.

Viel Erfolg
Jormungand