Hallo!
Bin schon höchst verzweifelt.. Habe folgendermaßen ein layout: oben leiste von li nach re, blau links unterhalb der leiste bis ganz unten. Li drüber menü und re text.
<div id="container">
<div id="trailerRechts"><div id="trailer"></div></div>
<div id="menuobenRechts"><div id="menuoben">###MENU_OBEN###</div></div>
<div id="schattenRechts"><div id="schatten"></div></div>
<div id="linksblau">
<div id="runter">
<div id="linksmenue">###MENU_LINKS###<div id="login">###LOGIN###</div></div>
<div id="center">###INHALT###<div id="footer">###FOOTER###</div></div>
</div>
</div>
</div>
div#linksblau {
float:left;
background-color:47769f;
min-height:100%;
width:197px;
margin-top:-207px;
z-index:3;
}
div#runter {
float:left;
margin-top:207px;
z-index:2;
}
div#linksmenue {
float:left;
width:197px;
height:auto;
padding-top:40px;
background-color:#47769f;
z-index:5;
}
div#login {
float:left;
margin-left:10px;
margin-right:10px;
margin-top:10px;
z-index:4;
}
div#center {
background-color:#FFFFFF;
margin-left:200px;
width:700px;
z-index:1;
}
Problem: 1.) im firefox als auch Ie ist jetzt die blaue Seite ÜBER der Leiste, und durch z-index verändert sich auch nix. Wie kann ich eine Ebene hinter eine andere legen?
2.) im Ie ist der Text unterhalb des Menüs(obwohl float:left), und im ff funktionierts????
Bitte.. tausend Dank
lg iris
ohne url wird man schlecht helfen können und wenn du das ganze template + css bsp postet weiß ich nicht ob sich wer die mühe macht das ganze nachzubauen
georg
Hallo!
Konnte das oben genannte Problem lösen. Den Hintergrund durch eine Grafik (Li blau, re weiß) height:100% darstellen lassen.
Allerdings hat sich ein anderes Problem ergeben:
Der Randabstand im Fenster (zwischen Homepage und Browserfenster) ist da, obwohl keiner sein sollte.
Im Firefox: oben, unten, links passt, rechts ist 1/2cm weiß (obwohl margin:-8px;, auch für rechts)
Im Ie: links klein, oben mittel, rechts und unten viel Abstand. ???
Weiß jemand wie man das wegkriegt?
Hier zu sehen:
http://www.irishekel.at/trulab/
css:
div#container {
height:100%;
width:100%;
margin: -8px;
}
div#linksblau {
min-height:100%;
background: url(../fileadmin/images/background.jpg) left repeat-y;
}
<div id="container">
<div id="linksblau">
<div id="trailerRechts"><div id="trailer"></div></div>
<div id="menuobenRechts"><div id="menuoben">###MENU_OBEN###</div></div>
<div id="schattenRechts"><div id="schatten"></div></div>
<div id="linksmenue">###MENU_LINKS###<div id="login">###LOGIN###</div></div>
<div id="center">###INHALT###<div id="footer">###FOOTER###</div></div>
</div>
</div>
lg und danke!
iris
Zuerst einmal:
<style type="text/css">
<!--
<!--@font-face { font-family:FuturaBQMed; src:url(FuturBQMed.eot), url(FuturBQMed.pfr); }-->
<!-- @font-face { font-family:OCR A Extended; src:url(garamond.eot), url(garamond.pfr);; } -->
und am Ende
-->
</style>
gehört nicht in eine externe CSS-Datei - es ist also kein Wunder, dass einiges nicht richtig funktioniert, denn normalerweise müsste das, was zwischen diesen Anweisungen steht, von den Browsern komplett ignoriert werden.
Zu deiner Frage:
Setze margin bzw. padding für body bzw. html auf 0 - dann sollte kein Rand mehr erscheinen.
Also:
body, html { margin: 0; padding: 0; }
Warum soll es nicht über ein externes css definiert werden? was is da der unterschied? ob extern oder intern?
Extern ist natürlich besser, um schnell was seitenübergreifend ändern zu können.
In deiner CSS-Datei stehen aber HTML-Tags drin (<style type="text/css"><!-- und am Ende --></style>), die da nicht hineingehören.
Wie ich sehe, hat mein Tipp nicht wirklich geholfen.
Bei div#center steht width:700px; drin. Nimm die Angabe mal raus. Das div müsste sich normalerweise den Platz nehmen, der zur Verfügung steht.