Hover Effekt bei Boxen nicht unabhängig

Alex1992

Nabend,

ich bin gerade dabei, für meine Seite 5 Buttons anzeigen zu lassen die jeweils eine Verlinkung zu Social Media bzw. Youtube haben. Dazu habe ich noch einen Hover-Effekt gemacht, der soweit funktioniert, jedoch wenn einer der Buttons kleiner wird, rücken die anderen dementsprechend nach.

Ich habe mir mehrere Gedanken dazu gemacht, wie ich das am besten umsetzen könnte, kam aber nicht wirklich drauf (zum Beispiel für jeden Button einen div Container zuzuweisen )...

Weis da jemand vielleicht eine Lösung?

Die Website: http://social.nerdwars.at/

Code

* { padding: 0; margin: 0; } /* Kalibriert alle Positionen auf 0 */ 


a.yti :hover {  
    width: 90px;
 }
 
 a.gpp :hover {
    width: 90px;
 }
 
 a.ing :hover { 
    width: 90px;
 }
 
 a.twi :hover { 
    width: 90px;
 }
 
 a.fab :hover { 
    width: 90px;
 }


body{
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: rgb(0,0,0);
}


div {
    width: 550px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 37%;
}

Alles anzeigen

HTML

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
            <title>Nerdwars Social Media</title>
        <link href="style.css" type="text/css" rel="stylesheet">
        <link rel="icon" type="image/png" href="favicon.png" />
    </head>
    <body background="Nerd_Wars.gif" >
        <div>
            <a class="yti" href="https://www.youtube.com/NerdWars" target="_blank"/><img src="YouTube.png" style=max-height:100px;></a>

            <a class="fab" href="https://www.facebook.com/NerdWarsTV" target="_blank"/><img src="Facebook.png" style=max-height:100px;></a>

            <a class="twi" href="https://twitter.com/NerdWarsTV" target="_blank"/><img src="Twitter.png" style=max-height:100px;></a>

            <a class="ing" href="https://www.instagram.com/Nerd.Wars/" target="_blank"/><img src="Instagram.png" style=max-height:100px;></a>

            <a class="gpp" href="https://plus.google.com/u/0/b/111605038996491309189/106936345399410527766?pageId=111605038996491309189" target="_blank"/><img src="Google+.png" alt="Google Plus" style=max-height:100px; /></a>
    </body>    
    </div>
</html>


<!--  style=background-size:100% style=background-repeat:no-repeat; -->

Alles anzeigen

gwww

Packe deine Social links am besten in eine Liste, die du dann entsprechend stylest. Das löst dein Problem:

HTML

<ul class="inline-list">            
<li><a class="yti" href="https://www.youtube.com/NerdWars" target="_blank"><img src="YouTube.png" style="max-height:100px;"></a></li>                        
<li><a class="fab" href="https://www.facebook.com/NerdWarsTV" target="_blank"><img src="Facebook.png" style="max-height:100px;"></a></li>                        
<li><a class="twi" href="https://twitter.com/NerdWarsTV" target="_blank"><img src="Twitter.png" style="max-height:100px;"></a></li>                        
<li><a class="ing" href="https://www.instagram.com/Nerd.Wars/" target="_blank"><img src="Instagram.png" style="max-height:100px;"></a></li>                        
<li><a class="gpp" href="https://plus.google.com/u/0/b/111605038996491309189/106936345399410527766?pageId=111605038996491309189" target="_blank"><img src="Google+.png" alt="Google Plus" style="max-height:100px;"></a></li>            
</ul>

CSS:

Code

.inline-list li {
display: inline-block;
width: 100px;
}

Alex1992

Hey danke Hat alles soweit funktioniert. Weist du wie ich die Bilder kleiner machen kann so dass es proportianal kleiner wird? Derzeit ist es so dass ja nach links gerichtet sind...

gwww

Ich bin nicht sicher, ob ich dich richtig verstanden habe, aber die Größe eines Bildes bestimmst du mit "width". Da du nur die img's in dieser Liste ansprechen möchtest, würde das so aussehen:

HTML

.inline-list li img {
width: 100px;
}

Die 100px sind jetzt nur exemplarisch.

LG

Alex1992

Zitat

Ich bin nicht sicher, ob ich dich richtig verstanden habe, aber die Größe eines Bildes bestimmst du mit "width"

Stimmt. Also in HTML habe ich als maximale Höhe 100px angegeben und in CSS über die ":hover" Funktion um 10 Pixel kleiner gesetzt (mittlerweile nur mehr etwa 5 Pixel). So wie ich es auf meiner Seite beobachten konnte, erreiche ich mit dem von dir zuletzt geposten Code dass die Bilder untereinander geordnet sind. Als ich mit der Pixelangabe probiert habe, wurden nur die Bilder in die Länge gezogen.

Hab ich was falsch gemacht? So wie ich das verstanden habe, soll ich entweder beide codes getrennt einfügen oder zusammen. Mache ich letzteres, kommt der oben beschriebene Fehler (die Bilder werden dann von oben nach unten angezeigt). Wenn ich beides getrennt einfüge, ändert sich nichts....

djheke

Versuch mal das hier.

Code

.inline-list {
 margin:0;
 padding:0;
 list-style:none;
 display:flex;
 box-sizing:border-box;
}


.inline-list li {
 flex-basis:20%;
 padding:10px;
 margin:2px;
 border:1px solid #000;
}


.inline-list img {
 width:100%;
 max-height:100px;
}




.inline-list li:hover {
 transform:scale(0.9)
}

Alles anzeigen

Alex1992

Nach etlichen Versuchen habe ich nun endlich das so hinbekommen wie ich das haben wollte. hierfür für eure Hilfe.

Lösen konnte ich das Problem, indem ich die 4 Grafiken in einen inline-block gesteckt und die "width" mit 100px angegeben habe. Nun habe ich jedoch den Nachteil dass inline-block anscheinend nur einen begrenzten Platz für den Inhalt bietet und wenn ich die Grafiken größer mache oder eine weitere einfüge (mir fiel erst vor kurzem auf, dass eigentlich eine Grafik fehlt), diese Grafik in die nächste "Zeile" springt (siehe Screenshot).

flex konnte bzw. wollte ich nicht nehmen, da die Grafiken nicht immer direkt in der Mitte bleiben bzw. dem Logo "folgen", wenn die Seite über ein Smartphone etc. aufgerufen wird... (also sowas wie ein responsives Design). Wäre dies mit den anderen Display funktionen auch möglich gewesen? Ich fand da leider keinen Lösungsansatz...

Der aktuelle Code:

HTML

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
            <title>Nerdwars Social Media</title>
        <link href="style.css" type="text/css" rel="stylesheet">
        <link rel="icon" type="image/png" href="favicon.png" />
    </head>
        <body background="Nerd_Wars.gif" >
    <div id="inline-list">
<ul class="inline-list">            
    <li><a class="yti" href="https://www.youtube.com/NerdWars" target="_blank"><img src="YouTube.png" style="max-height:95px;"></a></li>                        
    <li><a class="fab" href="https://www.facebook.com/NerdWarsTV" target="_blank"><img src="Facebook.png" style="max-height:95px;"></a></li>                        
    <li><a class="twi" href="https://twitter.com/NerdWarsTV" target="_blank"><img src="Twitter.png" style="max-height:95px;"></a></li>                        
    <li><a class="ing" href="https://www.instagram.com/Nerd.Wars/" target="_blank"><img src="Instagram.png" style="max-height:95px;"></a></li>                        
    <li><a class="gpp" href="https://plus.google.com/u/0/b/111605038996491309189/106936345399410527766?pageId=111605038996491309189" target="_blank"><img src="Google+.png" alt="Google Plus" style="max-height:95px;"></a></li>            
</ul>
    </div>
        </body>
</html>

Alles anzeigen

Code

* { padding: 0; margin: 0; } /* Kalibriert alle Positionen auf 0 */ 


a.yti :hover {  
    transform:scale(0.97)
 }
 


 a.gpp :hover {
    transform:scale(0.97)
 }


 
 a.ing :hover { 
    transform:scale(0.97)
 }
 
 a.twi :hover { 
    transform:scale(0.97)
 }
 
 a.fab :hover { 
    transform:scale(0.97)
 }


body{
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: rgb(0,0,0);
}


div {
    width: 550px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 37%;
}


.inline-list li {
    display: inline-block;
    text-align: center;
    width: 105px;
}

Alles anzeigen

Bandit

<body background="Nerd_Wars.gif" >
Wieso nicht per CSS?

Alex1992

Naja weil ich das ganze zuerst über HTML gemacht habe und CSS erst kam als ich das mit den Buttons machen wollte. Wenn es mich nicht täuscht, kann ich zwar bei CSS das Boxenmodell nutzen, aber das image soll auch in der Mitte bleiben. Habe es aber dennoch in CSS gepackt. Ordnung ist das halbe Leben .

So sieht es aktuell aus:

Code

* { padding: 0; margin: 0; } /* Kalibriert alle Positionen auf 0 */ 


a.yti :hover {  
    transform:scale(0.97)
 }
 


 a.gpp :hover {
    transform:scale(0.97)
 }


 
 a.ing :hover { 
    transform:scale(0.97)
 }
 
 a.twi :hover { 
    transform:scale(0.97)
 }
 
 a.fab :hover { 
    transform:scale(0.97)
 }


body{
    background:url(Nerd_Wars.gif) no-repeat right top;
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: rgb(0,0,0);
}


div {
    width: 550px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 37%;
}


.inline-list li {
    display: inline-block;
    text-align: center;
    width: 105px;
}

Alles anzeigen

djheke

Hier noch etwas vereinfacht

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Button</title>
<style>
* {
 padding: 0; 
 margin: 0; 
}


body{
    background:url(Nerd_Wars.gif) no-repeat right top #000;
    background-size: 100%;
}


.inline-list {
    width: 550px;
    margin:37% auto 0 auto;
}


.inline-list li {
    display: inline-block;
    width: 105px;
}


.inline-list li:hover { 
    transform:scale(0.97)
 }


</style>
</head>


<body>


<ul class="inline-list">            
    <li><a href="#"><img src="" alt=""></a></li>                        
    <li><a href="#"><img src="" alt=""></a></li>                        
    <li><a href="#"><img src="" alt=""></a></li>                        
    <li><a href="#"><img src="" alt=""></a></li>                        
    <li><a href="#"><img src="" alt=""></a></li>            
</ul>

</body>
</html>

Alles anzeigen

Tags