Spalten wie in einer Zeitung

[Andreas69]

Hallo,

mein Kampf mit der neuen Homepage hat noch kein Ende gefunden.
Hätte gerne diverse Texte und andere Elemente in Spalten aufgeteilt, wie man es auch von Zeitungen her kennt
Wie bekommt man das hin?
Im www habe ich keine befriedigende Antwort gefunden.
Muss ich jetzt im Textbereich mit Tabellen arbeiten, um mir diesen Bereich nach meinen Vorstellungen zu gestalten, oder gibt es da auch noch andere Möglichkeiten?

Gruß
Andreas

[prm]

So wie in der Zeitung mit automatischem Spaltenwechsel, wenn die erste Spalte gefüllt ist, wirst du das mit Bordmitteln nicht hinbekommen. Möglicherweise mit einem PHP-Script, aber da kenn ich mich nicht aus.
Du kannst aber recht unproblematisch den vorhandenen Platz in mehrere Spalten (div's, container, boxen) auf- bzw. einteilen.
Eine Anleitung findest du hier.
Anstelle der prozentualen Breiten kannst du selbstverständlich auch Pixelwerte nehmen, oder du kannst #linksbox, #rechtsbox und #content in einen übergeordneten Div mit Breitenbegrenzung setzen.
In jede Box fügst du dann den individuellen Inhalt ein. Einen automatischen "Überlauf" in die Nachbarbox gibt es leider nicht.

[Helmut]

...
geplant ist das mal für CSS 3 in etwa so:

Code:

#spaltenlayout {
column-gap: 10px;
column-count: 2;
}

aber bis dahin wird noch viel Wasser die Elbe runterfließen...

Cu Helmut

[Andreas69]

Danke prm, ich schau es mir mal an.

Joo Helmut, davon habe ich hier auch was gelesen. Nur was hilft mir jetzt das Wissen darüber, was die Zukunft mal bringt?
Außerdem, was interessiert mich die Elbe, mir ist der Main näher. ;-)
Dauert es dann auch noch so lange?

Bis denne
Andreas

[prm]

Die Frage ist nicht nur, wann CSS3 erscheint, sondern wie lange es danach noch dauert, bis es auch alle Browser umsetzen können. Das klappt ja bei der derzeitigen Version noch nicht einmal bei allen Browsern.

[Andreas69]

Also so ganz will dat noch nett

Die Boxen ragen, sobald sie mit Text gefüllt werden, aus dem Textbereich hinaus und rein in den Fussbereich. Sieht dann so aus...



Wie verhindere ich dies?
Hier mal der Code vom CSS
[HTML]/* Stylesheet Kelten Kids */

* { padding: 0; margin: 0; }

h2, p { margin-bottom: 1em; }

li { margin-left: 2em; }


body {
background-color: #2f4f4f;
color: black;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
}

#wrapper {
background-color: white;
color: black;
width: 790px;
margin: 10px auto;
}

#kopfbereich {
background-color: #41AC41;
background-image: url(images/farbverlauf.jpg);
background-repeat: repeat-y;
color: black;
padding: 20px 20px 0 20px; /* oben - rechts - unten - links */
}
#kopfbereich p {
width:300px;
float:right;
text-align:right;
margin-bottom:-50px;
font-size: large;
font-weight: bold;
}

.menu {
display:none;}

#noniemenu {
position:absolute;}

.holder {
color:#000;
width:130px;
height:20px;
display:block;
background:#40A940;
border:1px solid #fff;
margin-right:1px;
text-align:center;
float:left;
text-decoration:none;
font-family:tahoma, vardana, arial, sans-serif ;
font-size:1.1em ;
/*font-weight: bold; */
line-height:20px;
overflow:hidden;}

.holder:hover {
height:auto;
cursor:pointer;
color:#fff;
background:#2B730C;}

a.inner, a.inner:visited {
display:block;
width:130px;
border-bottom:1px solid #000;
text-decoration:none; color:#000;
background:#E4FFCD;}

a.inner:hover {
background:#40A940;}

#textbereich {
padding: 30px 10px 20px 20px;
}
.linksbox
{
float: left;
display: inline;
width: 18%;
margin: 0 1%;
padding: 0.5%;
background-color: #A1D516;
}

.content
{
padding: 0.5%;
float: left;
width: 60%;
background-color: #A1D516;
}

.rechtsbox
{
float: left;
display: inline;
width: 15%;
margin: 0 1%;
padding: 0.5%;
background-color: #A1D516;
}

#fussbereich {
padding: 10px 20px 20px 20px;
border-top: 2px solid #008000;
margin-top: 20px;
}

form {
background-color: #eeeeee;
color: black;
width: 370px;
padding: 20px;
border: 1px solid #8c8c8c;
}
label {
display: block;
cursor: pointer;
}
input#absender, textarea {
width: 300px;
border: 1px solid #8c8c8c;
margin-bottom: 1em;
}
textarea { hight: 7em; }
input#absender:focus,
textarea:focus {
background-color: #d9d9d9;
color: black;
}[/HTML]

und Html
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"><head>



<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Kelten-Kids - Teamseite</title>


<link href="style.css" rel="stylesheet" type="text/css" media="screen"><!--[if IE]>
<style type="text/css">
/*<![CDATA[*/
body {behavior: url(csshover.htc);}
#noniecontainer {display:none;}
.navcontainer{display:block; position:absolute;}
a.active, a.active:visited {color:#000; width:90px; height:18px; display:block; background:#dca; border:1px solid #000; margin-right:1px; text-align:center; float:left; text-decoration:none; font-family:tahoma, vardana, arial, sans-serif; font-size:10px; line-height:18px; overflow:hidden;}
a.active:hover {color:#fff; background:#000; overflow:visible;}
a.active:hover table {display:block; background:#eee; border-collapse:collapse;}
a.subnavlist, a.subnavlist:visited {display:block; width:88px; height:18px; border-bottom:1px solid #000; text-decoration:none; color:#000;font-family:tahoma, vardana, arial, sans-serif; font-size:10px; text-align:center;}
a.subnavlist:hover {background:#add;}
/*]]>*/
</style>
<![endif]--></head><body>

<div id="wrapper">

<div id="kopfbereich">

<p>F-Jugend der JSG Glauburg</p>
<img src="images/header2.gif" alt="kelten kids - header" id="header" height="162" width="600">

</div>
<!-- ende kopfbereich -->

<div class="menu">
<a class="outer" href="#">Startseite</a>

<a class="outer" href="#">Unser Team</a>
<table><tbody><tr><td>
<a class="inner" href="#">Wir stellen uns vor</a>
<a class="inner" href="#">Bildergalerie</a>
<a class="inner" href="#">Menüpunkt3</a>
<a class="inner" href="#">Menüpunkt4</a>

</td></tr></tbody></table>


<a class="outer" href="#">Statistiken</a>

<table><tbody><tr><td>
<a class="inner" href="#">Spielplan</a>
<a class="inner" href="#">Aktuelle Tabelle</a>
<a class="inner" href="#">Download</a>
<a class="inner" href="#">Hallenrunde 07/08</a>
</td></tr></tbody></table>


<a class="outer" href="#">Qualifikationsturnier</a>
<table><tbody><tr><td>
<a class="inner" href="#">F1</a>
<a class="inner" href="#">F2</a>

</td></tr></tbody></table>


<a class="outer" href="#">Intern</a>
<table><tbody><tr><td>
<a class="inner" href="#">Impressum</a>
<a class="inner" href="#">Gästebuch</a>
<a class="inner" href="#">Terminkalender</a>
</td></tr></tbody></table>


</div>

<div id="noniemenu" style="position: absolute; z-index: 1;">
<div class="holder">
Startseite<br>
<a class="inner" href="http://www.kelten-kids.de/index.htm">Startseite</a>
</div>

<div class="holder">
Unser Team<br>
<a class="inner" href="#">Wir stellen uns vor</a>
<a class="inner" href="#">Bildergalerie</a>
<a class="inner" href="#">Menüpunkt3</a>
<a class="inner" href="#">Menüpunkt4</a>
</div>

<div class="holder">
Statistiken<br>
<a class="inner" href="#">Spielplan</a>
<a class="inner" href="#">Aktuelle Tabelle</a>
<a class="inner" href="#">Download</a>
<a class="inner" href="#">Hallenrunde 07/08</a>

</div>

<div class="holder">
Qualifikationsturnier<br>
<a class="inner" href="#">F1</a>
<a class="inner" href="#">F2</a>
</div>

<div class="holder">
Intern<br>
<a class="inner" href="http://www.kelten-kids.de/impressum.htm">Impressum</a>
<a class="inner" href="http://www.webmasterslive.de/cgi-bin/gbuch/books/48.cgi">Gästebuch</a>
<a class="inner" href="#">Terminkalender</a>
<a class="inner" href="http://www.kelten-kids.de/kontakt.htm">Kontakt</a>
</div>

</div>
<!-- ende menue -->

<div id="textbereich">
<h3><u>::: Teamseite &middot;.°.&middot;°.&middot;</u></h3>
<br>&nbsp;<br>
<div class="linksbox">Linksbox Test Test Test Test Test Test Test Test Test Test </div>
<div class="content">Content</div>
<div class="rechtsbox">Rechtsbox</div>

</div>
<!-- ende textbereich -->

<div id="fussbereich">
<p><strong>Wichtige Infos!</strong></p>
<p>Hier stehen aktuelle News und/oder wichtige Informationen für die Spieler, Eltern und Betreuer</p>

</div>
<!-- ende fussbereich -->

</div>
</body></html>[/HTML]

Beachtet jetzt nicht die Farbe und Größe der Boxen, dies wird alles später angepasst.

Gruß
Andreas

[prm]

Du musst vor dem Schließen des Textbereichs noch clearen. Füge noch das rot markierte an der entsprechenden Stelle ein:

<div class="rechtsbox">Rechtsbox</div>

<br style="clear: both;">

</div>
<!-- ende textbereich -->

Danke für den Hinweis. Ich habe meine Anleitung entsprechend ergänzt.

Falls deine nächste Frage lauten sollte: Wie bringe ich die drei Spalten auf gleiche Länge: Siehe hier.

[Seramis]

Hallo Andreas,

hab leider kaum Zeit mich deinem "problemchen" anzunehmen...

Mein erstes Gefühl sagt mir, versieh deinen
#textbereich mit einer Mindesthöhe von zB. 350 px

Code:

min-height:350px;

da ich aber keine Zeit zum testen hab...(vllt morgen) weiß ich jetzt nicht, welche (negativen? ) Auswirkung das auf andere Elemente hat/haben könnte.

[prm]

@Seramis:
Der Nachteil ist, dass der IE6 min-height nicht kann.
Das Problem war aber ausschließlich durch die Floatangaben verursacht und sollte nun behoben sein. Der Textbereich passt sich nach dem Clearung nun immer der Länge des jeweils längsten Containers an.

[Andreas69]

Danke Ihr Zwei, nun habe ich ja wieder Punkte zum ansetzen.
Werde mich da heute noch dran begeben.

@prm
Ich habe den Hinweis zwar nicht wissentlich gegeben, aber wenn es geholfen hat ;-)

Bis denne...
Andreas


P.S.
An dem clearen gefällt mir nur etwas nicht. Ich cleare daheim schon Fenster, Boden und Geschirr, muss das im Code jetzt auch noch sein.