|
|||
Einfaches Menü mittels CSS
Hi,
da ich mir endlich mal die Grundlagen von CSS aneignen möchte, experimentiere ich gerade mit einer Liste, die als Navigationsmenü fungieren soll. Das vorläufige Resultat sieht folgendermaßen aus: http://www.ximes.net/mt/test/NavBar02.htm Das zugehörige Stylesheet: http://www.ximes.net/mt/test/NavBar02.css Welche Änderungen sind nötig, damit der graue Balken rechts vom letzten Menüeintrag auf der richtigen Höhe erscheint? D.h. der graue Balken sollte sich über die gesamte Seitenbreite erstrecken und nur durch einen ein Pixel breiten weissen Spalt zwischen den Menüeinträgen unterbrochen sein... Vielen Dank im voraus!! B/B |
Sponsored Links |
|
|||
Hat niemand eine Idee, wie ich dem Problem beikommen könnte?
Meine CSS-Datei sieht mittlerweile folgendermaßen aus: Code:
#navcontainer { margin: 0; padding: 0; font: bold 11px Verdana, sans-serif; width: 100%; left: 0px; height: 19px; } #navlist { list-style-type: none; margin: 0; padding: 0; } #navlist li { float: left; margin: 0; padding: 0; width: auto; display: block; } #navlist li a, #navlist li a:link { background: #fff; color: #555; text-decoration: none; padding: 3px 5px; display: block; border-bottom: 3px solid #bbb; margin-right: 1px; } #navlist li a:hover { color: #F15F23; border-bottom: 3px solid #F15F23; cursor: pointer; } #navlist li a#current, #navlist li a#current:link { color: #A70901; cursor: default; font-weight: bold; border-bottom: 3px solid #A70901; } #navlist li a#current:hover { border-bottom: 3px solid #A70901; } #navSpacer { display: block; margin: 0; padding: 0; border-bottom: 3px solid #bbb; height: 19px; } Code:
... <body> <div id="navcontainer"> <ul id="navlist"> <li id="active">Item one[*]Item two[*]Item three[*]Item four[*]Item five[/list]<span id="navSpacer"></span> </div> </body> ... Der FireFox "löscht" den 1 Pixel breiten Spalt zwischen den Menüeinträgen, der IE zeigt den Balken rechts vom letzten Eintrag etwas abgerückt und auf der falschen Höhe dar... Any ideas? Daaaaanke! B/B |
Sponsored Links |
|
|||
Zitat:
Code:
#menu ul { list-style-type: none; margin: 0; padding: 0; width: 10em; } #menu li { margin: 0 0 0 1.5em; padding: 0 0 0 2px; font-size: .8em; } #menu li span, #menu li a { display: block; /* * IE voll anklickbar; */ height: auto ! important; height: 1px; margin: 0 2px 1px 0; border: none; padding: 2px 3px 2px 3px; background-color: transparent; color: #000; text-decoration: none; } #menu li span, #menu li a:hover, #menu li a:focus, #menu li a:active { border: 1px solid #336699; padding: 1px 2px 1px 2px; background-color: #CCDDEE; } #menu li span:hover { background-color: #BBCCDD; } #menu li span { cursor: default; } Code:
<div id="menu"> : : : <ul> [*]Item one [*]Item two [*]Item three [*]<span title="angezeigte Website">Item four (activ) </span> [*]Item five [/list]: : : </div> <edit> CODE verbessert | Mo Sep 12, 2005 19:17
__________________
</ulle> |
|
|||
Hatte mich gestern schon mit deinem File beschäftigt, aber es war wieder mal spät und eine Lösung mit border ist mir nicht eingefallen.
Es sieht sehr einfach aus, was du da hast, erscheint mit jedoch ziemlich schwierig in der Behandlung. Hier besteht vor allem das Problem des 1px Abstandes, der mit der von dir ursprünglich gewählten Lösung von #navlist border-bottom imho nicht gelöst werden kann. Der jetzige Ansatz ist erfolgversprechender. Was semantisch zwar nicht korrekt ist, aber funktionieren dürfte, ist, ein neues #navlist li a hinter deinen letzten Menüpunkt zusetzen und es auf die restliche Breite aufzuziehen. Um dort hovereffekte zu vermeiden, gib dem a eine extra klasse oder id und weise entsprechende Formatierungen zu. sry, mehr fällt mir dazu nicht ein. grüsse andir
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte |
|
|||
Nicht bei seinen Vorgaben:
http://www.ximes.net/mt/test/NavBar03.htm Die Links sollten alle voneinander durch einen 1 px breiten Spalt oder einen weißen Punkt Breite 1px getrennt werden, der Rest soll durchgehend sein. Mit Hintergrundgrafiken könnte es auch gehen, aber das ist vermutlich nicht gefragt. grüsse andir
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte |
|
|||
andir, E|H,
vielen Dank schon mal für eure Anregungen! Der Ansatz mit einem zusätzlichen Bereich #navlist li a, der sich über die gesamte Restbreite erstreckt, sieht sehr vielversprechend aus. Werd mich baldestmöglich damit auseinandersetzen... |
|
||||
Ich hab's mal probiert. Sieht geringfügig anders aus, als das Original, läuft unten nicht mit margin, sondern mit padding. Läßt sich sicher noch verbessern. Aber es geht. spacer ist weg.
Code:
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> /* CSS Document */ #navcontainer { margin: 0; padding: 0 0 3px; font: bold 11px Verdana, sans-serif; width: 100%; border-bottom: 3px solid #bbb; background:#fff; } #navlist { list-style-type: none; margin: 0; padding: 0; } #navlist li { display: inline; margin: 0 0 0 -4px; padding: 0; width: auto; } #navlist a { background: #fff; color: #555; text-decoration: none; padding: 3px 5px; border-bottom: 3px solid #bbb; margin-right: 1px; } #navlist li a:hover { color: #F15F23; border-bottom: 3px solid #F15F23; } #navlist a#current { color: #A70901; cursor: default; border-bottom: 3px solid #A70901; } #navlist a#current:hover { border-bottom: 3px solid #A70901; } /*#navSpacer { display: block; margin: 0; padding: 0; border-bottom: 3px solid #bbb; height: 19px; }*/ </style> </head> <body> <div id="navcontainer"> <ul id="navlist">[*]Item one[*]Item two[*]Item three [*]Item four[*]Item five[/list] </div> </body> </html> |
Sponsored Links |
|
||||
So, jetzt paßt's:
Code:
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> #navcontainer{ margin: 0; padding: 0; font: bold 11px Verdana, sans-serif; width: 100%; border-bottom: 3px solid #bbb; background:#fff; } #navlist{ list-style-type: none; margin: 0; padding: 3px 0 3px 0; } #navlist li{ margin: 0 -4px 0 0; padding: 0; width: auto; display: inline; } #navlist a{ background: #fff; color: #555; text-decoration: none; padding: 3px 5px; border-bottom: 3px solid #bbb; margin-right: 1px; } #navlist a:hover{ color: #F15F23; border-bottom: 3px solid #F15F23; cursor: pointer; } #navlist a#current{ color: #A70901; cursor: default; font-weight: bold; border-bottom: 3px solid #A70901; } #navlist a#current:hover{ border-bottom: 3px solid #A70901; } </style> </head> <body> <div id="navcontainer"> <ul id="navlist"> <li id="active">Item one[*]Item two[*]Item three [*]Item four[*]Item five[/list]</div> </body> </html> |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
CSS Menü - Anfänger benötigt Hilfe | mauricen | CSS | 2 | 24.01.2013 12:44 |
Problem mit CSS bei Drop Down Menü | Sunny86 | CSS | 6 | 24.09.2012 15:33 |
Problem mit CSS Dropline menü | horst77 | CSS | 1 | 12.08.2009 12:49 |
suckerfish menü formatieren / css zurücksetzen / bug | sicnezz | (X)HTML | 1 | 13.12.2007 06:47 |
IE6 Problem mit CSS Menü | träumer | CSS | 2 | 15.01.2007 17:55 |