5k41: Float parameter macht nicht das was er soll

Hallo!
Ich habe vor ein paar wochen gefragt, wie ich eine Website ohne Tabellen erstellen kann, die eine Navigationsleiste an der rechten und eine an der Linken Seite besitzt. Bis jetzt bin ich so weit:

HTML:

<html>
<head>
<title>Gerüst</title>
<link href="style.css" rel="stylesheet" type="text/style">
</head>
<body>
<div class="banner"><img src="banner.gif" alt="Banner" /></div>
<div class="leftnavi">
 Hey!
</div>
<div class="rightnavi">
 Huhu!!
</div>
</body>

CSS:

html, body
{
 text-align : center;
 margin     : 0;
 padding    : 0;
}
div.banner
{
 display    : block;
}
div.leftnavi
{
 float      : left;
}
div.rightnavi
{
 float      : right;
}

mein Problem ist nun, das float : right den Text am ende des Bildschirms platziert, was bedeutet, dass wenn der User eine zu kleine auflösung benutzt, das Menü nicht an der Rechten seite des banner sonder irgendwo sonst auf der Seite hängt. Wie kann ich das Umgehen/ Gibt es einen anderen Befehl, der wirklich das ende der Page bestimmt?

MfG

  1. Hello out there!

    wenn der User eine zu kleine auflösung benutzt,

    Du meinst Viewportgröße (Anzeigebereich im Browser ohne Symbolleiste, Sidebar etc.). Die Auflösung seines Monitors hat nicht die geringste Bedeutung.

    das Menü nicht an der Rechten seite des banner sonder irgendwo sonst auf der Seite hängt.

    Genau das ist das gewünschte Verhalten bei flexiblem Layout: dass es sich an die Verhältniss beim Nutzer (Viewportgröße, Schriftgröße etc.) anpasst. Wenn zwei Boxen bei einem Nutzer nicht nebeneinander passen, werden sie bei ihm untereinander dargestellt. Das ist vorteilhaft, wel er nicht horizontal scrollen muss, um die Inhalte der Seite lesen zu können.

    Verabschiede dich von dem Gedanken, eine Webseite müsse bei allen gleich aussehen.

    Eventuell möchtest du deinen Boxen noch Breitenangeaben verpassen: zur Einteilung der Seite bieten sich Angaben in % an, kombiniert mit min-width und max-width in em.

    See ya up the road,
    Gunnar

    --
    “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
    1. Hallo!
      In dem Fall ist aber Scrollen erwünscht, da man ohne garnicht mehr das Design erkennen würde! Ich meine eine Seite die so aussieht:
      Banner
      n
      a
      v
      i
      1
      n
      a
      v
      i
      2
      obwohl navi eins und 2 eigentlich rechts und Links die Seite beenden sollten ist doch mehr als Merkwürdig oder nicht?

      MfG

  2. Ich habe vor ein paar wochen gefragt, wie ich eine Website ohne Tabellen erstellen kann, die eine Navigationsleiste an der rechten und eine an der Linken Seite besitzt. Bis jetzt bin ich so weit:

    HTML:

    <html>
    <head>
    <title>Gerüst</title>
    <link href="style.css" rel="stylesheet" type="text/style">
    </head>
    <body>
    <div class="banner"><img src="banner.gif" alt="Banner" /></div>
    <div class="leftnavi">
    Hey!
    </div>
    <div class="rightnavi">
    Huhu!!
    </div>
    </body>

    CSS:

    html, body
    {
    text-align : center;
    margin     : 0;
    padding    : 0;
    }
    div.banner
    {
    display    : block;
    }

    Das ist unnötig, ein DIV ist immer ein Blockelement

    div.leftnavi
    {
    float      : left;
    }

    Damit fließt dieses Element Links vom restlichen Inhalt und hat die Breite wie sein Inhalt breit ist.

    div.rightnavi
    {
    float      : right;
    }

    und das fließt rechts vom Inhalt und hat ebenfalls die Breite wie sein Inhalt

    mein Problem ist nun, das float : right den Text am ende des Bildschirms platziert, was bedeutet, dass wenn der User eine zu kleine auflösung benutzt, das Menü nicht an der Rechten seite des banner sonder irgendwo sonst auf der Seite hängt.

    Die Auflösung spielt hier keine Rolle. Und wie gesagt ohne Breitenanagabe wird das DIV so breit wie sein Inhalt.

    Wie kann ich das Umgehen/ Gibt es einen anderen Befehl, der wirklich das ende der Page bestimmt?

    Indem du für das linke Element Breitenangaben verwendest und das rechte mit einem linken Aussenrand versiehst, anstatt es fliessen zu lassen. Dann passt sich alles an den vorhandenen Platz an.

    Struppi.

    --
    Javascript ist toll (Perl auch!)
    1. Hallo!
      Das Problem ist nur, das ich das float right, sowie left benutze, damit sich die Navigationen meinem Banner anpassen. Wie würdest du es denn machen? Haste vielleicht mal ein bisschen (Pseudo)code? Ich weiss nicht wirklich was du meinst!

      MfG

      1. Das Problem ist nur, das ich das float right, sowie left benutze, damit sich die Navigationen meinem Banner anpassen. Wie würdest du es denn machen? Haste vielleicht mal ein bisschen (Pseudo)code? Ich weiss nicht wirklich was du meinst!

        Ich weiß nicht was du meinst. In deinem Code passt sich doch nichts an.

        Struppi.

        --
        Javascript ist toll (Perl auch!)
        1. Mh... die Navis sind doch egal bei welcher auflösung immer bündig mit der rechten und linke seite des banner (zumindest sollten sie das sein) also passen sie sich zwar net wirklich an, sind aber schon bei jedem Benutzer anders platziert. Dieses Verhalten muss auf jedenfall gegeben sein! Nun ist das Problem, dass sobald man eine geringere auflösung als 1024*768 wählt der Browser die Rechte navi dem Bildschirm anpasst und nicht wie gewollt am rechten ende des Banners belässt. PUH! Hoffe verstehst nun was ich mein! Sobald das gegeben ist, ist mir alles egal, aber ich hab keine idee wie man sowas machen kann!

          MfG

          1. Hello out there!

            Mh... die Navis sind doch egal bei welcher auflösung

            Erzähl doch bitte nicht weiterhin solch Unsinn. Gehe zurück in die Badstraße.

            immer bündig mit der rechten und linke seite des banner (zumindest sollten sie das sein) also passen sie sich zwar net wirklich an, sind aber schon bei jedem Benutzer anders platziert. Dieses Verhalten muss auf jedenfall gegeben sein!

            Nein, keinesfalls. Gehe zurück in die Badstraße.

            See ya up the road,
            Gunnar

            --
            “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)