Frage stellen
Auf der Suche nach einer guten Community die mir bei meinem Problem helfen kann bin ich hier gelandet. Ich hoffe, ihr könnt mir helfen weil im Moment bin ich wirklich am verzweifeln
.Also, ich bin Webmaster bei einem Verein hier bei uns an der Uni und grade dabei, ein neues Template auf das Typo3 CMS zu "kleben".
Das lief auch bis jetzt ganz gut. Eine Vereinskollegin hat mir eine sehr gute HTML/CSS-Vorlage erstellt. Das Problem ist jetzt allerdings, dass der Div-Content-Container seinen Parent-Container überläuft, wenn zuviel Text drinne steht. Eigentlich dürfte das gar nicht passieren! Der Parent "wächst" ja eigentich immer mit dem Child mit, sofern das notwendig ist.
Ich hab mal eine "Blaupause" der Site hochgeladen, damit ihr seht, was ich meine:
http://www.stud.tu-ilmenau.de/~arsc-eit/
hier die Quelltexte dazu:
HTML-Seite:
- Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>.: Willkommen beim SWING an der TU Ilmenau e.V. :.</title>
<link rel="stylesheet" type="text/css" href="swing.css">
</head>
<body>
<div class="body">
<div class="oben">
<!--
das Map-Tag wird dazu benutzt, Links anzulegen, die nicht vom
HTML-Template-Autopraser ersetzt werden sollen
-->
<map name="swinglogo">
<area shape="rect" COORDS="0,0,135,135" href="index.php?id=1" alt="logo">
</map>
<div id="logo">
<img src="img/logo.jpg" border="0" height="135" width="135" alt="logo" usemap="#swinglogo">
</div>
<div id="topmenu">
<ul>
<li><a href="#HYPERLINK 1.0">Über uns</a></li>
<li><a href="#HYPERLINK 2.0">Veranstaltungen</a></li>
<li><a href="#HYPERLINK 3.0">Projekte</a></li>
<li><a href="#HYPERLINK 4.0">Kooperationen</a></li>
<li><a href="#HYPERLINK 5.0">Interaktiv</a></li>
<li><a href="#HYPERLINK 0">Home</a></li>
</ul>
</div>
</div>
<div class="normal">
<div id="submenu">
<ul>
<li> <a href="index.php?id=7" onfocus="blurLink(this);" >Vorstand</a> </li>
<li> <a href="index.php?id=72" onfocus="blurLink(this);" >Team</a> </li>
<li> <a href="index.php?id=8" onfocus="blurLink(this);" >Ressorts</a> </li>
<li> <a href="index.php?id=69" onfocus="blurLink(this);" >Projekte</a> </li>
<li> <a href="index.php?id=9" onfocus="blurLink(this);" >Mitmachen</a> </li>
<li> <a href="index.php?id=11" onfocus="blurLink(this);" >Satzung</a> </li>
</ul>
</div>
<div id="content">
>>CONTENT
</div>
<div id="blog">
>>BLOG
</div>
</div>
<div class="unten">
<div id="impressum">
<a href="#HYPERLINK7.1">Impressum</a> l
<a href="#HYPERLINK7.2">Kontakt</a> l
<a href="#HYPERLINK7.3">Links</a> l
<a href="#HYPERLINK7.4">Sitemap</a> l
<a href="#HYPERLINK7.5">Login</a>
</div>
</div>
</div>
</body>
</html>
Die CSS-Datei:
- Code: Alles auswählen
html
{
/*
Damit der Inhalt der div-container automatisch "mitwaechst"
*/
/* height: 100%; */
}
body
{
/* globale Schrift-Eigenschaften, für den Content-Text, also nicht das Menu sondern inhaltlicher Text */
font-family: Arial;
color:#000000;
background-color:#1e3383;
text-align:justify;
/*
mittige Ausrichtung!
FireFox interpretiert das position-Tag.
IE interpretiert text-align. Nicht Standard-Konform! IE halt ;).
Ist ein Workaround!!
*/
position: relative;
text-align: center;
/*
Damit der Inhalt der div-container automatisch "mitwaechst"
*/
/* height: 100%; */
}
/*zusätzliche Eigenschaften der speziellen Überschriften-levels*/
h1 {font-family: Arial; margin:0px;}
h2 {color:#000000;}
h3 {font-weight:bold; color:#000000;}
/* Normale content-links */
a:link, a:visited
{
/* Ein Link im Inhalt wie er ausschaut wenn man ihn noch nicht
besucht hat (a:link) bzw. wenn man ihn besucht hat (a:visited).
*/
font-family: Arial;
text-decoration:none;
font-weight: normal;
color: #1e3383; /*Swing-blau, das gleiche wie vom banner*/
}
a:active, a:hover
{
/*
Ein Link im Inhalt auf welchen man mit dem Zeiger drauf ist (a:hover)
bzw. auf den man gerade klickt (a:active).
*/
font-family: Arial;
font-weight: normal;
text-decoration: none;
color:#ffa800; /*orange*/
}
/*-----------------------------------------------------*/
/*----------------Beschreibung div's-------------------*/
/*-----------------------------------------------------*/
/* Die Seite ist so aufgebaut das eine div-kasse, div-id's einschließt. */
/*-----------------------------*/
/*---------div-Klassen---------*/
/*-----------------------------*/
/* Die gesamte Seite liegt in der "body-div".*/
div.body
{
margin: 0px auto;
width: 1000px;
/* min-height: 100%; */
text-align: justify;
background-image:url(img/mitte.jpg); /* Hier ist der Hitergrund für den Content-Bereich festgelegt */
background-repeat:repeat-y;
border:5px solid #FF0000;
}
/* Klasse speziell für den Kopfbereich mit Menü und Logo */
div.oben
{
margin: 0px auto;
width: 1000px;
height: 160px;
/* margin-bottom:5px; */
text-align: justify;
background-image:url(img/oben.jpg);
background-repeat:no-repeat;
border:0px solid #000000;
}
/* Um den Content vom Kopfbereich zu trennen wird diese Klasse benötigt. In dieser Klasse liegen die id's für das Seitenmenü, den Content und den Blog */
div.normal
{
margin: 0px auto;
width: 1000px;
/* height: 400px; */
min-height: 400px;
overflow: hidden;
text-align: justify;
border:5px solid #00FF00;
}
/* Klasse speziell für den unteren Bereich mit dem Impressums-Menü */
div.unten
{
margin: auto;
width: 1000px;
height: 131px;
text-align: justify;
background-image:url(img/unten1.jpg);
background-repeat:no-repeat;
border:0px solid #000000;
}
/*-----------------------------*/
/*----------div-id's-----------*/
/*-----------------------------*/
/* id für das Logo */
#logo
{
margin: 0px auto;
width:135px;
height:135px;
float:left;
border:0px solid #000000;
}
/* id für das Impressumsmenü unten rechts */
#impressum
{
margin-top:80px;
margin-left: 735px;
margin-right: -5px;
margin-bottom:-20px;
font-size: 12px;
position:absolute;
float:right;
border:0px solid #000000;
width:260px;
}
/* Links für Impressums-Menue (rechts unten) */
#impressum a:link, #impressum a:visited
{
font-family: Arial;
color:#FFFFFF;
text-decoration:none;
}
#impressum a:active, #impressum a:hover
{
font-family: Arial;
color:#ffa800; /*selbes orange wie oben*/
text-decoration:none;
}
/* id für das Menü auf der linken Seite */
#submenu
{
width:150px;
margin-left: 25px;
float:left;
font-size:12px;
padding:0px;
border:1px solid #000000;
}
#submenu ul
{
padding:0;
margin:0;
list-style-type:none;
}
#submenu li
{
padding-left:0px;
text-align: center;
margin-top:5px;
line-height:20px;
height:20px;
/* background:#1e3383; */
background:#FFFFFF;
border:1px dotted #000000;
}
#submenu a, #submenu a:visited
{
/* Beeinflusst die breite der Links */
display:block;
padding-left:0px;
height:20px;
line-height:20px;
width:148px;
/* Beeinflusst die textuelle Gestaltung der Links */
text-align: center;
font-weight:normal;
text-decoration:none;
color:#1e3383;
border:0px solid #000000;
}
#submenu a:hover, #submenu a:active
{
color:#fff;
background:#0066FF;
}
/* id für den Content-Bereich */
#content
{
font-size: 13px;
width:600px;
float:left;
margin-left:15px;
padding:5px 5px 5px 5px;
border:5px solid #0000FF;
}
/* id für den Blog auf der rechten Seite */
#blog
{
font-size: 12px;
float:left;
width:140px;
margin-left:5px;
padding:5px 5px 5px 20px;
border:1px solid #000000;
}
/*-----------------------------------------------------*/
/*------------------Drop-Down-Menue--------------------*/
/*-----------------------------------------------------*/
/*-------!!Das Menü selbst ist auch eine div.id!!------*/
/* Menübereich bearbeiten */
#topmenu
{
font-size: 14px;
margin-top:33px;
margin-left: 170px;
margin-right: 15px;
position:relative;
float:inherit;
width:700px;
border:0px solid #000000;
/*z-index:100;*/
}
/* bullets entfernen und keine Ränder */
#topmenu ul
{
padding:0;
margin:0;
list-style-type:none;
}
/*
#topmenu ul ul
{
width:115px;
}
*/
/* floaten, sprich positionieren, um die horizontale Darstellung zu ermöglichen; relative positionieren */
#topmenu li
{
float:left;
width:auto;
top:0px;
position:relative;
}
/* Stil der Hauptmenü-Punkte */
#topmenu a
{
display:block;
font-weight:normal;
text-decoration:none;
color:#fff;
width:115px;
text-align: center;
height:20px;
padding-left:0px;
line-height:20px;
}
/* Unterpunkte vorerst verstecken und absolut positionieren */
#topmenu ul ul
{
visibility:hidden;
position:absolute;
height:0;
padding-top:0px;
left:0;
width:83px;
}
/* Unterpunkte gestalten */
#topmenu ul ul a, #topmenu ul ul a:visited
{
font-size:12px;
background:#1e3383;
color:#fff;
height:auto;
padding:5px 0px;
width:115px;
}
/* festlegen wie der Hover-Effekt auf Hauptmenü-Ebene aussehen soll */
#topmenu a:hover, #topmenu ul ul a:hover
{
color:#fff;
background:#0066FF;
}
/* Unterpunkte sichtbar machen, wenn über Hauptmenüpunkt gehoovert wird */
#topmenu ul li:hover ul, #topmenu ul a:hover ul
{
visibility:visible;
}
Der Rote Rahmen ist der Parent-Container von allen. Bezeichnenderweise heist er <div class="body">. Dann kommen drei Child-Container oben/normal/unten, alle ebenfalls als Class definiert. Wenn ich die vertikal in der Höhe ändere kommt der body-Container mit.
Jetzt sind natürlich die Container oben/normal/unten auch wieder Parent-Container für die div-ids, die fürs Menü, den Content usw. verantwortlich sind.
Der <div class="normal">-Container ist mit einem dicken grünen Rahmen gekennzeichnet. Der darin enthaltene Child-Container <div id="content"> ist mit einem dicken blauen Rahmen gekennzeichnet. Und hier liegt das Problem! Der Content-Container überläuft seinen Parent-Container!
Wie gesagt, soviel wie ich jetzt von CSS verstehe dürfte das gar nicht passieren! Ich hab mir auch verschiedene Seiten im I-Net angeschaut, mir die HTML/CSS-Templates runtergeladen und mit den Höhen der Child-Container gespielt, der Parent-Container kam immer nach!
So wie es jetzt ist kann das Template natürlich nicht bleiben. Ich muss für das Problem unbedingt eine Lösung finden und das auch recht zeitnah.
Also, hat jemand von euch ne zündende Idee, woran es liegen könnte?
Ich bedanke mich schonmal für eure tatkräftige Unterstützung
.Liebe Grüße, Armin
