DerM
29. Dezember 2008 um 15:28
1
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]
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
_Thor
29. Dezember 2008 um 16:18
2
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]
prm
29. Dezember 2008 um 16:48
3
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.
_Thor
29. Dezember 2008 um 16:54
4
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“]gi n: 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
DerM
29. Dezember 2008 um 19:00
6
!!!
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
prm
29. Dezember 2008 um 19:13
7
Das löst man üblicherweise mit dem „Faux-Columns-Trick“:
Faux Columns
DerM
30. Dezember 2008 um 09:34
8
Vielen Dank
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
_Thor
30. Dezember 2008 um 09:45
9
.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.
DerM
30. Dezember 2008 um 09:57
10
Danke!
Vielen Dank.
Nächste mal werde ich dann sofort meine Versuche posten.
Nun klappt es
Also, das wär’s erst mal
Danke noch mal an alle!