4
Ü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 ;)
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:
<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 ;)
Auf Facebook teilen
Auf Twitter teilen
Auf Reddit teilen
Auf Linkedin teilenBitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 195767
Url: https://administrator.de/forum/ueberlappende-a-container-mit-css-195767.html
Ausgedruckt am: 22.12.2024 um 16:12 Uhr
4 Kommentare
Neuester Kommentar
Hallo ChrFriedel
Mit position und zur Überlagerung mit z-index arbeiten, da führt wohl kein Weg vorbei mit CSS.
Gruss
Cq
Mit position und zur Überlagerung mit z-index arbeiten, da führt wohl kein Weg vorbei mit CSS.
Gruss
Cq
Hallo,
da schließ ich mich Claqlaq an, das geht nur mit position und z-index. Diesen ggf. mit in den hover nehmen.
vg
da schließ ich mich Claqlaq an, das geht nur mit position und z-index. Diesen ggf. mit in den hover nehmen.
vg
Vielen Dank für die Antworten!
Mmmh... aber damit könnte ich doch dann meinen Wunsch nicht umsetzen oder verstehe ich es gerade nur nicht. Dadurch das die Container eine dynamische Größe je nach Seitenbreite einnehmen und sich außerdem nicht immer an der exakt gleichen Stelle befinden bin ich doch machtlos was das ermitteln der Koordinaten für position betrifft.
Dabei hab ich mir das so einfach vorgestellt... bleib an deiner Stelle, werde größer und ignoriere alles um dich herum indem du dich drüber legst... klingt doch einfach ;)
Mmmh... aber damit könnte ich doch dann meinen Wunsch nicht umsetzen oder verstehe ich es gerade nur nicht. Dadurch das die Container eine dynamische Größe je nach Seitenbreite einnehmen und sich außerdem nicht immer an der exakt gleichen Stelle befinden bin ich doch machtlos was das ermitteln der Koordinaten für position betrifft.
Dabei hab ich mir das so einfach vorgestellt... bleib an deiner Stelle, werde größer und ignoriere alles um dich herum indem du dich drüber legst... klingt doch einfach ;)
So nun habe ich doch noch eine Lösung gefunden die zwar nicht ganz so schön ist aber dennoch gut funktioniert. Gelöst habe ich es mit einem weiteren DIV unterhalb des A-Elementes welcher vorerst unsichtbar ist und nur beim MouseOver einer Box angezeigt wird. Sieht insgesamt folgendermaßen aus falls es noch jemand braucht:
<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;
position:relative;
}
#sp-right{
margin-top:150px;
width:30%;
float:right;
border:1px solid green;
font-size:10px;
position:relative;
}
.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%;
z-index:5;
}
.Small:hover > .HideMeFirst{
z-index:101;
display:block;
position:absolute;
}
.Great{
width:42%;
}
.HideMeFirst{
display:none;
width:40%;
border:1px solid red;
margin-top:-20%;
padding-top:30%;
background-color:white;
}
</style>
</head>
<body>
<div id="SP-Wrapper">
<div id="sp-left">
<a class="Small Box" href="http://www.google.de/">Google1<div class="hideMeFirst">Google</div></a>
<a class="Great Box" href="http://www.google.de/">Google2<div class="hideMeFirst">Google</div></a>
<a class="Small Box" href="http://www.google.de/">Google3<div class="hideMeFirst">Google</div></a>
<a class="Great Box" href="http://www.google.de/">Google4<div class="hideMeFirst">Google</div></a>
<a class="Small Box" href="http://www.google.de/">Google5<div class="hideMeFirst">Google</div></a>
<a class="Small Box" href="http://www.google.de/">Google6<div class="hideMeFirst">Google</div></a>
<a class="Small Box" href="http://www.google.de/">Google7<div class="hideMeFirst">Google</div></a>
<a class="Small Box" href="http://www.google.de/">Google8<div class="hideMeFirst">Google</div></a>
<a class="Great Box" href="http://www.google.de/">Google9<div class="hideMeFirst">Google</div></a>
</div>
<div id="sp-right">
<a class="Small Box" href="http://www.google.de/">Google<div class="hideMeFirst">Google</div></a>
<a class="Great Box" href="http://www.google.de/">Google<div class="hideMeFirst">Google</div></a>
<a class="Small Box" href="http://www.google.de/">Google<div class="hideMeFirst">Google</div></a>
<a class="Great Box" href="http://www.google.de/">Google<div class="hideMeFirst">Google</div></a>
<a class="Small Box" href="http://www.google.de/">Google<div class="hideMeFirst">Google</div></a>
<a class="Small Box" href="http://www.google.de/">Google<div class="hideMeFirst">Google</div></a>
<a class="Small Box" href="http://www.google.de/">Google<div class="hideMeFirst">Google</div></a>
<a class="Small Box" href="http://www.google.de/">Google<div class="hideMeFirst">Google</div></a>
<a class="Great Box" href="http://www.google.de/">Google<div class="hideMeFirst">Google</div></a>
</div>
<div class="sp-middle"></div>
</div>
</body>
</html>
