nicht angemeldet
2 Divs nebeneinander positionieren im IE und MOZ
Hi Leute wie schaffe ich es das ich die beiden Divs
<div id="m-L"></div>
<div id="m-R"></div>
die im Div
<div id="d3"></div>
sind, genau nebeneinander positioniere?
<div id="d3">
<div id="m-L"></div>
<div id="m-R"></div>
</div>
d3 hat eine Breite von 42.2em.
m-L und m-R eine Breite von jeweils 21.2em.
Alles 3 jeweils ein eHöhe von 37.5em.
Ich will das ganze wenn möglich flexibel mit em, ohne Browserweiche und für IE und Moz regeln. Mir gelang es bisher immer nur es entweder für den IE ider für den Moz zu regeln. Udn es waren keien kleinen Unterschiede sondern verdammt große Unterschiede!
Need Help!
mfg
Phil
-
Hallo Phil.
<div id="m-L"></div>
<div id="m-R"></div>die im Div
<div id="d3"></div>
Keine dieser IDs hat für mich einen Aussagewert. IDs sollten stets etwas über das aussagen, was sie identifizieren.
sind, genau nebeneinander positioniere?
<div id="d3">
<div id="m-L"></div>
<div id="m-R"></div>
</div>d3 hat eine Breite von 42.2em.
m-L und m-R eine Breite von jeweils 21.2em.
Alles 3 jeweils ein eHöhe von 37.5em.Warum diese merkwürdigen Zahlen? Und warum gibst du den beiden inneren div-Elementen nicht Dimensionsangaben in %?
Einen schönen Dienstag noch.
Gruß, Ashura
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
„It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
[HTML Design Constraints: Logical Markup]-
Hallo,
d3 hat eine Breite von 42.2em.
m-L und m-R eine Breite von jeweils 21.2em.Warum diese merkwürdigen Zahlen? Und warum gibst du den beiden inneren div-Elementen nicht Dimensionsangaben in %?
wobei 21.2 + 21.2 bei mir 42.4 macht und nicht 41.2
mfg
Twilo-
wobei 21.2 + 21.2 bei mir 42.4 macht und nicht 41.2
Sorry verschrieben.
@Ashura.
1. Die id's haben Beispielnamen ;) Mir ist nichts anderes eingefallen.
2. Hmm.. wenn ich es mit % Angaben mache, dann würde es so aussehen oder? width:50% für jedes der beiden(m-L udn m-R). Dann nimmt er aber die Hälfte der ganzen Seite aber ich will ja nur die Hälfte des Blocks d3 haben. WIe mache ich das dann? Soll ich auch die Höhen in % angeben?mfg
Phil
-
Moin!
- Hmm.. wenn ich es mit % Angaben mache, dann würde es so aussehen oder? width:50% für jedes der beiden(m-L udn m-R). Dann nimmt er aber die Hälfte der ganzen Seite aber ich will ja nur die Hälfte des Blocks d3 haben. WIe mache ich das dann? Soll ich auch die Höhen in % angeben?
Richtig, das ist ein Problem im IE, der jede Prozentangabe falsch versteht und sie immer auf die Fensterbreite oder -höhe bezieht, nicht auf den verfügbaren Platz.
- Sven Rautenberg
--
"Love your nation - respect the others."-
Moin!
Richtig, das ist ein Problem im IE, der jede Prozentangabe falsch versteht und sie immer auf die Fensterbreite oder -höhe bezieht, nicht auf den verfügbaren Platz.
_Immer_? Orientiert er sich nicht auch an der Größe des nächst höher _positionierten_ Elternelements?
netten Tag
^da Powl-
Nein tut er nicht im IE. Das Prob lem hatte ich gestern schon beim zentrieren, das ich übrigens geschafft habe. ich schaffe es nur nicht im zentriertem Bereich 2 Divs genau neben einander zu setzen und das in beiden Brwosern ohen Browserweiche. in einem Brwoser klpappts und im andern dann _garnicht_ ( also wirklich komplett nicht).
mfg
Phil
-
Hallo,
Doch, das geht. Im Anschluß gibt's mal ein schnelles Quellcodegefrickel, wo es funktioniert. Da wird ein BUG im IE deutlich, wenn man den nicht behebt, rauschen beide floats untereinander- vielleicht war das Dein Problem.
Oder Du hast das ELternelement nicht positioniert. In dem Beispiel mit position:relative. Dann richten sich die %-Angaben der Kinder nach diesem Element.
Zum IE-float-double-margin-bug (oder wie man ihn nennt) kann ich nicht viel sagen. Ich weiß daß es ihn gibt, verachte den IE ein wenig mehr und worke around. Das ist alles ;)netten Tag
^da PowlAchtung, hier kommt ein Karton:
<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Wir floaten Juhuu!</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <style type="text/css">* {margin:0; padding:0;} /* kann man ja mal machen */ html, body { height:100%; /*da bin ich nicht ganz sicher, schadet aber nicht */ width:100%; /*das muss auf jeden Fall, als primärer Bezug*/ background:black; overflow:auto; } body { text-align:center; /*hatten wir schonmal */ } #rahmen { position:relative; /* das ist eminent wichtig */ width:80%; height:100%; background:gold; margin:0 auto; text-align:left; /*und Text 'schwupp' wieder linksbündig */ } #float1 { float:left; width:35%; height:200px; background:red; margin-left:10%; _margin-left:5%; /*IE bug doppelter Abstand bei float*/ } #float2 { float:left; width:35%; height:200px; background:green; margin-left:10%; /*hier versteht IE es dann richtig- das können andere vielleicht erklären*/ } #float1, #float2 { margin-top:100px; }</style> </head> <body> <div id="rahmen"> <h1>Unter mir zwei Chaoten: beide am floaten</h1> <p>Reim Dich oder ich schlag Dich... ^^ </p> <div id="float1"> <p>ich floate</p> </div> <div id="float2"> <p>das kann ich auch :P SO grün bin ich nicht mehr!</p> </div> </div> </body> </html>-
Danke. =)
Jetzt muss ich nur noch versuchen die EInheiten in em umzuschreiben dmait es flexibel wird.
mfg
Phil
-
Hallo,
Danke. =)
gerne
Jetzt muss ich nur noch versuchen die EInheiten in em umzuschreiben dmait es flexibel wird.
Stop mal, lies Dir mal einen meiner vorherigen Post durch. em ist nicht immer sinnvoll. Eigentlich ist das so schon flexibel. Die Container arragnieren sich eben nach der Fenstergröße. em wäre interessant für Elemente, die sehr stark von der Schriftgröße abhängig sein sollen, z.B. Links. Wenn Du den #rahmen z. B. in em anstatt % angibst, überschreitet er bei großer Skalierung die Fenstergröße und Du bekommst unschöne horizontale Scrollbalken.
Lies Dir ruhig nochmal den Artikel bei 1ngo durch.netten Tag
^da Powl-
Stop mal, lies Dir mal einen meiner vorherigen Post durch. em ist nicht immer sinnvoll. Eigentlich ist das so schon flexibel. Die Container arragnieren sich eben nach der Fenstergröße. em wäre interessant für Elemente, die sehr stark von der Schriftgröße abhängig sein sollen, z.B. Links. Wenn Du den #rahmen z. B. in em anstatt % angibst, überschreitet er bei großer Skalierung die Fenstergröße und Du bekommst unschöne horizontale Scrollbalken.
Hmm. Okay die beiden floatenden Boxen sollen Inhalts Boxen werden deswegn dachte ich es wäre besser aber okay =)
Lies Dir ruhig nochmal den Artikel bei 1ngo durch.
Ich glaub das tät mir nochmal ganz gut.
netten Tag
Ebenfalls. Danke.
mfg
Phil
-
Hallo,
Hi,
Hmm. Okay die beiden floatenden Boxen sollen Inhalts Boxen werden deswegn dachte ich es wäre besser aber okay =)
Ja, eben darum. Der Text darin bricht automatisch um und nimmt sich so den Platz, den er benötigt. Füge doch einfach Blindtext ein und probiere verschiedene Skalierungen aus. Dabei spiele auch mit der Größe des Browserfenster, dann wirst Du sehen was ich meine.
Ich glaub das tät mir nochmal ganz gut.
=)
netten Tag und häng nicht wieder bis 2 vorm Rechner ;)
^da Powl-
Hallo,
Füge doch einfach Blindtext ein und probiere verschiedene Skalierungen aus. Dabei spiele auch mit der Größe des Browserfenster, dann wirst Du sehen was ich meine.
Okay...
netten Tag und...
dir auch
häng nicht wieder bis 2 vorm Rechner ;)
Jaaa Papa ^^. xD
Phil alias Junior ^^
-
-
-
-
-
-
-
-
Hallo Phil,
Mach's Dir nicht unnötig schwer. Den CSS code umzumodeln ist aufwändiger als mit der Positionierung der Elemente von vorne anzufangen. Farben und Gestaltung füge als Letztes hinzu, mache erst eine Leinwand und male dann dann das Bild.
Valides HTML vorbereiten, Doctype header body etc.
html und body margin entfernen und auf 100% Dimensionen setzen. (Warum steht hier mehrfach im Forum)
Du willst eine zentrierte Seite?
Also einen div id="rahmen"
#rahmen, Breite angeben z.B. x% mit margin positionieren (A% x/2%), höhe 100% und einen Rahmen drum, damit Du siehst ob's geklappt hat.
Anschauen. (Seite müßte eine wenig scrollen, da sie wegen des Rahmens etwas größer als 100% wird. Egal, der Rahmen belibt ja nicht.)
Headerimage einfügen positionieren
Menüleiste positionieren (am besten OHNE Tabelle)
Textblöcke positionieren.
Dabei mußt Du nicht immer divs verwenden. Eine Linkliste kann auch gesamt mit ul "angefaßt" und positioniert werden, da _muß_ kein extra div herum. Das erspart divsuppe und trägt zu einfachem/elegantem HTML bei.So nun haben wir (hoffentlich) einen Rahmen, der so ausieht wie gewünscht. Dann "malen" wir ihn auch erst jetzt aus, oder?
Wenn Du während des ersten Konstruierens das CSS ganz rudimentär auf das Notwendigste beschränkst, behälst Du den Überblick und findest leichter wo Du was ändern willst/musst.
Experimentiere herum: Was passiert wenn position relative oder abolute ist, oder wenn ich etwas floaten lasse? Dafür muß sich erst ein gewisses Verständnis, Gefühl entwickeln. Theoretisch verstehen ist eins, "begreifen" etwas zusätzliches, anderes, mMn.Also laß erstmal CSS das nicht zur Anordnung liegt weg, genau wie die Inhalte. Die kommen später hinzu. Außerdem haben die Leute hier im Forum es einfacher Dir zu raten, wenn der CSS nur relevanten Code enthält. Ob die Links dann rot oder blau hovern ist dann nur noch für Dich wichtig.
EM würde ich für den äußeren Rahmen nicht unbedingt nehmen. Wenn Du höher skalierst haut es die gesamte Seite aus dem viewport. Vielleicht doch besser %?
Am besten suchst Du Dir ein paar einfache Beispiel von Layouts und bastelst die groben Rahmen nach. Die Feinheiten kommen dann später. Verschaffe Dir erstmal den Überblick wie man zentriert, was position: bewirkt usw.
Fang beim Hausbau nicht mit dem Dach an ;) Die Feinheiten kommen dann später.
Noch ein Tipp zum Basteln: Das CSS ruhig zu Anfang als style block im html Dokument notieren. Ist ja eh erst eine Seite, macht also nichts.
Du mußt dann aber nicht mit mehreren Dateien arbeiten, und wenn jemand aus dem Forum etwas überprüfen will, muß er nur den sourcecode speichern und muß nicht noch extra die CSS Dateien anfordern.
Ein schneller Hack (aber nicht valide!) um Anweisungen NUR für den IE zu geben ist mit _ also z.B. _height:100%; das liest kein Browser.
Diese Anweisungen kann man dann später in ein "IE only CSS" auslagern und die _entfernen.netten Tag
^da Powl
-
-
-
-
habe d'ehre Phil
Hi Leute wie schaffe ich es das ich die beiden Divs
sind, genau nebeneinander positioniere?<div id="d3">
<div style="float:left;width:21.2em;height:37.5em;background:#cccccc;margin:0;padding:0;"></div>
<div style="float:left;width:21.2em;height:37.5em;background:#666666;margin:0;padding:0;"></div>
</div>Der float im rechten <div> unterbindet den bekannten 3px-Bug im IE
man liest sich
Wilhelm-
<div style="float:left;width:21.2em;height:37.5em;background:#cccccc;margin:0;padding:0;"></div>
<div style="float:left;width:21.2em;height:37.5em;background:#666666;margin:0;padding:0;"></div>Klappt nicht :(
Der linke ist schön da un positioniert aber der rechte fehlt komplett.mfg
Phil
-
habe d'ehre Phil
ist das noch die Adresse http://lmg.byto.de/PHIL/TEST/
Da hat sich nichts veraendert! (im CSS)man liest sich
Wilhelm-
Einen Moment ich musses kurz hochladen.
Da isses ^^ .
mfg
Phil
-
Habs hochgeladen. Im Moz klappts im IE nicht.
-
habe d'ehre Phil
Habs hochgeladen. Im Moz klappts im IE nicht.
in m-L margin:auto rausnehmen
in m-R margin-left rausnehmenman liest sich
Wilhelm-
habe d'ehre Wilhelm
und den position absolute in m-R !
man liest sich
Wilhelm-
und den position absolute in m-R !
Jetzt isses im Moz nur der linke der zu Sehn ist und im IE sieht man den linken und den rechten . Den rechten allerdings nur als schmalen Streifen linksbündig an links.
mfg
Phil
-
habe d'ehre Phil
IE kennt min-width nicht (m-R), deswegen der schmale Streifen
auf alle Faelle auf width abaendernDann schreibe bei #m-R wieder margin-left:21.2em
und dann neu:
* html #m-R {margin-left:0;}Empfehlenswert waere auch die Selektoren ohne "-" zu benennen.
Warum es bei dir nciht hinhaut, keine Ahnung auf den ersten Blick. der Fehler kommt von anderer Stelle. ich schau es mir morgen vormittag genauer an, dein css ist mir heute zu verwirrend.
man liest sich
Wilhelm-
IE kennt min-width nicht (m-R), deswegen der schmale Streifen
auf alle Faelle auf width abaendernGemacht, bringt nichts.
Dann schreibe bei #m-R wieder margin-left:21.2em
Gemacht, bringt nichts.
und dann neu:
* html #m-R {margin-left:0;}Gemacht, bringt nichts.
Empfehlenswert waere auch die Selektoren ohne "-" zu benennen.
Auch gemacht.
Warum es bei dir nciht hinhaut, keine Ahnung auf den ersten Blick. der Fehler kommt von anderer Stelle. ich schau es mir morgen vormittag genauer an, dein css ist mir heute zu verwirrend.
Danke.
Im moment sieht man nur die linke Seite also (mL) und die sieht man auch in beiden Brwosern da wo man se haben will.. aber wo ist mR?man liest sich
Hoff ich doch!
mfg
Phil
-
habe d'ehre Phil
es liegt an der zu geringen Breite von #d2 und daran, dass vertikal alles kastrierst. Dadurch siehst Du den Umbruch nach dem linken <div> nicht. Eine Verbreitung von #d2 auf 43.27em u.gr. zeigt beide Div-Bereiche.
Ich habe mir jetzt mal Deine Konstrukte angeschaut. Irgendwie krankt es schon ab der Zentrierung. Du pferchst irgenwie alles in feste Breiten und Hoehen.
man liest sich
Wilhelm-
Hallo Phil!
Ich habe mir jetzt mal Deine Konstrukte angeschaut. Irgendwie krankt es schon ab der Zentrierung. Du pferchst irgenwie alles in feste Breiten und Hoehen.
Nicht nur daran. Alles ist auch immer fein säuberlich in DIVs verpackt, dann werden einem Element bestimmte CSS-Eigenschaften zugewiesen, nur um im nächsten Augenblick durch andere Werte ersetzt zu werden, usw. usw.!
Mir scheint hier nach wie vor ein grundlegendes Verständnisproblem (mindestens was CSS angeht) vorzuliegen, gepaart mit jungendlicher Ungeduld und dem Wunsch, in 2 Tagen eine komplette Homepage aus dem Boden stampfen zu wollen.
Links zu Tutorials, Beispielen, etc. hast du ja mehr als genug bekommen - man muss sie natürlich auch durcharbeiten & verstehen. Bei echten Verständnisproblemen kann man dann ja hier nachfragen.
Gruß Gunther
-
-
-
-
-
-
WEnn ich das mache, dann hab ich im IE nen dünnen streifen und im Moz ist das war rechts sein soll links und links sieht man nicht mehr.
mfg
Phil
-
-
-
-
-