Überlappende A-Container mit CSS
Hallo zusammen,
Ich arbeite aktuell an einer kleinen Webseite und bin auf ein Problem gestossen das ich nicht gelöst bekomme. Ich habe das ganze mal auf ein essentielles Bsp heruntergebrochen das ich hier am Ende einfüge.
Erreichen würde ich in diesem Bsp sehr gern das die "Google-Boxen" bei einem MouseOver größer werden aber dabei nicht die umliegenden Boxen verschieben sondern überlagern. Alles was ich zum Thema überlagern gefunden habe läuft aber immer auf eine absolute Positionierung hinaus die mir nichts nützt da sich die Boxen dynamisch an die Seitenbreite anpassen und beim Vergrößern an ihrer aktuellen Stelle vergrößert werden sollen.
Wenn ich was vergessen habe bitte einfach fragen. Ansonsten erstmal vielen Dank fürs durchlesen und drüber nachdenken.
Grüße
Hier nun das Beispiel:
Edit:
P.S. Mir ist klar das "Great" eigentlich falsch ist. Aber es sind wie auch bei Small 5 Buchstaben und somit bleibt der Code besser lesbar ;)
Erreichen würde ich in diesem Bsp sehr gern das die "Google-Boxen" bei einem MouseOver größer werden aber dabei nicht die umliegenden Boxen verschieben sondern überlagern. Alles was ich zum Thema überlagern gefunden habe läuft aber immer auf eine absolute Positionierung hinaus die mir nichts nützt da sich die Boxen dynamisch an die Seitenbreite anpassen und beim Vergrößern an ihrer aktuellen Stelle vergrößert werden sollen.
Wenn ich was vergessen habe bitte einfach fragen. Ansonsten erstmal vielen Dank fürs durchlesen und drüber nachdenken.
Grüße
Hier nun das Beispiel:
<html>
<head>
<style>
#SP-Wrapper{
padding:20px;
min-height:650px;
width:100%;
border:1px solid blue;
margin-bottom:0px;
}
#sp-left{
margin-top:150px;
width:30%;
float:left;
border:1px solid red;
font-size:10px;
}
#sp-right{
margin-top:150px;
width:30%;
float:right;
border:1px solid green;
}
.sp-middle{
display:block;
margin-right:10%;
margin-left:10%;
margin-top:1%;
border:1px solid black;
height:129px;
}
.Box {
background:white;
color:black;
margin:1%;
float:left;
opacity:0.75;
padding-top:15%;
text-decoration:none;
text-align:center;
font-family:arial;
font-weight:bold;
display:inline;
border:1px solid silver;
}
.Box:hover{
opacity:1;
color:orange !important;
border:1px solid orange;
}
.Small{
width:20%;
}
.Small:hover{
z-index:100;
width:30%;
padding-top:20%;
margin-left:0;
margin-right:0;
}
.Great{
width:42%;
}
</style>
</head>
<body>
<div id="SP-Wrapper">
<div id="sp-left">
<a class="Small Box" href="http://www.google.de/">Google</a>
<a class="Great Box" href="http://www.google.de/">Google</a>
<a class="Small Box" href="http://www.google.de/">Google</a>
<a class="Great Box" href="http://www.google.de/">Google</a>
<a class="Small Box" href="http://www.google.de/">Google</a>
<a class="Small Box" href="http://www.google.de/">Google</a>
<a class="Small Box" href="http://www.google.de/">Google</a>
<a class="Small Box" href="http://www.google.de/">Google</a>
<a class="Great Box" href="http://www.google.de/">Google</a>
</div>
<div id="sp-right">
<a class="Small Box" href="http://www.google.de/">Google</a>
<a class="Great Box" href="http://www.google.de/">Google</a>
<a class="Small Box" href="http://www.google.de/">Google</a>
<a class="Great Box" href="http://www.google.de/">Google</a>
<a class="Small Box" href="http://www.google.de/">Google</a>
<a class="Small Box" href="http://www.google.de/">Google</a>
<a class="Small Box" href="http://www.google.de/">Google</a>
<a class="Small Box" href="http://www.google.de/">Google</a>
<a class="Great Box" href="http://www.google.de/">Google</a>
</div>
<div class="sp-middle"></div>
</div>
</body>
</html>
Edit:
P.S. Mir ist klar das "Great" eigentlich falsch ist. Aber es sind wie auch bei Small 5 Buchstaben und somit bleibt der Code besser lesbar ;)
Please also mark the comments that contributed to the solution of the article
Content-Key: 195767
Url: https://administrator.de/contentid/195767
Printed on: April 19, 2024 at 02:04 o'clock
4 Comments
Latest comment