Hallo erzengel !!
Also ich habe das ganze nochmal überarbeitet und nun eben so Probleme bei der Ausgabe der Seite, denn ich habe 2 verschiedene HTML Templates auf der Seite ein 3 spaltiges und ein 2 spaltiges Layout.
Was aber dafür besser geworden ist, der Seminar Manager der die übertragenen Aufgaben vorher nicht ausgegeben hat, gibt jetzt die Daten richtig aus, also lag es an einem nicht validen Code im Hintergrund.
Meine Frage nun kann du mir einen Tipp geben wie ich meine Seite gut in ein 2 und 3 spaltiges Layout aufteilen kann. Im Moment mache ich dies mit einer Global Anweisung auf das 2. Template und TS Config Eingabe auf den gewünschten Seiten bzw. im ROOT.
Hier der neue HTML & CSS Code der Seite, das Menü ist gleich geblieben.
<!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" lang="de" xml:lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>KONTAKT Template</title>
<link href="screen2col.css" rel="stylesheet" type="text/css" media="screen" />
<link href="print2col.css" rel="stylesheet" type="text/css" media="print" />
</head>
<!-- ###DOCUMENT_BODY### start-->
<body id="startseite">
<div id="wrapper">
<div id="header">
<div class="skiplink"><a href="#textbereich">Zum Inhalt springen</a></div>
<img src="fileadmin/templates/images/logo.png" alt="Logo KONTAKT Hünenberg" width="904" height="235" id="logo" /></div>
<div id="mainnav">
<ul>
<!-- ###HAUPT_NAVI### start-->
<li><a href="#" >Home</a></li>
<li><a href="#">Über uns</a></li>
<li><a href="#">Editorial</a></li>
<li><a href="#">Agenda</a></li>
<li><a href="#">Fotogalerie</a></li>
<li><a href="#">Links</a></li>
<!-- ###HAUPT_NAVI### stop-->
</ul>
</div>
<div id="zusatznav">
<ul>
<!-- ###ZUSATZ_NAVI### start-->
<li><a href="#">Erwachsenenbildung</a></li>
<li><a href="#">Kinder und Eltern </a></li>
<li><a href="#">Senioren</a></li>
<li><a href="#">Begegnungen</a></li>
<li><a href="#">Spielgruppe</a></li>
<li><a href="#">Musik für Kinder</a></li>
<li><a href="#">Mitgliederbereich</a></li>
<!-- ###ZUSATZ_NAVI### stop-->
</ul>
</div>
<div id="content" >
<!-- ###INHALT_MITTE### start-->
<h1>KONTAKT Hünenberg</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent pulvinar, eros non varius scelerisque, nunc lectus tristique pede, sit amet placerat ligula mauris vel urna. Vestibulum sed lectus euismod nisi <a href="#">mollis</a> accumsan. Nunc malesuada adipiscing lorem. . Vestibulum quam lacus, iaculis et, interdum at, ornare vel, pede. Morbi pretium consequat lacus. Mauris vel ipsum quis elit dapibus bibendum. Aenean non magna. Suspendisse placerat, dolor quis rutrum lobortis, metus ligula lobortis neque, nec rhoncus augue dui eget ante. Sed eleifend. Sed vel est vel nisl aliquet elementum. Fusce dui. Duis vel odio a nisi lacinia lobortis.</p>
<p><img src="#" alt="#" width="78" height="100" title="#" class="bildlinks" /></p>
<p>Quisque consequat ipsum in pede. Aliquam consectetuer venenatis erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Integer tincidunt rhoncus ante. Nunc vehicula lobortis orci. Nam vel diam eget odio laoreet vulputate. Mauris id mi et enim placerat mollis. Ut sagittis purus a turpis. In facilisis, urna id consequat lacinia, felis dolor accumsan libero, et consequat erat felis sed libero. Pellentesque blandit, pede sed dignissim rutrum, nisl mi fermentum neque, vel tempus nibh velit eu velit. Donec dui. Etiam eleifend ligula non quam. Cras vel mi eu nulla aliquet semper. Vivamus vitae sapien. Donec dui. Etiam eleifend ligula non quam. <img src="#" alt="#" width="78" height="100" title="#" class="bildrechts" /></p>
<p>Quisque consequat ipsum in pede. Aliquam consectetuer venenatis erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Integer tincidunt rhoncus ante. Nunc vehicula lobortis orci. Nam vel diam eget odio laoreet vulputate. Mauris id mi et enim placerat mollis. Ut sagittis purus a turpis. In facilisis, urna id consequat lacinia, felis dolor accumsan libero, et consequat erat felis sed libero. Pellentesque blandit, pede sed dignissim rutrum, nisl mi fermentum neque, vel tempus nibh velit eu velit. Donec dui. Etiam eleifend ligula non quam.</p>
<p>Quisque consequat ipsum in pede. Aliquam consectetuer venenatis erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Integer tincidunt rhoncus ante.</p>
</div>
<!-- ###INHALT_MITTE### stop-->
<div id="footer">
<div >
© Copyritght by KONTAKT Hünenberg / Created by <a href="mailto:support@4yourdesign.com">4 your Design</a>
</div>
</div>
</div>
<!-- ###DOCUMENT_BODY### stop-->
</body>
</html>
Und noch das CSS :
/*======================================================
= Stylesheet KONTAKT Hünenberg =
= This copyright notice must be =
= untouched at all times. =
=*******************************************************
= CSS Document created by 4 your Design =
= Autor: Kolenda Marijo =
= E-Mail : support@4yourdesign.com =
====================================================== */
/* ==============================
1. Kalibrierung
=============================== */
* { padding: 0; margin: 0; }
h1, h2, h3, p, ul, ol { margin-bottom: 1em; }
h2, h3 { margin-top: 1em; }
ol ul { margin-bottom: 0; }
li { margin-left: 2em; }
/* =============================
2. Allgemeine Styles
=============================== */
html { height: 101%; }
body {
background-color: #ebebeb;
color: #000;
font-family: Arial, Verdana, sans-serif;
font-size: 14px;
padding:0px;
margin:0px;
/* This path has to be correct! If nothing hovers in IE,
this is probably not found */
behavior:url("fileadmin/templates/horizontal/csshover.htc");
}
h1 { font-size: 150%; }
h2 { font-size: 125%; }
h3 { font-size: 100%; }
/* ================
Hyperlinks
==================*/
a {color: #3333FF;}
a:hover {
color: #FF9900;
text-decoration:underline;}
/* ===================
Klassen und IDs
=====================*/
.skiplink {
position: absolute;
top: -5000px;
left: -5000px;
width: 0;
height: 0;
overflow: hidden;
display: inline;
}
.bildlinks {
float: left;
padding: 3px;
border: 5px solid #fff;
margin-right: 10px;
margin-bottom: 10px;
}
.bildrechts {
float: right;
padding: 3px;
border: 5px solid #fff;
margin-bottom: 10px;
margin-left: 10px;
}
.clearing {
clear: both;
}
#logo {
background-color: #ebebeb;
color: black;
padding: 0px;
border: 0px solid #ebebeb;
}
/* ==============================
3. Styles für Layoutbereiche
=============================== */
#wrapper {
background: #C5D9F1;
color: black;
width: 904px;
margin: 10px auto;
min-height: 450px;
}
#header {
position: relative;
background-color: #ebebeb;
color: black;
padding: 0px;
padding-bottom: 130px;
}
#right {
float: right;
width: 144px;
padding: 0px;
text-align: justify;
font-size: 10px;
}
#right h3 {
text-align: center;
font-weight: bold;
}
#content {
background-color: #ebebeb;
padding: 20px 20px 20px 20px;
margin-right: 144px;
margin-left: 230px;
text-align:justify;
}
#content h1 { text-align: center; }
#content a {
color: #3333FF;
}
#content ul li {
list-style-type: none;
}
#content a:hover,
#content a:focus {
color: #FF9900;
text-decoration: underline;
}
#footer {
clear: both;
background-color: #ebebeb;
padding: 10px 0px 0px 0px;
border-top: 1px solid #ebebeb;
text-align: center;
}
/* ==============================
4. Navigationen
=============================== */
#mainnav {
width: 904px;
padding: 0px;
margin: 0px;
position:absolute;
left:50px;
top:280px;
z-index:3;
}
#mainnav ul {
padding: 0px;
margin: 0px;
list-style-type: none;
}
#mainnav li {
padding: 0px;
margin: 0px;
display: inline;
}
#mainnav a {
color: #FFFFFF;
text-decoration: none;
font-size:20px;
}
#zusatznav {
width:230px;
float:left;
position:relativ;
valign:top;
}
#zusatznav {
position:relative;
z-index:2;
}
#zusatznav ul {
padding: 0px;
margin: 0px;
}
#zusatznav li {
padding: 0px;
margin: 0px;
}
#zusatznav a {
color: #FFFFFF;
text-decoration: none;
font-size:20px;
padding: 0px;
margin: 0px;
}
/* ==============================
5. Sonstige Styles
=============================== */
/* =====================
Das Kontaktformular
===================== */
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 { height: 7em; }
input#absender:focus,
textarea:focus {
background-color: #d9d9d9;
color: black;
}
/* ===============
Die Galerie
=================*/
/* Hack für IE6 */
* html div.galerie { height: 1%; }
div.galerie {
overflow: hidden; /* zum Umschließen der Floats */
padding: 25px 10px 10px 0;
margin: 0 3px 3px 0;
}
div.galerie img {
float: left;
padding: 4px;
border: 1px solid #ddd;
border-right-color: #aaa;
border-bottom-color: #aaa;
margin-right: 15px;
margin-bottom: 15px;
}
Also dies ist das 3 spaltige Layout, und für das 2 spaltige einfach beim Content
margin-right: 144px;
raus und natürlich, den Inhalt aus dem CONTENT Bereich. Und somit habe ich ein valides Layout ohne Clearing und sonst was. Aber im IE 6 macht er mir Probleme und verzieht die Rechte Spalte. Und auch sonst wollen nicht alle Browser, die Spalte wegmachen, hast du eine Idee ?
Brauchst du mehr Infos ?
Gruss Marijo