Wie muß der code lauten?

retnüg

Hallo,
auf meiner Website http://www.guenter-leipfinger.dederen code ich nicht erstellt habe, gefällt mir der Hovereffekt beim Navigationsmenü. Nun wollte ich diesen Effekt auch auf der Seite http://www.guenter-leipfinger.de/photoalben/photoalben.html einsetzen, doch es gelingt mir nicht.
Wer ist so nett, und hilft mir dabei?

Sailor

Der folgende CSS Code sollte dir erst mal helfen - passt zwar wegen des unterschiedlichen Layouts der beiden Seiten nicht zu 100%, aber das kannst du ja nach belieben nachbessern!

HTML

.pageheader p:nth-of-type(odd) {
  width: 240px;              /*die Breite der p-Elemente / Links*/
  margin: 10px auto;         /*Positionierung der Elemnte 10px Abstand oben unten - auto links rechts (=zentriert)*/
}
.pageheader p a {
  width: 100%;
  display: block;
  padding: 0.3rem 0;
  color: #483d8b;
  background-color: #63B8FF;
  border: 1px solid #000;    
  border-radius: 0.3rem;
}
.pageheader p a:hover {
  background-color: black;
  color: gold;
}

Alles anzeigen

Bitte auf unerwünschte Nebenwirkungen auf anderen Seitenteilen prüfen.

Bandit

Zitat von retnüg

Wer ist so nett, und hilft mir dabei?

Idealerweise du dir selber. Du hast für die Startseite den passenden CSS-Code bekommen, jetzt kann es doch nicht so schwer sein, das auf einer anderen Seite ebenfalls zu nutzen. Im Grunde musst du doch nur das Menü der Startseite auf die weitere Seite kopieren und die Links anpassen!

retnüg

Das habe ich schon getan:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Photoalben</title>
   <meta name="description"">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- <link href="../css/zentrale.css" rel="stylesheet"> -->

   <style>


   /*Icon-Font - font-family: 'FontAwesome';*/
   @import url(http://fontawesome.io/assets/font-awesome/css/font-awesome.css);


   /*Überschriften - font-family: 'Roboto Slab', Serif;*/
   @import url(https://fonts.googleapis.com/css?family=Roboto+Slab);


   /*Fließtext - font-family: 'Roboto', Sans-Serif";*/
   @import url(https://fonts.googleapis.com/css?family=Roboto);


   /*Zahlen* - font-family: 'Merriweather';*/
   @import url(https://fonts.googleapis.com/css?family=Merriweather);


   /*Basisangaben*/
   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         /*box-sizing: border-box;*/
         min-width: 1px;
      }
      html {
      }
      body {
         padding: 1rem 0.5rem 2rem 0.5rem;
         margin: 0rem 0rem 0rem 0rem;
      }
   }


   /*Schriften*/
   @media all {
      html {
         font-family: sans-serif;
         font-size: 150%;
         line-height: normal;
      }
      h1 {
         font-family: 'Felix titling', serif;
         font-size: 36px;
         color: #800000;
         letter-spacing: 0.5rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      h2, h3, h4, h5, h6 {
         font-family: 'Roboto Slab', serif;
         font-size: 1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      p, li, dl, dt, address {
         font-family: Roboto, sans-serif;
         font-size: 1rem;
         font-style: normal;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      a {
         /*darkblue*/
         color: hsla(240, 100%, 27%, 1);
         text-decoration: none;
         outline: none;
         margin: 0rem 0rem 0rem 0rem;
      }
      figcaption {
         font-family: Roboto, sans-serif;
         font-size: 0.9rem;
         margin: 0rem 0rem 0rem 0rem;
      }
   }


 


   
   /*body*/
   @media all {
      body {
    background-color: #3366FF;
      }
   }
   @media only screen and (min-width: 1000px) {
      body {
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
      }
   }


   /*.pageheader*/
   @media all {
      .pageheader {
         background-color:         
    #63B8FF;
         border: 1px solid black;
      }
      .pageheader h1 {
         text-align: center;
      }
   }
   @media only screen and (min-width: 1000px) {
      .pageheader {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(50% - 0rem - 2px - 0rem);
      }
   }


  
    /*.navigation*/
   @media all {
      .navigation {
         background-color: #63B8FF;
         padding: 0.5rem;
         margin: 1.rem 0rem;
      }
      .navigation p {
         text-align: center;
      }
      .navigation a {
         color: #B22222;
         font-weight: bold;  
      }
   }
   a:hover {
    background-color: #CEECF5;
}
    /*.navigation*/
   @media all {
      .navigation {
         background-color: #63B8FF;
         padding: 0.5rem;
         margin: 0.5rem 0rem;
      }
      .navigation p {
         text-align: center;
      }
      .navigation a {
         color: #B22222;
         font-weight: bold;  
      }
   }
   a:hover {
    background-color: #FFC1C15;
}
   @media only screen and (min-width: 1000px) {
     .navigation a,
      .navigation a:visited {
         display: block;
         color:     #483d8b;
         font-weight: bold;
         padding: 0.3rem;
         border: 1px solid black;
         border-radius: 0.3rem;
      }
      .navigation a:hover,
      .navigation a:active,
      .navigation a:focus {
         background-color: black;
         color: gold;
      }


      


   /*.content*/
   @media all {
      .content {
         background-color: #63B8FF;
         border: 2px solid black;
         padding: 0.5rem;
         margin: 0.5rem 0rem;
      }
      .content h2 {
         color: ;
         text-align: center;
      }
      .content figure {
         max-width: 600px;
         margin: 0rem auto;
      }
   }
   @media only screen and (min-width: 1000px) {
      .content {
         margin: 0.5rem 1rem;
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(100% - 250px - 250px - 1rem - 2px - 2rem);
      }
   }


   


   /*.pagefooter*/
   @media all {
      .pagefooter {
         padding: 0.5rem;
         border: 2px solid black;
         margin: 0.5rem 0rem;
      }
   }

   }


   /*Vorlagen zum Kopieren*/
   /*CSS*/
   @media all {
   }
   @media only screen and (min-width: 0px) {
   }
   @media only screen and (max-width: 0px) {
   }


   .Stil1 {color: #000}
   h2 {
    font-size: 1px;
}
h3 {
    font-size: 1px;
}
h4 {
    font-size: 1px;
}
h5 {
    font-size: 1px;
}
h6 {
    font-size: 1px;
}
   </style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<header class="pageheader">
   <h1 class="pageheader">Photoalben</h1>
      <p align="center"><a href="http://guenter-leipfinger.de/photoalben/ahrntal/album/index.html">Ahrntal</a></p>
      <p align="center">&nbsp;</p>
      <p align="center"><a href="http://guenter-leipfinger.de/photoalben/Winter/album/index.html">Winter</a></p>
      <p align="center">&nbsp;</p>
      <p align="center"><a href="http://guenter-leipfinger.de/photoalben/Korfu/album/index.html">Korfu</a></p>
      <p align="center">&nbsp;</p>
      <p align="center"><a href="http://guenter-leipfinger.de/photoalben/Wien/album/index.html">Wien, Wien nur Du allein</a></p>
      <p align="center">&nbsp;</p>
      <p align="center"><a href="http://guenter-leipfinger.de/photoalben/Eng/album/index.html">Ein Ausflug in die Eng</a></p>
      <p align="center">&nbsp;</p>
      <p align="center"><a href="http://guenter-leipfinger.de/photoalben/Foto-Kunst/album/index.html">Fotokunst  </a></p>
      <p align="center">&nbsp;</p>
      <p align="center"><a href="http://guenter-leipfinger.de/index.html">zurück zur Übersicht </a></p>

</header>

Alles anzeigen

zeigt aber leider keine Wirkung

Bandit

Warum lagerst du das CSS nicht in eine eigene Datei aus?

Und nein, die Navigation hast du nicht kopiert!

Code

<nav class="navigation">
      <p><a href="http://guenter-leipfinger.de/Malerei/Aquarelle/album/index.html">Aquarelle</a></p>
      <p><a href="http://guenter-leipfinger.de/Malerei/Acrylmalerei/album/index.html">Acrylmalerei</a></p>
      <p><a href="http://guenter-leipfinger.de/photoalben/photoalben.html">Photoalben</a></p>
      <p><a href="http://guenter-leipfinger.de/Kontakt.html">Kontakt</a></p>
      <p><a href="http://guenter-leipfinger.de/impressum.html">Impressum</a></p>
      <p><a href="http://gb.webmart.de/gb.cfm?id=1331502l" http:="" gb.webmart.de="">Gästebuch</a></p>
      <p><a href="http://mitglieder.ecard-service.net/uebersicht.php?account=malerei" >Grußkarten</a></p>
	   <p><br><br><br>


        <script type="text/javascript" src="https://whomania.com/count/k3p"></script>


        <br>


        


      </p>
	  <div align="center"><span ><p style="font-size:12pt;">Letzte Aktualisierung:</p>
  <!--?php echo date("d.m.Y, H:i:s",filectime("index.php"));
?-->
    <script type="text/javascript">
document.write(new Date().getDate()+"."+(new Date().getMonth()+1)+"."+new Date().getFullYear())
  </script></p>


	  
   </nav>

Alles anzeigen

Code

[COLOR=#000080]<header class=[COLOR=#0000FF]"pageheader"[/COLOR]>[/COLOR]
   [COLOR=#000080]<h1 class=[COLOR=#0000FF]"pageheader"[/COLOR]>[/COLOR]Photoalben[COLOR=#000080]</h1>[/COLOR]
      [COLOR=#000080]<p align=[COLOR=#0000FF]"center"[/COLOR]>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000FF]"http://guenter-leipfinger.de/photoalben/ahrntal/album/index.html"[/COLOR]>[/COLOR]Ahrntal[COLOR=#008000]</a>[/COLOR][COLOR=#000080]</p>[/COLOR]
      [COLOR=#000080]<p align=[COLOR=#0000FF]"center"[/COLOR]>[/COLOR][B][I]&nbsp;[/I][/B][COLOR=#000080]</p>[/COLOR]
      [COLOR=#000080]<p align=[COLOR=#0000FF]"center"[/COLOR]>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000FF]"http://guenter-leipfinger.de/photoalben/Winter/album/index.html"[/COLOR]>[/COLOR]Winter[COLOR=#008000]</a>[/COLOR][COLOR=#000080]</p>[/COLOR]
      [COLOR=#000080]<p align=[COLOR=#0000FF]"center"[/COLOR]>[/COLOR][B][I]&nbsp;[/I][/B][COLOR=#000080]</p>[/COLOR]
      [COLOR=#000080]<p align=[COLOR=#0000FF]"center"[/COLOR]>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000FF]"http://guenter-leipfinger.de/photoalben/Korfu/album/index.html"[/COLOR]>[/COLOR]Korfu[COLOR=#008000]</a>[/COLOR][COLOR=#000080]</p>[/COLOR]
      [COLOR=#000080]<p align=[COLOR=#0000FF]"center"[/COLOR]>[/COLOR][B][I]&nbsp;[/I][/B][COLOR=#000080]</p>[/COLOR]
      [COLOR=#000080]<p align=[COLOR=#0000FF]"center"[/COLOR]>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000FF]"http://guenter-leipfinger.de/photoalben/Wien/album/index.html"[/COLOR]>[/COLOR]Wien, Wien nur Du allein[COLOR=#008000]</a>[/COLOR][COLOR=#000080]</p>[/COLOR]
      [COLOR=#000080]<p align=[COLOR=#0000FF]"center"[/COLOR]>[/COLOR][B][I]&nbsp;[/I][/B][COLOR=#000080]</p>[/COLOR]
      [COLOR=#000080]<p align=[COLOR=#0000FF]"center"[/COLOR]>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000FF]"http://guenter-leipfinger.de/photoalben/Eng/album/index.html"[/COLOR]>[/COLOR]Ein Ausflug in die Eng[COLOR=#008000]</a>[/COLOR][COLOR=#000080]</p>[/COLOR]
      [COLOR=#000080]<p align=[COLOR=#0000FF]"center"[/COLOR]>[/COLOR][B][I]&nbsp;[/I][/B][COLOR=#000080]</p>[/COLOR]
      [COLOR=#000080]<p align=[COLOR=#0000FF]"center"[/COLOR]>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000FF]"http://guenter-leipfinger.de/photoalben/Foto-Kunst/album/index.html"[/COLOR]>[/COLOR]Fotokunst  [COLOR=#008000]</a>[/COLOR][COLOR=#000080]</p>[/COLOR]
      [COLOR=#000080]<p align=[COLOR=#0000FF]"center"[/COLOR]>[/COLOR][B][I]&nbsp;[/I][/B][COLOR=#000080]</p>[/COLOR]
      [COLOR=#000080]<p align=[COLOR=#0000FF]"center"[/COLOR]>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000FF]"http://guenter-leipfinger.de/index.html"[/COLOR]>[/COLOR]zurück zur Übersicht [COLOR=#008000]</a>[/COLOR][COLOR=#000080]</p>[/COLOR]

[COLOR=#000080]</header>[/COLOR]

Alles anzeigen

Das ist doch eindeutig anders

retnüg

richtig, ist ja auch eine andere Seite (photoalben.html und nicht index.html)

Bandit

Das ist jetzt nicht dein Ernst, oder?
Es ist doch sch... egal, was für eine Seite es ist, das Prinzip ändert sich doch deswegen nicht.

retnüg

Was bitte ist da anders, außer dem tag[QUOTE]align="center"[/QUOTE]
der ist wichtig, sonst sind die Menüpunkt nicht mehr zentriert.

oder wo siehst Du noch Unterschiede, dann sag es bitte.

Bandit

Code

<nav class="navigation">

Code

[COLOR=#000080]<header class=[COLOR=#0000FF]"pageheader"[/COLOR]>[/COLOR]

Da siehst du wirklich keinen Unterschied?
Das hier ist der klassische Fall, wenn man Leuten fertigen Quellcode liefert, dieser einfach nur per Copy/Paste übernommen wird, ohne sich überhaupt Gedanken darüber zu machen, was da passiert.

retnüg

Sorry, hast ja Recht, es dauert eben noch, bis ich in CSS fit bin - DANKE für Deinen Hinweis

Bandit

Du hast immer noch über 230 Zeilen CSS-Code im HTML stehen, lager das in eine Datei aus.

retnüg

Danke für den Hinweis. Noch was: mir gefällt der große Abstand zwischen den Menüpunkten nicht besonders, sehe aber keine Möglichkeit, den zu verkleinern. In der index.html ist es besser. Aber wie kann ich das Menü hier verkürzen?

Bandit

Kopfschüttel
Bitte lerne die Grundlagen und beschäftige dich mal ernsthaft mit deinem eigenen Quellcode. Was glaubst du machen diese Zeilen:

Code

<p align="center">&nbsp;</p>

retnüg

Nun dass der Text zentriert ausgerichtet wird, aber was hat das mit dem Abstand zu tun?

Arne Drews

Zitat von retnüg

Nun dass der Text zentriert ausgerichtet wird, aber was hat das mit dem Abstand zu tun?

Ein <p>-Tag hat von Haus aus einen Abstand ( margin, padding ). Du wickelst nicht nur Deine einzelnen Links damit ein, sondern spendierst zwei aufeinander folgenden zudem einen weiteren unnötigen Zwischenraum mit der Code-Zeile, die Bandit gepostet hat.

Mal ganz abgesehen davon, dass align="center" über CSS gesteuert werden sollte, ist das Zentrieren von leerem Inhalt ziemlich sinnfrei...

retnüg

ich habe doch die css-Steuerung von center

HTML

/*.navigation*/
   @media all {
      .navigation {
         background-color: #63B8FF;
         padding: 0.5rem;
         margin: 1.rem 0rem;
      }
      .navigation p {
         text-align: center;

Arne Drews

Damit ist Dein align="center" noch überflüssiger, als bereits erwähnt.
Wie dem auch sei, Deine Frage war, was die Zeile mit dem Abstand zu tun hat. Hast Du das denn jetzt verstanden?

retnüg

Ist verstanden, trotzdem bleibt der Text nicht in der Mitte, wenn ich das align="center" entferne und wenn ich das   lösche, klappt es auch nicht.

Bandit

Du hast immer noch die Zeilen

Code

<p align="center">&nbsp;</p>

und bei

Code

<p align="center"><a href="http://guenter-leipfinger.de/photoalben/ahrntal/album/index.html">Ahrntal</a></p>

steht immer noch das center drin. Ich bin raus, wird mir zu blöd. Mein letzter Tipp

Lerne die Grundlagen

retnüg

Ich danke Dir auf alle Fälle für Deine Unterstützung und wertvollen Tipps. Ich bin eben mehr auf künstlerischem Gebiet tätig. Nun gut Ding will Weile haben und irgendwann kann ich das auch, ist nur eine Frage der Zeit.

Wie muß der code lauten?

Tags

Benutzer online in diesem Thema