Banner rechts einbinden

[umucl]

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

Hier der Link zu der Website:

DANKE!!!

 

[dn3d_fanboy]

CSS float wäre hier der richtige Ansatz.

 

[umucl]

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]

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]

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]

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]

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:

1. Dein Banner wird rechts gesetzt. Alles folgende ist links davon
2. Dein Content wird gesetzt. Da er auch float:right hat, ist alles folgende links davon.
3. 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