Hallo zusammen,
habe ein Problem dass ich zwei Links erstellt habe, die durch eine Hover Funktion ein Div anzeigen sollen.
Im 1. Link funktioniert das Hover, und beim zweiten habe ich das display: block; gesetzt um zu demonstrieren, wie ich es gerne hätte, nämlich mit zentriertem Text und ganz unten formatiert.
Nur durch das Versetzen des </div> an eine andere Stelle ändert sich genau diese Sache.
Um es kurz zu machen, ich hätte gerne das Aussehen von dem 2. Link/Div und die Funktion des 1. Link/Div durch Hover.
Wer kann genau bei diesem Sachverhalt helfen ????
habe ein Problem dass ich zwei Links erstellt habe, die durch eine Hover Funktion ein Div anzeigen sollen.
Im 1. Link funktioniert das Hover, und beim zweiten habe ich das display: block; gesetzt um zu demonstrieren, wie ich es gerne hätte, nämlich mit zentriertem Text und ganz unten formatiert.
Nur durch das Versetzen des </div> an eine andere Stelle ändert sich genau diese Sache.
Um es kurz zu machen, ich hätte gerne das Aussehen von dem 2. Link/Div und die Funktion des 1. Link/Div durch Hover.
Wer kann genau bei diesem Sachverhalt helfen ????
Code:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Onlinestatus</title>
<style>
.main {
width: 95%;
background-color: red;
display: block;
z-index: 0;
position: relative;
font-family:Arial, Helvetica, sans-serif;
margin:0 auto;
padding:20px;
}
.button {
background-color: green;
position:relative;
line-height:4em;
font-family:Arial, Helvetica, sans-serif;
color: white;
width: 30%;
}
.button:hover > .geheim {
display: block;
z-index: 4;
}
.diva {
color: white;
font-size:2.5em;
text-decoration:none;
display:block;
}
.diva:hover {
color:yellow;
}
.geheim {
width: 140px;
height:140px;
position:absolute;
top: 330px;
left: 550px;
color: black;
font-size:xx-small;
text-align:center;
display: none;
background-color: rgba(150,230,230,0.5);
border:2px black solid;
}
.geheimdiv {
width:100%;
position:absolute;
bottom:0;
}
.geheim2 {
width: 160px;
height:120px;
position: absolute;
top: 320px;
left: 350px;
color: black;
font-size:xx-small;
text-align:center;
display: Block;
background-color: rgba(150,130,230,0.5);
border:2px black solid;
}
.button:hover > .geheim2 {
display:block;
z-index: 4;
}
</style>
</head>
<body>
<div class="main">
<div class="button">
<a class="diva" href="#">Link-1:
</a>
<!--diesen /Div sehen Sie 5 Zeilen weiter unten-->
<div class="geheim">
<p class="geheimdiv">Ich bin der Link-1<!-- Hier ist das Div das als "Rect"-Markierung dient -->
</p>
</div>
</div> <!-- Div von 5 Zeilen vorher hier eingefügt-->
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
<br>
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
<br>
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<div class="button">
<a class="diva" href="#">Link-2:
</a>
</div>
<div class="geheim2">
<div class="geheimdiv">Link-2 .... <!-- Hier ist das Div, dass als Markierung dient -->
</div>
</div>
</div>
</body>
</html>
:)
