navi mit spiegelstrichen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
abakus
anmeldung
ansatz
code
display
dynamische navigation
helfer
http
impressum
kurs
letzte element
list
liste
login
problem
regel
schief gehen
termin
test
url
-
es handelt sich um folgendes:
ich möchte eine horizontale navigation mit spiegelstrichen machen. im firefox geht es, aber der IE verschiebt alles.
ich möchte einfach das die striche mittig zwischen den navigationspunkten sind. und dann hab ich noch eine frage,
nämlich wenn man versucht später eine dynamische navigation in typo3 damit zu erzeugen, ob das probleme geben
könnte?
hier ist der code
<div id="navi"> <ul> <li><a href="index.html" class="active">Home</a></li> <p>|</p> <li><a href="kurse.html">Kurse</a></li> <p>|</p> <li><a href="termine.html">Termine</li> <p>|</p> <li><a href="amledung.html">Anmeldung</a></li> <p>|</p> <li><a href="impressum.html">Impressum</a></li> <p>|</p> <li><a href="wir.html">Über Uns</a></li> <p>|</p> <li><a href="login.html">Login</a></li> </ul> </div>
#navi {top: 122px; left: 340px; position: absolute; z-index: 40; font-weight: bold; white-space:nowrap; } #navi p {color: #ffffff; top: 0px; float:left; white-space:nowrap; display:inline; } #navi li {padding: 10px; display:inline; margin-top: 0px; list-style:none; float:left; white-space:nowrap;}
Danke für Hilfe
sessin -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hallo sessin,
bevor ich etwas zu deinem Anliegen sage, will ich mal allgemein darauf hinweisen, dass es für die Helfer wesentlich einfacher ist, wenn du (und andere Threadersteller) eine Beispieldatei hochladen. Um wirklich Fehler zu finden ist es sowieso einfacher mit Firebug und ähnlichem die ganze Seite zu betrachten. Für die anderen und mich bedeutet das nämlich mehr Arbeit - aber nicht immer will ich soviel Zeit investieren.
Wenn du alle "layoutrelevanten" Dinge mit CSS erstellst, brauchst du dich nicht darum zu sorgen, dass in TYPO3 da etwas schief gehen könnte. Du musst vllt. höchstens einen Klassennamen ändern oder ähnliche Kleinigkeiten.
Allerdings solltest du einmal grundlegend überdenken was du machst. Nehme man CSS heraus würde das in etwa so aussehen:
- Home
.
- Kurse
.
...
Das ist nicht gerade wirklich schön und sinnvoll. Suchmaschinen werden wahrscheinlich sogar erkennen, dass du die Punkte als Designelemente missbrauchst, aber trotzdem ist es logisch nicht richtig. Überlege mal wie du das lösen kannst, indem du statt des Punkts ein Bild einsetzt, welches mit list-style enstprechend konfiguriert werden kann.
Vielleicht löst das sogar gleich das andere Problem;) -
In CSS-Sachen hat werktags wirklich immer recht. Ich möchte hier also nicht seinen Worten widersprechen, habe mir aber soeben die Mühe gemacht mich mit dem Problem zu befassen und kann es mir jetzt nicht nehmen, meine Erkenntnisse hier preiszugeben...
Zuerst ist mir aufgefallen, dass du in dieser Zeile das </a> vergessen hast:
<li><a href="termine.html">Termine</li> <p>|</p>
Das ändert schon mal was...
Dann hast du das Ganze viel zu kompliziert gestaltet. Du verwendest zuerst <li> (womit du alles untereinander setzt), um dann mit CSS mühevoll die Links wieder nebeneinander zu bringen... Viel einfacher wäre es so: http://kaetzle7.lima-city.de/zeugs/sessin.htm. -
machst es halt so
<div id="navi"> <ul> <li><a href="index.html" class="active">Home</a></li> <li>|</li> <li><a href="kurse.html">Kurse</a></li> <li>|</li> <li><a href="termine.html">Termine</a></li> <li>|</li> <li><a href="amledung.html">Anmeldung</a></li> <li>|</li> <li><a href="impressum.html">Impressum</a></li> <li>|</li> <li><a href="wir.html">Über Uns</a></li> <li>|</li> <li><a href="login.html">Login</a></li> </ul> </div>
bei #navi li {padding: 10px;...} runter um 5 => #navi li {padding: 5px;...}, dann noch color: #ffffff; hinzu und fertig ist 's
... und so schaut 's dann aus => http://trixi.ibitlive.de/test/test.html, wenn 's denn unbedingt mit <li>...</li> sein soll ^^ (im Falle da zumind. noch was mit Untermenue käme)
greetz abakus
Beitrag zuletzt geändert: 22.3.2010 23:35:53 von abakus -
Finde diese künstlich eingefügten Listenelemente nicht besonders elegant.
Ein "border-right: 1px solid #Linkfarbe" für die Listenelemente sollte auch helfen. Es muß nur gewährleistet sein, daß für das letzte Element eine andere CSS-Regel angewendet wird, die dort die Linie rechts unterdrückt.
FF -
fatfreddy schrieb:
Finde diese künstlich eingefügten Listenelemente nicht besonders elegant.
FF
tja, man weiß ja nicht, vielleicht kommt da noch was mit Untermenue ... wenn nicht, dann erübrigt es sich mit <li> in der Tat ^^
greetz abakus -
Egal, was da noch kommt. Designelemente per Listenelement zwischen die Navipunkte zu schieben ist nicht gut. ;)
FF -
Vielen Dank fürs Mitdenken. Die Lösung von Fatfreddy ist wohl am besten,
wen es interessiert was daraus geworden ist:
http://sessin.lima-city.de/navi.html -
Würde noch ein padding-right: ... einfügen, damit der Text genau in der Mitte steht...
Finde übrigens ein Menü mit Listen wesentlich übersichtlicher...Abstand per einzufügen ist nicht grade elegant... -
Noch eine kurzer Hinweis, wie du das erste und/oder letzte Element der Liste ansprechen kannst, um es zu Formatieren:
http://www.quirksmode.org/css/firstchild.html
[edit]
Ein Beispiel mit deiner Navigation.
Beitrag zuletzt geändert: 24.3.2010 13:48:13 von thomasba -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
