Divs Größenangaben & auto-Angabe

[BerlinMaus]

Hallo,
ich komme gerade überhaupt nicht weiter, mein Problem:

<right (10 x 40)> <center (auto x 40)> <right (10 x 40)>
<right (10 x auto)> <center (auto x auto)> <right (10 x auto)>
<right (10 x 5)> <center (auto x 5)> <right (10 x 5)>

..das wären in einer einfachen Tabelle 3 Zeilen + 3 Spalten.

Zwischen der ersten und der zweiten "Zeile" haut er mir immer wieder einen Zwischenraum, genau wie zwischen der zweiten und der dritten, der dort aber nicht sein soll und weiterhin übernimmt er das "auto" in der Höhe bei der zweiten Zeile nicht .

Vielleicht kann mir jemand von Euch dabei helfen.
Es geht darum das ich für jedes einen bestimmten BG habe und dieser so natürlich nicht hinhaut.
Hab ich da nur einen Denkfehler?

CSS

Code: Alles auswählen

div#newsbox_top {
   margin: 0px;
   padding: 0px;
}
div#newsbox_bg_top_one {
   float: left;
   width: 10px;
   height: 40px;
   background:#0000FF;
}
div#newsbox_bg_top_three {
   float: right;
   width: 10px;
   height: 40px;
   background:#0066FF;
}
div#newsbox_bg_top_two {
   margin: 0px 10px 5px 10px;
   height: 40px;
   background:#3366FF;
}
div#newsbox_mid {
   margin: 0px;
   padding: 0px;
   height: auto;
}
div#newsbox_mid_one {
   float: left;
   width: 10px;
   height: auto;
   background:#990000;
}
div#newsbox_mid_three {
   float: right;
   width: 10px;
   height: auto;
   background:#CC0000;
}
div#newsbox_mid_two {
   margin: 0px 10px 0px 10px;
   height: auto;
   background:#FF3300;
}
div#newsbox_bot {
   margin: 0px;
   padding: 0px;
}
div#newsbox_bot_one {
   float: left;
   width: 10px;
   height: 5px;;
   background:#006600;
}
div#newsbox_bot_three {
   float: right;
   width: 10px;
   height: 5px;;
   background:#00CC00;
}
div#newsbox_bot_two {
   margin: 0px 10px 0px 10px;
   height: 5px;;
   background:#33CC66;
}


Html

Code: Alles auswählen

<div id="newsbox_top">
<div id="newsbox_bg_top_one"></div>
<div id="newsbox_bg_top_three"></div>
<div id="newsbox_bg_top_two"></div>
</div>

<div id="newsbox_mid">
<div id="newsbox_mid_one">&nbsp;</div>
<div id="newsbox_mid_three">&nbsp;</div>
<div id="newsbox_mid_two">
   <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
</div>
</div>
<div id="newsbox_bot">
<div id="newsbox_bot_one"></div>
<div id="newsbox_bot_three"></div>
<div id="newsbox_bot_two"></div>
</div>


zur Ansicht:
http://flirtpage2000.de/MausTest/testsite.html

[sejuma]

Da bekommt man ja die "Divitis".
Wozu denn die drei Boxen? Bei 10px Breite soll doch wohl kein Inhalt rein, sondern es soll vermutlich nur einen "Rand" darstellen.

Versuch's mal so:

Code: Alles auswählen

div#newsbox_top {
   margin: 0px;
   padding: 0px;
height: 40px;
border-left: 10px solid #00f;
border-right: 10px solid #36f;
background:#3366FF;
}

Code: Alles auswählen

<div id="newsbox_top">
Inhalt
</div><!--Ende #newsbox_top-->

[BerlinMaus]

Hallo Sejuma,

*schmunzel*
Das Problem ist das die Ränder auch mit einem Hintergrundbild versehen sein sollen, was mit Border soweit ich weiß nicht möglich ist?

Ich habe unter angegebener Url mal das Bild eingefügt. So müsste das ganze dann aussehen .

Kann es sein das man die Räner mit h2 etc definieren kann?

Danke schon einmal im Vorraus.

Liebe Grüße
Maus

[sejuma]

Ändere hier die margins und füge das für p noch ein:

Code: Alles auswählen

div#newsbox_bg_top_two {
   margin: 0px 10px 0px 10px;
   height: 40px;
   background:#3366FF;
}

div#newsbox_mid_two {
   margin: 0px 10px 0px 10px;
   height: auto;
   background:#FF3300;
}
#newsbox_mid_two p {margin: 0px;}

Dann behebe noch diese Fehler:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fflirtpage2000.de%2FMausTest%2Ftestsite.html

Was die Höhenanpassung betrifft, musst du mit Faux Columns arbeiten:
http://www.ohne-css.gehts-gar.net/0005.php

[BerlinMaus]

Hallo Sejuma,

erstmal Danke für Deine schnellen Antworten.
Ich habe es mal so geändert und nun dennoch ein paar Fragen )

Das mit dem Validator hole ich noch nach

mein Css:

Code: Alles auswählen

div#newsbox_top {
   margin: 0px;
   padding: 0px;
   height: 40px;
   border-left: 10px solid #00f;
   border-right: 10px solid #00f;
   background:#3366FF;}
   
div#newsbox_bg_top_two {
   margin: 0px 10px 0px 10px;
   height: 40px;
   background:url(newsbox_bg_top_two.jpg) repeat-x;}

div#newsbox_mid {
   margin: 0px;
   padding: 0px;
   height: auto;
   border-left: 10px solid #00f;
   border-right: 10px solid #36f;
   background:#3366FF;}

div#newsbox_mid_two {
   margin: 0px 10px 0px 10px;
   height: auto;
   background:url(newsbox_bg_two.gif);}

#newsbox_mid_two p {
   margin: 0px;}

div#newsbox_bot {
   margin: 0px;
   padding: 0px;
   border-left: 10px solid #00f;
   border-right: 10px solid #36f;
   background:#3366FF;}
   
div#newsbox_bot_two {
   margin: 0px 10px 0px 10px;
   height: 5px;
   background:url(newsbox_bg_bot_two.jpg) repeat-x;}


mein Html:

Code: Alles auswählen

<div id="newsbox_top">
  <div id="newsbox_bg_top_two"></div>
</div>

<div id="newsbox_mid">
  <div id="newsbox_mid_two">
         <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
   </div>
</div>

<div id="newsbox_bot">
  <div id="newsbox_bot_two"></div>
</div>


die Seite nun zum anschauen: http://flirtpage2000.de/MausTest/testsite.html

Das Problem:
Der Hintergrund der Border besteht ja eigentlich aus Bildern,
also links oben / links mitte / links unten jeweils ein Bild zu dem das in der Mitte von der Höhe "auto" sein sollte.
Auf der rechten Seite genau das selbe mit weiteren drei Bildern.

Ist das auch so leicht zu ändern?

Dankeschön )

[sejuma]

Wie gesagt:
Wenn du links und rechts Grafiken vertikal kacheln willst, dann musst du mit einer Querschnittsgrafik nach der Anleitung für Faux Columns arbeiten.
Damit werden dann die linken und rechten boxen auch unnötig, weil man den nötigen Abstand zum Rand mit padding herstellen kann.