Problem mit display: inline

    Problem mit display: inline


    Hi,
    ich kriege ein Menu einfach nicht richtig hin...
    mein Code sieht in etwa folgendermaßen aus:

    ...
    <td style="height: 20px">
    <div style="width: 500px; height: 20px; ...">
    <div style="background-color: #EEEEF8; height: 20px; width: 100px; display: inline;">
    link1
    </div>
    <div style="background-color: transparent; height: 20px; width: 100px; display: inline;">
    link2
    </div>
    ...
    </div>
    </td>
    ...

    in dem td wird also eine leiste angezeigt (das erste div), auf dem die menupunkte sind. der erste menupunkt ist selektiert, die restlichen nicht. beim

    selektierten menupunkt soll der hintergrund farblich hinterlegt sein. das problem ist nun, dass ich es einfach nicht hinkriege, dass die höhe der

    selektierfarbe 20px wird. ich habe schon rumexperimentiert und rausgefunden, dass es an display: inline liegt. allerdings brauche ich das unbedingt, da das

    menu horizontal ist und die menupunkte somit nebeneinander angezeigt werden müssen.

    habt ihr irgendwelche vorschläge?

    Ganz prinzipiell sind div-Elemente nicht die richtigen für Menüs. Das passende HTML-Element ist hier ul und li. Die Freiheit, die man dann per CSS hat ist schon bezeichnent für den Sinn von CSS. Aber ok, du möchtest sicher im Moment nicht auf Tabellen verzichten.
    Du müsstest mit einer Testdatei mal schauen wie sich inline tatsächlich auf ein div auswirkt. Möglichweise liesse sich das Problem auch mit float lösen.
    Hier musst du mal ein wenig experimentieren oder (was ich empfehle) auf Listen umsteigen.

    "Carpe Diem" powered by positiv Feelings

    danke, habe deinen rat mit der liste befolgt und es funktioniert (fast) problemlos.

    eine frage bleibt mir aber noch:

    wenn ich zwei menupunkte direkt nebeneinander haben möchte, müsste ich das so schreiben

    <li class="menu">blabloblu<li class="menu">...

    das ist relativ unübersichtlich und ich würde die [*] gerne im quellcode untereinander haben. dann ist aber immer ein leerraum dazwischen. kann ich das irgendwie unterbinden?

    Hmmm...das verwundert mich jetzt. Jedes [*] sollte normal in einer neuen Zeile stehen. Die Anordnung des HTML-Codes spielt normal keine Rolle. Also

    Code
    [*]Item1 [*]Item2 [code]
sollte die selbe Ausgabe bringen wie [code]  [*]Item1
  [*]Item2

    Kannst du kurz skizzieren wie dein Menü fertig formatiert aussehen soll?

    "Carpe Diem" powered by positiv Feelings

    ok, war schlecht beschrieben...die menupunkte sind schon nebeneinander, das ist korrekt. aber die menupunkte sollen so nebeneinander sein, dass _keine_ lücke dazwischen ist.

    d.h. wenn ich über einen button gehe und der rollovereffekt angezeigt wird, soll das rolloverrechteck so breit bis zum nächsten button sein. das funktioniert nur, wenn zwischen den [*] kein leerzeichen ist, aber das ist meiner ansicht nach total unübersichtlich. gibts da überhaupt eine möglichkeit in html?

    der zeilenumbruch ist das problem - durch den zeilenumbruch entsteht die lücke