Anfängerproblem mit Div&Hover - sicher schnell zu lösen...

N

netschwesi

Grünschnabel
Hallo ihr lieben,
ich habe mich im Übermut freiwillig gemeldet eine Seite zu programmieren und dachte mir auch eigentlich es ist nicht schwer... aber aktuell funzt es nicht...
2 Fragen (Code hänge ich hinten dran):
1. Ich glaube mein Wrapper tut nicht wirklich was er soll, er begrenzt die Seite zwar zu beiden Seiten, aber das die Fußzeile auch wirklich immer ganz unten ist, klappt iwie nicht.
2. Die Links&Hover-Effekte... Ich habe ein Bild im Hintergrund, auf dem sollen 3 Kreise liegen, die nicht sichtbar sind, als Links fungieren und beim drüberfahren die Farbe ändern und einen Text anzeigen... aktuell funktieren die Links nicht und das hovern auch nicht :(
Danke schon mal für eure Hilfe!


<html>

<!doctype html>

<head>
<meta title="Netzwerk Inklusion in Arbeit Marburg">
<meta charset="utf-8">

<style type="text/css">
html, body{
height: 100%;
background-color: fafafa;
overflow: hidden;
float:none;
}

#wrapper {
position:relative;
width:1200px;
min-height:100%;
height:auto;
height:100%;
margin:0 auto;

}
#image{

position: static;
align-items: flex-start;
object-fit: scale-down;
margin-left: 20%;
margin-right: 20%;
height: 65%;
width: auto;
margin-top: 10px;
float:none;
z-index: 0;

}
h1 {color: darkblue;
font-size: 75px;
position: relative;
margin-bottom: 10px;
margin-top: -10;
text-align: center;


}
#GroundNav {

z-index: 2;
margin-right: 20px;
margin-left: 40px;
font-size: 14px;
color:darkblue;
a:hover{
background-color: darkgray;
}
}
.NavGround{

background-color: e9e9e9;
margin-top: 20px;
height: 30px;
position: absolut;
margin-bottom: -80;
bottom: -80;
width: 100%;
a:hover{
background-color: darkgray;


}
p{
font-size: 14p;
color: 040404;


}

#innererkreis{
background-color:blue;
width:240px;
height:240px;
border-radius: 50%;
position: absolute;
margin-left: 35.6%;
margin-top: 17%;
z-index: 100;

}

#arbeitgeber{
background-color:red;
width:120px;
height:120px;
border-radius: 50%;
position: absolute;
margin-left: 25.6%;
margin-top: 37%;
z-index: 991;

}

#arbeitnehmer{
background-color:forestgreen;
width:120px;
height:120px;
border-radius: 50%;
position: absolute;
margin-left: 56%;
margin-top: 37%;
z-index: 991;

}


</style>


</head>

<body>

<div id="wrapper">
<h1>Netzwerk Inklusion in <br>Arbeit Marburg
</h1>
<p>Text</p>
<div id="innererkreis" div:hover{background-color:#123456;}
href="Netzwerk.html"></div>
<div id="arbeitgeber" div:hover{background-color:#123456;}
href="arbeitgeber.html"></div>
<div id="arbeitnehmer" div:hover{background-color:#123456;}
href="arbeitnehmer.html"></div>

<img id="image" src="BG.jpg">

<div class="NavGround">&copy; Copyright Netzwerk Inklusion in Arbeit Marburg
<a id="GroundNav" href="Impressum">Impressum</a><a id="GroundNav" href="Kontakt">Kontakt</a></div>
</div>
</body>
</html>
 

Anhänge

Was man auf den ersten Blick sieht:
Du hast die Farben teilweise im Hex-Format definiert, dann musst Du ein # voranstellen.
Ich habe ein Bild im Hintergrund
Zum Vergrößern anklicken....
Wenn es ein Hintergrundbild sein soll, dann informiere dich über CSS background-image.
 
"Du hast die Farben teilweise im Hex-Format definiert, dann musst Du ein # voranstellen."

ja aber das passt soweit

"Wenn es ein Hintergrundbild sein soll, dann informiere dich über CSS background-image."

das habe ich ja mit dem z-index gelöst, weil sich sonst alles verschiebt.

in erster linie geht es mir um die hover effekte.
 
Hallo

Dein Quelltext ist Schrott. Entweder fehlen dir entscheidende Grundlagen oder du arbeitest zu schlampig.

Wiederholende Fehler / Probleme nennen ich nur einmal.

1. Der Doctype muss in der ersten Zeile stehen

2. Das Charset sollte vor dem Titel stehen, damit auch Umlaute / Sonderzeichen im Titel berücksichtigt werden

3. Es gibt in HTML weder meta title noch meta charset

4. CSS-Anweisungen, die in allen Browsern sowieso vorgegeben sind, sollten vermieden werden, zum Beispiel float: none für html und body

5. wrapper waren nie sinnvoll und stören bei aktuellen Layouts eher - weglassen

6. height-Angaben sollten so weit wie möglich vermieden werden. Die Höhe wird durch den Inhalt bestimmt

7. Für CSS-Angaben sind die Klassen (class) vorgesehen. id haben anderen Aufgaben und sollten nicht für CSS-Angaben verwendet werden

8. Prozent-Angaben bei margin-left und margin-right führen fast immer zu Problemen

9. Die anderen CSS-Angaben zu #image erscheinen mir unsinnig

10. Was soll das position: relative bei h1?

11. Negative-Werte, zum Beispiel bei h1, deuten Probleme an anderer Stelle hin. Nur weil sie zulässig sind, sind sie noch lange nicht sinnvoll.

12. Bei #GroundNav fehlt offensichtlich die schließende Klammer oder du willst das a:hover mit unzulässigem CSS angeben

13. Bei .NavGround siehe oben

14. Tip: Die Verwendung von Groß-/Kleinschreibung bei id- oder Klassennamen führt immer wieder zu Problemen. Grade wenn das CSS komplexer wird. Besser nur Kleinschreibung verwenden.

15. Prozentangaben, Beispiel #innererkreis: Grade bei aktuellen Layouts sollte der Einsatz von Prozent als Einheit wohlüberlegt sein

16. position: absolute: Wird grade von Anfängern unsinnig verwendet. Weglassen und geeignetere Methoden wählen

17. Das br-Element steht an der falschen Stelle. Es sollte zudem nur verwendet werden, wenn es keine besseren Lösungen gibt

18. Die Konstruktion
Code: 
<div id="innererkreis" div:hover{background-color:#123456;} href="Netzwerk.html">
ist schlicht unsinnig. Auf Inline-CSS kann und sollte heutzutage komplett verzichtet werden, auch bei Testseiten.

19. BG.jpg: Auch bei Bildern sollte zur Problemvermeidung auf Großbuchstaben verzichtet werden. Da uns das Bild nicht vorliegt können wir die Seite auch nicht sinnvoll nachbauen.

20. In den HTML5-Regel ist festgeschrieben das div-Container nur verwendet werden dürfen wenn es keine passenderen gibt.

21. margin-bottom: -80 und bottom: -80: Zu den negativen Werten habe ich bereits geschrieben. Zu Zahlenwerten sollten (müssen) immer Einheiten angegeben werden. Sonst dürfen die Browser die Einheit verwenden, die ihnen am liebsten. Davon gibt es nur wenige Ausnahmen, zum Beispiel bei line-height.

22. color #040404 für das p-Element: Der Kontrast sollte zur besseren Lesbarkeit möglichst hoch sein. Deshalb sollte besser schwarze Schrift verwendet werden. Du bist jung, kannst noch gut sehen und kennst den Text. Die meisten deiner Besucher jedoch nicht.

23. Text sollte nie direkt in reinen Container-Elementen wie div stehen.

24. Zu der falschen Schreibweise vom hex-Format: Browser sind sehr fehlertolerant. Dafür gibt es aber keine Regelungen. Heißt: Jeder Browser entscheidet selbst, welche Fehler er wie und ob überhaupt korrigiert. Nur weil dein Browser fehlerhaften Quelltext wie von dir erwartet anzeigt machen das andere noch lange nicht.

Grade getestet: Mein aktueller Firefox zeigt die Farben mit der falschen Schreibweise nicht an.

25. Bei den Pfadangaben zu impressum und kontakt fehlt offensichtlich die Dateiendung

26. Grade gesehen: Wenn die Seite wie bei mir nicht ins Fenster passt kann ich nicht mal scrollen. Das ist wahrscheinlich ein Folgeproblem deiner unsinnigen height- und position-Angaben.

27: id dürfen im Quelltext einer Seite nur einmal verwendet werden. Du verwendest GroundNav mehrfach.

28. #innererkreis, #arbeitgeber und #arbeitnehmer werden mangels Inhalt überhaupt nicht angezeigt. Wenn das Kreise sein solle verwende Grafiken im SVG-Format. Und bedenke, dass deine Besucher mit Symbolen oder Farben häufig nichts anfangen können, da das keine Informationen sind. Wahrscheinlich leiden auch mehr Besucher unter Farbsehschwächen als du dir vorstellen kannst.

29. Und so weiter ... Andere Fehler wurden bereits genannt.

1. Ich glaube mein Wrapper tut nicht wirklich was er soll, er begrenzt die Seite zwar zu beiden Seiten, aber das die Fußzeile auch wirklich immer ganz unten ist, klappt iwie nicht.
Zum Vergrößern anklicken....

Lass wie schon geschrieben den Wrapper weg.

Für die Fußzeile solltest du dich mit "Sticky Footer" beschäftigen, am sinnvollsten heutzutage mit Flexbox.

2. Die Links&Hover-Effekte... Ich habe ein Bild im Hintergrund, auf dem sollen 3 Kreise liegen, die nicht sichtbar sind, als Links fungieren und beim drüberfahren die Farbe ändern und einen Text anzeigen... aktuell funktieren die Links nicht und das hovern auch nicht
Zum Vergrößern anklicken....

Korrigiere die Fehler.

Wobei du dir im Klaren sein solltest das Touchscreen-Geräte, die beim Surfen längst mehrheitlich verwendet werden, keine hover-Anweisungen kennen. Mit hover-Anweisungen bedienst du also nur noch eine Minderheit deiner Besucher und du solltest dafür sorgen, das auch Touchscreen-Nutzer die Seite problemlos verwenden und lesen können.

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Hallo

Ich habe mal eine Beispieldatei für das HTML ohne CSS erstellt. So kann mit den mir bekannten Informationen eine HTML5 Datei aussehen, damit du überhaupt einen Eindruck von aktuellem sinnvoll erstellten HTML-Quellcode erhälst.

Als Grafik habe ich eine eigene genommen da mir deine nicht vorliegt.

Als CSS nur Angaben zu figure und img, die sich als grundsätzlich sinnvoll erweisen haben.

Eventuelle Kreise sollten als SVG eingefügt werden, aber dazu habe ich keine Infos.

Das Aussehen / Layout sollte dann responsive über CSS3 erstellt werden. Wobei sich der Ansatz "Mobile First" in der Praxis bewährt hat.

Code: 
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Netzwerk Inklusion in Arbeit Marburg</title>
   <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- <link href="../css/zentrale.css" rel="stylesheet"> -->
   <style>

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

   </style>
</head>
<body>
   <header id="pageheader" class="pageheader">
      <h1><span>Netzwerk Inklusion</span> <span>in Arbeit Marburg</span></h1>
   </header>
   <main id="content" class="content">
      <h2>Unter-Überschrift</h2>
      <p>Text</p>
      <div class="contentnavigation">
         <p><a href="netzwerk.html">Netzwerk</a></p>
         <p><a href="arbeitgeber.html">Arbeitgeber</a></p>
         <p><a href="arbeitnehmer.html">Arbeitnehmer</a></p>
      </div>
      <figure>
         <img src="http://lorempixel.com/400/600/business/7" alt="Symbolbild: Eine Frau, die einen Vortrag hält">
      </figure>
   </main>
   <nav id="navigation" class="navigation">
      <p>&copy; Copyright Netzwerk Inklusion in Arbeit Marburg</p>
      <a href="impressum.html">Impressum</a>
      <a href="kontakt.html">Kontakt</a>
   </nav>
</body>
</html>

Gruss

MrMurphy
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück