Frage stellen
Bin kein css Neuling, aber ich versuche gerade, das erstemal eine Homepage mit DIV´s aufzubauen! Bisher alles wunderbar, Design steht, Header, Navi, Content und Header passen! Jetzt will ich aber im Contentbereich verschiedenen "Textboxen" haben, die erste, die normale rechteckige habe ich auch schon hinbekommen, doch nun möchte ich eine "Textbox" haben, in der ich links eine Box habe und rechts daneben 3 Kleinere untereinander!
Da ich da eh schon kleinere Probs hatte und ich ja schon im Internet gelesen habe, das es mit DIV´s ja nicht so einfach geht, habe ich dann doch mal wieder auf eine Tabelle zurückgegriffen! Zumindestens den Außenrand habe ich damit erstellt! Also eine 3Spaltige Tabelle für links das große Feld, in der Mitte der Abstand und rechts für die 3 kleinen Bozen untereinander!
Nun habe ich das alles aufgebaut und prinzipiell dachte ich mir, ich gebe der linken großen Box eine feste höhe, da sich der Inhalt der rechten 3 kleinen Boxen nicht verändern wird, aber das klappte nicht, da sich im IE, Firefox und Opera die Boxen etwas anders verhalten! Im IE sind sie unten Bündig, aber bei den anderen Beiden fehlen nach untenhin bei der großen Box nun ein paar Pixel!
Jetzt ist die Frage, ob ich der linken Box sagen kann, das die genau die Höhe der Tabellenspalte annehmen kann, dann müßte es ja wieder klappen!?! Mit der festen Höhe habe ich das jetzt so gemacht, will aber, wie schon gesagt, nun hight:100% haben!
Hier mal der Code:
- Code: Alles auswählen
<table class="box2" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" class="fenster1">
<div class="mitte">
<div class="fenster2arand">
<div class="ueberschriftbox1">
<div class="ueberschrift2">
<h1>Neuste Veränderungen </h1>
</div>
</div>
<div class="text3">
<p>Testtext</p>
</div>
</div>
</div>
</td>
<td valign="top" class="abstand"></td>
<td valign="top" class="fenster2">
<div class="mitte">
<div class="fenster2rand">
<div class="ueberschriftbox2">
<div class="ueberschrift2">
<h1>Update Rassekatzen </h1>
</div>
</div>
<div class="text2">
<p><a href="#">Perserkatze</a><br />
<a href="#">Somali</a><br />
<a href="#">Türkisch Van</a><br />
<a href="#">Ragdoll</a></p>
</div>
</div>
</div>
<div class="mitte">
<div class="fenster3rand">
<div class="ueberschriftbox3">
<div class="ueberschrift2">
<h1>Update Zuchtbuch </h1>
</div>
</div>
<div class="text2">
<p><a href="#">Von Ashley</a> ( Perserkatze )<br />
<a href="#">von der Ritterburg</a> ( BKH )<br />
<a href="#">vom Traumland</a> ( Neva Masquarade )<br />
<a href="#">von der Puppenkiste</a> ( Main Coon )</p>
</div>
</div>
</div>
<div class="mitte">
<div class="fenster4rand">
<div class="ueberschriftbox4">
<div class="ueberschrift2">
<h1>Neue Meldungen </h1>
</div>
</div>
<div class="text2">
<p><a href="#">Perserkitten neu geboren</a><br />
<a href="#">Deckkater sucht heiße Lady</a><br />
<a href="#">Zuchtkatze sucht potenten Kater</a><br />
<a href="#">Kastrat zucht neues Zuhause</a> </p>
</div>
</div>
</div>
</td>
</tr>
</table>
- Code: Alles auswählen
/*Mitte Box 2 */
.mitte a {
color:#9C5F71; text-decoration:none;
}
.mitte a:hover { text-decoration:none; color:#B1B1B1;
}
.mitte h1 {
margin:5px 10px ;font-size:14px; color:#CE6A83; letter-spacing:1px; text-align:left}
.mitte p span {
font-size: 15px; color:#FFFFFF; padding-right:6px}
.mitte{
padding-top:10px }
.box2 {
width:609px; margin:0 auto; }
.abstand {
width:1%;}
.fenster1 {
width:59%}
.fenster2rand {
background:#FAFAE6; width:99%; border: #BABABA dotted 1px; padding-top:3px;}
.fenster3rand {
background:#F0EFFA; width:99%; border: #BABABA dotted 1px; padding-top:3px;}
.fenster4rand {
background:#EDFAEA; width:99%; border: #BABABA dotted 1px; padding-top:3px;}
.fenster2arand {
background:#FAFAFA; width:99%; border: #BABABA dotted 1px; padding-top:3px; height:414px }
.fenster2 {
width:40%}
.mitte .ueberschriftbox2 {
background-color:#D3D38C; width:98%; margin:0 auto;}
.mitte .ueberschriftbox3 {
background-color:#C2C2CC; width:98%; margin:0 auto;}
.mitte .ueberschriftbox4 {
background-color:#BBCCB7; width:98%; margin:0 auto;}
.mitte .ueberschrift2 {
margin:0 auto;}
.text2 {
margin:10px 10px;height:80px}
.text3 {
margin:10px 10px;}
Ich weiß, werden bestimmt noch Fehler drin sein, oder das ich mir das etwas umständlich mache, aber wie gesagt, ist das erste mal, das ich soweit es geht auf Tabellen verzichte! Ist ja ein komplettes umdenken!
Außerdem wird dann danach noch ein Problem folegen , und zwar möchte ich 3 dieser Boxen mit 33% Breiste dann auch noch haben. Da weiß ich auch noch nicht, wie ichdas machen soll!
Ich habe mal die Homepage auf den Server hochgeladen!
http://www.katzenarena.de
