M-Explorer und Mozilla Firefox Ansicht ?

    Hallo nochmal,


    Ja langsam wird das was ich lerne umgesetzt, was mich aber gerade sehr wundert ist, das meine Seite unter dem Explorer 6 von Microsoft gut aussieht aber wenn ich mir das ganze unter Mozilla Firefox anschaue, bekomme ich ne Krise!


    Was habe ich den da falsch gemacht *rot



    http://www.fueten.com


    Danke für euere Hilfe, bin echt mal gespannt wo dran das liegt.


    Gruß Detlef

    Jesses ...


    Dass ich sowas nochmal sehen darf ... *gg*


    Was glaubst du, worans liegt. Was ich so sehe, ohne den Quelltext gesehen zu haben, hast du ein Problem mit Margin und Padding-Werte ...


    IE ist kein guter Diener ...


    Als Tipp kann ich dir nur raten, dass du dein Konstukt in die Tonne klopfst und mit einer ganz simplen Tabelle oder Div anfängst.


    Du kannst zB auch zwei Tabellen nebeneinander floaten lassen, wenn dus ohne Tabelle ned magst.

    hmmmm,


    Naja, brauche ja nicht unbedingt ne Tabelle, wenn es auch anders geht, aber irgendwie raffe ich es net, dies mit div umzusetzen.


    Naja, muss ich weiter testen, testen, testen...


    Trotzdem danke fürs anschaun


    Detlef

    Versuchs mal damit:


    Html-Seite:


    <div id="mittle">


    Inhalte, die du in der Mitte haben willst


    </div>


    <div id="rechts">


    Inhalte, die du rechts platzieren willst.


    </div>


    CSS:


    #mitte {
    margin-top: 5em
    marigin-left: 10em;
    width: 12em;
    float:left;
    }


    Hierbei ist es ratsam einen Dummie-Border zu setzen, damit du weisst, wie er den Div platziert!


    #rechts {
    margin-top: 5em;
    margin-left: 22em;
    width: 5em;
    }


    Auch hier ist es ratsam einen Dummie-Border zu setzen, dann kannst du die Positionen besser festlegen. Relative Werte ermöglichen es, dass du die Seite besser skalieren kannst.


    Das ist nur ein Beispiel, aber so sollte es eigentlich funzen und auch für alle Browser brauchbar aussehen.

    danke dir, werden am Wochenende dies mal durch testen, aber denke mal da kommen bestimmt nochmal neue fragen auf....


    Aber wenn du sagst, fangen wir noch mal neu an, übung macht den meister...


    schönes Wochenende zusammen


    Detlef

    So da bin ich noch mal,


    hab die Seite noch mal angefangen neu zu machen, aber irgendwie hänge ich jetzt wieder un komme nicht weiter. Könnte mir mal einer unter die Arme greifen ?


    Folgende Problem, die man sich auch anschauen kann


    http://www.fueten.com


    Bei Mozilla:


    1) Wird die Schriftgrösse nicht angenommen
    2) Wird die Hintergrundfarbe der unter Menüs nicht angenommen


    Zwischen Mozilla und Explorer


    1) Ist die Seitliche Verschiebung der Navileiste total unterschiedlich.


    Waäre schön wenn ich hilfe bekommen könnte, werden Euch den Code mal reinkopieren, aber auch weiter testen.


    Danke schon mal für die Hilfe, Detlef


    html:


    <html>


    <head>
    <link rel="stylesheet" href="./designtest.css" type="text/css">
    <title> test</title>


    <style type="text/css">



    </style>


    </head>
    <body >


    <!-- Kopf -->
    <div id="Kopfhintergrund">


    </div>
    <!-- Kopf Ende -->


    <!-- Box links -->
    <div id="LinksHintergrund">


    <!-- Navigation -->
    <ul span class="navi">
    <li span class="navi-0"> Navigation</li></span>
    <li span class="navi-1"> Gemeindegruppen</li></span>
    <li span class="navi-2"> <a href="./Gemeindeleitung.html"> Gemeinedeleitung </a> </li></span>
    <li span class="navi-2"> <a href="./Hauskreise.html"> Hauskreise </a></li></span>
    <li span class="navi-2"> <a href="./Sonntagsschule.html"> Sonntagsschule </a></li></span>
    <li span class="navi-2"> <a href="./Jungschar.html"> Jungschar </a> </li></span>
    <li span class="navi-2"> <a href="./kindertreff.html"> Kindertreff </a></li></span>
    <li span class="navi-2"> <a href="./Teens.html"> Teens </a></li></span>
    <li span class="navi-2"> <a href="./OpenHouse.html"> Open House </a></li></span>
    <li span class="navi-2"> <a href="./Singteam.html"> Singteam </a></li></span>
    <li span class="navi-1"> Termine &amp; Veranstaltungen</li></span>
    <li span class="navi-2"> <a href="./r-Termine.html"> Regelm&auml;&szlig;ige Veranstaltungen </a> </li></span>
    <li span class="navi-2"> <a href="./besondere.html"> Besondere Veranstaltungen </a></li></span>
    <li span class="navi-2"> <a href="./Openhouse.html"> Openhouse </a></li></span>
    <li span class="navi-1"> Wer wir sind... <br />...und was wir glauben </li></span>
    <li span class="navi-2"> <a href="./prolog.html"> Prolog </a> </li></span>
    <li span class="navi-2"> <a href="./wer.html"> Wer wir sind </a></li></span>
    <li span class="navi-2"> <a href="./Arbeiten.html"> Wie wir arbeiten </a></li></span>
    <li span class="navi-2"> <a href="./frei.html"> Freie </a> </li></span>
    <li span class="navi-2"> <a href="./Evangelisch.html"> evangelische </a></li></span>
    <li span class="navi-2"> <a href="./Gemeinde.html"> Gemeinde </a></li></span>
    <li span class="navi-1"> Abendmahl und Taufe</li></span>
    <li span class="navi-2"> <a href="./Abendmahl.html"> Abendmahl </a> </li></span>
    <li span class="navi-2"> <a href="./Taufe.html"> Taufe, Kindersegnung </a> </li></span>
    <li span class="navi-2"> <a href="./Glaubenstaufe.html"> Glaubenstaufe </a></li></span>
    <li span class="navi-1"> Gemeinde...</li></span>
    <li span class="navi-2"> <a href="./Organisation.html"> ...Organisation </a> </li></span>
    <li span class="navi-2"> <a href="./Gemeindemitglieder.html"> ...Mitglieder </a> </li></span>
    <li span class="navi-2"> <a href="./Gemeindemitgliederversammlung.html"> ...Mitgliederver. </a> </li></span>
    <li span class="navi-2"> <a href="./Gemeindeleitung.html"> ...Leitung </a> </li></span>
    <li span class="navi-2"> <a href="./Gemeindegruppen.html"> ...Gruppen </a> </li></span>
    <li span class="navi-2"> <a href="./Gottesdienst.html"> ...Gottesdienst </a> </li></span>
    <li span class="navi-2"> <a href="./Kinder.html"> ...Kinder </a> </li></span>
    <li span class="navi-2"> <a href="./finanziert.html"> ...Finanzierung </a> </li></span>
    <li span class="navi-1"> Mission....</li></span>
    <li span class="navi-2"> <a href="./mali.html"> Klingelhöfer in Mali </a> </li></span>
    <li span class="navi-2"> <a href="./weg.html"> Der Weg </a></li></span>
    <li span class="navi-2"> <a href="./bibelschule.html"> Bibelschule NL </a></li></span>
    <li span class="navi-2"> <a href="./Schmaranzer.html"> Familie Schmaranzers </a> </li></span>
    <li span class="navi-1"> Verschiedenes</li></span>
    <li span class="navi-2"><a href="../Anfahrt/Anfahrt.html">Anfahrt</a></li></span>
    <li span class="navi-2"><a href="./kontakt/Kontakt.html">Kontakt</a></li></span>
    </li>
    </ul>
    <!-- Navigation ENDE-->
    </div>
    <!-- Box Links Ende -->


    <!-- Box links -->
    <div id="MitteHintergrund">


    </div>
    <!-- Box Mitte Ende -->


    <!-- Box rechts -->
    <div id="RechtsHintergrund">


    </div>
    <!-- Box rechts Ende -->


    </body>
    </html>


    CSS


    /* Bestimmen Hintergrundbild */
    body { background-color :#bebebe ; }


    a {text-decoration: none; color: blue;}
    a:hover {color:ff0000}


    /* Hintergruende*/
    #Kopfhintergrund {
    background-color :black;
    color:white;
    height: 8em;
    width: 50em;
    margin-top: 5em;
    margin-left: 5em;
    }


    #LinksHintergrund {
    background-color :ffb061;
    height: 80em;
    width: 15em;
    margin-top: -1em;
    margin-left: 5em;
    list-style: none;
    }


    #MitteHintergrund {
    background-color :white;
    height: 80em;
    width: 30em;
    margin-top: -80em;
    margin-left: 15em;
    }


    #RechtsHintergrund {
    background-color :ffb061;
    height: 80em;
    width: 10em;
    margin-top: -80em;
    margin-left: 45em;
    }


    .Navi{
    margin-left: -1px;
    list-style: none;
    font: 10pt/12pt;
    font-family:Arial;
    text-align:left;
    width: 130px;
    border-style: solid;
    border-color: blue;
    border-top-width: 0em;
    border-bottom-width: 0em;
    border-left-width: 0em;
    border-right-width: 0em;


    }


    .navi-0{
    background:Gray;
    text-align:center;
    color: white;
    border-style: solid;
    border-color: blue;
    border-top-width: 0.1em;
    border-bottom-width: 0.1em;
    border-left-width: 0.1em;
    border-right-width: 0.1pem;
    padding: 0em 0em 0em 0.5em;
    }


    .navi-1{
    background:gray;
    color: white;
    border-style: solid;
    border-color: blue;
    border-top-width: 0em;
    border-bottom-width: 0.1em;
    border-left-width: 0.1em;
    border-right-width: 0.1em;
    padding: 0em 0em 0em 0.5em;
    }


    .navi-2{
    background:FFDEAD;
    border-style: solid;
    border-color: blue;
    border-top-width: 0em;
    border-bottom-width: 0.1em;
    border-left-width: 0.1em;
    border-right-width: 0.1em;
    padding: 0em 0em 0em 0.5em;


    }[/url]

    Ich liste dir mal die Fehler auf:


    1. <li span class="navi-0"> Navigation</li></span>


    Das geht gar nicht ...


    Entweder:


    <li><span class="navi-0">Navigation</span></li>
    oder
    <li class="navi-0">Navigation</li>


    Beides in einem Befehl geht nicht!!!


    2. <li span class="navi-2"> <a href="./besondere.html"> Besondere Veranstaltungen </a></li></span>


    Pfuiiii!!!!!


    Auch hier der gleiche Fehler UND ein Pfadfehler


    <li class="navi-Z"><a href="../besondere.html">Besondere Veranstaltungen</a></li>


    a.) Großbuchstaben in Klassen sind nicht erlaubt.
    b.) Möchtest du in deiner Ordnerstruktur eine Ebene höher dann bitte: ../datei


    So nun zu meinem Lieblingsteil ... CSS.


    Ich rate dir sehr, dass du dir ein Buch kaufst, oder du bezahlst mir 50 €/Stunde für Beratungskosten.


    1. a:hover {color:ff0000}


    Das geht gar nicht!!!


    a:hover darf nie ohne a:link, a:visited und a:active stehen.


    2. /* Hintergruende*/
    #Kopfhintergrund {
    background-color :black;
    color:white;
    height: 8em;
    width: 50em;
    margin-top: 5em;
    margin-left: 5em;
    }


    Warum hast du eine Höhe von 50em angegeben. Meinst der User freut sich, dass Du ihm was zum Scrollen gegeben hast?


    Ich versteh den Sinn dieses divs nicht und du hast bei allen IDs irgendwie mit Großbuchstaben gearbeitet, das ist nicht erlaubt und es wundert mich nicht, dass die Browser das nicht anzeigen.


    Also das ist kurios ...


    2. ... border-top-width: 0em;
    border-bottom-width: 0em;
    border-left-width: 0em;
    border-right-width: 0em;


    Vorhin hast du ihm einen Border gegeben, damit du sie mit der Breite wieder wegmachst? Bitte erklär mir das mal.


    Auf den Rest geh ich nimmer ein, denn ich bekomm schon vom Hinschauen graue Haare.


    Bitte kauf dir ein gutes Buch über CSS oder besser noch, Du schnappst dir mal SelfHTML, das ist ohne Zweifel die beiste Lektüre.


    Was du da zusammengeschrieben hast, ist wirklich sehr schlecht.


    Warum hast du nicht die Liste formatiert? Warum machst du dir absichtlich das Leben schwer. Diese Navigation kann man mit einer ID und 2 Klassen machen.


    *tztztz* Detlef ... auch ein Gottesfürchtiger Mensch hält sich an die Bibel, wenn er nicht mehr weiter weiss, daher halte du dich bitte auch an die Bibel für HTML und CSS - SelfHTML!


    In diesem Sinne.

    Guten Morgen,


    weißt du, ja ich bin am üben und lernen, ja kann auch sein, das ich vielleicht zu blöd dazu bin, ja ich habe auch Bücher hier, für CSS und Html, und du kannst mir glauben, ich tue seit 2 Wochen fast nix anders als drin zu lesen.


    Aber weiß du, meckern ist immer leicht. Habe alle deine Fehler wie du sagt raus gemacht und der Unterschied zwischen den beiden Explorer und Mozilla bleiben immer da.


    Aber trotzdem danke ich dir für deine Mühe und Hilfe, werde da schon durch kommen.


    Aber bitte vergleiche nicht die Bibel mit irgendein anders Buch, das ist nicht möglich.


    Es mag sein, nein es ist so, das was ich lese nicht (noch) nicht umsetzen kann, aber es ist halt viel an Infos die ich umsetzen und beachten muss, aber was soll, das bekomme ich schon hin.


    Werde dich nicht weiter deine so Kostbare Zeit in Anspruch nehmen.


    Danke für deine Hilfe.


    Detlef


    Nicht jeder Mensch ist gleich und rafft daher manche Sache so wie andere, aber jeder Mensch hat seine Vorzüge.......

    Morgen Detlef,


    mühsam ernährt sich das Eichhörnchen - ich habe deine Bemühungen verfolgt und es sind Fortschritte erkennbar.


    Berichtige mal vorerst deinen Code (keine Garantie für Richtigkeit, da ich gerade wenig Zeit es selber zum Testen hatte - aber beim Überfliegen können die Rot markierten Bereich nicht richtig sein - also ersatzlos löschen. Den Rest bekommen wir schon Schritt für Schritt hin!



    ul#navi{
    margin:0;
    padding:0;
    float: center;
    width:8em;
    margin-left:10px;
    margin-top:10px;
    background-color:gray;

    }


    ul#navi a:Link (was möchtest du damit erreichen?)
    {
    background-color:white;
    text-decoration:none;
    float: left;
    width:8em;
    }


    ul#navi li {
    margin:0;
    padding:0;
    list-style:none;
    }


    Beschreibe mal exakt (am besten per Grafik) was du erreichen möchtest. Die Grafik kannst du ja auf deine Website stellen.


    Axel


    PS AN ALLE: es gibt keinen Grund, ungeduldig zu werden oder missverständliche bzw. verärgerte Antworten zu schreiben - hier soll geholfen werden - für schlechte Laune empfehle ich eine runde Joggen oder Schwimmen... im Zweifelsfall, bevor eine heftige Antwort kommt, dann lieber keine (oder mit Humor :)
    PSS: Meine Meinung - es darf aber jeder seine Meinung haben bzw. Vertreten, dann aber in einem eigenen Threat

    Guten morgen Alex,


    danke, hab dir mal ein Bild reingetstellt, wie es ungefähr aussehen sollte.


    komme der sache immer ein stück näher....


    was ich garnicht verstehe ist der unterschied zw explorer und mozilla, aber denke, das kriege ich auch noch in den griff, werde weiter lesen, testen und üben...


    bin für jede hilfe dankbar.


    gruß Detlef

    Der Unterschied zwischen IE und Mozilla liegt darin, dass IE anders rändert. DH dass er margin, padding anders interpretiert, als der Mozilla oder Opera. Während Opera und Mozilla margin und padding-Werte richtig anzeigen, gibt der IE Pixel hinzu oder lässt sie weg. Der IE ist nicht in der Lage HTML richtig zu interpretieren, daher schauen HTML-Seiten, die für den IE konzipiert sind auch in anderen Browsern so grottig aus.


    Der 7er-IE ist genauso schlimm, wie seine Vorgängern mit dem einen Unterschied, dass er endlich PNG darstellen kann - was aber einem Desinger nicht viel bringt, wenn 70 % der IE-User noch mit dem 6er fahren.


    Daher muss man für den IE immer wieder Hacks bauen, dass es auch der IE richtig anzeigt - bzw. im IE-Falle für ihn richtig.


    Wenn ich eine Auftragsarbeit bekomme, muss ich eine Seite für 7 Browser konzipieren:


    * Konqueror
    * Safari
    * IE6
    * IE7
    * Mozilla/Firefox
    * Opera
    * Netscape


    Wobei ich die ersten Beiden Browser nicht mal selbst testen kann, da muss ich Kollegen oder Freunde bitten, sich die Seiten mit deren Browser anzuschauen.


    Paradeproblem ist zB fixierte Menüleisten, die man im Mozilla und Opera problemlos darstellen kann. Der IE schafft das nicht. Grund? Keine AHnung, vielleicht weil die Entwicklier für den IE einfach pennen? Ich weiss es nicht. Es ist halt nunmal so. Und solange 85% der User mit dem IE surfen, wird sich das Problem nicht wirklich lösen. Daher ist es halt meine Arbeit, auch für die IE-User Seiten zu konzipieren, die dann schlussendlich für alle User / Browser gelten.


    Ich hoffe nur, dass Opera mehr in den Mittelpunkt gerückt wird. Es gibt keinen besseren Browser.

    Das denke habe ich schon bemerkt,


    bin ich also auf dem falschen weg, gibt es einen anderen ?


    oder muss ich jetzt auch Hacks bauen, was das auch immer ist ?


    naja, da werde ich auch hinter kommen, step bye step.


    danke für die Info


    Detlef

    Du bist auf dem richtigen Weg, man kann nich von Anfangan sich um alle Browser kümmern, versuch einfach zu erst bei einem Browser zu bleiben.


    Ich würde dir den IE emfehlen, einfach weil die meisten ihn Benutzen, wenn du dann mit HTML und CSS gut umgehen kannst, dann kannst du versuchen auch deine Webseite auf einen anderen BRwoser anzupassen.


    Beim Anpassen wirst du aber auch mal merken das du nicht alles umsetzen kannst was du willst, du muss einen Gemeinsamen Nenner finden.


    Hacks sind oft Fehler im Code, die dafür führen das der IE bestimmte Funktionen nicht ausführt und so deine Webseite verändert.


    Als zweiten Browser fürde ich dir Firefox emfehlen, da er der 2. häufigst genutze Browser ist und Webseiten wirklich ohne Fehler darstelt, auser wen sie auf den IE angepast sind.

    Denke auch, das ich nicht alle Browser bedienen kann am anfang, aber den ID und den Firefox sollte schon am anfang passen.


    ja sehe wie es sich langsam aber sicher entwickelt.


    hoffe den rest bekomme ich auch noch hin.


    Detlef

    Soooooooo,


    hab es fast hinbekommen, zwei sache noch die ich noch nicht hinbekommen habe,


    1) Die Hindergrundfarbe bei den Link
    2) Border ganz oben, wenn ich Top einstellen, bekomme ich dadurch in den mitten überall doppelt.


    aber werde weiter machen, wollte es nur mal kurz mitteilen.


    Detlef


    Schönes Wochenende zusammen, ich werde weiter dran basteln....

    soooooooooooooo


    freuuuuuuuuuuuu


    na es macht sich langsam, ein paar kleine Fehler zwischen den beiden Browser aber im grossen und ganzen schon nicht schlecht, denke ich...


    könnt es euch ja mal anschaun und was dazu schreiben.....


    http://www.fueten.com


    Gruß Detlef

    geht doch, ich würde dir nur wegen dem beispiel text den ständert text nehmen:


    Code
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden