karina: Layout Teilbilder, Firefox-Lücken, wie mit CSS?

SELF-Forum

Layout Teilbilder, Firefox-Lücken, wie mit CSS?

karina
– Informationen zu den Bewertungsregeln

Hallo,
ich hab mich schon doof und dusselig gesucht, und wahrscheinlich find ich deswegen jetzt auch keine Lösung mehr für folgendes Problem:

Das Layout soll 7 Bilder nahtlos kombinieren, und zwar so:

|   | 2-1 | 3-1 | 4-1 |   |
| 1 |-----|-----|-----| 5 |
|   | 2-2 | 2-2 | 4-2 |   |

Alle Bilder, auch die halben, sollen später verlinkt oder mit :hover ausgetauscht werden, da hab ich auch schon was gefunden

Doch schon weit vorher fängt das Problem an:

  1. Mit dem Quellcode unten bekomme ich per Tabelle alles nahtlos angeordnet -- aber nur in IE (6.0.x), während in den Mozilla/Firefox/Netscape zwischen den Teilbildern in der Vertikalen immer eine Lücke bleibt :((
        Alle Tipps in den verschiedenen Foren reden nur davon, dass Mozilla das Boxmodell korrekt interpretiert und solche Lücken im IE auftreten...???

  2. Sobald ich jetzt einen Link um ein Teilbild reinsetze, krieg ich überall weiße Zwischenräume, weil um dieses Bild ein blauer Rahmen erscheint -- sowohl in Mozilla als auch in IE. Kann gerad nicht mehr denken, vielleicht ist das jetzt ganz simpel...

  3. deshalb: Hat vielleicht jemand eine Idee, wie ich das Layout in CSS mit :float etc hinbekomme? Ich schaffe da nur dreispaltige Layouts, und die unteren Bildhälften flutschen sowieso immer weg... Vielleicht absolut positionieren?

Dank für alle Tipps schon mal im Voraus,
karina

<head>
<style type="text/css">
  table {border-collapse:collapse; border-spacing:0;}
  tr { padding:0px; border:0;}
  td { padding:0px; border:0;}
  div#oben {display: block; margin: 0; padding:0; }
</style>
</head>

<body>
<div align="center" id="oben" >
  <table>
  <!--obere hälfte bilder-->
  <tr>
   <td rowspan="2"><img src="blau_2.gif" width="72" height="142" /></td>
   <td><img src="blau_3-1a.gif" width="213" height="70" /></td>
   <td><img src="blau_4-1a.gif" width="165" height="70" /></td>
   <td><img src="blau_5-1a.gif" width="202" height="70" /></td>
   <td  rowspan="2"><img src="blau_6a.gif" width="150" height="142" /></td>
  </tr>
  <!--untere hälfte bilder-->
  <tr>
   <td><img src="blau_3-2a.gif" width="213" height="72" /></td>
   <td><img src="blau_4-2a.gif" width="165" height="72" /></td>
   <td><img src="blau_5-2a.gif" width="202" height="72" /></td>
  </tr>
  </table>
</div>
</body>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Layout Teilbilder, Firefox-Lücken, wie mit CSS?

    wahsaga Homepage des Autors
    – Informationen zu den Bewertungsregeln

    hi,

    1. Mit dem Quellcode unten bekomme ich per Tabelle alles nahtlos angeordnet -- aber nur in IE (6.0.x), während in den Mozilla/Firefox/Netscape zwischen den Teilbildern in der Vertikalen immer eine Lücke bleibt :((

    das altbekannte unterlängen-problem.

    1. Sobald ich jetzt einen Link um ein Teilbild reinsetze, krieg ich überall weiße Zwischenräume, weil um dieses Bild ein blauer Rahmen erscheint

    weiß, weil blau ...?

    gegen die umrandung verlinkter bilder hilft
    a img { border:none; }

    1. deshalb: Hat vielleicht jemand eine Idee, wie ich das Layout in CSS mit :float etc hinbekomme? Ich schaffe da nur dreispaltige Layouts, und die unteren Bildhälften flutschen sowieso immer weg... Vielleicht absolut positionieren?

    why not?
    erscheint mir hier das sinnvollste (abgesehen vielleicht von der tabelle).
    floatendes verhalten wie umbruch bei zu geringer fläche ist ja eh nicht gewünscht - also könnte m.E. absolute positionierung hier das mittel der wahl sein.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Layout Teilbilder, Firefox-Lücken, wie mit CSS?

      karina
      – Informationen zu den Bewertungsregeln

      Danke wahsaga,
      der Tipp hat geholfen,
      es war das vertical-align:bottom  (display:block hatte keinen merkbaren Effekt)

      Jetzt hab ich nur ein ganz anderes Problem mit Mozilla&Co
      (SIEHE GANZ UNTEN)

      1. Sobald ich jetzt einen Link um ein Teilbild reinsetze, krieg ich überall weiße Zwischenräume, weil um dieses Bild ein blauer Rahmen erscheint

      weiß, weil blau ...?

      Weißer Zwischenraum, weil woanders Umrandung (blau)
      danke auch, da war meine Denkblockade, geholfen hat   a img { border:none; }

      Vielleicht absolut positionieren?

      why not?
      erscheint mir hier das sinnvollste (abgesehen vielleicht von der tabelle).

      Hab ich zwar gut hingekriegt, aber doch wieder verworfen, denn dieses Bildkonstrukt soll 800px breit zentriert auf der Seite liegen, und obwohl ich das es absolut positioniert in eine Box gesteckt habe (Elternelement), wollten die Browser diese dann nicht nicht zentrieren

      Aber egal, mein aktuelles Problem ist folgendes:
      Fast alle Teilbilder sollen per :hover angesprochen werden, und die Geschichten mit visibility haben bei mir nicht recht geklappt.
      Aber mit folgender Anleitung (http://www.idee-c.de/wissen_c.php?id=3), auf mehrere Bilder erweitert, hat es hingehauen, wenn auch der Quelltext recht voll ist(wird ausgelagert).

      Also, das Ergebnis funktioniert in IE toll, aber in Mozilla&Co haut es mir total auseinander :(((
      Habs mal online gestellt, siehe hier (oben zielversion, unten referenztabelle):

      http://www.sasze.de/test/testroh4.htm

      Wie kommt das bloss?

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Layout Teilbilder, Firefox-Lücken, wie mit CSS?

        Ingo Turski Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hi,

        Also, das Ergebnis funktioniert in IE toll, aber in Mozilla&Co haut es mir total auseinander :(((

        Interessante Unterschiede - und das bei einer einfachen Tabelle. ;-)
        Ich könnte mir denkem, daß es an Deinen Fehlern liegt. Du hast die </a> alle vergessen.
        Das CSS würde ich übrigens mal aufräumen. 90% dürften überflüssig sein.

        freundliche Grüße
        Ingo

        --
        [barrierefreie Webseitenerstellung » Suchmaschinenoptimierung | em?] (Hommingberger Gepardenforelle;-)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Layout Teilbilder, Firefox-Lücken, wie mit CSS?

          karina
          – Informationen zu den Bewertungsregeln

          Aaarghhhhhh,
          wie bescheuert von mir !! :((
          War schon spät gestern, tschuldigung.

          Also, das Ergebnis funktioniert in IE toll, aber in Mozilla&Co haut es mir total auseinander :(((
          Ich könnte mir denkem, daß es an Deinen Fehlern liegt. Du hast die </a> alle vergessen.

          Jetzt sind sie alle drin, hab das Ergebnis auch noch mal durch den Validator laufen lassen, angeblich ist jetzt alles valides XHTML.

          Aber auseinanderhauen tuts das in Mozilla immer noch :(
          (http://www.sasze.de/test/testroh4.htm)

          Das CSS würde ich übrigens mal aufräumen. 90% dürften überflüssig sein.

          Ja, zweites Problem. Ich habs zwar vermutet, aber meine Aufräumversuche, alles außer Bildlink zusammenzufassen, sind gestern alle schiefgegangen, hab ich also lieber gelassen. Also neuer Versuch.

          Kann ich im Folgenden getrost den ersten Block durch den zweiten ersetzen? Oder gehts noch einfacher? (Sind noch nicht wirklich 90%...)

          #######################
          .grafik3o a:link,.grafik3o a:active,.grafik3o a:visited {
                  display: block; text-decoration: none; width: 213px; height: 70px;
                  background-image: url(pics_basics/oben_blau_3o-1.gif); background-repeat: no-repeat; }

          .grafik3o a:hover {
                  display: block; text-decoration: none; width:213px; height: 70px;
                  background-image: url(pics_basics/oben_blau_3o-2.gif); background-repeat: no-repeat; }

          .grafik3o {display: block; width: 213px; height: 70px;
                  background-image: url(pics_basics/oben_blau_3o-2.gif); background-repeat: no-repeat; }
          ########################

          .grafik3o a:link, .grafik3o a:hover, .grafik3o a:active, .grafik3o a:visited, grafiko3 {
                  display: block; text-decoration: none; width: 213px; height: 70px; background-repeat: no-repeat; }

          .grafik3o a:link, .grafik3o a:active, .grafik3o a:visited {
                  background-image: url(pics_basics/oben_blau_3o-1.gif);  }

          .grafik3o a:hover, .grafik3o {background-image: url(pics_basics/oben_blau_3o-2.gif); }

          ###########################

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Layout Teilbilder, Firefox-Lücken, wie mit CSS?

            Ingo Turski Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Hi,

            Aber auseinanderhauen tuts das in Mozilla immer noch :(
            (http://www.sasze.de/test/testroh4.htm)

            stimmt. wie ich gerade bemerkt habe, hast Du dummerweise die Tabellenzellen display:block definiert. ;-)

            Das CSS würde ich übrigens mal aufräumen. 90% dürften überflüssig sein.

            Ja, zweites Problem. Ich habs zwar vermutet, aber meine Aufräumversuche, alles außer Bildlink zusammenzufassen, sind gestern alle schiefgegangen, hab ich also lieber gelassen. Also neuer Versuch.

            Immer noch viel zu aufwendig und dann noch mit Blindgifs. Schau mal hier.

            freundliche Grüße
            Ingo

            --
            [barrierefreie Webseitenerstellung » Suchmaschinenoptimierung | em?] (Hommingberger Gepardenforelle;-)
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Layout Teilbilder, Firefox-Lücken, wie mit CSS?

              karina
              – Informationen zu den Bewertungsregeln

              stimmt. wie ich gerade bemerkt habe, hast Du dummerweise die Tabellenzellen display:block definiert. ;-)

              Ah, wieder was gelernt :/
              Bin in Sachen CSS doch noch ziemlich unfit...

              Immer noch viel zu aufwendig und dann noch mit Blindgifs. Schau mal hier

              Uffz, so schön schlicht, wenn man weiß, was man tut!
              So wollte ich es zurechtstückeln, aber die einzige Variante, die ich von Vorbildern funktionierend übertragen konnte, war die mit Blindgifs.

              Danke fürs Zeigen,Ingo!

              Muss mir wohl mal ein grundlegendes Buch zulegen, allein mit SelfHTML reicht's doch nicht..

              Schönen Gruß,
              karina
              .

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. Layout Teilbilder, Firefox-Lücken, wie mit CSS?

                Ingo Turski Homepage des Autors
                – Informationen zu den Bewertungsregeln

                Hi,

                Muss mir wohl mal ein grundlegendes Buch zulegen, allein mit SelfHTML reicht's doch nicht..

                geht schon - mit gelegentlcher Hilfe aus dem Forum. ;-)
                Allerdings sollte man dazu bei den Grundlagenkapiteln anfangen. Das Kapitel CSS-Eigenschaften dagegen kann man mMn zunächst weitgehend überfliegen und eher als Nachschlagewerk verwenden.

                freundliche Grüße
                Ingo

                --
                [barrierefreie Webseitenerstellung » Suchmaschinenoptimierung | em?] (Hommingberger Gepardenforelle;-)
                Beitrag melden
                –
                Informationen zu den Bewertungsregeln