css,html, layout bricht zusammen

sybl · 07.01.2008, 23:25

Hallo zusammen!

Ich bin dabei eine website zu erstellen. das ganze funktioniert an sich nicht schlecht... Bis...

Der Haken ist folgender:

Wenn der Inhalt der jeweiligen Seiten genug lang ist, dann funkioniert es soweit ich sehen kann Ordentlich. Auf Seiten, deren Inhalt nicht die ganze Spalte füllt, wie zum Beispiel "Kontakt" stürzt die ganze Geschichte zusammen, der Banner oben verliert seine Breite, das Bild auf der rechten Seite verschwindet auch.

Versuchsweise hab ich im Style Sheet dem body eine Breite von 1024 gegeben, das war aber auch nicht die Lösung...
Wie bekomme ich das hin, dass die Darstellung der Site nicht abhängig ist vom Textvolumen des Inhaltes?

Vielen Dank und freundliche Grüsse Sybl

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <TITLE>tempelrauch</TITLE>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>

<body id="tempelrauch">
  <div id="container">
      <div id="PageHeading">
         <p class="p1"><span>tempelrauch.ch</span></p>
         <p class="p2"><span>Thomas und Sibylle Hitz - Hofacher 4 - 5108 Oberflachs</span></p>  
      </div>
      <div id="Zitat">
         <p class="p1"><span>R&auml;ucherwerk reinigt K&ouml;rper Seele und Geist.</span></p>
         <p class="p2"><span>aus den <a href= "tugenden.html">zehn Tugenden des R&auml;cherwerks</a></span></p>
      </div>
  
      <div id="kontakt">
        <p class="p1"><span>info@tempelrauch.ch</span></p>
        <p class="p2"><span>Sibylle und Thomas Hitz<br />
	Hofacher 4<br />
	CH-5108 Oberflachs<br /> </span></p>
     </div>

      <div id="linkList">
		
			<div id="lselect">
				<h3 class="select"><span>F&uuml;r Sie ausgew&auml;hlt</span></h3>
				<ul>
					<li><a href="">Eleganz und Feinheit</a> </li>
                                        <li><a href="/home/sybl/Desktop/tempelrauch versuch/raeucherstaebchen.html"  class="c" >R&auml;ucherst&auml;bchen</a></li>

					<li><a href="">erlesen und rein</a></li>
                                        <li><a href="/home/sybl/Desktop/tempelrauch versuch/harze.html" class="c">Harze</a></li>

					<li><a href="">edel und nat&uuml;rlich</a></li>
                                        <li><a href="/home/sybl/Desktop/tempelrauch versuch/hoelzer.html" class="c">H&ouml;lzer</a></li>
					
                                        <li><a href="">von nah und fern</a></li>
                                        <li><a href="/home/sybl/Desktop/tempelrauch versuch/kraeuter.html" class="c">Kr&auml;uter</a></li>
					
                                        <li><a href="">F&uuml;r Ihre Liebsten</a></li>
                                        <li><a href="/home/sybl/Desktop/tempelrauch versuch/geschenke.html" class="c">Geschenke</a></li>
				</ul>
			</div>



			<div id="lzubehoer">
				<h3 class="zubehoer"><span>Zubeh&ouml;r</span></h3>
				<ul>
					<li><a href="" class="c">R&auml;ucherschalen</a></li>
					
                                        <li><a href="" class="c"> R&auml;ucherkohle</a></li>
				</ul>
			</div>


			
			<div id="lueberuns">
				<h3 class="ueberuns"><span>&Uuml;ber uns:</span></h3>
				<ul>	
					<li><a href="/home/sybl/Desktop/tempelrauch 			versuch/werwirsind.html" class="c">Wer wir 	sind</a></li>	
				
                                        <li><a href="/home/sybl/Desktop/tempelrauch versuch/kontakt.html" class="c">Kontakt</a></li> 
 
                                        <li><a href="/home/sybl/Desktop/tempelrauch versuch/impressum.html" class="c">Impressum</a></li>
				</ul>
			</div>



      </div>
    <div id="rauchkringel"> 
    </div>   
  
  </div>
</body>
</html>

HTML-Code:

/*
  $Id: style.css,v 1.00 2007/11/11 sh
*/

body, h1, h2, h3, li, p, ul { font-size: 1em; margin: 0; padding: 0; }

a, a:link, a:visited, a:hover, a:active { color: #ada364; }
a:hover { text-decoration: none; }


#body {	width: 1024px;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	line-height: 20px;
	margin: 0;
	padding: 0;
	text-align: justify;}

#PageHeading {
        height: 156;
        line-height: 50px;
        background: #FF9933; 
        padding: 5% 20% 0% 0%; 
        text-align: right;
        font-size: 60px; 
        font-weight: bold;
        color: #FFFFFF;}

#PageHeading .p2 { 
        font-size: 20px; 
        font-weight: normal;
} 


#Zitat {font-family: Georgia, "Times New Roman", Times, serif;
        padding: 5% 30% 0% 25%;
        font-size: 12; 
        font-style:italic; 
        text-align: left;}
#Zitat .p2 { 
	font-size: 8;	
	line-height: 30px;
	text-align: right;
}

#Inhalt {
        line-height: 2;
        vertical-align: top;
        padding: 5% 20% 50% 25%;
        font-size: 15;
        font-weight: bold;
        font-style: normal;
         }
#Inhalt .p2{
	line-height: normal;
        vertical-align: middle;
        text-align: justify;
        font-size: 10; 
        font-weight: normal; 
        height:100% ;}

#linkList a, #linkList h3 {
        font-family: Arial, Tahoma, Geneva, Helvetica, Verdana, sans-serif; 
        padding-bottom: 0.5em;} 

#linkList {
	/*border-right-style: double;*/
	color: #FF9966;
	font-family: Arial, Tahoma, Geneva, Helvetica, Verdana, sans-serif;
	font-size: 0.85em;
	font-weight: bold;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 156px; 
	width: 20%;
}

#linkList h3 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.4em;
	font-style: normal;
	padding-top: 0.5em;
	text-align: center;
	text-transform: uppercase;
}

#linkList li { 
        background: no-repeat 0 0.3em; 
        padding-left: 15px; }

#linkList ul { 
        list-style: none; 
        padding: 0 10px 0.8em 10px; }


#lselect {
	/*font-size: 1.3em;*/
        color: #FF9966;
        font-style: italic;
	line-height: 2em;
        vertical-align: bottom;
}
#lselect .c {
	line-height: 1em;
        vertical-align: top;
	font-style: normal;
	font-family: Arial, Tahoma, Geneva, Helvetica, Verdana, sans-serif;
	
}

#lzubehoer , #lueberuns {
	border-top-style: double;
	/*font-size: 1.3em;*/
	font-style: normal;	
}

#lzubehoer li, #lueberuns li { 
	line-height: 2em;
	color: #FF9966;
	font-family: Arial, Tahoma, Geneva, Helvetica, Verdana, sans-serif;
	/*font-size: 1.3em;*/
	font-style: normal;
	font-weight: bold;

        margin-bottom: 0.2em; }


#tugendenlist {
	padding: 5% 0% 50% 10%;
       
        font-weight: normal;
        font-style: normal;
	
        font-size: 10; 
        font-weight: normal; 
        height:100% ;	

}
#kontakt { 
	line-height: 2;
        vertical-align: top;
        padding: 5% 20% 50% 25%;
        font-size: 15;
        font-weight: bold;
        font-style: normal;

}

#kontakt .p2{
	line-height: normal;
        vertical-align: middle;
        text-align: justify;
        font-size: 10; 
        font-weight: normal; 
        height:100% ;}

#container { 
   
	position: absolute;
	left: 0;
	top: 0;
	padding: 0 0 0 0;
	background: url(rauch.png) top right repeat-y  fixed;

Boris · 07.01.2008, 23:30

height: 156; ... font-size: 12; ... 12 was? Äpfel? Birnen? Meter? Liter? Pixel? Prozent? Da fehlt eine Einheit.

Außerdem nutzt du nirgends irgendwas zum positionieren - kein float, kein display: relative / absolute ... nur für den äußeren Container. Woher soll es also kommen?

Ohne Doctype wirds auch knifflig, der fehlt komplett.

sybl · 07.01.2008, 23:34

Vielen Dank für die SUPERSCHNELLE Antwort, Boris.

Hmmm, die Masseinheiten. *lach* das ist wie in der Schule früher, nur ist der Computer gnadenloser als der Lehrer...
-den Doctype hab ich, den hab ich versehentlich nicht kopiert und jetzt hineineditiert.

Liebe Grüsse Sybl

Boris · 07.01.2008, 23:55

Nimm einen korrekten Doctype, deiner wirft den IE6 in den Quirksmodus, in dem er alle CSS Angaben zur Breite falsch interpretiert.

http://puredesign.ch/lounge/artikel/doctype.shtml