Juergens-Workshops.de Forum › HTML und Co › Rund um HTML
Spalten wie in einer Zeitung

Ansichts-Optionen
Spalten wie in einer Zeitung
Andreas69 Offline
Profi Member
Beiträge: 793
Themen: 63
Danke erhalten: 0 in 0 Posts
Danke gesagt: 0
Registriert seit: 30.07.2005
#6
20.02.2008, 22:31
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"><!--[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
Zitieren



Nachrichten in diesem Thema
Spalten wie in einer Zeitung - von Andreas69 - 20.02.2008, 16:08
Spalten wie in einer Zeitung - von prm - 20.02.2008, 16:41
Spalten wie in einer Zeitung - von Helmut - 20.02.2008, 16:52
Spalten wie in einer Zeitung - von Andreas69 - 20.02.2008, 17:10
Spalten wie in einer Zeitung - von prm - 20.02.2008, 18:36
Spalten wie in einer Zeitung - von Andreas69 - 20.02.2008, 22:31
Spalten wie in einer Zeitung - von prm - 21.02.2008, 09:40
Spalten wie in einer Zeitung - von Seramis - 21.02.2008, 09:48
Spalten wie in einer Zeitung - von prm - 21.02.2008, 09:57
Spalten wie in einer Zeitung - von Andreas69 - 21.02.2008, 10:57
Spalten wie in einer Zeitung - von prm - 21.02.2008, 11:03
Spalten wie in einer Zeitung - von Seramis - 21.02.2008, 13:30
Spalten wie in einer Zeitung - von Andreas69 - 21.02.2008, 14:10
Spalten wie in einer Zeitung - von Andreas69 - 21.02.2008, 21:10
Spalten wie in einer Zeitung - von prm - 21.02.2008, 22:21
Spalten wie in einer Zeitung - von Andreas69 - 22.02.2008, 09:01
Spalten wie in einer Zeitung - von prm - 22.02.2008, 10:00
Spalten wie in einer Zeitung - von Andreas69 - 22.02.2008, 10:43
Spalten wie in einer Zeitung - von Andreas69 - 28.02.2008, 13:48
Spalten wie in einer Zeitung - von Seramis - 28.02.2008, 14:57
Spalten wie in einer Zeitung - von Andreas69 - 28.02.2008, 15:33
Spalten wie in einer Zeitung - von Seramis - 28.02.2008, 16:32
Spalten wie in einer Zeitung - von Andreas69 - 28.02.2008, 17:01
Spalten wie in einer Zeitung - von Andreas69 - 26.03.2008, 16:58
Spalten wie in einer Zeitung - von prm - 26.03.2008, 22:34

Möglicherweise verwandte Themen...
Thema Verfasser Antworten Ansichten Letzter Beitrag
  zeitung zur hochzeit ?? hilde 5 1.169 08.04.2008, 19:50
Letzter Beitrag: Taddybär
  Links auf einer Seite in unterschiedlichen Farben Ebba 7 1.982 16.09.2007, 10:56
Letzter Beitrag: Ebba
  Anker in einer seite einfügen udog 4 1.967 29.07.2004, 23:00
Letzter Beitrag: Hulot