nicht angemeldet
CSS Experimente..
Hallo,
ich habe heute das erste mal versucht ein komplettes Design mit Hilfe von CSS zu erstellen.
Nach einigen Versuchen ist auch schon ein halbwegs brauchbares Design herausgekommen (bitte keine kommentare zu farben etc, das ist nur test).
Dabei stellen sich mehrere Fragen:
-Warum Positionieren IE und Opera menien navi-Kontent und den rechten Bereich von der höhe her anders, top 2 aber nicht?
-Warum bringt height=100% nicht das gewünschte Ergebnis?
Bitte schickt mich nicht zu irgendwelchen Anleitungen, ausser sie sind echt gut, denn bei den meisten werden nur die "Befehle" erläutert, aber nicht wie man in der Praxis rangeht.
Aufgeteilt habe ich das ganze so:
layer.css : hier sind die Layer definiert. Ich habe alle mit div Containern eingebunden. muss man beim schachteln dieser auf etwas achten?
navi.css : hier sind bis jetzt nur die Informationen zur Textdarstellung drin, vielleicht etwas schlecht gewählt der Name
uebernn4.css : wird per media=all eingebunden. Sagt nur das es einen Border geben soll, da nn4 damit ja bei Links nicht klarkommt.
vielen Dank erstmal.
sven
-
Hi
-Warum bringt height=100% nicht das gewünschte Ergebnis?
1. weil, wenn es um CSS geht, es height:100%; heißen müßte.
2. weil vielleicht die Höhe des Elternelement nicht die ist, die Du erwartest
3. was ist denn das gewünschte Ergebnis?Andreas
-
Hallo
- weil, wenn es um CSS geht, es height:100%; heißen müßte.
Ok, das habe ich im quellcode richtig nur hier falsch.
- weil vielleicht die Höhe des Elternelement nicht die ist, die Du erwartest
?? aber hat ein Layer denn ein elternelement?
- was ist denn das gewünschte Ergebnis?
naja...es gibt ja drei Spalten, und sie sollen alle gleichlang sein wie die längste von ihnen...
sven
-
Hi
?? aber hat ein Layer denn ein elternelement?
Layer? Gibt kein Element namens Layer in HTML...
Meinst Du div?Ja, ein div hat ein Elternelement - zumindest in einem korrekten HTML-Dokument.
Vermutlich body. Hängt aber vom Dokumentaufbau ab.Andreas
-
Vermutlich body. Hängt aber vom Dokumentaufbau ab.
Ja, einen body tag gibt es, aber der sagt doch nichts über die größe der DIVs aus?
sven
-
Vermutlich body. Hängt aber vom Dokumentaufbau ab.
Ja, einen body tag gibt es, aber der sagt doch nichts über die größe der DIVs aus?
Doch, wenn Du prozentuale Größenangaben im div hast und das body-Element Elternelement vom div ist.
Andreas-
Doch, wenn Du prozentuale Größenangaben im div hast und das body-Element Elternelement vom div ist.
??wo kann ich sowas denn mal nachlesen?? Das ist mir echt ganz neu...
sven-
Hi!
??wo kann ich sowas denn mal nachlesen?? Das ist mir echt ganz neu...
svenDas steht irgendwo in den CSS2-Empfehlungen des W3C drin (bin aber zu faul zum suchen).
Bei relativen Angaben wird immer Bezug auf das Elternelement genommen, es sei den es handelt sich um font-size. Ergo wird dein div 100% groß von der Größe des bodys sein, welcher widerum 100% der Größe seines Elternelements groß ist, also html. Also mußt du html und body noch eine Höhe von 100% des Anzeigebreiches mitgeben:html, body {heigth: 100%}
Gruß Herbalizer
-
hallo,
mit interesse habe ich mir das alles hier durchgelesen, weil mich ähnliche probleme.
aber das mit dem zuweisen der höhe von 100% an die eltern, daß habe ich gleich mal probiert, und mußte mal wieder feststellen, daß nur der inhalt der eltern ausschlaggebend für die höhe des div's ist. also wenn außer dem div nix in der seite steht dann ist die höhe = 0px.
Ist denn nun diese beobachtung richtig, oder bin ich mal wieder nur zu blöd was zu verstehen. schließlich klang das mit den 100% für die ertern ja plausible, nur tut es bei mir nicht(alle browser).
DerPilz
-
ok ok ok ok ok,
ich gebs zu, ich bin zu blöd. ich habe vergessen das es nicht = sondern : heißt.
Aber trotzdem, das einzige was sich geändert hat ist das die ausgelesene fensterhöhe nun 100% ist, das div ist aber trotzdem nur so hoch wie der inhalt des div's.
DerPilz
-
hallo, habe in body und html height:100% eingefügt, aber es klappt nicht.
kann nicht mal einer von euch auf die Seite gucken?
Sven-
Ah jetzt verstehe ich dein Problem (heute Vormittag bin ich nicht auf deine Seite gekommen). Da dein div-Inhalt größer als die Anzeigegröße ist, sieht es bei dir ein bisschen putzig aus wenn man nach unten scrollt. Nungut, das muss auch so sein. Da dein div 100% des Anzeigebereiches hoch ist (der von mir aus jetzt einfach mal 400px groß ist) ist es im Endeffekt ebenfalls nur 400px hoch. Ist der Inhalt des div aber größer, so fließt er über das div hinaus, deswegen hast du nach dem grauen Hintergrund noch Text. Der Hintergrund markiert die Abmessungen des div. Da du nicht weißt, wie groß der Anzeigebreich ist gibt es nur die Möglichkeit die Angabe von height dahingehend zu verändern, das du eine absolute/relative Höhe angibst (px/em; em ist zu preferieren) die nicht von den Maßen des Elternelements abhängt. Die zweite Möglichkeit ist (die eigentlich nur im Mozilla funktioniert), auf die Angabe von height zu verzichten und stattdessen den unteren Rand des div am unteren Rand des Anzeigebereiches anzuheften: bottom: 0; sowie eine Scrollmöglichkeit hinzuzufügen: overflow: auto;
Gruß Herbalizer
-
-
Hallo,
Aber trotzdem, das einzige was sich geändert hat ist das die ausgelesene fensterhöhe nun 100% ist, das div ist aber trotzdem nur so hoch wie der inhalt des div's.
Prozenzangaben sind immer relativ zu etwas zu sehen. (Meistens zu einer eigenschaft des "containing blocks", also zu einem Block, der das Element beinhaltet (im Normalfall also zum Elternelement des aktuellen elements).
Du darfst aber bei allen Regel eins nicht vergessen, nämlich dass es vom Browser abhängt wie er die Regel interpretiert.
Grüße
Thomas
-
-
-
-
Hallo,
Doch, wenn Du prozentuale Größenangaben im div hast und das body-Element Elternelement vom div ist.
??wo kann ich sowas denn mal nachlesen?? Das ist mir echt ganz neu...
Prozentangben:
http://www.w3.org/TR/REC-CSS2/syndata.html#percentage-unitsErklärung zu Blocklevel-elementen und Block-Boxen:
http://www.w3.org/TR/REC-CSS2/visuren.htmlDas ganze dann etwas detaillierter:
http://www.w3.org/TR/REC-CSS2/visudet.htmlZum boxmodell selbst:
http://www.w3.org/TR/REC-CSS2/box.htmlAchte besonders auf die Begriffe wie containing-block, Block-level elements, block boxes.
Grüße
Thomas
-
-
-
-
-