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">© Copyright Netzwerk Inklusion in Arbeit Marburg
<a id="GroundNav" href="Impressum">Impressum</a><a id="GroundNav" href="Kontakt">Kontakt</a></div>
</div>
</body>
</html>
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
![Frown :( :(](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/1f641.png)
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">© Copyright Netzwerk Inklusion in Arbeit Marburg
<a id="GroundNav" href="Impressum">Impressum</a><a id="GroundNav" href="Kontakt">Kontakt</a></div>
</div>
</body>
</html>