✔ Elemente neben zweispaltiges Layout platzieren

[2Pac]

Hallo,

ich würde gerne Elemente, wie z. B. Werbebanner neben mein 2 spaltiges CSS Layout platzieren. Gibt es da eine Möglichkeit ohne gleich 3 Spalten zu nutzen? (Hab ich bereits versucht, klappt aber leider nicht so wie ich mir das vorstelle )

Mein Layout sieht wie folgt aus:

HTML-Datei:

<div id="container">
  <div id="overcontainer"></div>
  <div id="logo"></div>
  <a class="skip" href="#main">Navigation überspringen</a>
  <ul id="menu"></ul>
  <dl id="subnav"></dl>
  <div id="main"></div>
 <p id="footer"></p>
</div>

Ich hatte es versucht mit einem dreispaltigen layout. Aber da stellen sich mir Probleme bezüglich des Contents. Ich möchte diesen eigentlich ungern genau festlegen auf die Pixelbreite. Weil dann könnte sich ja der Banner rechts verschieben. Außerdem haben sich die divs irgendwie überlappt. Weiß auch nicht warum.

Gibt es da vielleicht eine andere Möglichkeit die einfacher wäre?

Wenn nicht wie geh ich das am besten an. Weil ich benötige über dem dreispaltigen layout eine grafik, die soll aber nur so lang sein, wie die navigation links + der content.

Soll so ähnlich sein wie auf meinvz.de oder sport1.de . Da ist die Werbung nur als Ecke über dem layout und daneben rechts. Ich möchte diese lediglich rechts haben.

Besten Dank im Voraus für die Hilfe.
Ronny

 

[Maik]

Hi.

ich würde gerne Elemente, wie z. B. Werbebanner neben mein 2 spaltiges CSS Layout platzieren. Gibt es da eine Möglichkeit ohne gleich 3 Spalten zu nutzen?

Eigentlich nicht, denn 2 + 1 = 3

(Hab ich bereits versucht, klappt aber leider nicht so wie ich mir das vorstelle )

Mein Layout sieht wie folgt aus:

HTML-Datei:

<div id="container">
  <div id="overcontainer"></div>
  <div id="logo"></div>
  <a class="skip" href="#main">Navigation überspringen</a>
  <ul id="menu"></ul>
  <dl id="subnav"></dl>
  <div id="main"></div>
 <p id="footer"></p>
</div>

Und wie lautet der CSS-Code zu dem HTML-Code, und was konkret hast du versucht, dort einen weiteren Spaltenblock einzubinden?

mfg Maik

 

[2Pac]

Ich dachte bei dem 2 spaltigen, da es funktioniert wie ich will, muss ich den CSS Code nicht einfügen.

Bei dem dreispaltigen habe ich halt versucht:

<div id="container">
<div id="header"></div>
<div id="leftbox"></div>
<div id="content"></div>
<div id="rightbox"></div>
</div>
<div id="footer"></div>

CSS:

div#leftbox {
  float: left;
  width: 200px;
}

div#rightbox {
  float: right;
  width: 120px;
}

div#content {
  margin: 0 200px 0 120px;
}

div#footer {
  clear: both;
}

Aber das klappt nicht so wirklich

 

[Maik]

Die zu umfliessenden Elemente werden im Markup an erster Stelle genannt - also:

<div id="container">
        <div id="header"></div>
        <div id="leftbox"></div>
        <div id="rightbox"></div>
        <div id="content"></div>
</div>
<div id="footer"></div>

Der eingangs gezeigte HTML-Code ist ohne das dazugehörige Stylesheet aussagelos, um auf deine Frage näher eingehen zu können. Daher meine Rückfrage nach dem CSS-Code.

mfg Maik

 

[2Pac]

Hab ich versucht, sieht aber nicht so aus, wie ich es gerne hätte. Links und Rechts haben sich freiräume dazwischen geschoben.

Das zwischen left und content soll weg und right soll weiter an content ran.

Ich häng mal ein Screen davon anbei.

 

[Maik]

Das liegt an deinen seitenverkehrten margin-Deklarationen für den mittleren Spaltenblock #content.

mfg Maik

 

[2Pac]

Ah alles klar^^

So easy war es dann doch. Besten dank für deine Hilfe

Schönen Tag noch.

Gruß Ronny