Jens Müller: Übergroße Elemente mit float-Navigation

Guten Abend!

Ich habe auf meiner Homepage einen Navigationsbereich, welcher mit float:left positioniert ist. Das Ganze sieht dann ungefähr so aus:

+--------------------------------------------------------+
|                                                        |
|        +---------------------------------------------+ |
|        |                                             | |
| +------+-------+   Überschrift                       | |
| | - Bla        |                                     | |
| | - Bla2       |   Textextextext                     | |
| | - Bla3       |   Nochmehrtextextext                | |
| | - Bla4       |   Text                              | |
| |              |   Text                              | |
| +------+-------+   Text                              | |
|        |           Text                              | |
|        | Und hier vorne geht der Text schönerweise   | |
|        | weiter...                                   | |
|        |                                             | |
|        +---------------------------------------------+ |
+--------------------------------------------------------+

Wenn ich allerdings nun dorthin, wo der Text steht, ein Bild setze, das breiter ist als das Browserfenster wird das Bild unschönerweise nach unten verschoben:

+--------------------------------------------------------+
|                                                        |
|        +---------------------------------------------+ |
|        |                                             | |
| +------+-------+   Überschrift                       | |
| | - Bla        |                                     | |
| | - Bla2       |                                     | |
| | - Bla3       |                                     | |
| | - Bla4       |                                     | |
| |              |                                     | |
| +------+-------+                                     | |
|        |                                             | |
|        |  +------------------------------------------+-+-------+
|        |  | [Übergroßes Bild]                                  |
|        |  |                                                    |
|        |  +------------------------------------------+-+-------+
|        |                                             | |
|        |                                             | |
|        +---------------------------------------------+ |
+--------------------------------------------------------+

Wie erreiche ich jetzt Folgendes:

  • Dass das Bild den Text-Kasten soweit ausdehnt, dass es nicht über seinen Rand hinausragt
  • Dass das Bild nicht nach unten verschoben wird, sondern direkt über der Überschrift erscheint?

Ich bedanke mich schon mal im Voraus.

Einen schönen Abend noch,
Jens

  1. Hallo,

    • Dass das Bild den Text-Kasten soweit ausdehnt, dass es nicht über seinen Rand hinausragt

    Leider ist das bei CSS noch nicht vorgesehen. Der einzige der das macht ist der IE. Es währe aber gar nicht so verkehrt irgendetwas in CSS 3 dafür vorzusehen.

    • Dass das Bild nicht nach unten verschoben wird, sondern direkt über der Überschrift erscheint?

    Soll das Menü dann unten drunter geschoben werden?

    Grüße
    Jeena Paradies

    --
    Arbeitsamt verarscht sich selbst
    http://jeenaparadies.de/weblog/2004/september/arbeitsamt/
    SELFTreffen in Dresden - Ein Bericht
    http://community.de.selfhtml.org/treffen/2004/dresden/
    1. Guten Abend!

      • Dass das Bild den Text-Kasten soweit ausdehnt, dass es nicht über seinen Rand hinausragt
        Leider ist das bei CSS noch nicht vorgesehen. Der einzige der das macht ist der IE. Es währe aber gar nicht so verkehrt irgendetwas in CSS 3 dafür vorzusehen.

      Ich habe nur eines noch nicht verstanden: Was bringt dann overflow:visible? Sollte dieses das nicht eigentlich bewirken? Oder habe ich da etwas falsch verstanden?

      • Dass das Bild nicht nach unten verschoben wird, sondern direkt über der Überschrift erscheint?
        Soll das Menü dann unten drunter geschoben werden?

      Nein, eigentlich soll das Bild dann neben das Menü gepackt werden, und dann halt dort über den rechten Rand hinausgehen (was es ja sowieso tut). Eigentlich sehe ich sowieso keinen Grund, warum das Bild weiter nach unten verschoben wird, da es ja so oder so über den Rand hinausgeht.

      Gibt es wenigstens theoretisch eine Möglichkeit, das Bild mit width so zu formatieren, dass es nur bis zum Rand geht, aber dafür direkt unter der Überschrift ist? Wenn ich es mit width:100% belege, ist es immernoch unterhalb der Navigation.

      Weiterhin einen schönen Abend,
      Jens

      1. Hallo,

        Ich habe nur eines noch nicht verstanden: Was bringt dann overflow:visible? Sollte dieses das nicht eigentlich bewirken? Oder habe ich da etwas falsch verstanden?

        Probiere es aus. Ich denke dass dann aber der Text oder das Bild einfach drüberhängen.

        Nein, eigentlich soll das Bild dann neben das Menü gepackt werden, und dann halt dort über den rechten Rand hinausgehen (was es ja sowieso tut). Eigentlich sehe ich sowieso keinen Grund, warum das Bild weiter nach unten verschoben wird, da es ja so oder so über den Rand hinausgeht.

        Nun so stimmt das nicht ganz. Es hat schon einen Grund. Woher soll der Browser eigentlich wissen ob das nächste Bild auch noch neben dran soll, nur weil das erste schon eh nicht hingepasst hat, oder doch in einer neuen Zeile wo es eventuell auch nicht genügend Platz gibt?

        Gibt es wenigstens theoretisch eine Möglichkeit, das Bild mit width so zu formatieren, dass es nur bis zum Rand geht, aber dafür direkt unter der Überschrift ist? Wenn ich es mit width:100% belege, ist es immernoch unterhalb der Navigation.

        Naja für neuere Browser kannst du max-width: x%; angeben wobei

        x = 100% - (Menübreite in %) - (margin + border + padding Menü in %) - (margin + border + padding Bild in %)

        ist. Die höhe gibst du einfach nicht an, dann passt sie sich automatisch an. Das geht aber im IE nicht. Somit wird das Bild immer kleiner als der zur verfügung stehende Platz und es wird nicht nach unten geschoben. Andererseits wird es auch nie vergrößert und pixelig wenn doch mal mehr Platz zur verfügung steht.

        Grüße
        Jeena Paradies

        --
        [remote-signature:http://jeenaparadies.de/test/self/sig.php]
        SELFTreffen in Dresden - Ein Bericht
        http://community.de.selfhtml.org/treffen/2004/dresden/
  2. Hiya Jens,

    Einen schönen Abend noch,
    Jens

    Kannst du mir und Dir bitte einen Gefallen tuen?
      Poste doch bitte unter einem anderem Namen.

    Ich bin hier schon seit 1998 im Forum, und immer mit
    dem selben Namen. Das ich nicht soviel Poste liegt
    teilweise da dran, das ich an 2 Computern arbeite,
    und auch an meiner Eigenen Scheuheit ein wenig.

    Ich weiss selber sehr Gut, Jens ist ein haeufig
    auftretender Name, und Mueller is kein Name, dat
    is'n Sammelbegriff. (Nur 3 Haueser weiter, wohnen
    auf meiner Strasse noch mehr Muellers, und nur 2
    Strassen  weiter von mir, Wohnt noch ein Jens
    Mueller :o)

    Eigendlich hatte ich ja auch angeclickt das nur
    mit Registrierung dieser Name verwendet werden kann.
    Dies verusachte jedoch Probleme und ist zur Zeit
    abgeschaltet.

    Danke dir

    gruesse aus'm ruhrpott
      jens mueller

    --
    I am a scout. How can I use Perl in my day-to-day scout business? For example, helping little old ladies across the street. - See the perllol man page.