zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Anfänger übt fleissig, aber Probleme mit height...

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.07.2007, 06:58
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.12.2006
Beiträge: 10
pamou befindet sich auf einem aufstrebenden Ast
Standard Anfänger übt fleissig, aber Probleme mit height...

So, nun habe ich auch ne Frage ans Forum...Bin Anfänger im Bereich XHTML und CSS aber fleissig am ausprobieren...

Die Site ist unter *Link zur Site* zu finden...

Eines Vorweg; die Grundstruktur der Site ist aus einem Buch (CSS Praxis, Kai Laborenz, Galileo Computing), und möchte dies nun modifizieren rsp. umbauen. Mein Problem liegt bei der Höhenzuweisung der linken und rechten Spalte. Ich möchte, dass die Höhe im Grundegenommen immer 100% der Fensterhöhe ist. Momentan ist noch ein Footer drin, der wird aber liquidiert..


Hier die XHTML Struktur:

Code:
<body>
		<div id="pageContainer">
			<div id="header">
			 	<img src="/images/fl_logo_250x80.gif" alt="Firmenlogo Firma FL Consulting" />
			</div>
			<div id="navigationh">
				<ul>
					<li><a href="index.html" accesskey="s"><span class="akey">S</span>tartseite</a></li>
					<li><a href="fl_consulting/ueber_uns.html" accesskey="u"><span class="akey">&Uuml;</span>ber uns</a></li>
					<li><a href="produkte/produkte.html" accesskey="p"><span class="akey">P</span>rodukte</a></li>
					<li><a href="dienstleistungen/dienstleistungen.html" accesskey="d"><span class="akey">D</span>ienstleistungen</a></li>
					<li><a href="kooperationspartner/kooperationspartner.html" accesskey="k"><span class="akey">K</span>ooperationspartner</a></li>
					<li><a href="news/newsletter.html" accesskey="n"><span class="akey">N</span>ewsletter</a></li>
					<li><a href="kontakt/anfrage.html" accesskey="a"><span class="akey">A</span>nfrage</a></li>
					<li><a href="fl_consulting/impressum.html" accesskey="i"><span class="akey">I</span>mpressum</a></li>
				</ul>
			</div>
				<div id="outerContainer">
					<div id="innerContainer">
						<div id="SOWrap">
							<div id="middle">
								<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras rutrum tincidunt ligula. Sed massa enim, mattis in, laoreet sit amet, mollis in, elit. Morbi turpis. Nunc libero sapien, posuere ac, imperdiet eget, posuere in, felis. Cras at urna. Maecenas leo. Nam rhoncus, ante sit amet lacinia dapibus, enim ipsum laoreet odio, in consequat diam magna id libero. Ut bibendum. Nullam a mauris. Mauris euismod egestas nibh. Quisque lacinia blandit enim. Sed non pede. Duis commodo cursus orci. Maecenas nunc. Curabitur imperdiet arcu.</p>
							</div>
								<div id="left">
									<p>Geldsparen heisst nicht auf einen guten Vorsorgeplan verzichten zu müssen!</p>
								</div>
						</div>
						<div id="right">
								<p>
									<img src="images/f_luchsinger.gif" alt="Portraitfoto von Felix Luchsinger" />
								</p>
								<p>Ich heisse Sie pers&ouml;nlich Willkommen auf der Wenseite der Firma FL Consulting! Ihr Spezialist f&uuml;r Versicherungen, Vorsorge und Anlagen</p>
						</div>
						<div class="cleaner"></div>
					</div>
				</div>
			<div id="footer">
				<p>&copy; by FL Consulting</p>
			</div>
		</div>	
	</body>
</html>
Und das CSS Stylesheet:

Code:
html, body {
margin: 0;
padding: 0;
height: 100%;
}

body {
font: 77% Verdana, Arial, Helvetica, Times, san-serif;
}
/*--------------------Hauptkonstruktion--------------------*/
#pageContainer {
border: solid 1px #fff;
border-width: 0 1px;
margin: 0;
min-width: 60em;
width: auto;
}

* html #pageContainer {
/* \*/
word-wrap: break-word;
/* verhindert float-Probleme beim IE */
height: 100%;
}

#header {
text-align: right;
margin: 0;
padding: 0.5em 1em;
background: #fff;
}

#outerContainer {
background-image: url(../images/background_boxlr.gif);
border-left: 14em solid white;
border-right: 14em solid white;
min-height: 100%;
}

#innerContainer {
border: solid  1px #ffcc99;
border-width: 0 1px;
background: #fff;
margin: 0 -1px;
width: 100%;
min-height: 100%;
z-index: 1;
}

#middle {
float: right;
margin: 0 0 0 -1px;
width: 100%;
z-index: 5;
}

#left { 
background-image: url(../images/background_boxlr.gif);
float: left; margin: 0 1px 0 -14em;
width: 14em;
min-height: 100%;
z-index: 4;
}

#right {
background-image: url(../images/background_boxlr.gif);
float: right;
width: 14em;
margin: 0 -14em 0 1px;
z-index: 2;
}

#footer {
margin: 0;
padding: 0.5em 1em;
background: #fff;
text-align: right;
font-size: 0.8em;
}
/*--------------------Navigation horizontal--------------------*/
#navigationh {
margin: 0;
padding: 0.5em 1em;
background: #ccc;
min-height: 100%;
}

#navigationh ul {
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, Arial, Helvetica, Times, "sans-serif";
text-align: center;
}

#navigationh ul li {
list-style-type: none;
margin: 0;
display: inline;
}

#navigationh ul li a {
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #dde;
text-decoration: none;
}

#navigationh ul li a:link {
color: #448;
}

#navigationh ul li a:visited {
color: #667;
}

#navigationh ul li a:link:hover, #navigation ul li a:visited:hover {
color: #000;
background: #aae;
border-color: #227;
}

#navigationh ul li a#current {
background: #fff;
border-bottom: 1px solid #fff;
}
/*--------------------Navigation vertikal--------------------*/

#navigationv {
font-family: Verdana, Arial, Helvetica, Times, "sans-serif";
font-size: 0.7em;
font-weight: bold;
width: 12em;
border-right: 1px solid #666;
padding: 0;
margin-bottom: 1em;
background-color: #fff;
color: #333;
}

#navigationv ul {
list-style: none;
margin: 0;
padding: 0;
}

#navigationv ul li {
margin: 0;
border-top: 1px solid #003;
}

#navigationv ul li a {
display: block;
padding: 2px 2px 2px 0.5em;
border-left: 10px solid #369;
border-right: 1px solid #69c;
border-bottom: 1px solid #369;
background-color: #936;
color: #fff;
text-decoration: none;
width: 100%;
}

#navigationv ul li a:hover {
border-left: 10px solid #036;
border-right: 1px solid #69c;
border-bottom: 1px solid #369;
background-color: #69f;
color: #fff;
}
/*--------------------Schriften und Absätze--------------------*/
h1, h2 {
font-size: 1.7em;
margin: 0;
}
p {
margin: 0.5em 0;
}
/*--------------------Zusätze--------------------*/
#middle h2, #middle p {
padding: 0 0.5em;
}
#left, #middle, #right, #SOWrap {
overflow: visible;
position: relative;
}
#SOWrap {
float: left;
margin: 0 -1px 0 0;
width: 100%;
z-index: 3;
}
.akey {
text-decoration: underline;
}
.cleaner {
clear: both;
height: 1px;
font-size: 1px;
border: 0px none;
margin: 0;
padding: 0;
background: transparent;
}

/*--------------------Hacks--------------------*/
Dazu ist noch zu schreiben, dass ich die "Anleitung" unter xhtmlwiki.de durchgelesen habe, aber irgendwie funktioniert des nicht...

Ich Bitte um Rat, damit ich dieses Problem lösen kann, oder aber Denkanstösse in die "richtige" Richtung erhalte...

Danke im Voraus!
__________________
Andere zu kopieren ist leicht, sich selbst treu zu bleiben nicht...
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.07.2007, 11:43
Benutzerbild von kadees
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.06.2004
Ort: in Baden (nicht Schwaben)
Beiträge: 792
kadees wird schon bald berühmt werden
Standard

Hier findest du Beispiele in Hülle und Fülle:
Stu Nicholls | CSSplay | CSS Layouts Listing
intensivstation :: CSS Templates :: Templates
und
Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download!

Btw: kleinere Fehler im CSS: W3C CSS Validator results for http://www.lufe.ch/neu/index.html

Zitat:
Mein Problem liegt bei der Höhenzuweisung der linken und rechten Spalte. Ich möchte, dass die Höhe im Grundegenommen immer 100% der Fensterhöhe ist.
G**gle mal nach FauxColumns! siehe auch FAQ! (Bitte komplett lesen!)
__________________
Gruss Dieter

Vegetarier essen meinem Essen das Essen weg.
Und unsere Norweger sind reine Karnivoren.

selfhtml | css4you | jendryschik | styleworks | Webdesign mit XHTML und CSS
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.07.2007, 19:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.12.2006
Beiträge: 10
pamou befindet sich auf einem aufstrebenden Ast
Standard

Danke für die Infos!
Diese Webseiten habe ich alle schon gesichtet. Nur ist es einfach so, dass ich nicht vorgefertigte Templates suche, sondern was von Grund auf neues kreieren will...

Sicherlich gibts da gute Lösungsansätze; aber manchmal ist es auch wichtig oder hilfreich, wenn man von erfahrenen Usern Hilfestellung zu seinem Problem bekommt...

Greets Pamou

P.S. Könntest Du mal den Fehler des Validators posten? Wenn ich die Seite checke mit dem Validator, kommt bei mir keine Fehlermeldung...
__________________
Andere zu kopieren ist leicht, sich selbst treu zu bleiben nicht...
Mit Zitat antworten
  #4 (permalink)  
Alt 20.07.2007, 19:51
Benutzerbild von kadees
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.06.2004
Ort: in Baden (nicht Schwaben)
Beiträge: 792
kadees wird schon bald berühmt werden
Standard

Die Fehlermeldungen und Warnungen:
Zitat:
Ergebnisse des W3C CSS-Validator mit Objekt: Lufe.ch - Versicherungsberatung nach Mass
Fehler
URI : http://www.lufe.ch/neu/styles/basic.css
21 * html #pageContainer Die Eigenschaft word-wrap existiert nicht : break-word
92 #navigationh ul Ungültige Nummer : font Namen von generischen Schriftfamilien sind Schlüsselwörter und dürfen deshalb nicht in Anführungszeichen eingeschlossen werden. : bold 12px Verdana,Arial,Helvetica,Times,"sans-serif"
132 #navigationv Ungültige Nummer : font-family Namen von generischen Schriftfamilien sind Schlüsselwörter und dürfen deshalb nicht in Anführungszeichen eingeschlossen werden. : Verdana,Arial,Helvetica,Times,"sans-serif"

↑ Top
Warnungen (14)
URI : http://www.lufe.ch/neu/styles/basic.css
8 body font-family: Es wird empfohlen, daß Sie eine generische Familie als letzte Alternative angeben
13 #pageContainer Erneute Definition von border-right-width
13 #pageContainer Erneute Definition von border-top-width
30 #header Sie haben keine Vordergrundfarbe zu der Hintergrundfarbe angegeben
42 #innerContainer Erneute Definition von border-right-width
42 #innerContainer Erneute Definition von border-top-width
43 #innerContainer Sie haben keine Vordergrundfarbe zu der Hintergrundfarbe angegeben
76 #footer Sie haben keine Vordergrundfarbe zu der Hintergrundfarbe angegeben
84 #navigationh Sie haben keine Vordergrundfarbe zu der Hintergrundfarbe angegeben
106 #navigationh ul li a Erneute Definition von border-bottom-style
107 #navigationh ul li a Sie haben keine Vordergrundfarbe zu der Hintergrundfarbe angegeben
112 #navigationh ul li a:link Sie haben keine Hintergrundfarbe zu der Vordergrundfarbe angegeben
116 #navigationh ul li a:visited Sie haben keine Hintergrundfarbe zu der Vordergrundfarbe angegeben
126 #navigationh ul li a#current Sie haben keine Vordergrundfarbe zu der Hintergrundfarbe angegeben
__________________
Gruss Dieter

Vegetarier essen meinem Essen das Essen weg.
Und unsere Norweger sind reine Karnivoren.

selfhtml | css4you | jendryschik | styleworks | Webdesign mit XHTML und CSS
Mit Zitat antworten
  #5 (permalink)  
Alt 20.07.2007, 19:55
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.12.2006
Beiträge: 10
pamou befindet sich auf einem aufstrebenden Ast
Standard

Danke Dir Dieter!
Welchen Validierer benützt Du denn? Ich benutze den CSS Validierer von jigsaw.w3.org...und, der ist in den Ausführungen nicht soo Aufschlussreich!!

Besten Dank!
__________________
Andere zu kopieren ist leicht, sich selbst treu zu bleiben nicht...
Mit Zitat antworten
  #6 (permalink)  
Alt 20.07.2007, 21:12
Benutzerbild von kadees
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.06.2004
Ort: in Baden (nicht Schwaben)
Beiträge: 792
kadees wird schon bald berühmt werden
Standard

Zitat:
Ich benutze den CSS Validierer von jigsaw.w3.org...
Genau den benutze ich auch, ich rufe ihn allerdings über die Webdeveloper Toolbar auf, und zwar so:

h ttp://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=
__________________
Gruss Dieter

Vegetarier essen meinem Essen das Essen weg.
Und unsere Norweger sind reine Karnivoren.

selfhtml | css4you | jendryschik | styleworks | Webdesign mit XHTML und CSS

Geändert von kadees (20.07.2007 um 21:15 Uhr)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Darstellungsprobleme im IE lea11011989 CSS 17 05.11.2010 10:44
Div Positionen in Firefox falsch ozero CSS 4 17.07.2009 23:35
prblemme mit mein inhalt div carlos587261 CSS 3 23.04.2008 15:07
Mozilla zeigt DIV zu oft an cracki CSS 6 09.03.2008 16:22
Probleme mit dem Border im IE6 bullseye CSS 9 30.10.2007 17:21


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:12 Uhr.