Danke für Deine Mühe.
Ich habe in den letzten Stunden etwas weiter gemacht.
Habe das eine oder andere Problem irgendwie in den Griff bekommen.
Andere sind leider geblieben.
Ich habe den Code mittlerweile doch sehr verändert.
Um das Problem mit der mittigen Darstellung zu beheben,
habe ich ...
Ach schau:
body {
background-image: url("Rights.jpg");
}
h6:nth-child(1) {
margin-top: 0;
margin-bottom: 0;
}
ul.top-sites-list {
padding: 0
}
.top-sites-list {
text-align: center;
}
.top-site-outer {
padding: 2px 10px 0;
display: inline-block;
}Wie Du sehen kannst habe ich das mit den Abständen auch herausgefunden.
Wobei ich zugeben muss, dass ich die Werte für's padding alle einzel angegeben hatte,
also -top, -right, -bottom und -left.
Somit ist das "Feld" jetzt schön mittig und die Abstände stimmen auch.
Zu 2.
Da bin ich auf eine ganz andere Lösung gekommen,
weil die "Bildchen" jedes Mal das Layout zerhauen haben, weil sie sich ja nicht an die "Rahmen" halten wollten.
Sie standen dann ja über.
Ich habe es dann wie folgt gelöst.
<ul class="top-sites-list">
<li class="top-site-outer">
<div class="top-site-inner">
<div class="title">
<img src="favicon-16x16.png" alt="heise" width="16" height="16">
<span> Heise Online </span>
</div>
<a class="top-site-button" href="https://www.heise.de/">
<div class="heise">
</div>
</a>
</div>
</li>und
.heise {
border-color: #e1e1e170;
border-radius: 8px !important;
border-width: 1px !important;
border-style: solid !important;
background-color: transparent;
width: 193px;
height: 125px;
background-image: url(preview_01.png);
background-size: 190px auto;
background-repeat: no-repeat;
}Nun kann ich mittels background-size: die Bildgröße anpassen
und wenn ich es zu groß einstelle, verschwindet der Überhang,
da ja mit width: und height: das "Loch" definiert ist.
Was ich noch nicht herausgefunden habe ist, wie ich die "Bildchen" in den "Löchern",
wenn sehr klein, zentrieren kann.
Zu dem Abstand ganz oben ist mir dann aus der Not jenes eingefallen!
<body>
<h6>.</h6>und
h6:nth-child(1) {
margin-top: 0;
margin-bottom: 0;
}Ist mit an Sicherheit grenzender Wahrscheinlichkeit nicht die eleganteste Lösung,
aber ein wenig Kreativität kann ja nicht verboten sein.
Also, zwei "Probleme" wollen noch gelöst werden.
1. Habe ich schon angesprochen, die "Bildchen" in die Mitte rücken.
2. Die Icons. Sie sind nicht mittig zum Text dahinter.
Gruß
Mira
Nachtrag!!
Yes!
background-position: center;
