| Autor |
Nachricht |
Rayne
Dabei seit: 29.01.2006
Ort: Berlin/Brandenburg
Alter: -
Geschlecht: 
|
Verfasst Di 04.09.2007 21:00
Titel
|
  |
|
Perfekt, das hat auch geklappt, der Rand ist nun an allen Seiten gleich. Aber das eine Problem bleibt trotzdem noch. Sobald auch nur ein einziger Absatz in der Ebene #Huelle steht, verschwindet der weiße Rand unten und der oben wird doppelt so dick, als ob der oben beide Ränder in sich vereint. Das passiert aber NUR im FF, im IE7 sieht alles auch mit ewig langem Inhalt wie gewünscht aus.
Ach und einen Scrollbalken habe ich immer, egal ob mit Inhalt oder ohne Inhalt (FF UND IE7)...
Hiern kann man sich das nochmal angucken.
|
|
| |
   |
 |
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 04.09.2007 21:16
Titel
|
|
|
Setz mal alle margin und padding Werte auf 0.
| Code: | * {
margin: 0;
padding: 0;
} |
Und du hast dem Body nun den padding Wert zugewiesen so ist natürlich auch
ein Scrollbalken vorhanden da die Höhe nun aus 100% + 16px besteht.
|
|
| |
|
|
|
Anzeige
|
|
|
Rayne
Dabei seit: 29.01.2006
Ort: Berlin/Brandenburg
Alter: -
Geschlecht:
|
Verfasst Di 04.09.2007 21:41
Titel
|
|
|
| m hat geschrieben: | Setz mal alle margin und padding Werte auf 0.
| Code: | * {
margin: 0;
padding: 0;
} |
Und du hast dem Body nun den padding Wert zugewiesen so ist natürlich auch
ein Scrollbalken vorhanden da die Höhe nun aus 100% + 16px besteht. |
Hm, jetzt weiß ich grad ehrlich nicht weiter. Die Variante mit dem Sternchen kenne ich noch gar nicht, habe grad schnell beim Googeln gelesen, dass das der Sternhack sein soll, richtig?
Wo schreibe ich den jetzt genau hin und was bewirkt er/dieses Sternchen?
Habs jetzt einfach mal vor den Body gesetzt und tatsächlich bleibt der Rand oben normal, unten is er aber weg. Muss der Befehl woanders hin? Muss ich noch andere Werte anpassen? So richtig steige ich aber nicht dahinter..."margin: 0px;" steht doch schon im Body und "padding: 8px;" muss doch gesetzt sein, um den weißen Rand hinzubekommen. Wieso wird dies nun auf 0 gesetzt?
| Code: |
html { height: 100%; }
* {
margin: 0;
padding: 0;
}
Body {
background: #FFFFFF url(Bilder/Schatten.gif) repeat-y 50% 0;
background-attachment: fixed;
margin: 0px;
padding: 8px;
height: 100%;
}
#Huelle {
width: 780px;
height: auto;
min-height: 100%;
margin: auto;
background: url(Bilder/Verlauf.gif) repeat-x #437FBD; } |
|
|
| |
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 04.09.2007 22:15
Titel
|
|
|
Das Problem ist dadurch auch noch nicht behoben wie im letzten Post erwähnt.
Der * Selector ist kein Hack, sondern ein ganz normaler Selector der Universal
Selector welcher für jedes Element gilt. Das bedeutet du setzt zuerst mal alle
padding und margin Werte auf 0, was deshalb Sinn macht weil verschiedene
Browser vers. default Werte für diese Eigenschaften der Elemente besitzen und
um einfach alles auf Null zu setzen um so selbst zu kontrollieren wie nun diese
Elemente dargestellt werden sollen. Das ist jetzt die einfachste Variante dazu,
wenn du mal nach "reset css" suchst wirst du sicher einige Varianten finden
und es ist nicht verkehrt wenn du dir das mal anschaust.
|
|
| |
|
|
Rayne
Dabei seit: 29.01.2006
Ort: Berlin/Brandenburg
Alter: -
Geschlecht:
|
Verfasst Fr 07.09.2007 16:36
Titel
|
|
|
Und wieder gibts ein neues Problem 
Ich habe nun die "Basis" fertig, also das Grundgerüst (Ebene #Huelle).
Jetzt möchte ich diese Ebene mit Inhalt füllen.
Oben kommt eine ebene #Rand-oben für den weißen Rand, da mir die Lösung mit margins und paddings nicht gefällt.
Darunter kommt die Ebene #Header mit einem Hintergrundbild. Bis dahin ja ganz einfach.
Unter dem Header soll die Navigation und der Inhalt kommen, also wieder zwei unterschiedliche Divs. Habs jetzt erstmal nur mit einem für den Inhalt probiert.
Mein Problem nun: Ich schaffe es nicht, dass diese Ebene #Content die Ebene #Huelle nach unten hin ausdent. Also ich schaffe es schon, aber immer geht irgendwas nicht.
Mit diesem Code klappts im FF prima, aber im IE 7 gar nicht, da der anscheinend kein margin-top kennt. Jedenfalls klatscht die Ebene #Content ganz oben und verschiebt zudem noch den Header:
| Code: |
#Content {
position: relative;
margin-top: 370px;
margin-left: 200px;
margin-bottom: 60px;
width: 550px;
height: auto;
background-color: #FFFFFF;
} |
Mit "position:absolute" stimmt zwar die Positionierung im FF UND IE7, aber es weitet sich nur die Ebene #Content nach unten hin aus, aber nicht das Gesamtgerüst.
Ganz ohne "position:..." genau das selbe wie oben - im FF gehts, im IE7 hängt #Content am oberen Broswerrand und verschiebt alles.
Ich weiß jetzt absolut nicht, wie ich das umschreiben muss, damits auch im IE und weiterhin im FF klappt 
Hier nochmal das gesamte Stylesheet:
| Code: |
html { height: 100%; }
Body {
background: #FFFFFF url(Bilder/Schatten.gif) repeat-y 50% 0;
color: #3E62B0;
margin: 0px;
height: 100%;
}
#Huelle {
position:absolute;
left:50%;
margin-left: -390px;
width: 780px;
height: 100%;
background: url(Bilder/Verlauf.gif) repeat-x #5F9DDC;
}
html>body #Huelle {
height: auto;
min-height: 100%;
}
#Rand-oben {
position: absolute;
width: 780px;
height: 8px;
background-color: #FFFFFF;
}
#Header {
position: absolute;
width: 771px;
height: 307px;
margin-top: 20px;
background: url(Bilder/Header.png) no-repeat;
}
#Content {
position: relative;
margin-top: 370px;
margin-left: 200px;
margin-bottom: 60px;
width: 550px;
height: auto;
background-color: #FFFFFF;
}
#Footer {
position: absolute;
width: 780px;
height: 25px;
background-color: #FFFFFF;
bottom: 0px;
}
|
Und hier das HTML-Dokument:
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="styles2.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
</head>
<body>
<div id="Huelle">
<div id="Rand-oben"></div>
<div id="Header"></div>
<div id="Content">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="Footer"></div>
</div>
</body>
</html> |
Hier der Link zur Seite, damit es besser verständlich ist. Im FF siehts ganz normal aus, im IE ist alles im Eimer.
http://www.sky-divezone.de/Other/Problem/Problem.htm
Ich hoffe, das Problem ist lösbar 
Bin euch sehr dankbar!
|
|
| |
|
|
nomidi
Dabei seit: 07.09.2007
Ort: bei Bremen
Alter: 48
Geschlecht:
|
Verfasst Fr 07.09.2007 16:49
Titel
|
|
|
|
ich würd keine margin-top setzten, du positionierst doch eh absolut oder? dann müßte do h auch top:370px gehen, dass sollte im ie laufen.
|
|
| |
|
|
Rayne
Dabei seit: 29.01.2006
Ort: Berlin/Brandenburg
Alter: -
Geschlecht:
|
Verfasst Fr 07.09.2007 16:59
Titel
|
|
|
Das Problem ist gelöst. #Huelle muss relativ positioniert werden, damit sich #Footer absolut positionieren lässt und sich nach unten hin ausdehnt.
Zuletzt bearbeitet von Rayne am Fr 07.09.2007 17:51, insgesamt 1-mal bearbeitet
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
[css] Problem mit div Höhe
Problem mit der Höhe
Problem mit DIV-Höhe
[CSS] Div 100% Höhe und BG-Bild - Problem
[css problem] content höhe
CSS-Problem mit der Höhe [gelöst]
|
|
Willkommen auf dem Portal für Mediengestalter
