nicht angemeldet
ebenen anordnen - ie7 stellt falsch dar
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 
Auge
0
0
0
0
ebenen anordnen - ie7 stellt falsch dar
Hallo,
ich möchte auf einer Seite Ebenen (quasi als container) anordnen, um sie dann mit Inhalt zu füllen.
Die Ebenen sollen in der Weise angeordnet werden, wie es eine html-table mit Zellen leisten würde - also drei "tr" mit je drei "td". Das ergibt ein Rechteck mit neun Feldern.
Da ich wiederholt lese, man solle Ebenen nicht mit position:absolute, sondern mit float definieren, habe ich damit versucht. Alle Ebenen haben Angaben zu width und heigth.
Ebene 1 (links oben): float:left;
Ebene 2 (rechts davon): float:left;
Ebene 3 (wieder recht davon): float:left;
Ebene 4 (zweite Reihe links): clear:both; float:left;
Ebene 5 (zweite Reihe, rechts von Ebene 4): float:left;
Ebene 6 (zweite Reihe, wieder rechts davon): float:left;
Ebene 7 (dritte Reihe, links): clear:both; float:left;
usw.
Firefox2 und Opera9 stellen richtig dar. IE stellte Ebenen 1,2,3,5,6,7,9 auf der ersten Reihe, Ebene 4 auf der zweiten und Ebene 7 auf der letzten Reihe dar.
Ich finde einfach keine Lösung. Wo liegt der Hund begraben?
Gruss
-
Hallo Hannes
auch hier würde eien URL zu deiner "Problem-Seite" meht Fragen klären.
Grüße
Berdn
-
Hallo Hannes
ich habe selber immer noch nicht für mich den richtigen workaround gefunden was das "clearen" angeht. ;-(
Das hier verbessert aber erstmal die Darstellung ...
<!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" xml:lang="de" lang="de">
<HEAD>
<TITLE>ebene-template</TITLE>
<style type="text/css">
div#a1 {
float:left;
width:20px;height:20px;
background-color:#000;
border:1px solid black;
color:yellow;
}
div#b2 {
float:left;
width:20px;height:20px;
background-color:#444;
border:1px solid black;
color:yellow;
}
div#c3 {
float:left;
width:20px;height:20px;
background-color:#555;
border:1px solid black;
color:yellow;
}
div#d4 {
float:left;
width:20px;height:20px;
background-color:#777;
border:1px solid black;
color:yellow;
}
div#e5 {
float:left;
width:20px;height:20px;
background-color:#999;
border:1px solid black;
color:yellow;
}
div#f6 {
float:left;
width:20px;height:20px;
background-color:#aaa;
border:1px solid black;
color:yellow;
}
div#g7 {
float:left;
width:20px;height:20px;
background-color:#ccc;
border:1px solid black;
color:yellow;
}
div#h8 {
float:left;
width:20px;height:20px;
background-color:#eee;
border:1px solid black;
color:yellow;
}
div#i9 {
float:left;
width:20px;height:20px;
background-color:#fff;
border:1px solid black;
color:yellow;
}
</style>
</HEAD><BODY>
<div id="a1">1</div>
<div id="b2">2</div>
<div id="c3">3x</div>
<br style="clear: both;">
<div id="d4">4x</div>
<div id="e5">5x</div>
<div id="f6">6x</div>
<br style="clear: both;">
<div id="g7">7x</div>
<div id="h8">8x</div>
<div id="i9">9x</div></BODY>
</html>Sorry,
Bernd
Wobei man natürlich jetzt auf das inline Style verzichten könnte etc.
-
Hallo Bernd,
vielen Dank. Ja, so funktioniert's.
Aber: was meintest du mit
Wobei man natürlich jetzt auf das inline Style verzichten könnte etc.
Gruss
-
Na,
mit klassen siht es "besser" aus ..
und Du kannst/solltest auch statt br auch div nehmen
Gruß
bernd
-
ja, es geht auch mit
<div style="clear: both;"></div>statt mit
<br style="clear: both;">Noch eine Anschlussfrage: weshalb kann man statt einer height in pixel nicht auch eine height in Prozent definieren?
-
Hallo Hannes
eine Höhe kann man mit Prozent angeben.
Und besser ist z.b.
<div class="clear"><!-- --></div>
Gruß
Bernd
-
Hallo,
<div class="clear"><!-- --></div>
und noch besser ist es gar keine inhaltsleeren Elemente einzufügen, sondern alternative Methoden zu nutzen wie zum Beispiel das umgebende Element ebenfalls floaten zu lassen oder dem umgebenden Element overflow:auto zu geben.
Gruss,
OhneName-
Hallo ohne Namen
und das funktioniert gut? Auch in allen IE's? Na, incl. 5.5.
Ich hasse nähmlich Inhaltsleere Elemente.
Gruß
Bernd
-
Hallo,
und das funktioniert gut? Auch in allen IE's? Na, incl. 5.5.
Für IEs muss man mit zoom:1 oder height:1% nachhelfen.
Gruss,
OhneName-
Hallo ohne Namen
Das muss ich mal ausprobieren, und da ich eh mit "Conditional Commands" arbeite sollte das kein Problem sein.
Vielen Dank für den Tip
Gruß
Bernd
-
Hallo OhneNamen
ich glaube, ich habe mich da im thread etwas verloren.
Also nochmals: mit height:15% geht es nicht (s. code oben).
Und was um Himmels willen ist denn zoom:1 ?
Gruss
-
Hallo Hannes
eine Eigenschaft die nur der IE kennt. Damit kann man vergrößern oder verkleinern.
Aber es ändert sich auch die Grundsätzliche Eigenschaft des IE für dieses Element,
Hab den Namen jetzt nicht im Kopf ...
Hab es selber kaum genutzt.
Hab mir das selber als so eine art "display" Eigenschaft für den IE erklärt,
Gruß
Berdn
-
Hallo Bernd,
dann lass ich das mit dem zoom mal. Ich will ja nicht nur für IE codieren.
Was aber ist nun mit der Höhe? OhneName meint, mit der Angabe von beispielsweise 1% ginge es. Es geht aber nicht (s. code-Beispiel aus meinem posting von 22:52).
Gruss
-
Hallo Hannes
mit Conditional Comments bekommst Du deine Website für den IE hin und valide.
Ich selber habe noch nie mit % in der Höhe gearbeitet.
Aber vielleicht kann es der FF nicht, weil das Element keinen Inhalt hat?
Gute Nacht
Bernd
-
Hallo,
Bernd hat schon recht, wenn er sagt, dass FF dann keine Ebene anzeigt, wenn kein Inhalt im div-Element vorhanden ist. Das habe ich ja mit obigem code-Bsp. gezeigt.
Aber sowohl IE7, als auch FF2 und Opera9 zeigen die Ebene bei Angabe von 'height:15%' nur ca. 5-10 Pixel hoch, selbst wenn Inhalt vorhanden ist.
Niemand mehr wach?
Gruss
-
Hallo
und warum die höhe in Prozent?
Nicht in ems oder pxs?Mal wieder eine Seite um kucken?!
Berdn
-
Hallo Bernd,
ich dachte schon, du wünschtest Nachtruhe. Will dich ja nicht stressen.
Vielleicht gibt's noch andere Teilnehmer.Warum Höhe in % statt in px? Nun, eben aus darstellerischen Gründen. Würde etwas weit führen, hier meine Layout-Vorstellungen zu erörtern.
Es wundert mich nur, warum OhneName meint, es ginge mit %-Angabe. Er schien so sicher zu sein.
Aber bei mir funktioniert das nicht. Oder ist mein Code falsch?
Gruss
-
Hallo
Es wundert mich nur, warum OhneName meint, es ginge mit %-Angabe. Er schien so sicher zu sein.
Aber bei mir funktioniert das nicht. Oder ist mein Code falsch?
Du hast aber auch seine Anmerkung zu den Höhenangaben der Vorfahrenelemente verstanden? Solange dem Browser die Höhe dieser Elemente nicht bekannt ist, kann er auch die Höhe eines Kindelements nicht berechnen.
Die Frage lautet nämlich: Wieviel sind 15% eines unbekannten Wertes?
Tschö, Auge
--
Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
(Victor Hugo)
Veranstaltungsdatenbank Vdb 0.1-
Hallo,
möglicherweise habe ich es nicht verstanden. Wenn Vorfahrenselemente Elternelemente meint, dass gibt es nur den body als Elternelement (das hatte ich schon gepostet).
Ich zeige am besten nochmals den code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><HTML> <HEAD> <TITLE>ebene-template</TITLE> <style type="text/css"> div#a1 { float:left; width:100%;height:15%; background-color:yellow; border:1px solid black; } </style> </HEAD> <BODY> <div id="a1">1</div> </BODY> </html> ~~~wenn div leer ist, zeigen FF2 und Opera9 keine Ebene an, IE7 zeigt eine Höhe an, die etwa 15-20 px entspricht. Wenn div Inhalt enthält (z.B. `<span style="font-size:4px;">1<span>`{:.language-css}), dann zeigen FF2 und Opera9 etwa die 'Fantasiehöhe' an, die IE7 im obigen Fall anzeigte. Diesmal aber stellt IE7 eine Höhe an, die in etwa der Höhe des Inhalts entspricht. Wenn der div-Inhalt z.B. `<p>1</p>`{:.language-css} ist, dann stellen FF2 und Opera9 eine korrekte Höhe von 15% an; IE7 bleibt bei der Fantasiehöhe von etwa 15-20px. Wenn der div-Inhalt `<p style="font-size:4px;">1</p>`{:.language-css} ist, sieht es nochmals anders aus. Das heisst für mich: 1) wenn das Elternelement body ist, dann kann eine div nur mit %-Prozenthöhen dargestellt werden, wenn Inhalt vorhanden ist (und das unterschiedlich je nach Browser) 2) die Browser stellen bei gleichen Element-Inhalten verschiedene Höhen dar 3) die Höhen werden je nach Inhalt (und zusätzlich je nach Browser - s.oben) unterschiedlich dargestellt. Warum mir dieses Detailproblem so wichtig ist? Eigentlich wollte ich so eine Art template erstellen (mit vorgesehenen 'Leerräumen', die ich dann bedarfsweise mit Inhalt füllen könnte. Dies sollte gleichsam mein Einstieg in die oft vorgetragene Denkweise sein, man solle Inhalt und Darstellung trennen. Als relativer Anfänger hatte bisher Dreamweaver meine Fragen beantwortet - oder sie gar nie gestellt ;-) Gruss-
Hallo,
ich zitiere mich hier einmal selbst:
Du kannst jederzeit eine height in Prozent definieren, du musst aber beachten, dass diese sich auf die Höhe des Elternelements bezieht und diese sich wiederum auf die Höhe seines Elternelements usw. bis zum zum Element <html>.
Wichtig ist hier vorallem der Schluss: bis zum Element html. Mal ein stark vereinfachtes Beispiel:
... hier doctype ergänzen <html> ... hier head ergänzen <body> <div id="formatierMich"></div> </body> </html>html { height:100%; } /* Höhe auf 100% der Höhe des Viewports setzen */ body { height:100%; } /* Höhe auf 100% der Höhe des html-Elements setzen */ div { height:33%; } /* Höhe auf 33% der Höhe des body-Elements setzen */Wenn du das nicht beachtest, dann hat das Element html die Höhe 0, der body damit 100% von 0, also auch 0 und dein inhaltsleeres div-Element erzwungenermaßen auch 0. Höhe 0 bedeutet du siehst es gar nicht. Das der IE dir hier 15-20px anzeigt ist ein Fehler des IE. Er gibt inhaltsleeren Elementen immer die Höhe, die es benötigen würde, wenn Text drin stehen würde, also font-size oder eher noch line-height.
Gruss,
OhneName-
Hallo OhneName,
das ist wirklich die Lösung. Vielen Dank.
Ich bin sehr froh über deine Erklärung. Ich hatte gewissermassen nur bis an den body - und nicht darüber hinaus gedacht ;-)
Gruss und schönen Sonntag
-
-
-
-
-
-
-
-
-
-
-
-
-
Hallo OhneName,
wie zum Beispiel das umgebende Element ebenfalls floaten zu lassen
es gibt keine umgebende Elemente (ausser body), weil ich nicht schachteln will.
Gruss
-
Hallo,
es gibt keine umgebende Elemente (ausser body), weil ich nicht schachteln will.
Und sind <html> und <body> denn keine Elemente? Du kannst also entweder body float:left oder overflow:auto geben. Das erreicht in standardkonformen Browern, das gleiche wie ein Element mit clear. Für ältere IEs musst du zoom:1 oder height:1% verwenden (z.B. mit dem Star-Html-Hack oder über Conditional Comments einbinden).
Interessant dazu ist der Artikel im SELFHTML-Weblog: http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout
Gruss,
OhneName
-
-
-
Hallo Bernd,
dieser code (in obiges Beispiel eingesetzt)
div#a1 { float:left; width:100%;height:15%; background-color:yellow; border:1px solid black; } ~~~zeigt nicht die Höhe von 15% an. Mit folgendem Code ~~~css <div id="a1"></div> ~~~zeigen Opera9 und IE7 so ca. 5-10 Pixel Höhe an. Firefox gar nichts. Mit diesem Code ~~~css <div id="a1">1</div> ~~~zeigt auch Firefox so ca. 5-10 Pixel Höhe an. Gruss hannes
-
-
Hallo,
Noch eine Anschlussfrage: weshalb kann man statt einer height in pixel nicht auch eine height in Prozent definieren?
Du kannst jederzeit eine height in Prozent definieren, du musst aber beachten, dass diese sich auf die Höhe des Elternelements bezieht und diese sich wiederum auf die Höhe seines Elternelements usw. bis zum zum Element <html>.
Gruss,
OhneName
-
-
-
-
-
-
war die Frage zu umständlich formuliert?
ich versuchs nochmals, diesmal mit dem code.
<HEAD> <TITLE>ebene-template</TITLE> <style type="text/css"> div#a1 { float:left; width:20px;height:20px; background-color:#000; border:1px solid black; color:yellow; } div#b2 { float:left; width:20px;height:20px; background-color:#444; border:1px solid black; color:yellow; } div#c3 { float:left; width:20px;height:20px; background-color:#555; border:1px solid black; color:yellow; } div#d4 { clear:both; float:left; width:20px;height:20px; background-color:#777; border:1px solid black; color:yellow; } div#e5 { float:left; width:20px;height:20px; background-color:#999; border:1px solid black; color:yellow; } div#f6 { float:left; width:20px;height:20px; background-color:#aaa; border:1px solid black; color:yellow; } div#g7 { clear:both; float:left; width:20px;height:20px; background-color:#ccc; border:1px solid black; color:yellow; } div#h8 { float:left; width:20px;height:20px; background-color:#eee; border:1px solid black; color:yellow; } div#i9 { float:left; width:20px;height:20px; background-color:#fff; border:1px solid black; color:yellow; } </style> </HEAD> <BODY> <div id="a1">1</div> <div id="b2">2</div> <div id="c3">3x</div> <div id="d4">4x</div> <div id="e5">5x</div> <div id="f6">6x</div> <div id="g7">7x</div> <div id="h8">8x</div> <div id="i9">9x</div> </BODY>Ich wäre froh um Antwort.
Gruss