nicht angemeldet
Problem mit: float:left;
0 0 0 0 0 0
0 0 0
Problem mit: float:left;
HI, hier mein problem
---------------------------------------------------------------------
Ausschnitt aus der HTML-Datei:
---------------------------------------------------------------------
<div class="links"> Ich bin da wo ich hin will, aber mein float geht nicht </div>
<div class="mitte"> Ich will waagrecht mittig sein und nicht senkrecht mittig.</div>
<div class="rechts">Hey ich will rechts stehen und nicht unten </div>
---------------------------------------------------------------------
Ausschnitt aus der CSS Datei:
---------------------------------------------------------------------
.links {background-color:#F79400; width:15em; float:left;}
.mitte {background-color:#990000; width:15em; }
.rechts {background-color:#008800; width:15em; }
---------------------------------------------------------------------
Schilderung des Problems:
---------------------------------------------------------------------
Ich will diese 3 Boxen nebeneinder haben und nicht untereinander. (Ich will CSS als Framersatz nutzen, weil ich in der CT so einen Artikel gelsen habe. ;) ) Also dachte ich wenn ich das das div "links" mit float:left; versehe, reihen sich die anderen dann daneben an wenn sie noch Platz haben. Wenn ich float beim div "mitte" defieniere klappt das ja auch, d.h. das div "rechts" ordnet sich dann auch rechts von dem div "mitte" ein.
Wenn ich mit nur zwei Kästen arbeite klappt das ganze nur wenn ich den 1. float:left und den 2. float: right mache.
Auch habe ich das gefordete width in die CSS-Datei aufgenommen.
Als Browser ferwende ich Mozilla Firebird.
Weiß jemand Rat?
---------------------------------------------------------------------
mfg Moonfire
---------------------------------------------------------------------
P.S. Gibt es einen gut besuchten Deutsch sprachigen (SELF-) HTML IRC channel?
--------------------------------------------------------------------
-
Hallo Moonfire
Ich will diese 3 Boxen nebeneinder haben und nicht untereinander.
so wie es sich jetzt darstellt hast du:
| links | | mitte |
| rechts |Also dachte ich wenn ich das das div "links" mit float:left; versehe, reihen sich die anderen dann daneben an wenn sie noch Platz haben.
"die anderen" nicht. Das folgende.
Wenn ich float beim div "mitte" defieniere klappt das ja auch, d.h. das div "rechts" ordnet sich dann auch rechts von dem div "mitte" ein.
genau, so ist es.
Wenn ich mit nur zwei Kästen arbeite klappt das ganze nur wenn ich den 1. float:left und den 2. float: right mache.
1. float:left langt um das folgende rechts daneben zu plazieren.
Weiß jemand Rat?
Ich bin etwas verwirrt ...
Grüße,
Jochen
-
Also dein Post war mir eine Hilfe, aber so wie du es beschreibst ist es leider nicht, bei mir schau das so aus:
I Links I
I Mittel I
I Rechts Iund ich weiß nicht warum
mfg Moonfire
-
Hallo Moon,
Also dein Post war mir eine Hilfe, aber so wie du es beschreibst ist es leider nicht, bei mir schau das so aus:
I Links I
I Mittel I
I Rechts Idas verstehe ich nicht. Jeder halbwegs vernünftige Browser macht aus einem:
<div style="width:15em; float:left;">Links</div>
<div style="width:15em; float:left;">Mitte</div>
<div style="width:15em;">Rechts</div>ein | Links | Mitte | Rechts |
So etwas schafft sogar ein Netscape 4.x Sollte dein Mozilla anderer Meinung sein (was die Darstellung betrifft) ist er kaputt. Dein Fehler liegt sicher woanders.
Grüße,
Jochen
-
Ich glaub mein Mozilla ist kaputt, weil im IE geht es ja wieso sollte dann was "kaputt" sein. Wagh! diesen Satz hätte ich besser nicht gesagt *g*
mfg Moonfire
-
http://home.t-online.de/home/ilse.parsch/Tuok.html
Da ist mein Upload, seht ihr was ich falsch mach? Weil im Selfhtml funktioniert ja mein Mozilla.
mfg Moonfire
-
Hallo Moonfire,
http://home.t-online.de/home/ilse.parsch/Tuok.html
Da ist mein Upload, seht ihr was ich falsch mach?Ohje, du machst es einem aber auch schwer.
Da ich keine Ahnung habe was du möchtest .... dieses Beispiel ist meilenweit von dem vorher diskutierten Topic "float" entfernt ... oder wie du es dir vorstellst, kann ich auch nicht sagen was du falsch machst.Mach doch mal eine ASCII-Grafik wie du dir .wants .wantshead .wantsul .wantslist vorstellst.
Grüße
Jochen
-
Hi Jochen
Ok ich hab jetzt (notdürftig) ein Monochrom Bitmap angefertigt, welches ich jetzt uploade.
http://home.t-online.de/home/ilse.parsch/schemafloat.bmp
(ich hätte .jpg oder .gif nehmen sollen, dachte monochrom sei platzsparender =( )
Ich will erreichen das durch float:left die "wants" Box rechts ist und die "haves" box links davon. Am besten auf gleicher Höhe. (und zentriert, aber das macht man ja mit margin: auto; oder? )
Ich will aber keine absoluten positions Angaben verwenden, damit das ganze auf allen Bildschirmen gleich aussieht. (Oder häng ich mich jetzt ganz am falschen Attribut auf? Und das geht viel einfacher was ich will?, den im Grunde will ich nur erreichen das diese beiden Tags nebeneinander und nicht übereinander angezeigt werden. Später will ich vieleicht noch eine dritte Box dazwischen schieben können)
mfg Moonfire
-
Hallo Moonfire,
http://home.t-online.de/home/ilse.parsch/schemafloat.bmp
(ich hätte .jpg oder .gif nehmen sollen, dachte monochrom sei platzsparender =( )
ja, ein gif wäre ... na egal.
Ich will erreichen das durch float:left die "wants" Box rechts ist und die "haves" box links davon. Am besten auf gleicher Höhe.
ok, also 2 Boxen nebeneinander. Gut. Dein Ansatz ist ja schon richtig:
.wants {float:left;} und .haves floatet automatisch. Jetzt solltest du noch die Angabe zur width: überdenken. Am universellsten sind prozentuale Angaben. Und bei 2 Boxen bietet sich 50% an. Also:.wants {float:left; width:50%;} .haves {float:left; width:50%;}
Dummerweise kommt uns hier ein IE-Bug in die Quere. Die Breite von .haves sind nur 50% der restlichen Fläche. Aber Tantek hilft uns weiter:
.wants {float:left;
width:50%;}
.haves {float:left;
width:100%; ""}"";
width:50%;(paddings und margins packst du am besten in die inneren <divs>
In diesem Zusammenhang solltest du gleich noch den richtigen DOCTYPE in dein Dokument einfügen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">(und zentriert, aber das macht man ja mit margin: auto; oder? )
ja, mit auto. Aber muss das mit der Zentrierung unbedingt sein?
Ich will aber keine absoluten positions Angaben verwenden, damit das ganze auf allen Bildschirmen gleich aussieht.
prima, das freut bestimmt viele hier. ;-)
(Oder häng ich mich jetzt ganz am falschen Attribut auf?
nö
Und das geht viel einfacher was ich will?, den im Grunde will ich nur erreichen das diese beiden Tags nebeneinander und nicht übereinander angezeigt werden. Später will ich vieleicht noch eine dritte Box dazwischen schieben können)
So als Tipp, wenn du bei den vielen <div>s den Überblick verlierst.
Bau dir während du immer wieder in möglichst vielen Browsern nachsiehst noch ein border:1px solid blue; (oder red, green, yellow) in die Definitionen ein. Dann siehst du die Abmessungen der Boxen, und dann wird es vielleicht klar warum etwas nicht floatet. (wenn z.B. der Platz nicht reicht)Grüße,
Jochen
-
Hi,
.wants {float:left;} und .haves floatet automatisch. Jetzt solltest du noch die Angabe zur width: überdenken. Am universellsten sind prozentuale Angaben. Und bei 2 Boxen bietet sich 50% an. Also:
.wants {float:left; width:50%;} .haves {float:left; width:50%;}
gerade in diesem Beispiel halte ich eine solche Lösung über %-Angaben und float für beide Boxen für äußerst ungünstig.
Die linke Box ist berechenbar klein - berechnenbar aber anhand des Inhaltes und nicht der Fenstergröße.
Folglich gebe ich der linken Box eine Breite in em, die der Breite des längsten Inhaltswortes entspricht und ebenfalls ein margin-left in em.Die rechte Box kann nun ohne float auskommen, eine passende breite in % unter Berücksichtigung des verbleibenden Raumes bei den gängigen Bildschrmgrößen bekommen und ein margin-left im em entsprechend der Summe des margins und der Breite der linken Box zzgl. dem gewünschten Abstand.
Das wäre dann wirklich flexibel und schaut trotzdem gut positioniert aus.freundliche Grüße
Ingo-
Hi,
.wants {float:left;} und .haves floatet automatisch. Jetzt solltest du noch die Angabe zur width: überdenken. Am universellsten sind prozentuale Angaben. Und bei 2 Boxen bietet sich 50% an. Also:
.wants {float:left; width:50%;} .haves {float:left; width:50%;}
gerade in diesem Beispiel halte ich eine solche Lösung über %-Angaben und float für beide Boxen für äußerst ungünstig.
sorry, das "float:left" in .haves kam vom copy&paste.
Die linke Box ist berechenbar klein - berechnenbar aber anhand des Inhaltes und nicht der Fenstergröße.
Folglich gebe ich der linken Box eine Breite in em, die der Breite des längsten Inhaltswortes entspricht und ebenfalls ein margin-left in em.... eine Breite in em, während du die Fenstergröße nicht kennst.
Die rechte Box kann nun ohne float auskommen, eine passende breite in % unter Berücksichtigung des verbleibenden Raumes bei den gängigen Bildschrmgrößen bekommen
Das musst du mir bitte erklären. Wieviel em sind gängige Bildschirmgrößen, Und wie willst du von einer prozentualen Angabe em's abziehen?
und ein margin-left im em entsprechend der Summe des margins und der Breite der linken Box zzgl. dem gewünschten Abstand.
Das wäre dann wirklich flexibel und schaut trotzdem gut positioniert aus.Möglicherweise, aber es gab hier schon hunderte von em-%-px Diskussionen. Es sollten ja auch nur Denkanstöße sein ... Hilfe zur Selbsthilfe.
Grüße,
Jochen
-
Hi,
Die linke Box ist berechenbar klein - berechnenbar aber anhand des Inhaltes und nicht der Fenstergröße.
Folglich gebe ich der linken Box eine Breite in em, die der Breite des längsten Inhaltswortes entspricht und ebenfalls ein margin-left in em.... eine Breite in em, während du die Fenstergröße nicht kennst.
die brauche ich doch auch nicht zwangsläufig kennen, jedenfalls in diesem Fall nicht, wo die Breite der Box ja lediglich zum (sehr kleinen und _fast_ überall passenden Inhalt gewählt werden muß.
Die rechte Box kann nun ohne float auskommen, eine passende breite in % unter Berücksichtigung des verbleibenden Raumes bei den gängigen Bildschrmgrößen bekommen
Das musst du mir bitte erklären. Wieviel em sind gängige Bildschirmgrößen, Und wie willst du von einer prozentualen Angabe em's abziehen?
Will ich ja garnicht. Ich wähle einen passenden Mittelwert, der die maximale Breite der linken Box bei einer (noch sinnvollen) Schriftvergrößerung berücksichtigt und für die minimal noch unterstützte Fensterbreite ohne Scrollen passt. Um zumindest in fortschrittlichen Browsern noch eine Begrenzung der MaximalBreite zu erhalten, gebe ich auch gern zusätzlich max-width in px an.
Vielleicht zeigt diese Seite http://www.1ngo.de/web/em.html aber etwas deutlicher, was ich meine.freundliche Grüße
Ingo-
Ich hab es jetzt gelöst, aber auf eine andere weiße wie ich wollte, aber auf meinem 2 Browsern die ich auf meinem Rechner habe sieht das Ergebnis
akzeptabel aus.http://home.t-online.de/home/ilse.parsch/Tuok.html
(Wer jetzt direkt nach dem Post schau muss sich gedulden bis der t-online server tatsächlich uploadet.
mfg Moonfire
-
Hi,
ach sorum wolltest Du das anordnen; ich dachte die kleinen Boxen nach links ...
Aber einen Fehler hat Deine Methode noch: Schieb' mal Dein Browserfenster zusammen oder vergrößere die Schrift.
Du solltest mindestens bei den kleinen Boxen die Breite in em angeben, wenn der - nicht umzubrechende - Text dann noch rein passen soll.freundliche Grüße
Ingo-
Hab ich jetzt gemacht. Was ich aber noch schade find, bei IE springt wenn für float:left kein Platz merh da ist der Kasten nach unten. Bei Mozilla schiebt es die dinger irgendwie ineinander. Aber ich mein dermaßen zur Seite schieben wird kaum einder, der einen Pc hat. Für PDA wird glaub ich ehh anders desigend oder?
mfg Moonfire
-
Hi,
Hab ich jetzt gemacht.
aber nicht in Deinem Online-Beispiel ...
Was ich aber noch schade find, bei IE springt wenn für float:left kein Platz merh da ist der Kasten nach unten. Bei Mozilla schiebt es die dinger irgendwie ineinander.
Das kann ich auf Deiner Beispielseite nur teilweise nachvollziehen. Der IE versucht (entgegen den Definitionen) die Seite irgendwie "passend" anzuzeigen, während Mozilla sich strict an die Definitionen, z.B. die Breitenangaben hält und Texte so schonmal aus einer Box herauslaufen. Mir gefällt die Vorgehensweise von Mozilla besser, wenngleich dies für die Seite u.U. etwas mehr Arbeit bedeutet, sie halt auch für ungünstige Bedingungen "passend" zu gestalten.
Aber ich mein dermaßen zur Seite schieben wird kaum einder, der einen Pc hat. Für PDA wird glaub ich ehh anders desigend oder?
Kann ich leider nicht beurteilen. Aber ich denke, da0 PDA-User ohnehin Abstriche beim Layout inkauf nehmen und sich schon freuen, ohne horizontales Scrolling einen Text lesen zu können. Und das ist bei flexiblen Angaben meist gegeben.
freundliche Grüße
Ingo
-
-
-
-
-
-
-
Hab das jetzt so gelöst wie du gesagt habe. Jetzt funktioniert es im Mozilla (aber nur mti Tantec hack? Was ist das genau? ), aber im IE geht es jetzt nicht =(.
mfg Moonfire
-
Hab das jetzt so gelöst wie du gesagt habe. Jetzt funktioniert es im Mozilla (aber nur mti Tantec hack? Was ist das genau? ), aber im IE geht es jetzt nicht =(.
mfg Moonfire
sry bei Mozilla geht es (auch ohne diese Tantec hack)
und bei IE geht es auch mti ihm nicht =(
Gibt es wo ne page wo der nähe erklärt ist?
mfg Moonfire
-
-
-
-
-
-
-
-
-
-
Hi,
Dein Problem ist die Anordnung der Elemente im Quelltext. Setze das nicht-floatende DIV als letztes und gebe ihm ausreichend margin nach beiden Seiten. Eine feste Breite brauchst Du ihm übrigens nicht zu geben, dann passt es sich dem Inhalt und em verbleibenden Platz an.
freundliche Grüße
Ingo -
Hallo Moonfire,
P.S. Gibt es einen gut besuchten Deutsch sprachigen (SELF-) HTML IRC channel?
suchst du #selfhtml auf irc://irc.epd-me.net:6667/?
Gruß,
Johannes
--
ss:| zu:} ls:[ fo:} de:] va:} ch:) sh:( n4:| rl:( br:< js:| ie:{ fl:( mo:} -
Hallo!
Ich habe mir Deinen hier angegebenen Code in meinen Editor kopiert und ein "float:left; " sowohl an .mitte als auch an .rechts drangehängt. Ich sehe jetzt in den aktuellen Version von Mozilla, IE & Opera 3 Kasterln nebeneinander.Bin mir nicht sicher ob Du das haben wolltest.
ViennamadeBei mir siehts jetzt so aus:
<style type="text/css">
<!--
div.links {background-color:#F79400; width:15em; float:left;}
div.mitte {background-color:#990000; width:15em; float:left;}
div.rechts {background-color:#008800; width:15em; float:left;}
-->
</style>
</head>
<body>
<div class="links"> Ich bin da wo ich hin will, aber mein float geht nicht </div>
<div class="mitte"> Ich will waagrecht mittig sein und nicht senkrecht mittig.</div>
<div class="rechts">Hey ich will rechts stehen und nicht unten </div>
</body>
