WebWork Magazin - Webseiten erstellen lassen, Online Medien, html

Webhoster, Webhosting Provider und Domain registrieren

Home | Registrieren | Einloggen | Suchen | Aktuelles | GSL-Webservice | Suleitec Webhosting
Reparatur-Forum | Elektro forum | Ersatzteilshop Haushalt und Elektronik



Im Homepage und Webhosting-Forum --- CSS - horizontale Listen zentrieren

HTML, XHTML, CSS , style, XML, Javascript und mehr, Fragen, Tipps und Anregungen zu diesen Basic Techniken - hier rein !

Forum » HTML, CSS - Hilfe für das Erstellen einer Homepage » CSS - horizontale List... - 29 März 2024 Antworten
im Forum für Webhosting Homepage gefunden:
CSS - horizontale Listen zentrieren
Herr_Zatacke
Otto-Normal-Poster
Threadstarter




Beiträge: 90

Scheint so, als wäre ich nie fertig mit meiner Arbeit.

Versuche grade meine Navigation in eine horizontale Liste umzubauen.

Ich gebe den
  • 's float:left, damit sind sie einzeilig.
    Jetzt hapert's aber am zentreieren, denn die
  • 's floaten ja jetzt nach links...
    Wie kann ich jetzt also die Navigationszeile, die ja ein
      ist, zentrieren, ohne sie irgendwie wieder in einen
      zu packen ???

      width:auto; margin:auto; funktionieren nicht ... :(

      Dazu zu sagen ist auch noch, dass die Navigationselemente in ihrer Anzahl variieren (wenn der Admin eingeloggt ist, sind's 2 mehr)



      ---
      wer and'ren eine bratwurst brät, der hat ein bratwurstbratgerät...

  •   Profil   Editieren   Zitieren
    nisita
    Posting-Schinder




    Beiträge: 540

    zentriere doch das ul ... einfach mit margin: 0 auto;
    das darumliegende div bzw. block element, muss natürlich eine feste breite haben, ansonsten geht es natürlich nicht...

    mfg
    nisita

    ---
    "Wir sollten lernen, uns allmählich vom Überfluss zu befreien, um zur Einfachheit unseres eigenen Wesens vorzudringen." Jean Gastaldi

      Profil   Editieren   Zitieren
    Herr_Zatacke
    Otto-Normal-Poster
    Threadstarter




    Beiträge: 90

    Hmm. Das darumliegene Element ist ... hat auch ne feste Breite. oder geht das nicht mit ?
    (ich will doch die
    -Suppe auslöffeln ;) )

    ---
    wer and'ren eine bratwurst brät, der hat ein bratwurstbratgerät...

      Profil   Editieren   Zitieren
    nisita
    Posting-Schinder




    Beiträge: 540

    das mit dem darumliegenden blockelemt und der festen größe war quatsch.. es muss nur das ul element eine feste breite haben, und dann geht das schon...
    für body kann man auch eine feste breite angeben, aber brauchst du ja nicht..

    viel spass noch mit der div-suppe

    ---
    "Wir sollten lernen, uns allmählich vom Überfluss zu befreien, um zur Einfachheit unseres eigenen Wesens vorzudringen." Jean Gastaldi

      Profil   Editieren   Zitieren
    Herr_Zatacke
    Otto-Normal-Poster
    Threadstarter




    Beiträge: 90

    Das funktioniert aber leider nur wenn ich der Liste eine feste Grösse gebe. - Hab ich jetzt auch gemacht und die variablen (Admin-)Elemente in eine eigene Liste gesteckt.

    Allerdings hab ich jetzt das gleiche Problem mit variabler Höhe

    hier mal das Beispiel:
    http://test.furx.de/muster.php

    Es geht um die Liste unter der Überschrift '

    '
    Hier können statt den momentanen 4
  • 's bis zu 15 stehen.
    Die
  • 's floaten links und springen perfekt in die nächste Zeile.
    Allerdings muss bei einer nicht durch 5 teilbaren Anzahl die Linie rechts gezogen werden, welche die border-right: der
      ist. Leider passt sich das
        in der höhe nicht an. height:auto; macht das ganze 0 Pixel hoch.

        Meine Lösungsansätze:
        1) Ein umschliessendes
        um jede einzelne Zeile (=definierte Höhe) welches die Linie macht. (bzw eine liste die jeweils nur aus maximal 5
      • -Elementen besteht.
        2) Auffüllen der Zeile mit "leeren"
      • bis zum ende jeder Zeile.
        3) Die Höhenangabe für
          per PHP einfügen (class="$zeilenzahl")

          Leider gefallen mir die Ansätze alle nicht so wirklich, drum hoffe ich jemand von euch hat da ne bessere Idee.

          ---
          wer and'ren eine bratwurst brät, der hat ein bratwurstbratgerät...

        Diese Nachricht wurde geändert von: Herr_Zatacke
  •   Profil   Editieren   Zitieren
    nisita
    Posting-Schinder




    Beiträge: 540

    das problem sind die floats, die nicht so schließen, wie man sich das eigentlich wünscht.. deswegen muss ein "clearendes" element vor das ... es gibt zwar schon lösungswege das per css zu lösen, die sind allerdings unter aller sinnhaftigkeit...

    also, mach einfach ein
  • nach dem letzten richtigen listen eintrag, und gib der class clear die eigenschaft clear:both;

    ich weiß, das ist alles nicht so das, was man wirklich haben will, aber das geht nicht anders... blödes float...

    dann nimm die höhe für das ul element komplett raus, und das ul element wird sich an die
  • s anpassen..

    hier noch ein link um das nur per css zu lösen:
    http://www.orderedlist.com/articles/clearing_floats_fne
    http://www.positioniseverything.net/easyclearing.html

    mich würde gerne efchens meinung dazu interesieren, wie man die gesamte sache besser lösen könnte.. da efchen eher der markup-typ ist, und für ihm das auch wichtiger ist, als wie es letzendlich aussieht (denke ich mal, und ist ja auch nicht schlimm.. ;) )

    mfg
    nisita

    ---
    "Wir sollten lernen, uns allmählich vom Überfluss zu befreien, um zur Einfachheit unseres eigenen Wesens vorzudringen." Jean Gastaldi

  •   Profil   Editieren   Zitieren
    Herr_Zatacke
    Otto-Normal-Poster
    Threadstarter




    Beiträge: 90

    nisita schrieb am 20.05.2005 20:26
    also, mach einfach ein
  • nach dem letzten richtigen listen eintrag, und gib der class clear die eigenschaft clear:both;

    So hab ich's jetzt mal gemacht. Mal schauen ob ich noh ne andere Lösung finde...

    ---
    wer and'ren eine bratwurst brät, der hat ein bratwurstbratgerät...

      Profil   Editieren   Zitieren
    Herr_Zatacke
    Otto-Normal-Poster
    Threadstarter




    Beiträge: 90

    Geht doch nicht .... :(
    Der IE macht da Mist mit dem zusätzlichen
  • .

    Jetzt mach ich's über ne zusätzliche Klasse die die Höhe definiert

    1:
    "
      \n"

    und
    1: 
    2: 
    3: 
    4:
    ul.z1 { height:130px; }
    ul.z2 { height:260px; }
    ul.z3 { height:390px; }
    ul.z4 { height:520px; }


    ---
    wer and'ren eine bratwurst brät, der hat ein bratwurstbratgerät...

  •   Profil   Editieren   Zitieren
     

    Antworten
    Forum » HTML, CSS - Hilfe für das Erstellen einer Homepage » CSS - horizontale List...

    Aktuelle Beiträge zur Hilfe im Forum für Homepage - CSS - horizontale Listen zentrieren im Forum Homepage Hosting AntwortenLetztes Posting
    Unvorhersehbare Layout-Verschiebungen auf meiner Seite - Ideen?
    in "HTML, CSS - Hilfe für das Erstellen einer Homepage"
    0 20.08.2023 20:14 von Freud
    Geschenkidee zum Geburtstag
    in "HTML, CSS - Hilfe für das Erstellen einer Homepage"
    2 14.04.2022 16:08 von bryleth03
    Webdesigner gesucht
    in "HTML, CSS - Hilfe für das Erstellen einer Homepage"
    2 10.12.2021 15:04 von Rieke
    Welcher Hoster ist der Beste?
    in "HTML, CSS - Hilfe für das Erstellen einer Homepage"
    1 10.12.2021 15:02 von Rieke
    Warum Wordpress?
    in "HTML, CSS - Hilfe für das Erstellen einer Homepage"
    6 05.07.2021 18:27 von Rieke
    Die Idee einen Blog zu führen
    in "HTML, CSS - Hilfe für das Erstellen einer Homepage"
    2 27.02.2021 09:50 von Samira2021
    zu viele css dateien?!
    in "HTML, CSS - Hilfe für das Erstellen einer Homepage"
    4 19.01.2021 19:20 von Laurena
    WIe kann ich Datum ausblenden?
    in "HTML, CSS - Hilfe für das Erstellen einer Homepage"
    1 23.11.2020 12:21 von noahradar96
    Tabelle mit Mannschaftslogos
    in "HTML, CSS - Hilfe für das Erstellen einer Homepage"
    3 23.10.2019 14:54 von andyy
    Eigene Website erstellen - kostenlos!
    in "HTML, CSS - Hilfe für das Erstellen einer Homepage"
    0 17.05.2019 15:01 von Fusselchen



    Besucher : 7975171    Heute : 122     Gestern : 388     Online : 40     29.3.2024    9:01      0 Besucher in den letzten 60 Sekunden        
    Nach oben