Porbs mit CSS-Layout


  • be_nearly
  • 1046 Aufrufe 10 Antworten

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Porbs mit CSS-Layout

    Sers alle zusammen,

    ich habe mich nach längerem dieses Wochenende dazu entschlossen meine HP nach 4 Jahren von den alten Frames zu befreien.
    Ich möchte allerdings auch beim Neuen ein festes Layout mit fixer Größe beibehalten. Mein Problem das ich bei der Umsetzung von alt auf neu allerdings habe ist, dass der IE im Gegensatz zum Firefox die Pixelangaben irgendwie komplett anderst anzeigt und somit eine genaue Einteilung mit gleichen Abständen für beide Browser mir bisher nahezu unmöglich erscheint.
    Ein weiteres Problem ist, dass ich die Seite jetzt für den IE in der groben Struktur fertig hätte, der Firefox mir wiederrum etwas ganz anderes anzeigt und zwei Boxen komplett ineinander laufen läßt, obwohl sie im IE schön getrennt sind.
    Vielleicht kann mir ja jemand des Rätsels Lösung verraten wo sich mein Fehler versteckt ich bin über jede Hilfe dankbar.

    Hier ein Bild wie es sein sollte und vom IE angezeigt wird


    und so zeigt es der Firefox an


    Der Code sieht wie folgt aus:

    <style type="text/css">
    body {
    color: black; background-color: #516582;
    font-size: 100.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0px; padding: 0;
    text-align: center; /* Zentrierung im Internet Explorer */
    }



    div#Seite {
    text-align: left; /* Seiteninhalt wieder links ausrichten */
    margin: 30px auto ;
    width: 950px;
    height: 735px;
    padding: 18px;
    overflow: hidden;
    border: 5px ridge silver;
    }
    html>body div#Seite {
    border-color: gray; /* Farbangleichung an den Internet Explorer */
    }

    h1 {
    height: 32px;
    font-size: 24px;
    margin: 0px 0px 10px; padding: 0px;
    text-align: center;
    background-color: #fed;
    border: 2px ridge silver;
    }
    html>body h1 {
    border-color: gray; /* Farbangleichung an den Internet Explorer */
    }

    ul#Navigation {
    font-size: 0.83em;
    float: left; width: 190px; height:620px;
    margin: 0 10px 10px 0px; padding: 0;
    overflow: auto;
    border: 1px dashed silver;
    }

    div#Info {
    font-size: 0.9em;
    float: right; width: 150px; height: 620px;
    margin: 0 0px 10px 10px; padding: 0;
    overflow: auto;
    background-color: #eee; border: 1px dashed silver;
    }


    div#Inhalt {
    height: 620px;
    background-image: url(bilder/test.jpg);
    margin: 0 10px 0 10px;
    padding: 0;
    border: 1px dashed silver;
    }



    div#Fusszeile {
    clear: both;
    height: 14px;

    background-color: red; border: 1px solid silver;
  • Ich hoffe mal du meinst den Rest, weil die ganzen Formatierungen hab ich oben ja schon aufgeführt.

    <body>

    <div id="Seite">

    <h1></h1>

    <ul id="Navigation">

    </ul>

    <div id="Info">


    </div>

    <div id="Inhalt">
    </div>

    <div id="Fusszeile">

    </div>

    </div>

    </body>
    </html>
  • sers.
    so habs dir mal so geschr, wies bei mir in beiden browsern 100%ig funktioniert.

    HTML-Quellcode

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    2. <html>
    3. <head>
    4. <title>Unbenanntes Dokument</title>
    5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    6. <style type="text/css">
    7. body {
    8. color: black;
    9. background-color: #516582;
    10. }
    11. div#Seite {
    12. margin: 30px auto;
    13. width: 950px;
    14. height: 735px;
    15. padding: 18px;
    16. overflow: hidden;
    17. border: 5px ridge silver;
    18. }
    19. html>body div#Seite {
    20. border-color: gray; /* Farbangleichung an den Internet Explorer */
    21. }
    22. h1 {
    23. height: 32px;
    24. padding: 0px;
    25. text-align: center;
    26. background-color: #fed;
    27. border: 2px ridge silver;
    28. margin: 0px 0px 10px 0px;
    29. }
    30. ul#Navigation {
    31. width: 190px;
    32. height: 620px;
    33. padding: 0px;
    34. margin: 0px;
    35. overflow: auto;
    36. border: 1px dashed silver;
    37. float: left;
    38. }
    39. div#Inhalt {
    40. height: 620px;
    41. width: 200px;
    42. background-image: url('bilder/test.jpg');
    43. float: left;
    44. margin: 0px 0px 0px 10px;
    45. padding: 0px;
    46. border: 1px dashed silver;
    47. }
    48. div#Info {
    49. width: 150px;
    50. height: 620px;
    51. padding: 0px;
    52. margin: 0px 0px 0px 10px;
    53. overflow: auto;
    54. border: 1px dashed silver;
    55. background-color: #eeeeee;
    56. float: right;
    57. }
    58. div#Fusszeile {
    59. clear: both;
    60. height: 14px;
    61. background-color: red;
    62. border: 1px solid silver;
    63. padding: 0px;
    64. }
    65. </style>
    66. </head>
    67. <body>
    68. <div align="center">
    69. <div id="Seite">
    70. <h1></h1>
    71. <ul id="Navigation"></ul>
    72. <div id="Inhalt"></div>
    73. <div id="Info"></div>
    74. <div id="Fusszeile"></div>
    75. </div>
    76. </div>
    77. </body>
    78. </html>
    Alles anzeigen


    ´gru
    [size=1][FONT="Courier New"]###############_###_####_
    #_ __ #___ _ _| |_(_)__(_)__ _ _ _###############new uploads: [1] [2] [3] [4] [5] [6] [7] [8]
    |#'##\/ _ \ '_|##_| / _| / _` | ' \
    |_|_|_\___/_|##\__|_\__|_\__,_|_||_|###############Bis 28. Sept. weg[/FONT][/size]
  • Thx für die schnelle Hilfe, da hab ich mal wieder an der komplett falschen Stelle nach meinem Fehler gesucht. Wie hast du dich in die CSS Programmierung eingelernt? Kannst du mir da ein gutes Buch empfehlen? Ich hätte da nämlich schon wieder so ein paar Modifizierungen die ich noch tätigen möchte und immer nur auf die Hilfe anderer angewiesen zu sein will ich auch nicht, das eigene Programmieren ist es ja was Spaß macht.
    Bei der Lösung von dir ist die mittlere Spalte mom noch an die linke Seite angelehnt. kann ich da gleich irgendwie die Größe so angeben das sie mir zentral in der Mitte liegt das sie nach unten oben links und rechts den selben Abstand hat?
    Desweiteren fehlt mir irgendwie gerade der Ansatz dazu wie ich es schaffe das alle Teile bis auf den Mittleren auf dem Bildschirm fest bleiben und der Mittlere mit dem Inhalt allein gescrollt wird, sodass ich meine Navigation die Leiste oben und unten immer sichtbar habe. Also die außeren Teile wie ein fester Rahmen sind.
    Mit Frames und Tabellen ging das früher zumindest nur bei CSS ist das für mich als absoluter Anfänger irgendwie zuviel.
  • einlernen in css geht eigentlich sehr schnell und auch gut ohne buch (eigentlich ist fast alles selbsterklärend und wenn nicht hilft google einem immer weiter) wenn du es aber doch lieber mit einem buch versuch möchtest empfehle ich dir Little Boxes...

    das inhaltsdiv lässt sich mit "overflow: scroll;" in deinem css file problemlos scrollbar machen.
    um die richtigen abstände hinzubekommen spiel einfach mal mit den margin und padding attributen rum.
    Signatur entsprach nicht den Boardregeln.
    ->gelöscht by lukas2004
  • Die Sache ist die, dass das achso tolle Microsoft sich gesagt hat: Wer muss schon Standarts einhalten? Wir nicht.
    Der Internet Explorer 6 intpretiert das CSS-Box-Modell falsch, d.h. wenn du im Internet-Explorer was machst sieht das in Browsern die CSS relativ gut umsetzen vllt. anders aus...

    Der Internet-Explorer schert sich leider auch nicht um Standarts.

    Ich diese Haltung fällt Microsoft nochmal auf die Füße.

    mfg
    Tischler
  • diese haltung wird ja zum glück (zumindest beim IE) nicht weitergeführt.
    Der IE7 stellt internetseiten wirklich ordentlich dar und hält sich auch an die W3C standarts.
    Ausserdem hast du bei jedem browser unterschiedliche ergebnisse auch Opera und Mozilla unterscheiden sich teilweise enorm.
    Bis jetzt habe ich bei größeren web Projekten eigentlich immer mindestens 5 stylesheets angelegt (ie.css, gecko.css, opera.css, mobile.css, print.css) das gibt einem einfach mehr freiheiten und spart enorm viel zeit.
    Signatur entsprach nicht den Boardregeln.
    ->gelöscht by lukas2004
  • Sers
    also erlernt haBe ich das leider nich durch buch, sondern durch eigene Versuchen. Also von anderen Webseiten den Quellcode anschaun und überlegen, wie gnau die einzelnen Eigenschaften funktioniern. selbst ist der herr.... probiern geht über studiern ^
    falls du einzelne Eigenschaften nachschlagen willst, gugg dir mal css4you oder selfhtml an.

    ´gruß
    [size=1][FONT="Courier New"]###############_###_####_
    #_ __ #___ _ _| |_(_)__(_)__ _ _ _###############new uploads: [1] [2] [3] [4] [5] [6] [7] [8]
    |#'##\/ _ \ '_|##_| / _| / _` | ' \
    |_|_|_\___/_|##\__|_\__|_\__,_|_||_|###############Bis 28. Sept. weg[/FONT][/size]
  • Zum Thema Buch, was ich nur empfehlen kann, zwar eher weniger für den Anfang, wobei ich eigentlich zum Anfangen auch dieses Buch hatte, ist:

    Bulletproof WebDesign von Dan Cederholm, ist echt super gut und es sind zum Beispiel auch gute Tipps und Tricks zum Box Model Hack drin.