:: Buchempfehlung ::

[inSane] · #1 04.01.2013, 17:38:09

Frohes Neues!

Gleich im neuen Jahr hab ich ein CSS-Problem.(Denkfehler) :)
Unter diesem Link könnt ihr meine Seite einsehen.

So nun zu meinem Problem:

Das letzte DIV (#areaFOOTER) soll den Browser nur bis zum unteren Rand mit dem Rot auffüllen.
Blöderweise ist das DIV höher als es sein soll und in unbefüllten Zustand der Seite kann man schon ewig weit runterscrollen. Wenn die Seite später mit Inhalt befüllt wird, sollte das DIV mit dem wachsenden Inhalt´s DIV nach unten wandern und dann die Seite möglichst mit gleichem Abstand zum unteren Browserrand schließen, wie im unbeschriebenen Zustand.

Wo habe ich da meinen Denk-Fehler reingebaut?
Ich hoffe, dass ich das Ganze verständlich erklärt habe. :)

Nun folgen noch die wichtigsten Code Auszüge :
index.html:

HTML-Code:

<body>
	<div id="areaBANNER"></div>
    <div id="areaNAVI">
    
			<a href="#"	class="navigation"	>Home</a>  
			<a href="#"	class="navigation"	>Finanzen </a> 
			<a href="#"	class="navigation"	>Versicherungen </a>
			<a href="#"	class="navigation"	>Kontakt </a> 
			<a href="#"	class="navigation"	>Anfahrt </a> 
			<a href="#"	class="navigation"	>Partner </a> 
            
    </div>
    <div id="areaCONTENT">
	<div id="areaLEFTCONTENT">
         	<h1>Überschrift </h1>
		<hr></hr>
		Inhalte
        </div>
        <div id="areaRIGHTCONTENT">
         	<h1>Überschrift </h1>
		<hr></hr>
		Inhalte 
 			
        </div>
        <div class="clear"></div>
    </div>
    <div id="areaFOOTER"></div>
</body>

main.css:

Code:

*,html		{
				margin:auto;
				padding:auto;
				width:100%;
				height:100%;
				

	
			}
			
body			{
		
					background-color:#595556;
					background-image:url(../img/background.jpg);
					background-repeat:repeat-x;
					height:100%;
					width:100%;
					
					
				}
			
#areaBANNER		{
	
					position:relative;
					z-index:3;
					margin:auto;
					padding:auto;
					width:1000px;
					height:170px;
					background-image:url(../img/banner.jpg)
					
					
				}
#areaCONTENT	{
	
					position:relative;
					top:-10px;
					z-index:1;
					margin:auto;
					padding:auto;
					padding-bottom:30px;
					width:1000px;
					height:auto;
					min-height:400px;
					background-color:#FFF;
					
					-moz-box-shadow: 0 0 30px rgba(0,0,0, 0.4);
					-webkit-box-shadow: 0 0 30px rgba(0,0,0, 0.45);
					box-shadow: 0 0 30px rgba(0,0,0, 0.4);
					
				}

#areaFOOTER		{
	
					position:relative;
					top:-60px;
					
					margin:auto;
					padding:auto;
					width:100%;
					height:100%;
					min-height:100px;
					
					background-color:#b22c20;

				
				}

Danke schon mal im voraus!

Grüße

inSane

urvater · #2 24.01.2013, 18:04:33

Also was mir auffällt ist ein grauenhafter Quellcode in der Originalseite. Unheimlich viele sinnlose Verschachtelungen zum Teil nur um style-Angaben vorzunehmen. Das solltest du unbedingt ändern.

HTML-Code:

<li style="margin: 0px; padding: 0px 0px 5px 1em; background-image: url(http://www.raab-finanzberatung.de/shared/listenzeichen.gif); background-position: 0% 0%; background-repeat: no-repeat no-repeat;">
						<span style="color:#000000;"><span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;">Sie suchen eine sinnvolle Struktur f&uuml;r Ihre Geldanlagen.</span></span></span></li>

3x span nur um einen Satz zu schreiben? Grauenhaft

Zurück zu deinem Problem.

HTML-Code:

*,html		{
				margin:auto;
				padding:auto;
				width:100%;
				height:30%;
				}
#areaFOOTER		{
	
					position:relative;
					top:-60px;
					
					margin:auto;
					padding:auto;
					width:100%;
					/*height:100%;*/
					min-height:100px;
					
					background-color:#b22c20;

				
				}

Scheint dein Problem zumindest schon einmal erkennbar zu machen.

padding:auto; ist nicht erlaubt, da auto kein gültiger Wert für padding Angaben.

Genrell würde ich persönlich nur Angaben machen, wenn ich die Voreinstellungen ändern möchte. Somit würden alle Angaben mit auto als Wert grundsätzlich verschwinden.

[inSane] · #3 27.01.2013, 11:49:21

Danke für die Antwort!

Diesen grauenhaften Quelltext den du ansprichst, wird von einem WYSIWYG - Editor produziert. Habe ein kleines CMS für die Seite geschrieben und momentan leider keinen besseren Editor gefunden.

Gibt es hier Empfehlungen ?

zum Thema "padding:auto;"

Ja ich denke, das ist die richtige Spur! Hat aber leider noch nicht funktioniert.

urvater · #4 04.02.2013, 14:22:02

Zum Thema Editor: Ich mag keine WYSIWYG Editoren. Für einfache, kleine Seiten mögen sie einem Anfänger helfen. Gerade bei größeren Projekten, die meist HTML nur als "Fragmente" nutzen, sie diese meist überfordert. Teure Software könnte hier besser sein. Weiß ich nicht.

Ich persönlich nutze den Komodo Edit. Leider seid Version 7 nicht mehr kostenlos.
Für reines HTML hat sich der Phase 5 auch gut geeignet. Für die private, nicht kommerzielle Nutzung war dieser bislang kostenlos.
Der Eclipse ist auch ein guter Editor. Je nach dem was man alles machen will/muß kann er entsprechend erweitert werden. Hat man sich erst einmal an ihn gewöhnt arbeitet es sich recht leicht damit.

Fehleranalyse für dich:
Nutze für den Firefox das AddOn Firebug. Damit kannst du deinen erzeugten Quellcode und auch das CSS gut untersuchen.
Erstell dir eine Testseite mit "lore ipsum" Text. Entferne alle inneren Styleelemente und fang dann an dein CSS komplett neu zu erzeugen.

Da du da 3 css-Dateien verwendest hatte ich dazu die Lust verloren.

Wenn du mit dem CSS anfängst, dann schreibe wirklich nur Anweisungen, die etwas ändern sollen. Anweisungen, die von Hause aus als Standard definiert sind würde ich weglassen.

Wie du in dem kleinen von mir geposteten CSS erkennen kannst, bewirkt die globale html Einstellung "height:30%" schon einmal, dass dein Footer nur mit 100px Höhe angezeigt wird.

:: Buchempfehlung ::

:: Anbieterverzeichnis ::

Globale Branchen

Informieren Sie sich über ausgewählte Unternehmen im Anbieterverzeichnis von SELFPHP

:: Newsletter ::

Abonnieren Sie hier den kostenlosen SELFPHP Newsletter!