4. CSS (Am Überbeissen) Scheiss auf Designs ohne blinde Tabellen

CSS (Am Überbeissen) Scheiss auf Designs ohne blinde Tabellen

  • I

    Hallo Leute, also echt jetzt. Wie soll man denn Webdesigns ohne blinde Tabellen machen, wenn nicht mal folgendes absolut triviales Beispiel funktioniert? 😡 🙄 😡

    Also im IE macht hat es zwischen innerleft und innerright mehr als ein pixel Abstand und im Mozilla & co. hat es zwischen den beinden innern und dem äusseren <div> auf der unteren Seite mehr als einen Pixel Abstand!

    Dies passier obwohl ich für mit css mit für alle <div> margin:0,padding:0 festgelegt habe. Was soll denn die Scheisse?

    Ausserdem habe ich keine Ahnung, wie ich erreichen kann, dass das äussere div horizontal ein Pixel breiter ist als die beiden inneren Div's zusammen.?

    <html>
    <head>
    <title>Testseite</title>

    <style type="text/css">
    div{
    margin:0px;
    padding:0px;
    }
    div#outer{
    background-color:Blue;
    padding-bottom:1px;
    padding-right:1px;
    }
    div#innerleft{
    background-color:Red;
    width:100px;
    height:100px;
    float:left;
    margin-right:1px;
    }
    div#innerright{
    background-color:Green;
    width:100px;
    height:100px;
    }
    </style>
    </head>
    <body>
    <div id="outer">
    <div id="innerleft">Zeile 1</div>
    <div id="innerright">Zeile 2</div>
    </div>
    </body>
    </html>

    P.S.
    Mit einer blinden Tabelle währe dies alles überhaupt kein Problem.. 🙄

    0
  • S
    Mod

    Ishildur schrieb:

    Hallo Leute, also echt jetzt. Wie soll man denn Webdesigns ohne blinde Tabellen machen, wenn nicht mal folgendes absolut triviales Beispiel funktioniert? 😡 🙄 😡

    Sorry, solche posts mache ich eigentlich nicht, aber:
    Dann lass es einfach sein wenn es dir zu kompliziert ist! Webdesign ohne blinden Tabellen _ist_ möglich, das ist eine Tatsache. Und so ein rumschreien verdirbt mir die Lust dir dabei zu helfen.

    0
  • I

    @Shade Of Mine
    Sorry für das "Rumgeschreie"
    Ich will es wirklich lernen und setzte auch alles daran. Doch bin ich mittlerweile nicht schlecht frustiert, denn wie ich es auch versuche, auf irgendeinem Browser funktioniert es dann doch wieder nicht.

    Kannst du mir nicht sagen, weshalb mein oben genanntes Beispiel nicht funktioniert?
    Ich lasse mich gerne Überzeugen, denn ich mag auch keine blinde Tabellen! 😉
    Bis jetzt habe ich einfach die Erfahrung gemacht, dass es mit den divs immer irgendwelche Stolperfallen gibt.

    Bitte sehe dir das obige Beispiel an, dann verstehst du, was ich meine..

    Gruss Ishildur

    0
  • I

    @Shade Of Mine
    Du Antwortest nicht mehr, bist du sauer oder weisst vielleicht selbst du keine passende Lösung für mein Problem?

    P.S.
    Bitte sage nie wieder:

    Dann lass es einfach sein wenn es dir zu kompliziert ist!

    Du kennst mich zuwenig, um mich einschätzen zu können, glaube mir!
    Ich bin einfach sehr unerfahren und äusserst verwirrt, was HTML anbelangt. Denn es scheint einfach eine riesen Baustelle zu sein. Ich lasse mich allerdings gerne eines besseren belehren? Aber dazu musst du mir schon Antworten und mir eine Lösung präsentieren können, ansonsten habe ich echt Mühe mit deiner Beleidigung...

    0
  • S
    Mod

    Es funktioniert eh. Es macht das was es soll.

    Warum?
    du hast 2 divs untereinander. die sind nicht nebeneinander, wohin sollen sie also floaten?

    Ishildur schrieb:

    Du Antwortest nicht mehr, bist du sauer oder weisst vielleicht selbst du keine passende Lösung für mein Problem?

    Du meine güte. Ich hab noch andere Sachen zu tun als alle 10 Minuten das Forum nach antworten zu durchsuchen...

    0
  • ?

    Denn es scheint einfach eine riesen Baustelle zu sein.

    Das einzige, was eine Riesenbaustelle ist, ist der IE! Entwickel auf dem Firefox, nimm nichts als nen Texteditor, zieh dir die Webdeveloper Toolbar. Auf meiner Seite (die sich noch stark im Aufbau befindet) habe ich den Link dazu angebracht und noch ein paar weitere nützliche Links. Auf CSS 4 YOU findest du nützliche Beispiele.
    Und meine Seite hat auch ein div-Layout. Ja, es ist simpel und ja, ich habe trotzdem schon damit kämpfen müssen. Es ist aber nicht richtig, etwas scheiße zu machen, nur weil es der IE nicht kann.

    0
  • I

    @Optimizer

    Das einzige, was eine Riesenbaustelle ist, ist der IE!

    Da muss ich dir wiedersprechen auch wenn der IE zugegebenermassen die grösste Baustelle ist, aber auch Mozilla & co. und Opera machen einige sehr merkwürige Sachen.

    Sie dir Bspw. nur mal folgendes Beispiel an:
    <div style="background-color:Blue;padding:0px"><img src="img/head.jpg" style="border-style:none"/></div>

    Wieso zum Teufel macht der Mozilla da das div 3 Pixel höher als notwendig?
    Oder die Sache mit position:relative und float:left, um ein div - element neben einem anderen zu platzieren kann man ebenfall rauchen. Mache mal ein border: 1px solid Black und das zweite div. Mozilla sowie der IE machen dann den Rand einfach um beide div's herum. Also wenn das keine Baustelle ist, dann weis ich auch nicht... 🙄

    0
  • ?

    <div style="background-color:Blue;padding:0px"><img src="img/head.jpg" style="border-style:none"/></div>

    Wieso zum Teufel macht der Mozilla da das div 3 Pixel höher als notwendig?

    div-padding? bild-margin? bild-border-width? Es gibt viele Möglichkeiten. Außerdem sehe ich das Problem nicht, warum muss es so genau gehen? Solange dein HTML und CSS nicht standardkonform ist, kannst du sowieso nicht den Ansrpuch erheben, dass es so aussieht wie es soll. Der Gecko ist da viel strenger als der IE und das ist gut so. Zieh dir die Toolbar, da kann man sich von allen Dingen die Ränder anzeigen lassen, so findet man solche Probleme schon.

    Oder die Sache mit position:relative und float:left, um ein div - element neben einem anderen zu platzieren kann man ebenfall rauchen. Mache mal ein border: 1px solid Black und das zweite div. Mozilla sowie der IE machen dann den Rand einfach um beide div's herum. Also wenn das keine Baustelle ist, dann weis ich auch nicht...

    Dieses Verhalten ist richtig, zumindest wenn ich deine Beschreibung jetzt korrekt verstanden habe. Du musst jetzt das Umdenken anfangen, sonst machst du es dir nur schwerer. Oder du lässt es halt. Oder such mal in diesem Forum hier rum. Da wirst du einen Thread von mir finden, wo ich mich auch 2,5 Tage mit solchen Problemen aufgehalten habe. Ist halt so, aber nachher hast du was anständiges, wenn du da durch bist.

    0
  • I

    @Optimizer

    Bitte mach einen Editor auf, kopiere das Bsp. dort rein und schau, wie es auf Mozilla aussieht. Ich glaube wirklich, du vertstehst das Problem nicht!

    Was ist denn nicht standard - komform? and meinem HTML und CSS?

    0
  • W

    Arbeite am Besten mit position:absolute; in den inneren Elemeten und weise ihnen eine feste Position zu. Das äußere Element muss nur eine feste Größe haben und sollte auch min. so groß wie beide inneren elemente zusammen sein. So in der Art habe ich auch eine Seite aufgebaut und sie funktioniert unter IE, Mozilla, Opera, etc. (Siehe meinen Beitrag "3 Div-Elemente zentrieren" oder so)

    0
  • I

    @Windoof
    Genauso habe ich es im Moment gemacht, das Problem dabei ist allerdings, dass dann die Seite nicht vertikal vergrössert wird, wenn der Inhalt entsprechend zunimmt. Für statische Seiten ist dies ja kein Problem, aber meine Seite entsteht in einem CMS - System

    0
Anmelden zum Antworten