ComputerBase Menü
Aktuelles

Warum wird beim Anklicken des Bildes auf das Kontaktformular verlinkt?

L

letterbox

Banned
Registriert
Feb. 2014
Beiträge
1.057
Hallo, bei der Website guenter-leipfinger.de wird beim Anklicken des Bildes
(s. screenshot) das Kontaktforumular angezeigt, doch im Quelltext
Code: 
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Malerei und Fotografie</title>
   <meta name="description"Der Autor gibt Einblick in sein künstlerisches Schaffen; kunstvolle Fotografie "Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
   <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);

 
   /*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: 120%;
         line-height: 1.3;
      }
      h1 {
         font-family: 'Felix titling', serif;
         font-size: 2.3rem;
		 color: #2233dd;
         letter-spacing: 0.1rem;
         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;
      }
   }

   /*Grafiken*/
   @media all {
      figure {
         min-width: 1px;
         max-width: 100%;
         min-height: 1px;
         margin: 0,1rem;
      }
      img {
         min-width: 1px;
         display: block;
         max-width: 100%;
         /*max-height: 100vh;*/
         border: 0;
      }
   }

   /*Listen dl*/
   @media all {
      dl {
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      dt,
      dd {
      }
      dt {
         font-weight: bold;
         margin: 0rem 0rem 0rem 0rem;
      }
      dd {
         margin: 0rem 0rem 1rem 0rem;
      }
      dd p {
         margin: 0rem 0rem 0rem 0rem;
      }
   }

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

   /*.pageheader*/
   @media all {
      .pageheader {
         background-color: #97FFFF;
         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(100% - 0rem - 2px - 0rem);
      }
   }

   /*.navigation*/
   @media all {
      .navigation ,.sidebar span.Stil1{
         background-color: #63B8FF;
         padding: 0.5rem;
         margin: 0.5rem 0rem;
      }
 .navigation p ,.sidebar span.Stil1{
         text-align: center;
      }
      .navigation a ,.sidebar span.Stil1 {
         color: #B22222;
         font-weight: bold;  
      }
   }
     a:hover{
    background-color: #CEECF5;
}
   @media only screen and (min-width: 1000px) {
     .navigation a,.sidebar span.Stil1,
      .navigation a:visited {
         display: block;
         color: 	#483d8b;
         font-weight: bold;
         padding: 0.3rem;
         border: 1px solid black;
         border-radius: 0.3rem;
      }
     .sidebar span.Stil1:hover{
        background-color: black;
         color: gold;
       
     }
      .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: #FFFF33;
         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);
      }
   }

   /*.sidebar*/
   @media all {
      .sidebar {
         background-color: #63B8FF;
		 color:	#483d8b;
		  font-weight: bold;
         padding: 0.5rem;
         border: 2px solid #63B8FF;
         margin: 0.5rem 0rem;
      }
   }
   @media only screen and (min-width: 1000px) {
      .sidebar {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(250px - 1rem - 4px - 0rem);
      }
   }

   /*.aktuellstesbild*/
   @media all {
      .aktuellstesbild {
         border: 2px solid black;
         padding: 0.5rem;
         margin: 0.5rem 0rem;
      }
      .aktuellstesbild h2 {
         text-align: center;
		 font-weight: bold;
      }
      .aktuellstesbild figure {
         max-width: 600px;
         margin: 0rem auto;
      }
   }
   @media only screen and (min-width: 1000px) {
      .aktuellstesbild {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(100% - 500px - 2rem - 1rem - 4px - 0rem);
      }
   }

   /*.pagefooter*/
   @media all {
      .pagefooter {
         padding: 0.5rem;
         border: 2px solid black;
         margin: 0.5rem 0rem;
      }
   }
   @media only screen and (min-width: 1000px) {
      .pagefooter {
         background-color: #97FFFF;
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(100% - 1rem - 4px - 0rem);
      }
   }

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

   .Stil1 {color: #0000FF}
 

   .Stil1 {color: #0000FF}
   </style>
   <link rel="icon" type="image/vnd.microsoft.icon" href="http://www.guenter-leipfinger.de/favicon3.ico">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
   <header class="pageheader">
      <h1>Herzlich willkommen</h1>
   </header>
   <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/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>
	  
	 
    </span></div>
     <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().getDatenew Date().getMonth()+1)+"."+new Date().getFullYear())
  </script>20.2.2018<p></p>

	  
   </span></div></nav>

	  
   </nav>
   
   <main class="content">
     <h2>&nbsp;</h2>
     <h2>&nbsp;</h2>
     <h2>Malerei</h2>
     <figure>
        <div align="center"><img src="http://guenter-leipfinger.de/paysage.jpg" alt="Malerei"></div>
      </figure>
     
      <footer class="contentfooter">      </footer>
   </main>
   <aside class="sidebar">
     <p><a href="http://guenter-leipfinger.de/Kontakt.html">Die Bilder können käuflich erworben werden.<span>Bei Interesse mail an den</span></p>
      <p><span><br>
      </span><span class="Stil1">Künstler</span></p>
</aside>
   <div class="aktuellstesbild">
      <h2>Das aktuellste Bild</h2>
      <figure>
         <div align="center"><img src="http://guenter-leipfinger.de/illusion.jpg">
         </div>
         <figcaption>
           <div align="center">
             <h2><strong>"Illusion"</strong></h2>
           </div>
		   
         </figcaption>
     </figure>
   </div>
  
</body>

</html>
finde ich diese Verlinkung nicht.
 

Anhänge

  • Screenshot-2018-3-1 Malerei und Fotografie.png
    Screenshot-2018-3-1 Malerei und Fotografie.png
    1,4 MB · Aufrufe: 478
Du hast das <a> bei "<a href="http://guenter-leipfinger.de/Kontakt.html">Die Bilder können käuflich erworben werden.<span>Bei Interesse mail an den" nicht geschlossen. Mach ein </a> hinter das "Künstler</span></p>" in Zeile 352.
 
Zuletzt bearbeitet:
Beim darüber stehenden Link auf das Kontaktformular fehlt der schliessende Tag </a>, das ist der Grund.
 
Danke für den Hinweis, aber ich lese ich Zeile 310
Code: 
<a href="http://guenter-leipfinger.de/Kontakt.html">Kontakt</a>
 
Zuletzt bearbeitet:
In Zeile 350 fehlt beim Link auf das Kontaktformular das schliessende Tag </a>. Darauf hatte ich oben schon hingewiesen, als ich den Link über dem Bild erwähnte.
 
Danke in Zeile 350, ich war vorher in Zeile 310. Nun klappt es.
 
Geht mich zwar nix an, aber willst Du damit echt was verkaufen? Ich meine ne HTML Webseite hab ich glaube ich zuletzt 2005 gesehen. Wäre es nicht einfacher gewesen ein CMS mit Gallery aus einem "Guss" zu nehmen? HTML ist halt ne wunderbare Anfängeraufgabe um ne Webseite/ Webspace zu kompromittieren.
 
Leider immer noch nicht ganz: Wenn ich jetzt über
Die Bilder können käuflich erworben werden.Bei Interesse mail an den
Zum Vergrößern anklicken....
mit der Maus fahre, habe ich einen ungewollten Hover-Effekt.
 
...guck dir mal das Ende von Zeile 350 nochmal an.
 
Zuletzt bearbeitet:
Habs schon entdeckt und den Tag
HTML: 
background-color: #CEECF5;
entfernt.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

J
Shopware 5 Accordion funktioniert nicht
Antworten
4
Aufrufe
876
ColdGlow
ColdGlow
N
Bilder wird oben an der Suchleiste abgeschnitten (HTML/CSS)
Antworten
3
Aufrufe
943
Janush
Janush
D
css nth frage
Antworten
8
Aufrufe
720
D0bby
D
N
Dark/light mode funktioniert nicht ganz
Antworten
3
Aufrufe
1.190
abcddcba
A
N
Schriftgröße via Chrome Console ändern
Antworten
5
Aufrufe
1.421
floq0r
floq0r
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 165 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz