probs mit display:block / float:right in mozilla

Diskutiere mit über: probs mit display:block / float:right in mozilla im Web Page Design Forum

  1. kaifreund

    kaifreund Thread Starter MacUser Mitglied

    Beiträge:
    52
    Zustimmungen:
    0
    Registriert seit:
    30.07.2004
    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
     
    Zuletzt von einem Moderator bearbeitet: 31.10.2015
  2. lengsel

    lengsel MacUser Mitglied

    Beiträge:
    4.627
    Zustimmungen:
    53
    Registriert seit:
    25.11.2003
    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 :)
     
  3. kaifreund

    kaifreund Thread Starter MacUser Mitglied

    Beiträge:
    52
    Zustimmungen:
    0
    Registriert seit:
    30.07.2004
    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
     
  4. BlackCat

    BlackCat Banned

    Beiträge:
    38
    Zustimmungen:
    0
    Registriert seit:
    19.10.2004
    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.
     
    Zuletzt bearbeitet: 14.12.2004
  5. kaifreund

    kaifreund Thread Starter MacUser Mitglied

    Beiträge:
    52
    Zustimmungen:
    0
    Registriert seit:
    30.07.2004
    @ 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
     
  6. BlackCat

    BlackCat Banned

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

    Gruss

    Retrax
     
  7. lengsel

    lengsel MacUser Mitglied

    Beiträge:
    4.627
    Zustimmungen:
    53
    Registriert seit:
    25.11.2003
    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
     
  8. kaifreund

    kaifreund Thread Starter MacUser Mitglied

    Beiträge:
    52
    Zustimmungen:
    0
    Registriert seit:
    30.07.2004
    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...
     
    Zuletzt bearbeitet: 14.12.2004
  9. lengsel

    lengsel MacUser Mitglied

    Beiträge:
    4.627
    Zustimmungen:
    53
    Registriert seit:
    25.11.2003

    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
     
  10. kaifreund

    kaifreund Thread Starter MacUser Mitglied

    Beiträge:
    52
    Zustimmungen:
    0
    Registriert seit:
    30.07.2004
    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...
     
Die Seite wird geladen...
Ähnliche Themen - probs display block Forum Datum
Suchmaschinen-Ergebnis für Unterdomains im Block wie in den Beispielen Web Page Design 18.09.2012
Problem mit <div>: nicht als block darstellbar Web Page Design 19.05.2008
CSS: display-Eigenschaft - Bezugspunkt bei IE anders? Web Page Design 11.02.2006
css und safari probs Web Page Design 13.09.2004

Diese Seite empfehlen

Benutzerdefinierte Suche