kostenloser Webspace werbefrei: lima-city


navi mit spiegelstrichen

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    sessin

    Kostenloser Webspace von sessin

    sessin hat kostenlosen Webspace.

    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>&#124;</p>
                <li><a href="kurse.html">Kurse</a></li> <p>&#124;</p>
                <li><a href="termine.html">Termine</li> <p>&#124;</p>
                <li><a href="amledung.html">Anmeldung</a></li> <p>&#124;</p>
                <li><a href="impressum.html">Impressum</a></li> <p>&#124;</p>
                <li><a href="wir.html">&Uuml;ber Uns</a></li> <p>&#124;</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 :smile:

    sessin
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. 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;)
  4. kaetzle7

    Moderator Kostenloser Webspace von kaetzle7

    kaetzle7 hat kostenlosen Webspace.

    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>&#124;</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.
  5. Nunja, rein von der "Sauberkeit" her sollte das hier schon mit UL- und LI-Tags gebaut werden, weil es eben eine Liste beschreibt. Der Ansatz von kaetzle7 funktioniert zwar natürlich auch, widerspricht aber der Trennung von Inhalt und Style-/Layoutdefinition.
  6. machst es halt so

    <div id="navi">
            <ul>
                <li><a href="index.html" class="active">Home</a></li>
                <li>&#124;</li>
                <li><a href="kurse.html">Kurse</a></li>
                <li>&#124;</li>
                <li><a href="termine.html">Termine</a></li>
                <li>&#124;</li>
                <li><a href="amledung.html">Anmeldung</a></li>
                <li>&#124;</li>
                <li><a href="impressum.html">Impressum</a></li>
                <li>&#124;</li>
                <li><a href="wir.html">&Uuml;ber Uns</a></li>
                <li>&#124;</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
  7. 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
  8. 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
  9. Egal, was da noch kommt. Designelemente per Listenelement zwischen die Navipunkte zu schieben ist nicht gut. ;)

    FF
  10. Autor dieses Themas

    sessin

    Kostenloser Webspace von sessin

    sessin hat kostenlosen Webspace.

    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
  11. 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 &nbsp; einzufügen ist nicht grade elegant...
  12. thomasba

    Co-Admin Kostenloser Webspace von thomasba

    thomasba hat kostenlosen Webspace.

    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
  13. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!