hallo,
es scheint mir das der firefox bei der css angabe 100% height nur immer das ursprüngliche brwoserfenster rendert und nicht darüber hinaus. ich habe ein dunkles hintergrundbild und möchte links ca 900px weiß haben. deshalb habe ich einen div um die ganze website gelegt mit width 900 und height 100%. im IE klappts, bei firefox wie gesagt NUR beim seitenaufruf. was man dann scrollt wird nicht mehr neu also weiß gerendert, sondern bleibt dunkel. gibt es da eine alternative? oder einen trick um es trotzdem hinzubekommen?
ach und wie ich grade seh (opera eben runtergeladen) gehts in opera gar nicht :(
Vieleicht kannst du was mit position: fixed machen ...
beispiel wäre praktisch
Wenn ich es recht verstanden habe, kannst du doch einfach das Hintergrundbild entsprechend bearbeiten, damit die weiße Fläche hinhaut.
Falls ich es falsch verstanden habe:
[quote]beispiel wäre praktisch[/quote]
nein, hast du nicht falsch verstanden, es gibt nur ein problem das ich rechts oben eine helle grafik positioniert habe und diese nie und nimmer in allen browsern exact auf der trennlinie des hintergrundbildes liegen würde. daher habe ich versucht das ganze über die hintergrundfarben eines divs zu lösen, die ja logischerweise exakt rechts mit der grafik aufhört, da ja die grafik im übergeordneten div liegt. im IE klappts wie gesagt, aber wenn ich im FF scrolle bleibt der teil der beim laden der seite unten nicht sichtbar war ohne hintergrundfarbe.
hier ein screen:
http://img127.imageshack.us/img127/7361/heightkq3.jpg
wie man sieht hört der 938px weite hintergrund ab einem bestimmten punkt auf und nur noch die hintergrundfarbe des contentdivs funktioniert noch, ist allerdings keine 938 pixel weit sondern nur 450 damit der text oben nicht über die ganze seite läuft.
bzw damit rechts und links noch 2 andere divs platz haben.
einzige alternative wäre wohl ein 3500x3500 großes gif in dern hintergrund zu legen damit man selbst auf einem 30 apple display keine wiederholungen sieht. von den kb her gehts. sind nur ca 20kb, aber irgendwie habe ich doch bedenken das es zu groß ist. außerdem würde ich gerne den fehler code technisch lösen um zu lernen. dann gibts vielleicht noch ne möglichkeit die divs anders aufzuteilen, dafür bräuchte ich aber erstmal ne pause. sitze schon ca 10 stunden am coden O.o
wollte halt nur eben fragen ob das ein bekannter gängiger bug ist und ob es da einen command gibt der das problem löst.
Jetzt hast du mich verwirrt ;)
Kannst du mal ne kurze skizze posten, wie es aussehen soll?
ah. warte. habs glaube ich kapiert. Warum platzierst du den text nicht in ein div mit weißem Hintergrund und Breite 450. Links und rechts dann entsprechendes padding um auf die 938px zu kommen.
heute ist mein erster tag xhtml/css deswegen ist noch alles neu für mich.
nun, links neben dem 450er textdiv liegt auch eine kleine grafik in einem div und rechts daneben ist das menue als liste in einem div. beide haben nur eine höhe von ca 200px. der textblock allerdings 2000 oder gar mehr auf späteren seiten. der ist quasi variabel da ich auch einen blog einbauen will (schon in php fertigprogrammiert) und auf das möchte ich dann eben das css layout 1 zu 1 anwenden. deswegen sind absolute angaben nicht möglich.
die 3 divs habe ich per float: left nebeneinander bekommen. sie sind aber wie gesagt unterschiedlich lang. drumherum ist ein div mit eben diesen werten:
width: 938px;
text-align: left;
height: 100%;
background-color: White;
hier mal ein screen vom oberen teil. alles noch rudimentär mit platzhaltern aber im prinzip soll der aufbau so bleiben.
http://img249.imageshack.us/img249/1629/screeniv8.jpg
ahh. jetzt wird ein schuh draus. kannst du mal html- und css-code posten?
und hier mal die opera version *rolleyes*
http://img249.imageshack.us/img249/4839/operaba3.jpg
muss aber sagen das ich trotzdem schon ein wenig begeistert bin. im ganzen code ist nicht ein table, blind gif oder <br> mehr zu finden. alles mit margin machbar. gibt nur das hintergrundproblem und mit dem font habe ich noch probleme. im IE muß ich im body 50% angeben um 11px größe zu erhalten und im FF sind 50% wesentlich weniger und dann ists auch noch so komisch antialiased. habe deswegen erst mal wieder eine feste pixelgröße von 11 zugewiesen. dann ist wenigstens die ausgangsversion bei allen gleich. auch wenn der IE dann nicht mehr vergrößern kann.
HTML:
<body>
<div id="wrap">
<div id="header">
<img src="images/top.gif" width="204" height="44" />
</div>
<div id="red">
<img src="images/ff190e.gif" width="22" height="200" />
</div>
<div id="content">
<h1 >Useful Links</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer eu
turpis a orci malesuada aliquam. Aliquam a velit. Suspendisse tristique,
eros a varius consectetuer, purus dui euismod mi, a tempus massa.
</p>
<h2>Design Portals</h2>
<ul class="link">
<li>Kaliber 10.000</li>
<li>Design is Kinky</li>
<li>Computerlove</li>
<li>BD4D</li>
<li>Lounge72</li>
<li>Halfproject</li>
<li>R9005</li>
</ul>
<ul class="url">
<li><a href="http://www.k10k.net">www.kaliber10000.net</a></li>;
<li><a href="http://www.designiskinky.com">www.designiskinky.com</a></li>;
<li><a href="http://www.cpluv.com">www.cpluv.com</a></li>;
<li><a href="http://www.cpluv.com">www.bd4d.com</a></li>;
<li><a href="http://www.lounge72.net">www.lounge72.net</a></li>;
<li><a href="http://www.halfproject.com">www.halfproject.com</a></li>;
<li><a href="http://www.r9005.de">www.r9005.de</a>; (german)</li>
</ul>
<!-- gekürtzt wegen wiederholung -->
</div>
<div id="navigation">
<ul>
<li><a href="blog.php">Weblogh</a></li>
<li><a href="111.php">Portfolio</a></li>
<li><a href="111.php">Information</a></li>
<li><a href="111.php">Flash Playground</a></li>
<li><a href="links.html">Links</a></li>
</ul>
</div>
<div id="footer">
<!-- hier kommt später noch etwas richtiges hin -->
<ul>
<li><a href="mailtolink">matthias@mggdc.com</a></li>
</ul>
</div>
</div>
</Body>
</Html>
CSS
*{
padding: 0;
margin: 0;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #1c1c1c;
font-size: 11px;
color:#333333;
}
#wrap {
width: 938px;
text-align: left;
height: 100%;
background-color: White;
}
#header{
text-align: right;
}
#red {
margin-top: 70px;
margin-right: 150px;
text-align: left;
width: 20px;
float: left;
}
#content {
margin-top: 70px;
margin-right: 151px;
margin-bottom: 200px;
width: 410px;
text-align: left;
float: left;
background-color: White;
}
#navigation {
margin-top: 70px;
width: 204px;
text-align: left;
float: left;
}
#footer {
margin-top: 70px;
width: 938px;
text-align: left;
float: left;
}
ul {
list-style-type: none;
}
ul.link {
width: 120px;
float: left;
margin-right: 35px;
}
h1 {
font-size: 1.5em;
font-weight: bold;
color: #FF190E;
margin-bottom: 15px;
}
h2 {
margin-top: 30px;
margin-bottom: 15px;
font-size: 1em;
font-weight: bold;
}
a:link
{
text-decoration:none;
font-size: 11px;
color: #FF190E;
}
a:visited
{
text-decoration:none;
color: #FF190E;
}
a:hover
{
color: #FF190E;
text-decoration: underline;
}
a:active
{
text-decoration: underline;
color: #FF190E;
}
hab ich richtig verstanden, daß es nicht um ein bild, sondern nur eine farbe geht?
ich verstehs halt immer noch nicht und fänd nen soll-screen gut.
ich schätze aber du brauchst einfach nur ein 1px hohes gif, welches repeated wird.
ne, hast ja nur eine content-spalte. also brauchste nur padding.
soll screen bzw im IE prommiert:
http://img248.imageshack.us/img248/6933/iefn0.jpg
fehlerhaft Nr1: im FF getestet:
http://img125.imageshack.us/img125/5702/ffhk4.jpg
wie schon beschrieben rendert der FireFox die hintergrundfarbe 100% beim seitenaufbau (hier bei 1152 x 864) über den gesammten screen, aber wenn man dann runterscrollt fehlt sozusagen ein update o.ä. auch bei einem reload bleibt das weiß immer bei den 8xx pixeln und der rest bleibt blank.
fehlerhaft Nr2: in Opera getestet
http://img248.imageshack.us/img248/1674/operaok1.jpg
hier sieht man das die angabe überhaupt nicht greift.
deswegen halt meine frage ob es da einen workaround gibt oder einen trick für die mangelhafte höhenangabe.
oder ob ich es am besten ganz neu aufbaue. für mich ist es halt alles noch ein bischen schwer auf einmal nur noch durch divs und margingeschichten zu positionieren.
"ne, hast ja nur eine content-spalte. also brauchste nur padding."
soweit ich weiß ist padding der innenabstand. was soll mir de bringen? der content div ist ja in allen 3 versionen weiß im hintergrund. es geht im prinzip um den leeren div den ich drumherumgebaut habe und der nur im IE gefüllt wird. schau mal bei opera da sieht man das problem am deutlichsten
brauchst keine 100% height. padding richtet es.
Wieso legst du das Bild nicht in den Body und machst ganz oben noch ein DIV hin, in das du ein Bild mit dem oberen Bereich einfügst?
@martin
wie soll ich das padding denn setzten? wenn ich padding: 50px; eingebe dann macht der halt ein über die gesammte breite gehenden 50px rand der den aufbau verändert und unten geschieht trotzdem nichts.
@martin2
ganz oben ist doch ein div mit einem bild vom oberen (rechten) bereich der über einem div liegt das weiß sein soll das über dem body liegt der dunkel sein soll. und der body soll leer bleiben damit ich später die bodyfarbe durch ein pixelbild ersetzen kann der noch eine feine struktur hat, so als hingucker.
ohne soll-bild raff ichs net
das ist doch oben gepostet:
http://img248.imageshack.us/img248/6933/iefn0.jpg
das hauptproblem ist halt das es mein erster xhtml/css code ist und ich die ganze seite OHNE blind gif, table oder br programmieren möchte. also nur mit div,margin und co.. nach der alten syntax wie gesagt würde ich wohl einfach eine tabelle nehmen. die würde sich automatisch so lange nach unten dehnen wie der content div der ja IN der tabelle selbst liegt. aber in CSS scheint das nicht zu funzen. der lange mitteldiv liegt ja IM wrap (engl für umwickeln) div, der aber seine hintergrundfarbe (weiß) anscheinend NICHT bis nach unten darstellt. zumindestens nur im ie. im firefox nur so groß wie der screen zum zeitpunkt des ladens ist und in opera eben überhaupt nicht. vielleicht liegt es daran das es ein leerer div ist in dem nur 3 andere divs sind. k.a. bin da total newb...
hi, da bin ich wieder. ganz vergessen, dass ich morgen früh noch ne layout-präsentation hab. wäre bestimmt lustig geworden ohne layout ;)
also zurück zum thema. eigentlich brauchst du nur zwei spalten. eine für content, eine für navigation. das ganze packst du in ein div mit weißem hintergrund. dieser container kriegt oben rechts die rote ecke als hintergrundbild (no-repeat) verpasst.
den content schiebst du über padding an die entsprechende Stelle und platzierst den linken roten streifen ebenfalls als hintergrundbild (no-repeat).
clear:both nicht vergessen.
Den schmalen Streifen über dem ganzen kannst du entweder als eigenes div machen, oder du baust in als hintergrundgrafik im body ein, was ich persönlich schöner fände. der container für content und menu muss dann einfach über margin-top im body nach unten geschoben werden. et voilà.
navi würd ich persönlich mit position: absolute; machen.
stimmt eigentlich. damit wirds sogar noch einfacher.
hab zur zeit im übrigen immer nur sekundenweise zeit, daher die kurzen antworten :)
"hi, da bin ich wieder. ganz vergessen, dass ich morgen früh noch ne layout-präsentation hab. wäre bestimmt lustig geworden ohne layout ;)" lol
ich hab jetzt mal das bild bei dem wrap div in den hintergrund gelegt und auf opera passiert da auch nichts bzw es ist egal ob img oder farbe im bg liegen. das problem liegt einzig allein daran das es den hauptdivcontainer überhaupt nicht interessiert wieviele divs in ihm drinstecken. der nimmt nur den ersten div sprich macht nur oben die 44 pixel weiß.
auch wenn ich wie bei dir erwähnt nur 2 statt 4 divs in den container packe, wird das eigentliche problem ja nicht behoben. oder was meinst du mit "spalten"? gibt es noch einen anderen boxtag außer div den man nehmen könnte?
und was meinst du mit clear both? *eben mal selfhtml öffnet*
nun gehts *g
gaaaaaanz am ende hinter dem footer fehlte ein "clear: left;"
wenn ich z.b. das wort "text" einfach vor das letzte </div> schreibe dann erscheint es rechts oben neben dem roten viereck. das dokument endete quasi nicht unten sondern rechts oben weil ich überall float left eingetragen hatte. deswegen zeigte der opera auch kein weiß an. beim letzten div im container habe ich nun das clear left gesetzt und das dokument endet quasi wieder unten wie es sein soll. der begriff "text" ist unten zu sehen und das weiß des hintergrundes erstreckt sich über das geasammte dokument.
durch das floatleft schien für das dokument quasi alles in einer zeile oben zu liegen in anderen worten. komische logik.
lass mich raten: es war das clear :)
Edit: dacht ich’s mir
hahahahaha, später die erklärung warum ich lache...
:) tausend dank *g
loooooool ich weiß warum du lachst martin.
mein fred von letzter woche in dem ich mich schonmal vorab erkundigen wollte was auf mich zukommt:
"wenn du anfängst mit float zu arbeiten, hier ein tipp im voraus. eine antwort die hier im forum bei 95% aller css-probleme half:
clear:both; (weil wo ein float ist, da muss auch ein clear sein)"
rofl..
harhar. ich wollte das zitat auch gerade einfügen …
hrhr, genau
So. Nachdem der Matthias nun nach 14 Stunden Hardcore-Coding auf des Rätsels Lösung gestoßen ist verabschiede ich mich für heute. Bis Morgen. Hoffentlich wird’s genauso amüsant ;)
your daily soap, schalten sie auch morgen wieder ein.
Seitentitel: height = 100%;
