• Ich brauche Hilfe...
    Ich würde gerne eine Navigationsleiste erstellen. Hier ein Beispiel: #mce_temp_url#
    Nur das Thema "Navigationsleiste" mag ich überhaupt nicht, da ich noch nie eine richtig schöne hinbekommen habe...
    Kann mir wer weiterhelfen? Eventuell mit einem Tutorial in dem so eine Navigationsleiste erstellt wird?




    Ach ja und zu dem anderen Beitrag. Der war etwas schlecht beschrieben, aber ich bekomme es auch nicht besser hin.
    Also ist der egal. Ich sollte erstmal eine "einfache" (ich vermute es das die nichts schweres ist -> für euch) Navigationsleiste hinbekommen.


    Ich hoffe ich könnte das gut genug erklären :) Ich habe wenigstens ein Link gefunden mit meinem "Wunschmenü"



    Gruß

  • Also ein 'wrapper' (Box außen rum -> am besten html5 Element <nav> benutzen )
    Darin So viele <a>-tags wie du brauchst.
    Dann in CSS alle »a«'s in nav ansprechen

    CSS
    nav a{
    
    
    
    
    }

    Diesen display: inline-block; geben, höhe einstellen, »line-height« gleiche höhe geben.
    Dem wrapper dann background black und beim nav hover den a-Hintergrund auf blau.


    Kleiner Tipp -> css transition ist seehr cool :)


    Ich habs bischen eilig, wenn du fragen hast frag sie :)

  • Erstmal danke für die beiden Antworten!
    Ich habe vergessen meinen Versuch auch hier rein zu stellen, aber egal war eh mist.


    Meine große Frage ist: Benutzt man kein <ul><li></li></ul> oder <ol><li></li></ol> mehr?
    Weil ich sehe das auf Selfhtml (ich weiß ist veraltet) immer so, aber auf anderen Seiten auch.


    Ich habe es mal ein wenig versucht. Es sieht auf jedenfall schon mal echt gut aus :thumbup:
    http://skeptar.bplaced.net/




    Nun würde ich gerne die Links in der Mitte haben (Vertikal & Horizontal). Ich habe schon gesucht und habe diesen Link gefunden:
    http://www.ich-lerne-css.de/Style/Examples/007/center.html


    Kann aber mit diesem Link nichts anfangen, sprich ich verstehe es nicht...
    Einen Padding hätte ich auch gerne zwischen den Links aber damit entferne ich den ersten Link immer mehr vom linken Rand.
    Sollte ich dafür den a Elementen eine ID oder Class (ich weiß nicht welches von beiden man dafür benutzt) zuweisen?


    GRUß :thumbup: :thumbup:

  • Was meinst du denn genau mit in der Mitte haben?


    Zentriert in der Mitte deiner Leiste?
    Rechts am Rand wie auf deinem Link zu sehen? :huh:

    Habe mal schnell was gebastelt...


    [Blockierte Grafik: http://img5.fotos-hochladen.net/uploads/forumaq7p1ej086.png]


    Denkst du an sowas?


    Also ich benutze <ul> und <li> noch recht gerne , nur die Aufzählungspunkte lasse ich gerne weg :D



    Beim padding kannst du durch die Werte ja variaren wie groß der Innenabstandbstand nach links sein soll ...



    HTML
    padding: 10px //für oben 30px // für rechts 10px // für unten 0px // für links



    Der Abstand zum linken Rand würde ich aber durch margin-left anpassen :)


    Im Html-Seminar haben sie es über die ID gelöst , hängt aber auch vom Quellcode ab.


    Beispiel-Css:


    CSS
    #steuerung li{
    margin-top: 15px; /* Außenabstand oben */padding: 10px; 30px; 10px; 0px; /* Innenabstand */
    }


    mfg Nita

  • Mittig: zwischen oben und unten also vertikal mittig halt. :D
    Ich habe nochmal rumgebastelt, aber überhaupt nicht zufrieden!
    Der Padding geht nur nach recht <- 100px, also ist der Text nicht mittig drin und ID´s brauchte ich auch.
    Ich hoffe es gibt eine bessere/elegantere Lösung die ihr mir vorschlagen könnt.


    www.skeptar.bplaced.net

  • Um es ganz zentriert auszurichten musst du margin-left/margin-right und auch die padding-left/padding-right mit gleichen Werten besetzen.
    Eine andere Lösung außer dies über padding/margin zu lösen(absolute Positionierung mal weggelassen), gibt es meines Wissens nach nicht.
    Da musst du dich leider gedulden, bis du die passenden Einstellungen getroffen hast...


    Bsp:


    CSS
    padding: 10px 20px 10px 20px;
        margin-left: 7em;
        margin: right: 7em;]


    mfg Nita

  • So ich bin nun soweit glücklich. Mein letzer Wunsch ist es die Navigationsleiste ein stück nach rechts -> zu verschieben. Problem dabei: mir wäre es am liebsten keine ID's oder Class's zu benutzen, weil ich glaube das ist nur unnötig arbeit, weil in meiner CSS Datei schreibe ich genau das gleiche zwei mal z.B.




    oder kann ich so etwas zusammen fassen, weil dann könnte ich es alleine lösen :)
    @Nitamund danke für deine Hilfe soweit! :)


    www.skeptar.bplaced.net


    Gruß

  • Nav selbst nach Rechts oder den Inhalt..


    Nav selbst..: nav -> margin-left: 20px;
    Inhalt von nav..: nav -> padding-left: 20px;


    Wofür musst du denn unterscheiden zwischen #eins und #zwei ? Kannst du dir die Unterscheidung nicht sparen?


    Wenn nicht: benutze keine ID's sondern Klassen fürs css.


    Kleine empfehlung.. schau dir mal CSS »transition« an.. kann man schön mit spielen :)

  • Wofür musst du denn unterscheiden zwischen #eins und #zwei ? Kannst du dir die Unterscheidung nicht sparen?


    Er unterscheidet hier zwischen dem Link auf die Hauptseite und den andren Links. Warum er diese Unterscheidung trifft konnte ich aber nich feststellen.


    @Basii finde es ein wenig verwirrend eine solche Funktion anzubieten, wenn sie nicht genutzt werden darf aber ok, werde mich bemühen das einzuhalten :)



    mfg Nita

  • Ich glaube ihr wisst nicht was ich meine.
    Also erstmal wenn ich


    nav a{
    padding-left: 20px;
    }


    schreibe vergrößert er mir auch automatisch den Abstand zum nächsten Link (die Links gehen immer weiter auseinander), aber das möchte ich nicht.


    Und zu


    nav{
    margin-left: 20px;
    }


    wird die schwarze Leiste links und 20px; nach rechts verschoben und die Leiste geht nicht mehr die komplette breite (100%) sondern nur noch 100% - 20px.


    Ich würde einfach gerne alle Links so behalten und so wie sie sind einfach ein Stück nach rechts verschieben wie auf der Beispiel Seite.
    Ich habe das mal eingebaut wie ich das gerne haben möchte. Vielleicht ist das einfacher und ihr sagt mir was unnötig ist und was ich verbessern sollte.


    http://skeptar.bplaced.net/



    Gruß

  • Definier doch einfach für die Leiste ein eigenen Div/Span mit dem Hintergrund schwarz und der gesamten Fläche (100%) als Breite.


    Dann kannst du die Links variieren ohne damit den Hintergrund zu beinflussen.


    HTML
    <div id="hintergrund" > <div id="navi">Steurungsinhalt </div></div>


    mfg Nita

  • Wäre fein etwas genauer zu wissen wo du da steckenbleibtst,

    Zitat

    das bekomme ich nicht hin

    ist eine etwas vage Beschreibung eines Fehler....



    Du musst im Grunde nur rund um die Steuerung einen Div/Span basteln der nur den Hintergrund beeinflusst:



    mfg Nita

  • Danke Danke für die Antwort, aber ich habe es nun so gelöst das ich noch ein a Element davor erstellt habe und diesem a Element einen Margin.


    Nun hat sich wieder viel an der Seite geändert und ich würde gerne das das Bild erst unter der Navigationsleiste anfängt, weil momentan fängt das ganz oben an.
    Wie kann ich das ändern? Weil mit Margin-TOp klappt das nicht :s


    www.skeptar.bplaced.net

  • ich würde gerne das das Bild erst unter der Navigationsleiste anfängt, weil momentan fängt das ganz oben an.
    Wie kann ich das ändern? Weil mit Margin-TOp klappt das nicht :


    Der Fehler liegt in deiner Css-Datei :


    CSS
    [body{
        background-image: url('bg.jpg');
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position:center;
        background-color: black;
    }



    Wenn du für den gesamten Body einen Hintergrund definierst , wirst du diesen mit margin auch nicht von einem Element im Body - Bereich wegbewegen können..


    Hier schlage ich dir auch wieder einen <div> unter der Navigationsleiste vor der den Hintergrund regelt und in dem die anderen Elemente dann eingebettet werden.




    Und dem dann einfach in der Css-Datei die Informationen übergeben.


    mfg Nita

  • Also ich habe nochmal von vorne angefangen da ich mich damit immer noch sehr sehr schwer tue^^
    Und die Navigationsleiste sollte anscheinend doch mit <ul></ul> und <li></li> bestückt sein.
    Ich bekomme es aber nicht hin wenn ich dann noch <nav></nav> einbauen soll...


    Also hier mein Code:


    index.html




    index.css


    Code
    * { list-style:none; text-decoration:none; margin:0; padding:0;}
    
    
    
    
    #navi { text-align:center;}
    li { display:inline-block; background:#333; color:#fff;
    }
    #navi a { display:inline-block; padding:10px; color:#fff;}
    #navi a:hover { background:#a33;}



    Es wäre super nett - und würde mir sehr helfen - wenn sich jemand die Mühe machen könnte und nur diesen Code in HTML 5 umbauen könnte, damit ich
    mal vorher und nachher sehe.
    Weil ich komme gerade gar nicht mehr klar und ich habe das Gefühl das meine bisherige Seite nicht wirklich "sauber" vom Code her ist.


    GRUß

  • Hab mir mal die Mühe gemacht und das mit dem Hintergrundbild gelöst:





    mfg Nita

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!