|
|||
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">Ü</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önlich Willkommen auf der Wenseite der Firma FL Consulting! Ihr Spezialist für Versicherungen, Vorsorge und Anlagen</p> </div> <div class="cleaner"></div> </div> </div> <div id="footer"> <p>© by FL Consulting</p> </div> </div> </body> </html> 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--------------------*/ 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... |
Sponsored Links |
|
||||
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:
__________________
Gruss Dieter Vegetarier essen meinem Essen das Essen weg. Und unsere Norweger sind reine Karnivoren. selfhtml | css4you | jendryschik | styleworks | Webdesign mit XHTML und CSS |
Sponsored Links |
|
|||
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... |
|
||||
Die Fehlermeldungen und Warnungen:
Zitat:
__________________
Gruss Dieter Vegetarier essen meinem Essen das Essen weg. Und unsere Norweger sind reine Karnivoren. selfhtml | css4you | jendryschik | styleworks | Webdesign mit XHTML und CSS |
|
|||
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... |
|
||||
Zitat:
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) |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |