• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Div Bereiche aneinander

Status
Für weitere Antworten geschlossen.
D

DerM

Neues Mitglied
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;
}
Wenn ich diese Bereiche dann in HTML einbinde
Code: 
<div id="menu">
<a class="button180" href="index.html">Home</a>
<br><br><br><br><br><br>
</div>

<div id="rechts">
Testrechts
Testrechts
Testrechts
Testrechts
Testrechts
Testrechts
Testrechts
Testrechts
Testrechts
Testrechts
Testrechts
Testrechts
</div>

<div id="inhalt">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
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:
menumenumenu--- inhaltinhaltinhalt --- werbeseiterechts
--- Bedeutet die Leerzeichen (Freiraum) zwischen den Divs
​

Soll aber so aussehen:
menumenumenuinhaltinhaltinhaltwerbeseiterechts​

Danke für eure Hilfe!
Michi
 
Zuletzt bearbeitet von einem Moderator:
Das einzige, was mir dazu gerade einfällt wäre, den Elementen
Code: 
display: inline-block;

//oder

display: inline;
zu geben und dem umgebenden Element
Code: 
text-align: center;
Code: 
<style type="text/css">
  body {
   text-align: center;
  }

  div {
   border: 1px solid black;
   width: 10em;
   height: 10em;
   display: inline-block;
  }
</style>
Code: 
  <body>
   <div></div><!--
    --><div></div><!--
    --><div></div>
  </body>
 
Du kannst sie auch alle links floaten:
Code: 
#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;
}

Code: 
<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 alle floats mit einem div umspannen:
Code: 
<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:
Code: 
#spalten {
width: 900px;
margin: 0 auto;
}

.clearer {
clear: left;
}

noch ein Tipfehler:
text-algin: 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.

Für float gibt es kein center
 
Zuletzt bearbeitet:
!!!

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
 
Zuletzt bearbeitet:
Vielen Dank :)

Danke! Ziemlich guter Trick.



So, mein letztes anliegen:

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

Code: 
.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:

Code: 
<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
 
Code: 
.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 :)

Also, das wär's erst mal ;)
Danke noch mal an alle!
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben