Onkel Schnitzel: Eine Liste floaten und zentrieren

SELF-Forum

Eine Liste floaten und zentrieren

Onkel Schnitzel
– Informationen zu den Bewertungsregeln

Hallo,

ich komme einfach nicht weiter. Ich habe eine Liste (vereinfacht) mit zwei Punkten (Boxen), die nebeneinander erscheinen sollen. Also verwende ich die float-Eigenschaft. Zusätzlich sollen die Listenpunkte zentriert werden- also margin:auto. Nur will das margin:auto partout nicht zusammen mit float funktionieren. Ich hab auch alle möglichen Varianten mit clear:left versucht, aber hat nichts gebracht. Ihr könnt Euch ja mal den Quelltext rauskopieren und es selbst versuchen. Bin schon gespannt, was ich wohl wieder falsch gemacht habe.

Schöne Grüße,
Onkel Schnitzel

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
   <head>
      <title>
         Redaktionssystem
      </title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <meta name="robots" content="noindex, nofollow" />
   </head>
  <body>
  <ul style="width: 90%; margin:auto; background-color: #00AFAF; list-style-type: none;">
     <li style="max-width: 7em;
               min-width: 7em;
               height: 2.5em;
               float: left;
               margin: 100px 10px 0px 10px;
               text-align: center;
               padding: 80px 20px 20px 20px;
               background-color: #0070C0;
               color: white;">News eintragen
     </li>
     <li style="max-width: 7em;
               min-width: 7em;
               height: 2.5em;
               float: left;
               margin: 100px 10px 0px 10px;
               text-align: center;
               padding: 80px 20px 20px 20px;
               background-color: #E06000;
               color: white;">News bearbeiten
     </li>
     <li style="clear: left;">&nbsp;</li>
  </ul>
  </body>
</html>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Eine Liste floaten und zentrieren

    wahsaga Homepage des Autors
    – Informationen zu den Bewertungsregeln

    hi,

    Ich habe eine Liste (vereinfacht) mit zwei Punkten (Boxen), die nebeneinander erscheinen sollen. Also verwende ich die float-Eigenschaft. Zusätzlich sollen die Listenpunkte zentriert werden- also margin:auto. Nur will das margin:auto partout nicht zusammen mit float funktionieren.

    <ul style="width: 90%; margin:auto; background-color: #00AFAF; list-style-type: none;">

    Die Liste selber wird also zentriert dargestellt, mit einer Breite von 90%.

    <li style="max-width: 7em;
                   min-width: 7em;
                   height: 2.5em;
                   float: left;

    Darin zwei List-Items mit jeweils 7em Breite, die nach Links gefloatet werden.

    Zwei mal 7em gleich 14em werden vermutlich nicht die 90% Breite der UL ausfüllen - also werden sie innerhalb dieser links dargestellt, so wie du es per float ja angegeben hast.

    Und warum so kompliziert?
    LIs display:inline verpassen [*], und UL text-align:center - voila, zwei Listenelemente nebeneinander, in der Mitte von UL.

    [*] für height muss dann natürlich ein Ersatz gesucht werden.

    gruß,
    wahsaga

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

    1. Eine Liste floaten und zentrieren

      Onkel Schnitzel
      – Informationen zu den Bewertungsregeln

      LIs display:inline verpassen [*], und UL text-align:center - voila, zwei Listenelemente nebeneinander, in der Mitte von UL.

      Funktioniert auch nicht. Oder hab ich was falsch verstanden?

      <ul style="width: 90%; margin:auto; background-color: #00AFAF; list-style-type: none;
        text-align: center;">
           <li style="float: left;
                     text-align: center;
                     background-color: #0070C0;
                     color: white;
                     display: inline;">News eintragen
           </li>
           <li style="float: left;
                     text-align: center;
                     background-color: #E06000;
                     color: white;
                     display: inline;">News bearbeiten
           </li>
           <li style="clear: left;">&nbsp;</li>
        </ul>

      Gruß,
      Onkel Schnitzel

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Eine Liste floaten und zentrieren

        Onkel Schnitzel
        – Informationen zu den Bewertungsregeln

        LIs display:inline verpassen [*], und UL text-align:center - voila, zwei Listenelemente nebeneinander, in der Mitte von UL.

        Funktioniert auch nicht. Oder hab ich was falsch verstanden?

        Ups, habs gerade bemerkt. Ohne float scheints zu funktionieren. Warum weiß ich zwar noch nicht so genau, aber ich schaus mir nochmal an.

        Danke erstmal!

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Eine Liste floaten und zentrieren

          Gernot Back Homepage des Autors
          – Informationen zu den Bewertungsregeln

          Hallo Onkel,

          Ups, habs gerade bemerkt. Ohne float scheints zu funktionieren. Warum weiß ich zwar noch nicht so genau, aber ich schaus mir nochmal an.

          Das ist so, weil float implizit gleichzeitig auch display:block bedeutet

          Gruß Gernot

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Eine Liste floaten und zentrieren

            Onkel Schnitzel
            – Informationen zu den Bewertungsregeln

            Das ist so, weil float implizit gleichzeitig auch display:block bedeutet

            Ahja. Und display:inline bedeutet gleichzeitig, daß ich keine Breitenangabe für das Element machen kann? Irgendwie ignoiert er nämlich sämtliche width-Angaben. Erschreckend, wie wenig ich mich immernoch mit CSS auskenne :-/

            Gruß,
            Onkel Schnitzel

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Eine Liste floaten und zentrieren

              wahsaga Homepage des Autors
              – Informationen zu den Bewertungsregeln

              hi,

              Und display:inline bedeutet gleichzeitig, daß ich keine Breitenangabe für das Element machen kann?

              Ja.

              gruß,
              wahsaga

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

              1. Eine Liste floaten und zentrieren

                Onkel Schnitzel
                – Informationen zu den Bewertungsregeln

                Ja.

                Weiß ich doch :-))

                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

            2. Eine Liste floaten und zentrieren

              Onkel Schnitzel
              – Informationen zu den Bewertungsregeln

              Und display:inline bedeutet gleichzeitig, daß ich keine Breitenangabe für das Element machen kann?

              Da antworte ich mir mal selbst: Korrekt!  :-)

              Gruß,
              Onkel Schnitzel

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln