"Webdesign -Problem" mit FX

    Hi,

    bei meiner Umschulung sind wir gerade bei Html, PHP usw., aber irgendwie zeigt der Fx nur Müll an.

    Ein Container mit einen 1px großen Rahmen und 760px Breit, in diesem
    1 Container "Titel" Breite 100%
    1 Container "Navi" Breite 20% links
    1 Container "Inhalt" Breite 80% rechts

    der 1px große Rahmem von Hauptcontainer wird gar nicht angezeigt
    FX1.01 macht den Container "Titel" wie gewünscht 760px breit, bei 1.04 ist dieser aber deutlich größer
    "Navi" und "Inhalt" bekommt man so nicht nebeneinander, obwohl beide Werte 100% ergeben und da gibt es wieder einen Unterschied zwischen FX1.01 und 1.04. Mein Nachbar mit dem Standard1.01 ändert den Wert auf 78% und beide Container sind nebeneinander, ich (1.04) muss den Wert auf 72% ändern, obwohl bei dem Wert eine riesige Lücke zwischen beiden Container ist, werden bei 73% beide wieder Untereinander angezeigt. :?:

    kann ich erst morgen machen, da da ja auf dem Schulrechner liegt, war ja eigentlich nur eine Vorführung des Dozenten (deshalb in ""), wie man am besten die Seite anpasst, das sie halbwegs vernünftig auf einen 15", aber auch auf einen 21" aussieht.

    meinte den "div" Container

    html Teil sah so aus, und wurde mit CSS formatiert

    <div id="box">
    <div id="titel">Titel</div>
    <div id="navi">Navigation</div>
    <div id="inhalt">Inhalt</div>
    </div>

    der IE hat das nicht zentriert aber sonst wie gewollt angezeigt, FX zentriert aber Problem mit der Containerformatierung. Komisch nur, das beim Nachbarn mit fx1.01 beim Container "Titel" die Zeile 100% breite egal war, ich die Zeile löschen müsste und der 1.04 den Bereich automatisch auf 100% formatiert hat

    Aehm. Mir ist neu, dass 1.0.1 und 1.0.4 andere Renderer haben, die muessten eigentlich gleich sein, folglich auch die Anzeige der Webseiten. Prueft mal ob eure Installtionen korrekt sind und ob Erweiterungen die Ursache sein koennten. Und: habt ihr auch den gleichen Doctype drin, denke mal schon, aber man kann nie wissen.
    Zu den Containern laesst sich so halt wenig sagen, da muss man auf den Code warten - weil ich bezweifle, dass ihr irgendwo noch padding oder so dazu gemacht habt.
    Davon abgsehen ist es unlogisch einen uebergeordneten Container eine feste Breite zu geben und den Untergeordneten dann Prozentangaben zu geben. Vielleuicht fuers entwicklen, weil mans da leichter hat, aber danach sollte man es einmal ausrechnen und festlegen, damit der browser weniger selbst denken muss wie breit er was macht. Das fuehrt (oder kann fuehren) bei groeszeren Seiten dann zum schnelleren Seitenaufbau, bei so einem Einfachbeispiel sicherlich nicht.

    Wie gesagt, ladet am besten mal eure Testseite irgendwo hoch, dann kann euch sicher geholfen werden :)

    der "Hauptcontainer" hat eine feste Größe, weil er uns wie gesagt zeigen wollte wie man auf die unterschiedliche Monitor Größen reagiert. Beim 15" Vollbild und beim 21" eben zentriert, so das rechts und links ein Rand ist und die nicht wie bei den meisten Seiten nur rechts.

    Mit festen Größen hat es ja auch nicht funktioniert, wenn der ganze 760px breit ist, sollte ja bei 100px und 600px beide nebeneinander passen, da 700px, waren aber beide untereinander, da zusammen größer (laut FX Darstellung).

    werde morgen mal den CSS Code posten, da wir beide die Datei vom Doz auch getstet habe und das mit dem selben Ergebnis kann es eigentlich nicht Code liegen.

    Zitat von Dexter

    Mit festen Größen hat es ja auch nicht funktioniert, wenn der ganze 760px breit ist, sollte ja bei 100px und 600px beide nebeneinander passen, da 700px, waren aber beide untereinander, da zusammen größer (laut FX Darstellung).


    Wenn ihre keine Rahmen, Aussen oder Innenabstaende hinzugefuegt habt, sollten die ineinander passen, ja.

    Geht's mit dem gleichen Quelltext denn beim Dozenten und auch im gleichen Firefox? Weil zwischen 1.0.1 und 1.0.4 duerften keine Darstellugnsunterschiede sein (davon abgesehen sollte der 1.0.1er PC mal geupdatet werden)

    CSS sieht so aus

    #box {
    width: 760px;
    border:1px solid black;
    margin:auto;
    }

    #titel{
    border:1px solid blue;
    padding:10px;
    }

    #navi{
    width: 20%;
    border:1px solid red;
    float:left;
    padding:10px;
    }

    #inhalt{
    width: 80%;
    border:1px solid green;
    float:right;
    padding:10px;
    }

    Kann ja dann auch garnicht gehen.
    Breite eines containers: Margin + border + padding +width

    Lest euch mal das durch: http://www.css4you.de/wsboxmodell/

    Dasses im IE geht liegt am Fehlerhaften Boxmodel - siehe letzte Grafik auf der Seite.

    Wenn ihr also Rahmen und Padding weg macht opassen die Cotnainer auch nebeneinander (probiert stattdessen mal mit background-color die kaesten zu unterscheiden, oder macht inhalt rein)

    Gruesse,
    xeen

    Aendert nichts daran, dass er zusaetzlich zur angegeben Breite zaehlt (davon abgesehen waere "paddign sorgt dafuer dass der rahmen immer 10px abstand vom inhalt hat" passender weil es das "gebilde" ja vergroessert). Und die Rahmen gibt's ja auch noch.

    warum ist aber um das ganze gebilde kein schwarzer Rahmen und warum wird es nicht angepasst, schließlich werden Prozentwerte und nicht feste Pixel als Breite für die beiden Container angegeben?

    Einmal editiert, zuletzt von Dexter (26. Mai 2005 um 10:43)

    Rahmen bin ich mir nicht sicher. Die Breitenangaben beziehen sich aber auf die 760px, d.h. es muesste stimmen. Kannst du den Quelltext des Dokuments mal posten, vor allem wegen dem DocType...

    <html>
    <head>
    <style type="text/css">
    <!--
    #box {
    width: 760px;
    border:1px solid black;
    margin:auto;
    }

    #titel{
    border:1px solid blue;
    padding:10px;
    }

    #navi{
    width: 20%;
    border:1px solid red;
    float:left;
    padding:10px;
    }

    #inhalt{
    width: 80%;
    border:1px solid green;
    float:right;
    padding:10px;
    }

    -->
    </style>
    </head>
    <body>
    <div id="box">
    <div id="titel">Titel</div>
    <div id="navi">Navigation</div>
    <div id="inhalt">Inhalt</div>
    </div>
    </body>
    </html>

    Um "Titel" ist der schwarze Rahmen, ansonsten rechnet der FX 20% von 760px + Rahmenstärke+ den Paddingwert und das geleiche beim Container "Inhalt". Ergebnis ist dann natürlich größer 760px und kann nicht nebeneinander sein.

    Ja, das mit dem Rahmen stimmt, ist so aber auch standardisiert. Nur der IE macht es falsch.

    Zum Rahmen: Damit der Fx um die zwei floatenden Container den Rahmen macht muss man einfach ein br einfuegen mit der Eigenscahft clear: all, damit das ganze auch als block abgeschlossen ist.

    #clear {
    clear:both;
    }
    <br id="clear">


    Wenn du dann Rahmen etc. haben willst musst du den ganzen Kram verschachteln - eine "einfachere" loesung faellt mir auch grad nicht ein...