probs mit display:block / float:right in mozilla

  1. kaifreund

    kaifreund Thread StarterMacUser Mitglied

    Mitglied seit:
    30.07.2004
    Beiträge:
    52
    Zustimmungen:
    0
    Hallo Forum,
    ich bin mir nicht sicher was ich falsch mache und versuche es mal zu beschreiben.

    In einer rechtsausgerichteten! horizontalen Navigation habe ich Textbuttons die mittels display:block und padding einen Rahmen bekommen.

    a.navimain{
    font-size:9pt;
    color:black;
    display:block;
    text-align:center;
    width:100%;
    border:black solid 1px;
    padding:2px 2px 1px 2px;
    text-decoration:none;
    font-weight:bold;
    }


    Da ich das mittels Listen und display:inline nicht hinbekomme, habe ich die einzelnen Buttons in eine Tabellenreihe gepackt. Funzt prima (reines css wäre mir allerdings lieber).
    ABER Firefox 1.0 zieht den Text! des rechten Buttons bis über die rechte Framegrenze anstelle das padding zu beachten = der rechte Button wird bis zum Text "abgeschnitten"

    Ich habe mal die Border auf 1 gesetzt um es deutlicher zu machen. Hier ist der Link:

    http://www.glimpse.de/esa


    Was mache ich falsch?
    lg.kai
     
    kaifreund, 13.12.2004
  2. lengsel

    lengselMacUser Mitglied

    Mitglied seit:
    25.11.2003
    Beiträge:
    4.553
    Zustimmungen:
    53
    Welch Überraschung, Camino (0.7) auch, aber das nur am Rande.

    table-less würde ich das so vorschlagen:

    <div id="navi">
    <span>Link1</span>
    <span>Link2</span>
    usw...
    </div>

    Sollte den selben Effekt haben, und es ist keine Tabelle nötig.
    Das div ist ein Blockelemet, die spans sind inline-Elemete. Darauf aufbauend würde ich dann nochmal die Styles entwickeln. Mal sehen was die Mozilla-abkömmlinge dann damit machen...

    Grüße,
    Flo :)
     
    lengsel, 13.12.2004
  3. kaifreund

    kaifreund Thread StarterMacUser Mitglied

    Mitglied seit:
    30.07.2004
    Beiträge:
    52
    Zustimmungen:
    0
    Hi Flo,
    das bringt bei mir ähnliche Resultate wie <li> Tags. Ich bekomme die Buttons nicht als display:block dargestellt. So wie von Dir vorgeschlagen sind die Buttons nicht nebeneinander, sondern untereinander angeordnet und die Border erstreckt sich über die gesamte Breite und nicht je nach Wortlänge nur mit Abstand 2px vom Wort. Mag sein das ich was übersehe, vielleicht beisst sich aber auch display:block und inline Element?

    gruesse kai
     
    kaifreund, 14.12.2004
  4. BlackCat

    BlackCatMacUser Mitglied

    Mitglied seit:
    19.10.2004
    Beiträge:
    38
    Zustimmungen:
    0
    Das mal als Beispiel wie du es mit Listen hinbekommst:

    .Navi ul {
    margin:0;
    padding:0.5em 0 0.5em 0;
    border:1px dotted #000000;
    }
    .Navi li {
    margin:1.4em;
    padding:0;
    display:inline;
    list-style:none;
    }


    im HTML dann einfach

    <ul class="Navi">

    <li class="Navi">


    Gruss

    Retrax


    Edit: Das Beispiel musst Du natürlich noch an deine Bedürfnisse anpassen.
     
    BlackCat, 14.12.2004
  5. kaifreund

    kaifreund Thread StarterMacUser Mitglied

    Mitglied seit:
    30.07.2004
    Beiträge:
    52
    Zustimmungen:
    0
    @ Retrax

    Hmmm... funzt immer noch nicht. Kann ich <ul> nicht floaten? ... Weiss der Geier was ich da nicht kapiere - oder Du vielleicht? ;-)


    ul {margin-top:16px;
    float:right;
    }

    li {display:inline;
    list-style:none;
    font-size:9pt;
    color:black;
    text-align:center;
    width:100%;
    border:black solid 1px;
    padding:2px 2px 1px 2px;
    text-decoration:none;
    font-weight:bold;
    }

    [...]
    <ul>
    <li><a href="javascript:NaviFrames('produkte/fs_prod_navi3.html',3,'blank.html',4,'blank.html',5)" >PRODUKTE</a></li>
    <li><a href="javascript:NaviFrames('blank.html',3,'preise/preise.html',4,'blank.html',5)" >PREISE</a></li>
    <li><a href="javascript:NaviFrames('blank.html',3,'bestellung/bestellung.html',4,'blank.html',5)" >ONLINEBESTELLUNG</a></li>
    </ul>
    [...]


    lg + danke!
    kai
     
    kaifreund, 14.12.2004
  6. BlackCat

    BlackCatMacUser Mitglied

    Mitglied seit:
    19.10.2004
    Beiträge:
    38
    Zustimmungen:
    0
    Also meines Wissens ist es korrekterweise so, daß du für <ul> als auch für <li> margin und padding setzen musst.

    Gruss

    Retrax
     
    BlackCat, 14.12.2004
  7. lengsel

    lengselMacUser Mitglied

    Mitglied seit:
    25.11.2003
    Beiträge:
    4.553
    Zustimmungen:
    53
    Naja, wenn Du ein inline-Element wie z.B. <span> mit display:block formatierst, dann stehen sie natürlich nicht mehr in einer Zeile nebeneienander, sondern brechen nach sich um. Der umgekehrte Weg ist eben Listen so hinzubiegen, dass sie nebeneeinander stehen (display: inline). Brauche ich aber gar nichts zu verbiegen, denn wenn ich die <span>s in ein div packe, habe ich ja schon eine Reihe Texte nebeneienander. Das Stylesheet muss ich ja jetzt nur an die veränderte Situation anpassen. Das div bekommt einen right-margin, damit sein Inhalt am rechten Rand nicht verschütt geht, so wie das vorher passiert ist. (Kleine Träumerei: <politik margin-right: 100%>immer</politik>). Den <span>s würde ich dann entsprechend padding-right geben, damit sie auseinander rutschen.
    Sollte zum Ergebnis haben dass es genauso aussieht wie Du es haben willst, ohne dass rechts was verloren geht.

    So habe ich zumindest das Beispiel in dem Link verstanden, vielleicht denke ich ja aber auch gerade ganz falsch...oder Du willst was anderes. Ich machs manchmal gern etwas zu kompliziert...

    Grüße,
    Flo
     
    lengsel, 14.12.2004
  8. kaifreund

    kaifreund Thread StarterMacUser Mitglied

    Mitglied seit:
    30.07.2004
    Beiträge:
    52
    Zustimmungen:
    0
    Hi Flo,
    da brat mir einer einen Storch.
    Nix ist. Firefox 1.0 okay aber nur incl. display:inline für die <li>. IE 6 stapelt die Buttons brav übereinander. S.... Okay ich bin blöd.... Hilfst Du mir trotzdem? Hier das aktuellste CSS incl nahezu aller hier gemachter Vorschläge (die sich teileweise aufheben):

    div {
    margin:0px;
    margin-top:16px;
    padding:0px;
    float:right;
    }


    li {
    display:inline;
    list-style:none;
    font-size:9pt;
    color:black;
    text-align:center;
    width:100%;
    border:black solid 1px;
    padding:2px 3px 1px 3px;
    text-decoration:none;
    font-weight:bold;
    margin:0px;
    margin-left:10px;
    }


    merci!!
    kai
    ps: <politik> ist dann wohl css 5 standard? ;-)


    ---
    Ergänzung:
    So supi ist die Lösung doch nicht: Bei hover gibt es nun ein Problem...
     
    kaifreund, 14.12.2004
  9. lengsel

    lengselMacUser Mitglied

    Mitglied seit:
    25.11.2003
    Beiträge:
    4.553
    Zustimmungen:
    53

    Offensichtlich will hier der IE Blockelemente auch nach Aufforderung nicht inline darstellen. Deswegen meinte ich vorhin, es ist imho immer der unelegantere Weg das display von Elementen zu verändern, was Du ja machen musst wenn Du Listenelemente nimmst. Hast Du mal meinen <div>/<span> Vorschlag ausprobiert?

    Hilfe (nach Kräften) für ehrliche Probleme gibts immer, nur die die offensichtlich zu faul zum suchen sind bekommen keine Antwort (in diesem Thread ja jetzt nicht der Fall).

    Ich glaube die <politik>-styles werden wir wohl nicht mehr erleben... :)

    Grüße,
    Flo
     
    lengsel, 14.12.2004
  10. kaifreund

    kaifreund Thread StarterMacUser Mitglied

    Mitglied seit:
    30.07.2004
    Beiträge:
    52
    Zustimmungen:
    0
    Hi Flo,
    ja klar habe ich auch die <div> <span> Variante getestet. -Faul war ich definitv nicht. Habe etliche Tuts durch die sich mit Listen und Navigation beschäftigen. Mir schwirrt schon der Kopf (bin halt noch nicht so der CSS Freak). Aber klar ist mir das nicht was da (ab)geht. Habe es gerade online gestellt...

    glimpse.de/esa

    nerv.

    kai
    ps: das mit der Politik wird uns noch ereilen...
     
    kaifreund, 14.12.2004
Die Seite wird geladen...