Wie muß der Code richtig lauten?

letterbox · 25. Juli 2017

Hallo,
Hallo, auf meiner Website
http://guenter-leipfinger.de/photoalben/photoalben.html
ändern nicht nur die Links wie 'zurück zur Startseite' und die einzelnen Alben beim Überfahren mit der Maus erhellt, sondern auch dieser Text

Hier finden Sie jeweils aktuelle Photoalben

Im Augenblick:

Wie muß der Quellcode richtig lauten? Im Moment sieht er so aus:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Meine Fotoalben</title>
<style type="text/css">

* {
margin:0;
padding:0;
outline:none;
list-style:none;
text-decoration: none;
}

h1 a {
color:#000;
font-size:210%;
font-weight:bold;
text-decoration:underline;
}

h2 {
font-size:large;
margin-top:50px;
}
a:hover, a:focus {
color: #F90;
}

body {
background-color: #CDC1C5;
font:100% Arial sans-serif;
}

#wrapper {
margin:10px auto;
width:60%;
text-align:center;
}

ul {
width:50%;
margin:10px auto;
border-bottom:2px solid #000;

}

li a {
display:block;
padding:20px;
font-size:2em;
font-weight:bold;
border-left:2px solid #000;
border-right:2px solid #000;
background:#BCA9F5;
}

li h3 {
margin-top:50px;
border-bottom:2px solid #000;
}
.Stil3 {color: #FF6600}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>

<body>
<div id="wrapper">
<h1 align="center">Photoalben<br>
</h1>
<div align="right"><a href="../index.html" class="Stil3" style="text-decoration: none; "><font onMouseOver="this.style.color='#FFFFFF'"
onMouseOut="this.style.color='#000000'">zurück zur Startseite </a></div>
<h2 align="center">Hier finden Sie jeweils aktuelle Photoalben</h2>

<ul>
<li><h3 align="center"><p align="center" style="line-height: 300%">Im Augenblick:</p></h3></li>
<li></li>

<li></li>
<li>

<div align="center"><a href="ahrntal/album/index.html">Ahrntal</a></div>

<li>
<div align="center"><a href="orchideen/album/index.htm">Orchideen</a></div>
</li>
<li>
<div align="center"><a href="fruehling/album/index.html">Frühling</a></div>
</li>
<li>
<div align="center"><a href="Korfu/album/index.html">Korfu</a></div>
</li>
<li>
<div align="center"><a href="wien/album/index.html">Wien Wien, nur Du allein</a> </div>
</li>

</body></html>

pmkrefeld · 25. Juli 2017

Hier Stand Mist

Pazox · 25. Juli 2017

Hinter "Startseite" fehlt ein

</font>

letterbox · 25. Juli 2017

Das hat nicht funktioniert, ist immer noch so wie beschrieben.

sdwaroc · 25. Juli 2017

Mach das lieber nochmal HTML5-konform neu. Definiere dabei für jedes Textfeld via CSS den passenden hover-Effekt. Der <font>-Element jedenfalls ist deprecated.

Bspw:
h2:hover {...}

Oder ordne allen hoverbaren Texten die Klasse "hoverable-text" zu. Im CSS würdest du dann folgendes machen:
.hoverable-text:hover {...}

rg88 · 25. Juli 2017

Hier rein kopieren deinen Code: https://www.freeformatter.com/html-validator.html
Dann mal Fehler abarbeiten. Dann kann man weiter schauen

tyr077 · 25. Juli 2017

letterbox schrieb:
Das hat nicht funktioniert, ist immer noch so wie beschrieben.

habs gerade probiert mit deinem Quelltext. bei mir gehts

ansonsten hat sdwaroc recht

sdwaroc · 25. Juli 2017

ansonsten hat sdwaroc recht

Danke. Der Code oben ist jedenfalls weitestgehen Murks. Inline-CSS, veraltete Elemente, uvm. .

@TE: Sorry, dass ich da so deutlich bin. Aber hier fängst du besser nochmal von vorne an. Die Seite ist ja glücklicherweise noch nicht groß.

ScOuRgE_ · 25. Juli 2017

Neues Font falsch gesetzt. Hier mal eine gefixte Version

HTML:

<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>Meine Fotoalben</title>
<style type="text/css">

* {
 margin:0;
 padding:0;
 outline:none;
 list-style:none;
 text-decoration: none;
}

h1 a {
 color:#000;
 font-size:210%;
 font-weight:bold;
 text-decoration:underline;
}

h2 {
 font-size:large;
 margin-top:50px;
}
a:hover, a:focus {
 color: #F90;
}

body {
 background-color: #CDC1C5;
 font:100% Arial sans-serif;
}

#wrapper {
 margin:10px auto;
 width:60%;
 text-align:center;
}

ul {
 width:50%;
 margin:10px auto;
 border-bottom:2px solid #000;

}
 
li a {
 display:block;
 padding:20px;
 font-size:2em;
 font-weight:bold;
 border-left:2px solid #000;
 border-right:2px solid #000;
 background:#BCA9F5;
}



li h3 {
 margin-top:50px;
 border-bottom:2px solid #000;
}
.Stil3 {color: #FF6600}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head>

<body>
<div id="wrapper">
  <h1 align="center">Photoalben<br>
  </h1>
     <div align="right"><a href="http://guenter-leipfinger.de/index.html" class="Stil3" style="text-decoration: none; "><font onmouseover="this.style.color='#FFFFFF'" onmouseout="this.style.color='#000000'">zurück zur Startseite </font></a></div>
	 
  <h2 align="center">Hier finden Sie jeweils aktuelle Photoalben</h2>

  <ul>
     <li><h3 align="center"><p style="line-height: 300%" align="center">Im Augenblick:</p></h3></li>
	 <font onmouseover="this.style.color='#FFFFFF'" onmouseout="this.style.color='#000000'" style="color: rgb(255, 255, 255);">
    <li></li>  
        <li></li>
        <li>
          <div align="center"><a href="http://guenter-leipfinger.de/photoalben/ahrntal/album/index.html">Ahrntal</a></div>
        </li>     
        <li>
          <div align="center"><a href="http://guenter-leipfinger.de/photoalben/orchideen/album/index.htm">Orchideen</a></div>
        </li>
		<li>
		  <div align="center"><a href="http://guenter-leipfinger.de/photoalben/fruehling/album/index.html">Frühling</a></div>
		</li>
        <li>
          <div align="center"><a href="http://guenter-leipfinger.de/photoalben/Korfu/album/index.html">Korfu</a></div>
        </li>
        <li>
          <div align="center"><a href="http://guenter-leipfinger.de/photoalben/wien/album/index.html">Wien Wien, nur Du allein</a>          </div>
        </li>
        </ul></font></div></body></html>

Kantico · 25. Juli 2017

Wow - die Homepage ist ja eine nette Zeitmaschine zur Jahrtausendwende.
Wenn keine Lust vorhanden ist, sich mit HTML5, CSS und so weiter zu beschäftigen,
würde ich mal über ein Redesign mit z. B.
https://wordpress.org/

nachdenken.
Es ist ja auch so, dass viele Nutzer heute das Smartphone oder Tablet nutzen, um die Seite aufzurufen.

letterbox · 25. Juli 2017

Mit dem code von ScOuRgE funktioniert es.
Vielen Dank!
@Kantico

Wow - die Homepage ist ja eine nette Zeitmaschine zur Jahrtausendwende.
Wenn keine Lust vorhanden ist, sich mit HTML5, CSS und so weiter zu beschäftigen,
würde ich mal über ein Redesign mit z. B.
https://wordpress.org/

nachdenken.

Danke für den freundlichen Hinweis! Mit Baukästen a la wordpress oder Wixx geht garnichts, so meine Erfahrung.
@all:
Warum sollte diese Seite nicht mit dem Tablett oder Smartphone abrufbar sein? gerade deshalb habe ich meine frühere Seite (die wesentlich eleganter war, aber mit Frames aufgebaut war) um gestaltet.

rg88 · 25. Juli 2017

Weil sie nicht wirklich Responsive ist wird sie niemals am Smartphone elegant angezeigt. Dass man natürlich Frames nicht mehr einsetzt ist eh klar

sdwaroc · 25. Juli 2017

Danke für den freundlichen Hinweis! Mit Baukästen a la wordpress oder Wixx geht garnichts, so meine Erfahrung.

Der Großteil des Webs hat da andere Erfahrungen gemacht.

So, wie du die Frames entfernen musstest, wirst du irgendwann auch die Font-Element entfernen müssen.

Warum sollte diese Seite nicht mit dem Tablett oder Smartphone abrufbar sein? gerade deshalb habe ich meine frühere Seite (die wesentlich eleganter war, aber mit Frames aufgebaut war) um gestaltet.

aufrufen kannst du sie, vermutlich wird nur nicht alles auf einer Seite angezeigt. Mobile und Desktop-Ansicht sind heute zwei paar Schuhe.

Kantico · 25. Juli 2017

Tut mir leid, wenn es unfreundlich rüberkam.
Ich persönlich würde für eine wirklich sehr simple Photo- oder Portfolio-Homepage auch keine Zeile HTML schreiben, obwohl ich es gelernt habe.
Der Aufwand ist doch viel größer, als einen Baukasten zu nutzen. Ich denke, dass Wordpress ideal wäre.
Wenn Sie natürlich Zeit und Lust haben, können Sie sich gerne einarbeiten:
https://www.w3schools.com/

Ich möchte Ihnen nur helfen, eine schöne und zeitgemäße Homepage bereit zu stellen,
daher hier noch mal ein paar konstruktive Kritikpunkte:

http://guenter-leipfinger.de/index.html
-fragwürdiges Design (v. a. Kontrast)
-nicht responsiv
-generell keine einheitlich, durchgehende Navigationsmöglichkeit.

http://guenter-leipfinger.de/photoalben/orchideen/album/index.htm
-anderes Design als die anderen Blumen-Seiten
-sieht ganz hübsch aus, ist aber ziemlich langsam
-funktioniert bei mir nicht wirklich gut auf dem Smartphone (S7, Chrome)

letterbox · 25. Juli 2017

Kantico schrieb:
http://guenter-leipfinger.de/photoalben/orchideen/album/index.htm
-anderes Design als die anderen Blumen-Seiten
-sieht ganz hübsch aus, ist aber ziemlich langsam
-funktioniert bei mir nicht wirklich gut auf dem Smartphone (S7, Chrome)

Das andere Design kommt daher, dass ich ein anderes Design im JAlbum gewählt habe.
Auf meinem Tablet kann ich es ansehen.
Klar ist mir bewußt, dass das noch nicht optimal ist.

sTuPiD-eLcH · 15. August 2017

Mal von dem sehr schnöden Design abgesehen, finde ich es schade, dass hier alle mit dem erhobenem Zeigefinger wedeln, ohne auch nur einmal darauf hinzuweisen, dass das kein Impressum ist!

Früher gab es mal eine Regelung, dass ein Impressum bei privaten Websites nicht notwendig ist, aber heutzutage müsste man in Deutschland selbst auf seinem Facebook-Profil ein vollständiges Impressum haben.

Von vielen Websites genutzt und erfüllt die "Auflagen":
https://www.e-recht24.de/impressum-generator.html

Und als zusätzlichen Hinweis würde ich raten, die persönlichen Daten nicht in Textform sondern als Bild anzuzeigen.
Es gibt immer noch Bots im Netz, die Impressum-Seiten durchscannen und Kontaktdaten sammeln.
Wenn man sehr trickreich sein will, kann man das Bild sicherlich noch digital verfälschen, sodass man es normal lesen kann, aber ein maschinelles Auslesen nicht möglich ist, aber das wäre etwas viel Aufwand für eine kleine private Seite.

Ich mag Baukasten-Websites auch nicht, aber wenn die Seite nur als Portfolio genutzt werden soll, bieten sich da entsprechende Foto-Communities bzw. Online-Alben sicherlich besser an.

ayngush · 16. August 2017

sTuPiD-eLcH schrieb:
Früher gab es mal eine Regelung, dass ein Impressum bei privaten Websites nicht notwendig ist, aber heutzutage müsste man in Deutschland selbst auf seinem Facebook-Profil ein vollständiges Impressum haben.

Rein private Webseiten ohne "redaktionelle oder moderierte Inhalte" (Forum, Themenblog, Kommentare, Gästebuch) & ohne "Einnahmequelle" (Werbung, Afilliate, etc.) brauchen immer noch kein Impressum!

sTuPiD-eLcH · 17. August 2017

So wie ich das verstehe, muss es sich nicht zwingend um eine Einnahmequelle handeln.
Es reicht schon, wenn man eine Fremdverlinkung verwendet und damit etwas "bewirbt" wie "Dieses Gerät habe ich mir letztens gekauft..."
Es gibt auch in dem Bereich noch viele Grauzonen, deshalb kann man auch gleich auf Nummer sicher gehen und einfach ein Impressum anlegen. Der TE hat ja bereits eins, nur entspricht dies eben nicht der "Norm".
Niemand wird bei ihm mit einer Klage vor der Tür stehen, aber bei einem eigenen Webauftritt muss man eben vorsichtig sein.

Ich hatte ganz früher mal diverse Bilder auf meiner Website, deren Urheberrecht ich natürlich nicht hatte.
Das war mir damals noch nicht so bewusst, aber ich habe sie später dann trotzdem entfernt. Sicher ist sicher.

Suche

Wie muß der Code richtig lauten?

letterbox

Banned

pmkrefeld

Captain

Pazox

Ensign

letterbox

Banned

sdwaroc

Captain

rg88

Fleet Admiral

tyr077

Gast

sdwaroc

Captain

ScOuRgE_

Ensign

Kantico

Gast

letterbox

Banned

rg88

Fleet Admiral

sdwaroc

Captain

Kantico

Gast

letterbox

Banned

sTuPiD-eLcH

Lieutenant

ayngush

Commander

sTuPiD-eLcH

Lieutenant

Ähnliche Themen