Spalten wie in einer Zeitung

Spalten wie in einer Zeitung - Druckversion

+- Juergens-Workshops.de Forum (https://forum.juergens-workshops.de)
+-- Forum: HTML und Co (https://forum.juergens-workshops.de/forumdisplay.php?fid=62)
+--- Forum: Rund um HTML (https://forum.juergens-workshops.de/forumdisplay.php?fid=83)
+--- Thema: Spalten wie in einer Zeitung (/showthread.php?tid=25175)

Seiten: 1 2 3

Spalten wie in einer Zeitung - Andreas69 - 20.02.2008

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

Spalten wie in einer Zeitung - prm - 20.02.2008

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.

Spalten wie in einer Zeitung - Helmut - 20.02.2008

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

Spalten wie in einer Zeitung - Andreas69 - 20.02.2008

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? MrGreen

Bis denne
Andreas

Spalten wie in einer Zeitung - prm - 20.02.2008

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. Cry

Spalten wie in einer Zeitung - Andreas69 - 20.02.2008

Also so ganz will dat noch nett confused

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

[Bild: 20080220-212629-524.jpg]

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"></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>


<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>


<div id="textbereich">
<h3><u>::: Teamseite ·.°.·°.·</u></h3>
<br> <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>


<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>


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

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

Gruß
Andreas

Spalten wie in einer Zeitung - prm - 21.02.2008

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

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

<br style="clear: both;">

</div>

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.

Spalten wie in einer Zeitung - Seramis - 21.02.2008

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.

Spalten wie in einer Zeitung - prm - 21.02.2008

@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.

Spalten wie in einer Zeitung - Andreas69 - 21.02.2008

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. MrGreen