suche Navigationsleisten

Hier könnt ihr nützliches reinstellen, wenn ihr was gefunden habt.

Moderator: HTML-Laie

Antworten
Benutzeravatar
Patrick
Grosser Webmaster
Grosser Webmaster
Beiträge: 732
Registriert: Mi 21. Jul 2010, 15:55
Mein Vorname: Patrick
Wohnort: Bei Münster
Kontaktdaten:

suche Navigationsleisten

Beitrag von Patrick »

Huhu,

ich glaube moni hatte mir mal eine seite genannt, wo man verschiedene
Navigationsleisten holen kann. Leider finde ich die adresse dazu nicht mehr.

Wer kann mir seiten nennen, wo man navileisten bekommt?

vielen Dank im voraus!

LG
Benutzeravatar
moni
Held des Forums
Held des Forums
Beiträge: 8335
Registriert: Mo 16. Nov 2009, 20:56
Mein Vorname: Monika
Wohnort: Borken
Kontaktdaten:

Re: suche Navigationsleisten

Beitrag von moni »

Hallo Patrick...
Glaub das waren die beiden Seiten hier

http://www.dynamicdrive.com/style/cssli ... tegory/C1/
http://de.selfhtml.org/css/layouts/navi ... eisten.htm


Hab auch auf meinen PC schnuppert und was gefunden..es sind ganz einfach leisten ...muss nur sie auf dein e Bedürfnisse anpassen (Farbe breite etc)
ob das ws für dich sein kann
vertikale Navi..

Code: Alles auswählen

 ul#Navigation links {
   width: 150px;
                     height: 30px;
                     line-height:30px;
                     text-align: center;
                     text-decoration: none;
                     font-family: vardana, helvetica, sans-serif;
                     font-size: 16px;
                     color: #FFFFFF;
                     background-color: maroon;
                     border: solid 1px #ffffff

  }
  ul#Navigation a {
    display: block;
                     text-align: center;
                     text-decoration: none;
                     color: maroon;
                     background-color: pink;
                     border: solid 1px #FFFFFF;

  }
  ul#Navigation a:link {
      width: 150px;
                     height: 30px;

                     line-height:30px;
                     text-align: center;
                     text-decoration: none;
                     font-family: arial, helvetica, sans-serif;
                     font-size: 16px;
                     color: #FFFFFF;
                     background-color: maroon;
                     border: solid 1px #ffffff

  }
  ul#Navigation a:visited {

                     line-height:30px;
                     text-align: center;
                     text-decoration: none;
                     font-family: arial, helvetica, sans-serif;
                     font-size: 16px;
                     color: #FFFFFF;
                     background-color: maroon;
                     border: solid 1px #ffffff




  }
  ul#Navigation a:hover {
     color: black;
      border: 1px solid red;
     background-color: gold;


  }
  ul#Navigation a:active {
      color: black;
     border: 1px solid red;
     background-color: green;
       background-image:url();
          background-repeat: repeat;

  }
Horizontale Navi

Code: Alles auswählen

#menuoben {
                     display: block;
                     width: 151px;
                     height: 36px;
                     line-height:37px;
                     text-align: center;
                     text-decoration: none;
                     font-family: verdana, helvetica, sans-serif;
                     font-weight:normal;
                     font-size: 17px;
                     color: #FFFFFF;
                     background-color: maroon;
                     border: solid 1px #ffffff;
}
#menuoben:hover {
                     display: block;
                      width: 151px;
                     height: 36px;
                     line-height:37px;
                     text-align: center;
                     text-decoration: none;
                     color: maroon;
                     background-color: pink;
                     border: solid 1px #FFFFFF;
}


Hier ist das komplete skript pike dir das HTML raus...

Code: Alles auswählen

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dreispaltiges Layout mit Kopf- und Fußzeile</title>
<style type="text/css">
  body {
    color: black; background-color:pink;
     background-image:url();
       background-repeat: repeat-x;
    font-size: 100.01%;
    font-family:Verdana,serif;
    margin: 0; padding: 9em;
    min-width: 41em;
     border: 12px ridge red; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
  }

    a:link {font-family: Verdana, sans-serif;color:#0000FF;font-size:12px;text-decoration:none}
a:visited {font-family: Arial, Helvetica, sans-serif;color:#0000FF;font-size:12px;text-decoration:none}
a:active {font-family: Arial, Helvetica, sans-serif;color:#0000FF;font-size:12px;text-decoration:none}
a:hover {font-family: Arial, Helvetica, sans-serif;color:#9b1515;font-size:16px;text-decoration:none}




  h1 {
    font-size: 20px;
    margin: 0 0 0.7em; padding: 0.3em;
    text-align: center;
      text-decoration:none;


      background-image:url( http://www.animaatjes.de/hintergrunden/natur/55.jpg);    /*inhalt und oben */
    background-color:  silver;
     background-repeat: repeat;
    border: 0px ridge red;
  }

   h2 {
    font-size: 22px;
    margin: 0 0 0.0em; padding: 0.0em;
    text-align: center;
      background-image:url();  /*logo*/
    background-color: green;
     background-repeat:no- repeat;
    border: 0px ridge gold;
  }

  ul#Navigation {

    width: 151px;
    font-size: 20px;
    float: left;
      text-decoration:none;
    margin: 0 0 1.0em; padding: 0;
    border: 2px solid black;
         background-image:url();
          background-repeat: repeat;
    background-color: green;
     border: 1px solid black;



  }


  ul#Navigation links {
   width: 150px;
                     height: 30px;
                     line-height:30px;
                     text-align: center;
                     text-decoration: none;
                     font-family: vardana, helvetica, sans-serif;
                     font-size: 16px;
                     color: #FFFFFF;
                     background-color: maroon;
                     border: solid 1px #ffffff

  }
  ul#Navigation a {
    display: block;
                     text-align: center;
                     text-decoration: none;
                     color: maroon;
                     background-color: pink;
                     border: solid 1px #FFFFFF;

  }
  ul#Navigation a:link {
      width: 150px;
                     height: 30px;

                     line-height:30px;
                     text-align: center;
                     text-decoration: none;
                     font-family: arial, helvetica, sans-serif;
                     font-size: 16px;
                     color: #FFFFFF;
                     background-color: maroon;
                     border: solid 1px #ffffff

  }
  ul#Navigation a:visited {

                     line-height:30px;
                     text-align: center;
                     text-decoration: none;
                     font-family: arial, helvetica, sans-serif;
                     font-size: 16px;
                     color: #FFFFFF;
                     background-color: maroon;
                     border: solid 1px #ffffff




  }
  ul#Navigation a:hover {
     color: black;
      border: 1px solid red;
     background-color: gold;


  }
  ul#Navigation a:active {
      color: black;
     border: 1px solid red;
     background-color: green;
       background-image:url();
          background-repeat: repeat;

  }
     /* ende navi links*/

  div#Info {


    font-size: 0.9em;
    float: right; width: 150px;
    margin: 0 0 1.1em; padding: 0;
    background-color: green;
       background-image:url();
          background-repeat: repeat;
          border: 2px solid black;
  }
  div#Info h2 {
    font-size: 1.33em;
    margin: 0.2em 0.5em;
  }
  div#Info p {
    font-size: 1em;
    margin: 0.0em;
    text-align: center;
    font weight:bold;

  }

  div#Inhalt {
    margin: 0 0 10 px;
    padding: 0 px;
    border: 0px solid black;
       background-image:url(http://www.animaatjes.de/hintergrunden/natur/55.jpg);
           background-repeat: repeat;

       border: 5px solid transparent;
  }
  * html div#Inhalt {
    height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorer bis Version 6 */
  }
  div#Inhalt h2 {
    font-size: 1.2em;
    margin: 0.2em 0;
  }
  div#Inhalt p {
    font-size: 1em;
    margin: 1em 0;

  }

  p#Fusszeile {
    clear: both;
    font-size: 0.9em;
    margin: 0; padding: 0.1em;
    text-align: center;
    background-color:gold; border: 1px solid black;




  }

    /*navo oben*/
  #menuoben {
                     display: block;
                     width: 151px;
                     height: 36px;
                     line-height:37px;
                     text-align: center;
                     text-decoration: none;
                     font-family: verdana, helvetica, sans-serif;
                     font-weight:normal;
                     font-size: 17px;
                     color: #FFFFFF;
                     background-color: maroon;
                     border: solid 1px #ffffff;
}
#menuoben:hover {
                     display: block;
                      width: 151px;
                     height: 36px;
                     line-height:37px;
                     text-align: center;
                     text-decoration: none;
                     color: maroon;
                     background-color: pink;
                     border: solid 1px #FFFFFF;
}






      ul#Navigation rechts       {
                     display: block;
                     width: 150px;
                     height: 30px;
                     line-height:30px;
                     text-align: center;
                     text-decoration: none;
                     font-family: arial, helvetica, sans-serif;
                     font-size: 16px;
                     color: #FFFFFF;
                     background-color: maroon;
                     border: solid 1px #ffffff;
}
#menuoben:hover {
                     display: block;
                       width: 150px;
                     height: 30px;
                     line-height:30px;
                     text-align: center;
                     text-decoration: none;
                     color: maroon;
                     background-color: pink;
                     border: solid 1px #FFFFFF;
}




</style>
</head>
<body>

  <p algin="right"><img src="http://lh3.ggpht.com/_WghlenoNYG0/S503b2kafzI/AAAAAAAAJl4/X12Va3gmtGU/s912/bilder.jpg"width="942"height="200">
  <h2> <table align="center" border="0">
                    <tbody>
                        <tr>
                            <td><a href="#" id="menuoben">Linkoben01</a></td>
                            <td><a href="#" id="menuoben">Linkoben02</a></td>
                            <td><a href="#" id="menuoben">Linkoben03</a></td>
                            <td><a href="#" id="menuoben">Linkoben04</a></td>
                            <td><a href="#" id="menuoben">Linkoben05</a></td>
                            <td><a href="#" id="menuoben">Linkoben05</a></td>
                        </tr>
                    </tbody>
                </table></div></h2>

  <ul id="Navigation">
     <h2>Thema</h2>
    <li><a href="">seite 1</a></li>
      <li><a href="">seite 1</a></li>
       <li><a href="">seite 1</a></li>

        <li><a href="">seite 1</a></li>
         <li><a href="">seite 1</a></li>
         <h2>Thema</h2>
      <li><a href="">seite 1</a></li>
       <li><a href="">seite 1</a></li>
        <li><a href="">seite 1</a></li>
          <li><a href="">seite 1</a></li>
      <li><a href="">seite 1</a></li>
         <h2>Thema</h2>
       <li><a href="">seite 1</a></li>
        <li><a href="">seite 1</a></li>
          <li><a href="">seite 1</a></li>
           <h2>Thema</h2>
      <li><a href="">seite 1</a></li>
       <li><a href="">seite 1</a></li>
        <li><a href="">seite 1</a></li>
        <h2>Bilder
        </h2> <p><center>
                <img src="http://www.animaatjes.de/hintergrunden/natur/21.jpg"> </center>
        </p>
  </ul>

  </div>
  <div id="Info">

   <ul id="Navigation">
     <p>Thema</p>
    <li><a href="">seite 1</a></li>

      <li><a href="">seite 1</a></li>
       <li><a href="">seite 1</a></li>
        <li><a href="">seite 1</a></li>
             <p>Thema</p>
         <li><a href="">seite 1</a></li>
      <li><a href="">seite 1</a></li>
       <li><a href="">seite 1</a></li>
        <li><a href="">seite 1</a></li>
          <li><a href="">seite 1</a></li>

      <li><a href="">seite 1</a></li>
       <li><a href="">seite 1</a></li>
        <li><a href="">seite 1</a></li>
          <li><a href="">seite 1</a></li>

      <li><a href="">seite 1</a></li>
       <li><a href="">seite 1</a></li>
        <li><a href="">seite 1</a></li>
        <h2>Info-Box</h2>
  </ul>


    <p>Hatten Sie sich im letzten Beispiel gewundert,
       warum die Überschrift dieser Box nicht als solche ausgezeichnet war?
       Da diese Info-Box im Quelltext vor dem Inhaltsbereich steht
       und erst in diesem die Hauptüberschrift notiert war,
       wäre hier eine Überschrift zweiten Grades noch nicht sinnvoll gewesen.</p>
    <p>Im Quelltext dieses Beispiels ist nun zuerst die Seitenüberschrift notiert,
       wodurch auch dieses semantische Problem gelöst ist.</p>
  </div>   <p><marquee direction=left> Marquee von rechts nach links </marquee> </p>

  <div id="Inhalt">



       <h1> ausgezeichnet
       und kann genauso gut wie ein <div> über CSS formatiert
       - hier mit einem Rahmen und einer Hintergrundfarbe versehen - werden.
       Auch eine Grafik könnte in <h1> als Hintergrundbild definiert
       oder über <img> eingebunden werden.</p>
    <p>Betrachten Sie dieses Beispiel nicht als fertige Layout-Vorlage.
       Nutzen Sie das HTML-Grundgerüst für die Inhalte Ihrer Seite
       und passen Sie das CSS nach Belieben Ihren Vorstellungen an:
       experimentieren Sie mit den Größenangaben, Farben und Rändern
       und fügen Sie z.B. individuelle grafische Elemente ein.</p>
  </div>

  <p id="Fusszeile">Diese Fußzeile stellt über die CSS-Eigenschaft 'clear'
     den Elementenfluss wieder her.</p>

</body>
</html>
Viele Grüße ...Monika
Antworten

Zurück zu „Nützliches für den Websitebau“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 22 Gäste