Veröffentlicht 5. November 200816 j Hallo Gemeinde! Ich hab ein wahrscheinlich recht simples Problem, aber ich komm einfach nicht auf die Lösung. Evtl. hab ich mich schon total verhtmlt... Ich will die drei Icons in der Subnavigation dieser Seite zentrieren, aber ich schaff es einfach nicht. <div id="SubNavigation"> <div style="margin:0 auto;"> <ul> <li class="subTitle"> <div class="projectNavIcon" > <a title="" href="#"> </a> </div> </li> </ul> <ul> <li class="subTitle"> <div class="projectNavIcon" > <a title="" href="#"> </a> </div> </li> </ul> </div> </div> Das umschließende Div hat die ID #SubNavigation. Hier hab ich text-align:center angegben. Ich dacht jetzt dass das DIV um die uls diese doch zentrieren müsste. Steh irgendwie auf dem Schlauch. #SubNavigation { width:758px; text-align:center; } #SubNavigation ul { list-style:none; margin:0px; padding:0px; } Die Listen brauche ich, da ich eigentlich, bei Mousover über einem Subnavigationspunkt unter diesem, den Titel des aktuellen Kontext anzeigen wollte. Also z. B. so: Wenn ihr eine bessere Idee habt würde ich mich freuen! Vielen Dank schon mal! Gruß, Kristof
7. November 200816 j Also evtl geht es, wenn Du Deinem #SubNavigation ul oder dem <div> das um diese <ul> herum ist auch eine feste Breite gibst.
10. November 200816 j Hallo forTeesSake Wenn ich dem ul eine feste Weite gebe, tut sich nichts. Dem DIV kann ich keine fest definierte width geben, da das es n Projekte (uls) enthalten kann.
10. November 200816 j Oh ja, das verstehe ich. Da gibt es wohl ein Problem mit dem ""text-align: center" und dem float Deiner <ul> Alternativ würde ich die ganzen <ul> und <li> einfach weglassen, und nur Deine <a> nacheinander schreiben. Dann ist auch alles zentriert. Und die "onmouserver()" Anweisungen kannst Du ja auch in die <a> mit rein packen. also in etwa (nicht vollständig) <div id="SubNavigation"> <div style="text-align:center;"> <a href="/aktuell/0815/onlinegang/" onmouseover="" onmouseout="" title="Projekt Neues von der Homepage"> </a> <a href="/aktuell/0815/onlinegang/" onmouseover="" onmouseout="" title="Projekt Neues von der Homepage"> </a> <a href="/aktuell/0815/onlinegang/" onmouseover="" onmouseout="" title="Projekt Neues von der Homepage"> </a> </div> <div style="clear:both;"></div> </div>
11. November 200816 j Ja, das sollte funktionieren, danke! Die Liste hatte ich ursprünglich hierfür gebraucht: Die Listen brauche ich, da ich eigentlich, bei Mousover über einem Subnavigationspunkt unter diesem, den Titel des aktuellen Kontext anzeigen wollte. Also z. B. so: Oder gibt es da ein elegatere Lösung? Hast du evtl. eine Idee? Ich bauch das nicht bei MousOver, aber wenn das Projekt aktiv ist sollte unter dem aktivem SubNavi-Punkt der Name des Projektes stehen. Wie mach ich das wenn das ganze dynamisch wächst? Kann da ja nicht mit Position absolute arbeiten. Vielen Dank schon mal! Gruß, Kristof
12. November 200816 j Ich würde versuchen, diese Div-Suppe mal zu entschlacken, das sieht ja schlimmer aus als ein Tabellen-Layout.
12. November 200816 j Man könnte auch einfach mit position:absolute arbeiten wäre wohl am schnellsten gegangen.
12. November 200816 j Div-Suppe, trifft es wohl recht gut . Hab mich bemüht es so sauber wie möglich zu machen, leider hat mich der Unterschiede in der Darstellung der gebräuchlichen Browsern dazu gezwungen es so aufzubauen. Mit position absolut kann ich nicht arbeiten, da die Seite dynamisch aus einem CMS entsteht. Ich weiss nie wie viele Projekte ich habe.
12. November 200816 j ich hab da mal was gebastelt (verhält sich in IE und FF gleich ) <html> <body> <div style="text-align:center;" > <table style="margin-left:auto; margin-right:auto; table-layout:fixed" > <tr> <td style="width:32px; height:32px;" > <div style="width:32px; height:32px; background-color:#ff0000" onmouseover="this.firstChild.style.display='inline';" onmouseout="this.firstChild.style.display='none';" ><div style="display:none; position:relative; top:32px; font-size:x-large;" >ROT</div> </div> </td> <td style="width:32px; height:32px;"> <div style="width:32px; height:32px; background-color:#00ff00" onmouseover="this.firstChild.style.display='inline';" onmouseout="this.firstChild.style.display='none';" ><div style="display:none; position:relative; top:32px; font-size:x-large;" >GRÜN</div> </div> </td> <td style="width:32px; height:32px;"> <div style="width:32px; height:32px; background-color:#0000ff" onmouseover="this.firstChild.style.display='inline';" onmouseout="this.firstChild.style.display='none';" ><div style="display:none; position:relative; top:32px; font-size:x-large;" >BLAU</div> </div> </td> </tr> </table> </div> </body> </html> Bearbeitet 12. November 200816 j von M.A.Knapp
13. November 200816 j ...leider hat mich der Unterschiede in der Darstellung der gebräuchlichen Browsern dazu gezwungen es so aufzubauen. Nun ja... Du lässt die Browser raten und wunderst dich, wenn sie es dann gnadenlos tun? Teile dem Browser mit, in welcher Sprache du mit ihm zu sprechen gedenkst, sprich füge erstmal einen passenden docType an und lasse die Seite dann erstmal validieren. Zu deinem Problem: Wenn du einen Listenpunkt (.subTitle) mit display:block formatierst und diesen Block dann floatet, fängst der erste Block wo an? Richtig, links... Pack deshalb die Subnavigation in eine richtige Liste, anstatt für jeden Menüpunkt eine neue Liste auf zu machen und formatiere den li-Tag dann mit display: inline; (ohne float!).
Archiv
Dieses Thema wurde archiviert und kann nicht mehr beantwortet werden.