Div Bereiche aneinander

Hey,

also, ich bin ja gerade dabei, die Seite ohne Tabellen bzw. mit möglichst wenigen zu gestalten.

Jetzt habe ich 3 Divs bereiche:

Menü - Inhalt - Werbeseite rechts

[code]#menu {
margin-left: 0px;
width: 150;
float: left;
text-algin: left;
background-color: #c1c1c1;
border-width: 2px;
}

#inhalt {
margin-left: 0px;
width: 600px;
float: center;
text-algin: left;
background-color: #FFFFFF;
}

#rechts {
margin-left: 0px;
width: 150px;
float: right;
text-algin: left;
background-color: #c1c1c1;
}[/code]Wenn ich diese Bereiche dann in HTML einbinde

[code]


Home






Testrechts Testrechts Testrechts Testrechts Testrechts Testrechts Testrechts Testrechts Testrechts Testrechts Testrechts Testrechts















[/code]dann sieht das nicht so aus wie ich es haben wollte. Ich möchte gerne, dass die 3 Div Bereiche direkt nebeneinander liegen Ohne die Zwischen Lücken. Also, dass alle auf center ausgerichtet sind, und nicht das menü linksbündig, Inhalt center, werbeseite rechts rechtsbündig. Sie sollen alle sofort nach einander folgen. Ich hoffe ihr versteht mich, ich weiß nicht wie ich es sonst sagen soll.

So sieht es zur Zeit aus:
[CENTER]menumenumenu— inhaltinhaltinhalt — werbeseiterechts
— Bedeutet die Leerzeichen (Freiraum) zwischen den Divs
[/CENTER]

Soll aber so aussehen:
[CENTER]menumenumenuinhaltinhaltinhaltwerbeseiterechts[/CENTER]

Danke für eure Hilfe!
Michi

Das einzige, was mir dazu gerade einfällt wäre, den Elementen [code]display: inline-block;

//oder

display: inline;[/code] zu geben und dem umgebenden Element text-align: center;[code]

body { text-align: center; } div { border: 1px solid black; width: 10em; height: 10em; display: inline-block; }

[/code][code]

[/code]

Du kannst sie auch alle links floaten:

#menu { 
   margin-left: 0px;
   width: 150px; 
   float: left;
   text-algin: left;
   background-color: #c1c1c1;
}
#inhalt { 
   float: left;
   width: 600px; 
   text-algin: left;
   background-color: #F00;
} 
#rechts { 
   float: left;
   width: 150px; 
    text-algin: left;
   background-color: #000090;
}
<div id="menu">Menu</div>
<div id="inhalt">Inhalt</div>
<div id="rechts">Rechts</div>

Bei deinem #menu fehlt die px-Einheit bei 150.

Dann sind sie aber nicht mittig, sondern links am Rand, er wollte sie gerne mittig haben.

Dann alle floats mit einem div umspannen:

<div id="spalten">
<div id="menu">Menu</div>
<div id="inhalt">Inhalt</div>
<div id="rechts">Rechts</div>
<br class="clearer" />
</div>

und mit margin zentrieren:

#spalten {
width: 900px;
margin: 0 auto;
}

.clearer {
clear: left;
}

noch ein Tipfehler:
text-al[COLOR=„DarkRed“]gin: left;
richtig:
text-align: left;

Kann man hier aber auch weglassen.
Es sei denn body steht für IE5.x auf text-align: center;
Das könnte man nun aber auch über #spalten zurücksetzen.

[COLOR=„DarkSlateGray“]Für float gibt es kein center

!!!

PERFECTO!

Man, ihr seid guuut! Vielen Dank. Sie jetzt genau so aus, wie ich es haben wollte :-).

Wenn ich schon mal dabei bin, habe gleich noch mal ne Frage:

Ich möchte nun, dass diese 3 Div Bereiche, immmer auf einer Höhe sind, also wenn mal viel Text im Inhalt steht, soll das Menü genau so weit nach unten reichen. Ebendso die rechte Werbeseite.
Geht das?

Vielen Dank schon mal,
Michi

Das löst man üblicherweise mit dem „Faux-Columns-Trick“:
Faux Columns

Vielen Dank :slight_smile:

Danke! Ziemlich guter Trick.

So, mein letztes anliegen:

ich habe als Menü eine Button Variante gewählt:

.button180{ font-family:Verdana,Arial,Helvetica,sans-serif; font-size: 12px; font: bold; color: #690000; text-align: center; vertical-align: middle; background-image: none; background-position:0px 0px; text-decoration:none; padding: 0px; margin:0px; height: 20px; width: 150px; display: block; }

Meine Links sehen nun so aus:

<a class="button180" href="index.html">Home</a> <a class="button180" href="index.html">Impressum</a> <a class="button180" href="index.html">Tarifrechner</a>

Wie bekomme ich nun in die CSS datei hinein, dass die Links, (NUR von den Buttons) ein Mouse hover haben, dass sich die Hintergrund farbe ändert?

Ich hab schon einige Befehle versucht, aber klappt nicht.

Gruß,
Michi

.button180:hover {...}

Wenn du uns dann auch gesagt hättest, was du schon probiert hast, hätten wir dir auch sagen können, warum das vermutlich nicht funktioniert hat.

Danke!

Vielen Dank.

Nächste mal werde ich dann sofort meine Versuche posten.

Nun klappt es :slight_smile:

Also, das wär’s erst mal :wink:
Danke noch mal an alle!