Anzeige

2 Navileisten

2 Navileisten | PSD-Tutorials.de

Erstellt von bibifellow, 28.01.2013.

  1. bibifellow

    bibifellow Nicht mehr ganz neu hier

    Dabei seit:
    21.08.2007
    Beiträge:
    239
    Geschlecht:
    weiblich
    2 Navileisten
    Hallo, ich habe zwei Navileisten erstellt die zweite soll erst beim Klicken auf Galerie sichtbar werden. Ist dies möglich??

    HTML:
    1. <div id="navibereich">
    2.  <div id="navibereich_innen">
    3. <ul>
    4. <li ><a href="index.php?seite=home"
    5. class="<?php echo ($_GET['seite'] == 'home') ? 'current': 'normal'; ?>"
    6.  tabindex="1" >Pinnocchio</a></li>
    7.  
    8.   <li
    9. <li> <a href="index.php?seite=impressum"
    10. class="<?php echo ($_GET['seite'] == 'impressum') ? 'current': 'normal'; ?>"
    11. tabindex="1">Impressum</a></li>
    12. <li> <a href="index.php?seite=Galerie"
    13. class="<?php echo ($_GET['seite'] == 'anfahrt') ? 'current': 'normal'; ?>"
    14. tabindex="1">Anfahrt</a></li><ul>
    15.    <div id="navibereich1">
    16.  <div id="navibereich_innen1">
    17.  <ul>
    18.       <li> <a href="index.php?seite=kleinundfein"  
    19.      class="<?php echo ($_GET['seite'] == 'kleinundfein') ? 'current': 'normal'; ?>" tabindex="1">klein und fein</a></li>
    20.      
    21.       <li > <a href="index.php?seite=toskana"
    22.      class="<?php echo ($_GET['seite'] == 'toskana') ? 'current': 'normal'; ?>" tabindex="1">Toskana</a></li>
    23.      
    24.       <li > <a href="index.php?seite=acryl"
    25.      class="<?php echo ($_GET['seite'] == 'acryl') ? 'current': 'normal'; ?>" tabindex="1" >Acryl</a></li>
    26.      
    27.       <li > <a href="index.php?seite=Bleistift"
    28.      class="<?php echo ($_GET['seite'] == 'bleistift') ? 'current': 'normal'; ?>" tabindex="1">Bleistift</a></li>
    29.      
    30.       <li > <a href="index.php?seite=aquarell"
    31.      class="<?php echo ($_GET['seite'] == 'aquarell') ? 'current': 'normal'; ?>" tabindex="1">Aquarell</a></li>
    32.      
    33.        <li > <a href="index.php?seite=foto"
    34.       class="<?php echo ($_GET['seite'] == 'foto') ? 'current': 'normal'; ?>" tabindex="1">Foto</a></li>
    35.        
    36.                           </ul>
    37.  </div> <!-- Ende Navibereich innen -->
    38.  </div> <!-- Ende Navibereich -->
    39.  </div> <!-- Ende Navibereich innen -->
    40.  </div> <!-- Ende Navibereich -->
    41.  
    Die zweite Navigation soll nur beim Klicken auf Galerie sichtbar werden.
    css
    HTML:
    1. div#navibereich {
    2.   overflow: hidden;
    3.   text-align: right;  
    4.   padding: 5px 20px 42px 20px;
    5.   margin-top:50px;
    6.  
    7. }
    8. * html #navibereich { height: 1%; }
    9.   div#navibereich ul {
    10.    list-style-type:none;
    11.     width: auto;
    12.     margin-bottom: 0;
    13.  margin-top:35px;
    14.   }
    15.   div#navibereich li {
    16.     float:right;
    17.     width: auto;      
    18.     list-style-type: none;
    19.     margin: 0;
    20.     margin-right: 5px;  
    21.  margin-bottom:0;  
    22.   }
    23.   div#navibereich a {
    24.      
    25.     color: #fff0cf;
    26.     padding: 4px 25px 4px 25px;
    27.   font-family: "#fff0cf";
    28.   font-size:16px;
    29.   }
    30.   div#navibereich li a.sie-sind-hier {
    31.     color: black;
    32.     background-color: white;
    33.     border-bottom-color: white;
    34.    }
    35.   div#navibereich a:hover,
    36.   div#navibereich a:focus {
    37.     color: black;
    38.     background-color: white;
    39.     border-bottom-color: white;
    40.   }
    41.   div#navibereich a:active {
    42.     color: black;
    43.     background-color: white;
    44.     border-bottom-color: white;
    45.   }
    46.  
    47.  
    48.   /*--------------------------------------------------------------*/
    49.    div#navibereich1 ul {
    50.    list-style-type:none;
    51.     float: right;
    52.     width: auto;
    53.     margin-bottom: 0;
    54.   }
    55.   div#navibereich1 li {
    56.  margin-top:0;
    57.     float:right;
    58.     width: auto;      
    59.     list-style-type: none;
    60.     margin: 0;
    61.     margin-right: 1px;    
    62.   }
    63.   div#navibereich1 a {
    64.    border-right:1px solid #fff0cf;;
    65.  color: #fff0cf;
    66.  padding: 4px 8px 4px 8px;
    67.  font-family: "#fff0cf";
    68.  font-size: 12px;
    69.   }
    70.   div#navibereich1 li a.sie-sind-hier {
    71.     color: black;
    72.     background-color: white;
    73.     border-bottom-color: white;
    74.    }
    75.   div#navibereich1 a:hover,
    76.   div#navibereich1 a:focus {
    77.     color: black;
    78.     background-color: white;
    79.     border-bottom-color: white;
    80.   }
    81.   div#navibereich1 a:active {
    82.     color: black;
    83.     background-color: white;
    84.     border-bottom-color: white;
    85.   }
    css
     
    #1      
  2. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.316
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    2 Navileisten
    AW: 2 Navileisten

    Deinen PHP/WP/HTML-Mix wird niemand nachbauen wollen, linke bitte zum Problem und erkläre genau, welche Navi bei Klick auf welche sichtbar werden soll. Aus den Schnipseln lässt sich nicht erkennen, was du eigentlich bezwecken möchtest.
     
    #2      
  3. bibifellow

    bibifellow Nicht mehr ganz neu hier

    Dabei seit:
    21.08.2007
    Beiträge:
    239
    Geschlecht:
    weiblich
    2 Navileisten
    AW: 2 Navileisten

    bei klicken auf
    HTML:
    1. <li> <a href="index.php?seite=Galerie"
    2. class="<?php echo ($_GET['seite'] == 'anfahrt') ? 'current': 'normal'; ?>"
    3. tabindex="1">Galerie</a></li>
    soll die darunter liegende Navileiste ( beide sind horizontal) mit klein und fein, Toskana, Acryl, Bleistift, Aquarell und Foto sichtbar werden.
    Ist das überhaupt möglich??
     
    #3      
  4. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.103
    Geschlecht:
    männlich
    Ort:
    Ö
    2 Navileisten
    AW: 2 Navileisten

    Dafür ist deine HTML Strukutur zur Zeit nicht geeignet. Baue die zuerst auf eine verschachtelte Liste um. Auch ist die Klasse "normal" redundant und kann entfernt werden. Eine Kennzeichnung des aktuellen Menüs reicht aus.
    Ein Tutorial, welches dir bei deinem Vorhaben behilflich sein kann. Hier wird nicht mit Klick, sondern mit Mouseover gearbeitet, was ich aber auch besser finde, da die meisten Seiten so funktionieren und du komplett ohne JS arbeiten kannst. Möchtest du unbedingt einen Klick haben, dann musst du natürlich noch JS hinzufügen.
     
    #4      
  5. bibifellow

    bibifellow Nicht mehr ganz neu hier

    Dabei seit:
    21.08.2007
    Beiträge:
    239
    Geschlecht:
    weiblich
    2 Navileisten
    AW: 2 Navileisten

    Ich habe noch ein bisschen gegoogelt es soll so aussehen
    Home Galerie Impressum


    Toskana Acryl Bleistift Aquarell Foto

    Beim Klick auf Galerie soll die Leiste darunter sichtbar werden.

    Würde das auch mit einer Infobox gehen??

    Verzweifel schon weil ich keine Lösung finde....
     
    #5      
  6. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.103
    Geschlecht:
    männlich
    Ort:
    Ö
    2 Navileisten
    AW: 2 Navileisten

    Wieso muss es unbedingt bei Klick sein? Das erfodert doch nur unnötiges Javascript. Dann würde mein Link dir doch weiterhelfen, du kannst das submenü ja nach deinen Vorstellungen stylen und natürlich auch vertikal erscheinen lassen.
    Und was soll eine Infobox sein?
     
    #6      
  7. bibifellow

    bibifellow Nicht mehr ganz neu hier

    Dabei seit:
    21.08.2007
    Beiträge:
    239
    Geschlecht:
    weiblich
    2 Navileisten
    AW: 2 Navileisten

    Habe es jetzt mit Javascript gelöst. Leider habe ich unter den Menüpunkten im Firefox kleine rote Punkte. Habe schon in der Navigation css für li a und ul
    HTML:
    1.  list-style-type:none;
    2.  
    aber es bleibt trotzdem. Woran könnte das liegen.
     
    #7      
  8. bibifellow

    bibifellow Nicht mehr ganz neu hier

    Dabei seit:
    21.08.2007
    Beiträge:
    239
    Geschlecht:
    weiblich
    2 Navileisten
    nur im firefox rote Punkter unter der Navigation

    Hallo, ich habe eine Navigation erstellt und nur im Firefox und Safari habe ich eine Linie von roten Punkten unter der Navigation obwohl ich
    HTML:
    1. list-style-type:none;
    ich habe auch schon
    HTML:
    1. outline: None;
    versucht. Gäbe es noch eine andere Lösung.

    Habe an dieser Stelle mal die beiden Threads zusammengefügt. Da es immer noch um die selbe Navi geht brauchst du keine 2 Threads. (simonpicos - mod)
     
    Zuletzt von einem Moderator bearbeitet: 01.02.2013
    #8      
  9. rafoldi

    rafoldi Aktives Mitglied

    Dabei seit:
    04.11.2012
    Beiträge:
    1.684
    Geschlecht:
    männlich
    Ort:
    Köln Porz
    Software:
    LR 5 und CC 2014
    Kameratyp:
    EOS 7D, EOS 550d
    2 Navileisten
    AW: nur im firefox rote Punkter unter der Navigation

    Hallo Verstehe Dein Problem noch nicht ganz, vermute zwar das eine oder andere. Kannst Du ein kleines Bild hoch laden? Oder mehr Code?
    Eventuell ist im CSS Code auch noch mehr Versteckt? An der Stelle die Du geschildert hast könnte in der Struktur noch ein Widerspruch vorhanden sein.
     
    #9      
  10. bibifellow

    bibifellow Nicht mehr ganz neu hier

    Dabei seit:
    21.08.2007
    Beiträge:
    239
    Geschlecht:
    weiblich
    2 Navileisten
    AW: nur im firefox rote Punkter unter der Navigation

    Und das ist nur bei der 2. Navi die ich mit JavaScript eingebunden habe um Tabellen einzubinden.

    meine css sieht so aus
    HTML:
    1. ul.navi {
    2.              list-style: none;
    3.              margin: 0;
    4.              padding: 0;
    5.   position:fixed;
    6.       list-style-type:none;
    7.      }
    8.  ul.navi li {
    9.              display: inline;
    10.    list-style-type:none;
    11.  outline:none;
    12.  
    13.  }
    14.  ul.navi li a {
    15.              padding: 3px 5px;
    16.              color: #000;
    17.              text-decoration: none;
    18.     font-family:Arial, Helvetica, sans-serif;
    19.  font-size: 10px;
    20.  outline:none;
    21.  }
    22.  ul.navi li a.selected,  ul.navi li a:hover {
    23.  background-color:#c4b36e;
    24.  color: #fff;
    25.  
    26.  }
    27.  ul.navi li a:focus {
    28.              outline: 0;
    29.  }
    die navi normal
    HTML:
    1. <div class="tabs">
    2.    <ul class="navi">
    3.      <li><a href="#eins">Home</a></li>
    4.      <li><a href="#zwei">Toskana</a></li>
    5.      <li><a href="#drei">Acryl</a></li>
    6.      <li><a href="#vier">Bleistift</a></li>
    7.           <li><a href="#fuenf">Aquarell</a></li>
    8.           <li><a href="#sechs">Foto</a></li>
    9.           <li><a href="#sieben">Impressum</a></li>
    10.    </ul>
    hier ein Bild davon
    http://www.abload.de/image.php?img=unbenannt-18puf9.jpg
     
    Zuletzt bearbeitet: 02.02.2013
    #10      
  11. bibifellow

    bibifellow Nicht mehr ganz neu hier

    Dabei seit:
    21.08.2007
    Beiträge:
    239
    Geschlecht:
    weiblich
    2 Navileisten
    AW: 2 Navileisten

    Habe ich gelöst. Danke für die Hilfe.
     
    #11      
  12. rafoldi

    rafoldi Aktives Mitglied

    Dabei seit:
    04.11.2012
    Beiträge:
    1.684
    Geschlecht:
    männlich
    Ort:
    Köln Porz
    Software:
    LR 5 und CC 2014
    Kameratyp:
    EOS 7D, EOS 550d
    2 Navileisten
    AW: 2 Navileisten

    Währe schön wenn Du Deine Lösung uns mitteilen kannst.
     
    #12      
  13. bibifellow

    bibifellow Nicht mehr ganz neu hier

    Dabei seit:
    21.08.2007
    Beiträge:
    239
    Geschlecht:
    weiblich
    2 Navileisten
    AW: 2 Navileisten

    Die includete Seite hat sich ein a:dotted von der Hauptseite hergenommen und diese angezeigt. Habe dann die Hauptseite nach dotted gesucht und bei a: dann border bottom dotted . Dies gelöscht und die Pünktchen waren weg.
     
    #13      
Seobility SEO Tool
x
×
×