Ich verwende den Code der about:addons von hier aus dem Forum !
Ich bitte mal um Hilfe !
Servus.
Auch wenn Du den Code von "hier" verwendest, wäre es doch von Vorteil,
wenn Du "Deinen" Code hier einstellen könntest.
Es gibt hier mehrere Versionen von Code für about:addons.
Von daher, so denke ich, kann es schwer werden.
Gruß
Mira
Du hast im <style>-Abschnitt zweimal .title als Selektor. Das kannst du zusammenfassen. In Zeile 75 muss es transparent heißen, nicht tranzparent.
Ist korrigiert.
Danke.
Gruß
Mira
Wie wäre es, das Endergebnis nochmal hier einzustellen?
Nichts!! 
Ich stelle aber wieder nur den Code für die erste Zeile rein!
Die anderen "Lesezeichen" sind eher persönlicher Natur.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Startseite</title>
<style>
body {
background-image: url("Rights.jpg");
padding-top: 20px;
}
.top-sites-list {
text-align: center;
margin-top: 10px;
margin-bottom: 5px;
padding-left: 0;
}
.top-site-outer {
padding: 2px 10px 0;
display: inline-block;
}
.heise {
background-image: url(preview_01.png);
background-size: 190px auto;
}
.winfuture {
background-image: url(preview_02.png);
background-size: 200px auto;
}
.base {
background-image: url(preview_03.png);
background-size: 150px auto;
}
.golem {
background-image: url(preview_04.png);
background-size: 170px auto;
}
.chip {
background-image: url(preview_05.png);
background-size: 180px auto;
}
.foo {
border-color: #e1e1e170;
border-radius: 8px !important;
border-width: 1px !important;
border-style: solid !important;
background-color: transparent;
width: 193px;
height: 125px;
background-position: center;
background-repeat: no-repeat;
}
.foo:hover {
background-color: #d2d2d218;
}
.title {
padding-bottom: 5px;
color: #e1e1e1;
}
.title {
width:190px;
border:1px solid tranzparent;
}
.title img {
width:15px;
float:left;
margin-left: 45px;
margin-top: 2px;
}
.title span {
display:table-cell;
vertical-align:middle;
height:5px;
margin-left:15px;
margin-bottom: 5px;
padding-left: 10px;
}
}
</style>
</head>
<body>
<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="foo heise"></div>
</a>
</div>
</li>
<li class="top-site-outer">
<div class="top-site-inner">
<div class="title">
<img src="favicons_02.png" alt="winfuture" width="16" height="16"><span> Winfuture </span>
</div>
<a class="top-site-button" href="https://winfuture.de/">
<div class="ueberschriften">
<div class="foo winfuture"></div>
</div>
</a>
</div>
</li>
<li class="top-site-outer">
<div class="top-site-inner">
<div class="title">
<img src="favicons_03.png" alt="computerbase" width="16" height="16"><span> Computer Base </span>
</div>
<a class="top-site-button" href="https://www.computerbase.de/">
<div class="foo base"></div>
</a>
</div>
</li>
<li class="top-site-outer">
<div class="top-site-inner">
<div class="title">
<img src="favicons_04.png" width="16" height="16"><span> Golem </span>
</div>
<a class="top-site-button" href="https://www.golem.de/">
<div class="foo golem"></div>
</a>
</div>
</li>
<li class="top-site-outer">
<div class="top-site-inner">
<div class="title">
<img src="favicons_05.png" width="16" height="16"><span> Chip.de </span>
</div>
<a class="top-site-button" href="https://www.chip.de/">
<div class="foo chip"></div>
</a>
</div>
</li>
</ul>
</body>
</html>Gruß
Mira
Nun steht nur noch meine Bitte mit dem "Script" im Raum, dann wäre es wirklich perfekt.
Ich bin mir nicht sicher, ob das so möglich ist, zumindest mit dem, was Websites an Möglichkeiten zur Verfügung steht. Für eine Erweiterung wäre das kein Problem. Denn die klassischen Wege, die früher mal funktioniert haben und von denen man immer wieder liest, wurden von den Browserherstellern unterbunden. Sprich: Man findet durchaus Lösungen für die Fragestellung, einen Link in einem neuen Hintergrund-Tab zu öffnen und diese Lösungen haben auch mal funktioniert. Aber heute verhalten sich die gängigen Browser so, dass diese Tabs trotzdem direkt fokussiert werden. Ich denke, dass das damit zu tun hat, dass das in der Vergangenheit stark ausgenutzt worden ist, um heimlich irgendwelche Seiten zu öffnen.
Nun, dann ist das Projekt "Eine Startseite als Ersatz für Speed Dial" abgeschlossen.
Danke an alle die dazu beigetragen haben, die mir Denkanstöße gegeben haben
und mich hierbei unterstützt haben.
Gruß
Mira
PS:
Ihr werdet mich deshalb nicht los!
Mir wird schon noch was einfallen.
Zu 2.
Habe dem body ein padding-top: 20px verpasst.
Mit dem ul ging das nicht, weil dies sich auch auf die Abstände der anderen "Kachelreihen" ausgewirkt hätte.
Über das ul, sprich .top-sites-list werden schon die Abstände der unteren Kacheln "geregelt".
Und das mit dem vorgestelltem foo wusste ich einfach nicht, habe so etwas aber auch nirgends in dieser kurzen Zeit,
wo ich mich damit jetzt beschäftige, nirgends gesehen. Und das ist/war Gold wert!!!
Hat so weit nun alles geklappt.
Danke.
Denke, die Startseite ist so weit fertig.
Ist designt, passt, und funktioniert.
Nun steht nur noch meine Bitte mit dem "Script" im Raum, dann wäre es wirklich perfekt.
Gruß
Mira
Punkt 1Im Prinzip hast du damit mein Feedback umgesetzt, weil du den gemeinsamen Code nun an eine zentrale Stelle ausgelagert hast. Du könntest aber überlegen, überall noch wirklich eine zweite Klasse zu verwenden. Dann musst du in deinem CSS nicht für jede neue oder geänderte Kachel an mehreren Stellen was bearbeiten.
Punkt 2
Das klingt etwas wild, dass du die erste Reihe in einen Container packst und damit die DOM-Tiefe nur für die erste Reihe veränderst, obwohl du nichts anderes möchtest als etwas Abstand nach oben. Du könntest einfach dem body ein padding-top verpassen. Oder dem <ul> ein margin-top, das funktioniert genauso.
Zu 1.
D.h. ich schließe den Code <div class="heise"></div> , <div class="winfuture"></div>, usw. noch ein Mal "ein",
z.B. <div class="ueberschriften"> <div class="heise"></div></div> , usw.
und spreche dann alle gemeinsamen Eigenschaften über diese an, richtig?
Und gleiches gilt dann auch für :hover.
Zu 2
Werde ich versuchen umzusetzten.
Danke.
Gruß
Mira
So, die "nackte" Startseite ist m.M. fertig.
Wenn jemand noch Optimierungspotential oder Fehler sieht,
nur her damit. Bin über jeden Hinweis glücklich und froh.
Natürlich darf auch ein jeder sich an diesem Code bedienen,
ich erhebe keine "Urheberrechte" oder sonst was!
Eine Bitte hätte ich dennoch!
Ich hätte gerne zu dem HTML-Code ein Script,
welches dafür sorgt, dass die verlinkte Seite in einem neuen Tab im Hintergrund geöffnet wird.
Z.Z. ist es so, dass die Seite direkt in DIESEM Tab geöffnet wird.
Es wäre echt ganz, ganz lieb, wenn mir jemand das ermöglichen könnte.
Gehirnjogging hin oder her, aber mich damit z.Z. auch noch auseinandersetzen zu "müssen"
Überfordert mich dann doch ein bisschen.
Wenn meiner Bitte nicht entsprochen werden kann, weil z.B. das in ein "Großprojekt" enden würde,
möge man mir doch bitte eine kurze Nachricht hinterlassen.
Danke.
Gruß
Mira
Ist doch nicht schlimm, oder?
Keine Ahnung, was du meinst, ich schaue nur flüchtig rein.
Warum haust Du dann Dinge raus, die mir dann in keiner Weise weiterhelfen?
Oder sonst wem?
Was hat dann Dein Beitrag mit dem Eingangsthema zu tun?
Ist jetzt nicht bös' gemeint! Ich verstehe es nur nicht.
Gruß
Mira
<div "class=".eins .zwei">
Sieht man permanent, wenn man Webseiten analysiert, oder Firefox. Auf die Browser-Werkzeuge wurde mehrfach verwiesen.
OK.
Bei mir heißen die entsprechenden "Klassen" dann ebenso wie die "Seite" auf die die Links verweisen.
Ist doch nicht schlimm, oder?
Zumindest ist auch ganz offensichtlich wohin der Code gehört.
Und die Browser-Werkzeuge habe ich auch mehr als einmal benutzt.
Aber Danke für Deine Anregung.
Gruß
Mira
Du kannst auch das <p>.</p> und das <br> weg lassen und mit margin-top arbeiten, also das * dahingehend ** ändern, sprich warum 2x .top-sites-list, wenn einmal reicht?
Danke, Du hast mir auf den "Weg" geholfen.
So wie Du es vorgeschlagen hast, funktionierte es aber nicht,
denn so wurden ja auch die Abstände der anderen "Kacheln" beeinflußt.
Also kam ich auf folgende Idee.
<p>.</p> durch <div class="oben"> ersetzt.
Unter den Code der ersten "Reihe" das </div> gesetzt und,
tada, mittels CSS nun
.oben {
margin-top: 30px;
}den Abstand nach oben definiert.
Danke.
Gruß
Mira
Nachtrag!
Das padding: 0; war/ist überflüssig.
Daher habe ich es gelöscht.
Jetzt gibt es nur noch folgenden Code.
.top-sites-list {
text-align: center;
}Sollte weiteres Feedback gewünscht sein, bitte wieder den vollständigen Code bereitstellen, ich verlier langsam die Übersicht.
Frag' mich mal!?
Ich habe nicht verstanden, was du mit dem <h6>.</h6> ganz am Anfang bezweckst. Um was für einen Abstand geht es und wie trägt der als Überschrift sechster Ebene deklarierte Punkt dazu bei? Zumal das auch kein gültiges HTML ist. Ein <h6> kann es nur geben, wenn es vorher ein <h5> gab, davor muss es ein <h4> gegeben haben usw. Und wenn nach dem <h6> nicht noch ein weiteres <h6> kommt, tut auch das :nth-child(1) dahinter nichts.
Ich habe es in <p>.</p> geändert.
Damit wird nochmals über den "Kacheln" eine Zeile eingefügt, damit diese, bzw. die "Titel" nicht direkt am oberen Fenster kleben.
Was deine Klasse .heise betrifft, so vermute ich, dass zumindest ein Teil davon eh für alle Kacheln exakt gleich zum Einsatz kommt? Dann würde ich noch eine zweite Klasse anlegen, die jede deiner Kacheln bekommt, wo du dann den gemeinsamen Teil hin verlagerst.
Da steige ich jetzt nicht so durch! Ich weiß zwar was Du meinst, aber ....
mir fehlt gerade das Verständnis wie ich das umsetzen soll.
Nun erst ein Mal der "fast" vollständige Code. (Die weiteren Kacheln [Lesezeichen] muss ich ja nicht bekannt geben)
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Startseite</title>
<style>
body {
background-image: url("Rights.jpg");
}
p:nth-child(1) {
margin-top: 0px;
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;
}
.heise {
background-image: url(preview_01.png);
background-size: 190px auto;
}
.winfuture {
background-image: url(preview_02.png);
background-size: 200px auto;
}
.base {
background-image: url(preview_03.png);
background-size: 150px auto;
}
.golem {
background-image: url(preview_04.png);
background-size: 170px auto;
}
.chip {
background-image: url(preview_05.png);
background-size: 180px auto;
}
.heise,
.winfuture,
.base,
.golem,
.chip {
border-color: #e1e1e170;
border-radius: 8px !important;
border-width: 1px !important;
border-style: solid !important;
background-color: transparent;
width: 193px;
height: 125px;
background-position: center;
background-repeat: no-repeat;
}
.heise:hover,
.winfuture:hover,
.base:hover,
.golem:hover,
.chip:hover {
background-color: #d2d2d218;
}
.tile {
border-color: #e1e1e170;
border-color: #e1e1e170 !important;
border-radius: 8px !important;
border-width: 1px !important;
border-style: solid !important;
background-color: transparent;
justify-content: center;
height: 125px;
width: 193px;
align-items: center;
display: flex;
}
.tile:hover {
background-color: #d2d2d218;
}
.title {
padding-bottom: 5px;
color: #e1e1e1;
}
.title {
width:190px;
border:1px solid tranzparent;
}
.title img {
width:15px;
float:left;
margin-left: 45px;
margin-top: 2px;
}
.title span {
display:table-cell;
vertical-align:middle;
height:5px;
margin-left:15px;
margin-bottom: 5px;
padding-left: 10px;
}
}
</style>
</head>
<body>
<p>.</p>
<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>
<li class="top-site-outer">
<div class="top-site-inner">
<div class="title">
<img src="favicons_02.png" alt="winfuture" width="16" height="16"><span> Winfuture </span>
</div>
<a class="top-site-button" href="https://winfuture.de/">
<div class="winfuture"></div>
</a>
</div>
</li>
<li class="top-site-outer">
<div class="top-site-inner">
<div class="title">
<img src="favicons_03.png" alt="computerbase" width="16" height="16"><span> Computer Base </span>
</div>
<a class="top-site-button" href="https://www.computerbase.de/">
<div class="base"></div>
</a>
</div>
</li>
<li class="top-site-outer">
<div class="top-site-inner">
<div class="title">
<img src="favicons_04.png" width="16" height="16"><span> Golem </span>
</div>
<a class="top-site-button" href="https://www.golem.de/">
<div class="golem"></div>
</a>
</div>
</li>
<li class="top-site-outer">
<div class="top-site-inner">
<div class="title">
<img src="favicons_05.png" width="16" height="16"><span> Chip.de </span>
</div>
<a class="top-site-button" href="https://www.chip.de/">
<div class="chip"></div>
</a>
</div>
</li>
</ul>
</body>
</html>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;
Der korrekte Doctype ist:
<!doctype html>
Bei dir steht:
<!d<!doctype html>
OH 
Das war dann wohl ein Kopierfehler!
Im "richtigen" HTML"-Code ist es richtig.
Gruß
Mira
Danke Sören.
zu 1.
Verstehe ich nicht. Beim "ersten" Code hast Du da nichts beanstandet. (Also den "Tabellencode meine ich)
Und auch hier wird es so erklärt.
=> https://developer.mozilla.org/de/docs/Learn/…web/HTML_basics
zu 2.
Ich habe es jetzt so gemacht: z.B. <img src="preview_03.png" alt="computerbase" width="50" height="50">
Und ich glaube, ich habe es verstanden.
Kann das Image nicht geladen werden, wird es durch den Text ersetzt. Richtig?
Dazu hätte ich dann aber noch Fragen, aber erst später.
zu 3.
Ich habe Deine Anregung zum Anlass genommen und
mir die Firefoxstartseite zum Beispiel genommen.
Das waren dann alles Codefragmente, von denen ich nicht wusste, ob sie vonnöten sind.
Ich habe sie jetzt rausgenommen, Danke.
Beim Putzen wäre dies mir vielleicht auch aufgefallen, dass die gar nicht gebraucht werden.
zu letzterem
Wenn ich das beim li das padding ausklammere, überschneiden sich die "Boxen"
Deshalb das "padding", denn mit padding-left: 25px rücken sie auseinander.
Gibt es eine andere Möglichkeit zum Ziel?
Aber diese "Boxen" stehen auch nicht mittig im Broserfenster.
Liegt wohl dann daran, dass body standardmäßig ein margin und auch ul standardmäßig ein padding hat.
Wie kann das ausgehebelt werden?
Gruß
Mira
Habe etwas aussortiert und aufgeräumt.
Den CSS-Code noch etwas angepasst und ...
hänge.
body {
background-image: url("Rights.jpg");
}
.top-sites-list {
text-align: center;
}
.top-site-outer {
width: 180px;
padding-top: 2px;
padding-left: 25px;
border-radius: 8px;
display: inline-block;
}
.tile {
border-color: #e1e1e170;
border-color: #e1e1e170 !important;
border-radius: 8px !important;
border-width: 1px !important;
border-style: solid !important;
background-color: transparent;
justify-content: center;
/* margin: 0 auto; */
height: 125px;
width: 193px;
align-items: center;
display: flex;
}
.tile:hover {
background-color: #d2d2d218;
}
.title {
padding-top: 5px;
padding-bottom: 2px;
/* padding-left: 20px; */
font: caption;
text-align: center;
position: relative;
color: red;
}und der dazu gehörige HTML-Code
(Auszug)
</head>
<body>
<ul class="top-sites-list">
<li class="top-site-outer">
<div class="top-site-inner">
<div class="title">
<span dir="auto"> heise </span>
</div>
<a class="top-site-button" href="https://www.heise.de/" tabindex="0" draggable="true">
<div class="tile" aria-hidden="true">
<div class="top-site-icon rich-icon"> <img src="preview_01.png" width="50" height="50">
</div>
</div>
</a>
</div>
</li>
<li class="top-site-outer">
<div class="top-site-inner">
<div class="title">
<span dir="auto"> Winfuture </span>
</div>
<a class="top-site-button" href="https://winfuture.de/" tabindex="0" draggable="true">
<div class="tile" aria-hidden="true">
<div class="top-site-icon rich-icon"> <img src="preview_02.png" width="50" height="50">
</div>
</div>
</a>
</div>
</li>
<li class="top-site-outer">
<div class="top-site-inner">
<div class="title">
<span dir="auto"> ComputerBase </span>
</div>
<a class="top-site-button" href="https://www.computerbase.de/" tabindex="0" draggable="true">
<div class="tile" aria-hidden="true">
<div class="icon-wrapper" data-fallback="h">
<div class="top-site-icon rich-icon"> <img src="preview_03.png" width="50" height="50">
</div>
</div>
</div>
</a>
</div>
</li>
<li class="top-site-outer">
<div class="top-site-inner">
<div class="title">
<span dir="auto"> golem </span>
</div>
<a class="top-site-button" href="https://www.golem.de/" tabindex="0" draggable="true">
<div class="tile" aria-hidden="true">
<div class="icon-wrapper" data-fallback="h">
<div class="top-site-icon rich-icon"> <img src="preview_04.png" width="50" height="50">
</div>
</div>
</div>
</a>
</div>
</li>
<li class="top-site-outer">
<div class="top-site-inner">
<div class="title">
<span dir="auto"> Chip </span>
</div>
<a class="top-site-button" href="https://www.chip.de/" tabindex="0" draggable="true">
<div class="tile" aria-hidden="true">
<div class="icon-wrapper" data-fallback="h">
<div class="top-site-icon rich-icon"> <img src="preview_05.png" width="50" height="50">
</div>
</div>
</div>
</a>
</div>
</li>
</ul>
...Warum ist die Seite nicht mittig?
Wenn ich
.top-sites-list {
text-align: center;
}entferne, habe ich dennoch links Abstand.
Wo wird der denn definiert?
Als nächstes versuche ich die kleinen Logos vor die "Überschriften zu bekommen.
Aber so, dass ich sie unabhängig vom Text verschieben kann
und umgekehrt.
Denn die "Logos" stehen bei "meiner" anderen Lösung immer höher als der Text.
Gruß
Mira
Nachtrag.
Drei Möglichkeiten.
Alles Falsch!
.title {
padding-top: 5px;
padding-bottom: 12px;
padding-left: 50px;
font: caption;
color: red;
}
.top-logo {
padding-right: 80px;
padding-bottom: 1px;
} <ul class="top-sites-list">
<li class="top-site-outer">
<div class="top-site-inner">
<div class="title">
<img src="favicon-16x16.png">
<span dir="auto"> heise </span>
</div>
<a class="top-site-button" href="https://www.heise.de/" tabindex="0" draggable="true">
<div class="tile" aria-hidden="true">
<div class="top-site-icon rich-icon"> <img src="preview_01.png" width="50" height="50">
</div>
</div>
</a>
</div>
</li>
<li class="top-site-outer">
<div class="top-site-inner">
<div class="top-logo">
<img src="favicons_02.png">
</div>
<div class="title">
<span dir="auto"> Winfuture </span>
</div>
<a class="top-site-button" href="https://winfuture.de/" tabindex="0" draggable="true">
<div class="tile" aria-hidden="true">
<div class="top-site-icon rich-icon"> <img src="preview_02.png" width="50" height="50">
</div>
</div>
</a>
</div>
</li>
<li class="top-site-outer">
<div class="top-site-inner">
<div class="top-logo">
<img src="favicons_03.png">
</div>
<a class="top-site-button" href="https://www.computerbase.de/" tabindex="0" draggable="true">
<div class="tile" aria-hidden="true">
<div class="icon-wrapper" data-fallback="h">
<div class="top-site-icon rich-icon"> <img src="preview_03.png" width="50" height="50">
</div>
</div>
</div>
</a>
</div>
</li>???
Gruß
Mira
Danke.
Eure Antworten waren schon recht niederschmetternd!
Und ich dachte mir so, Euch zeige ich's. 
Ich habe noch einmal von ganz vorne angefangen
und das ist der Stand der Dinge.
<!d<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Startseite</title>
<style>
body {
background-image: url("Rights.jpg");
}
.top-site-outer {
width: 180px;
padding-top: 5px;
padding-left: 20px;
border-radius: 8px;
display: inline-block;
}
.tile {
border-color: #e1e1e170;
border-color: #e1e1e170 !important;
border-radius: 8px !important;
border-width: 1px !important;
border-style: solid !important;
background-color: transparent;
justify-content: center;
/* margin: 0 auto; */
height: 125px;
width: 193px;
align-items: center;
display: flex;
}
.tile:hover {
background-color: #d2d2d218;
}
.top-site-outer .default-icon[data-fallback]::before {
content: attr(data-fallback);
}
.title {
padding-top: 5px;
padding-bottom: 2px;
padding-left: 20px;
font: caption;
text-align: center;
position: relative;
color: red;
}
</style>
</head>
<body>
<ul class="top-sites-list">
<li class="top-site-outer">
<div class="top-site-inner">
<div class="title">
<span dir="auto">
heise
</span>
</div>
<a class="top-site-button" href="https://www.heise.de/" tabindex="0" draggable="true">
<div class="tile" aria-hidden="true">
<div class="icon-wrapper" data-fallback="h">
<div class="top-site-icon rich-icon"> <img src="preview_01.png" width="50" height="50">
</div>
</div>
</div>
</a>
</div>
</li>
<li class="top-site-outer">
<div class="top-site-inner">
<div class="title">
<span dir="auto">
Winfuture
</span>
</div>
<a class="top-site-button" href="https://winfuture.de/" tabindex="0" draggable="true">
<div class="tile" aria-hidden="true">
<div class="icon-wrapper" data-fallback="h">
<div class="top-site-icon rich-icon"> <img src="preview_02.png" width="50" height="50">
</div>
</div>
</div>
</a>
</div>
</li>
<li class="top-site-outer">
<div class="top-site-inner">
<div class="title">
<span dir="auto">
ComputerBase
</span>
</div>
<a class="top-site-button" href="https://www.computerbase.de/" tabindex="0" draggable="true">
<div class="tile" aria-hidden="true">
<div class="icon-wrapper" data-fallback="h">
<div class="top-site-icon rich-icon"> <img src="preview_03.png" width="50" height="50">
</div>
</div>
</div>
</a>
</div>
</li>
<li class="top-site-outer">
<div class="top-site-inner">
<div class="title">
<span dir="auto">
golem
</span>
</div>
<a class="top-site-button" href="https://www.golem.de/" tabindex="0" draggable="true">
<div class="tile" aria-hidden="true">
<div class="icon-wrapper" data-fallback="h">
<div class="top-site-icon rich-icon"> <img src="preview_04.png" width="50" height="50">
</div>
</div>
</div>
</a>
</div>
</li>
<li class="top-site-outer">
<div class="top-site-inner">
<div class="title">
<span dir="auto">
Chip
</span>
</div>
<a class="top-site-button" href="https://www.chip.de/" tabindex="0" draggable="true">
<div class="tile" aria-hidden="true">
<div class="icon-wrapper" data-fallback="h">
<div class="top-site-icon rich-icon"> <img src="preview_05.png" width="50" height="50">
</div>
</div>
</div>
</a>
</div>
</li>
</ul>
<ul class="top-sites-list">
<li class="top-site-outer">
<div class="top-site-inner">
<div class="title">
<span dir="auto">
heise
</span>
</div>
<a class="top-site-button" href="https://www.heise.de/" tabindex="0" draggable="true">
<div class="tile" aria-hidden="true">
<div class="icon-wrapper" data-fallback="h">
<div class="top-site-icon rich-icon"> <img src="preview_01.png" width="50" height="50">
</div>
</div>
</div>
</a>
</div>
</li>
<li class="top-site-outer">
<div class="top-site-inner">
<div class="title">
<span dir="auto">
Winfuture
</span>
</div>
<a class="top-site-button" href="https://winfuture.de/" tabindex="0" draggable="true">
<div class="tile" aria-hidden="true">
<div class="icon-wrapper" data-fallback="h">
<div class="top-site-icon rich-icon"> <img src="preview_02.png" width="50" height="50">
</div>
</div>
</div>
</a>
</div>
</li>
<li class="top-site-outer">
<div class="top-site-inner">
<div class="title">
<span dir="auto">
ComputerBase
</span>
</div>
<a class="top-site-button" href="https://www.computerbase.de/" tabindex="0" draggable="true">
<div class="tile" aria-hidden="true">
<div class="icon-wrapper" data-fallback="h">
<div class="top-site-icon rich-icon"> <img src="preview_03.png" width="50" height="50">
</div>
</div>
</div>
</a>
</div>
</li>
<li class="top-site-outer">
<div class="top-site-inner">
<div class="title">
<span dir="auto">
golem
</span>
</div>
<a class="top-site-button" href="https://www.golem.de/" tabindex="0" draggable="true">
<div class="tile" aria-hidden="true">
<div class="icon-wrapper" data-fallback="h">
<div class="top-site-icon rich-icon"> <img src="preview_04.png" width="50" height="50">
</div>
</div>
</div>
</a>
</div>
</li>
<li class="top-site-outer">
<div class="top-site-inner">
<div class="title">
<span dir="auto">
Chip
</span>
</div>
<a class="top-site-button" href="https://www.chip.de/" tabindex="0" draggable="true">
<div class="tile" aria-hidden="true">
<div class="icon-wrapper" data-fallback="h">
<div class="top-site-icon rich-icon"> <img src="preview_05.png" width="50" height="50">
</div>
</div>
</div>
</a>
</div>
</li>
</ul>
<ul class="top-sites-list">
<li class="top-site-outer">
<div class="top-site-inner">
<div class="title">
<span dir="auto">
heise
</span>
</div>
<a class="top-site-button" href="https://www.heise.de/" tabindex="0" draggable="true">
<div class="tile" aria-hidden="true">
<div class="icon-wrapper" data-fallback="h">
<div class="top-site-icon rich-icon"> <img src="preview_01.png" width="50" height="50">
</div>
</div>
</div>
</a>
</div>
</li>
<li class="top-site-outer">
<div class="top-site-inner">
<div class="title">
<span dir="auto">
Winfuture
</span>
</div>
<a class="top-site-button" href="https://winfuture.de/" tabindex="0" draggable="true">
<div class="tile" aria-hidden="true">
<div class="icon-wrapper" data-fallback="h">
<div class="top-site-icon rich-icon"> <img src="preview_02.png" width="50" height="50">
</div>
</div>
</div>
</a>
</div>
</li>
<li class="top-site-outer">
<div class="top-site-inner">
<div class="title">
<span dir="auto">
ComputerBase
</span>
</div>
<a class="top-site-button" href="https://www.computerbase.de/" tabindex="0" draggable="true">
<div class="tile" aria-hidden="true">
<div class="icon-wrapper" data-fallback="h">
<div class="top-site-icon rich-icon"> <img src="preview_03.png" width="50" height="50">
</div>
</div>
</div>
</a>
</div>
</li>
<li class="top-site-outer">
<div class="top-site-inner">
<div class="title">
<span dir="auto">
golem
</span>
</div>
<a class="top-site-button" href="https://www.golem.de/" tabindex="0" draggable="true">
<div class="tile" aria-hidden="true">
<div class="icon-wrapper" data-fallback="h">
<div class="top-site-icon rich-icon"> <img src="preview_04.png" width="50" height="50">
</div>
</div>
</div>
</a>
</div>
</li>
<li class="top-site-outer">
<div class="top-site-inner">
<div class="title">
<span dir="auto">
Chip
</span>
</div>
<a class="top-site-button" href="https://www.chip.de/" tabindex="0" draggable="true">
<div class="tile" aria-hidden="true">
<div class="icon-wrapper" data-fallback="h">
<div class="top-site-icon rich-icon"> <img src="preview_05.png" width="50" height="50">
</div>
</div>
</div>
</a>
</div>
</li>
</ul>
<ul class="top-sites-list">
<li class="top-site-outer">
<div class="top-site-inner">
<div class="title">
<span dir="auto">
heise
</span>
</div>
<a class="top-site-button" href="https://www.heise.de/" tabindex="0" draggable="true">
<div class="tile" aria-hidden="true">
<div class="icon-wrapper" data-fallback="h">
<div class="top-site-icon rich-icon"> <img src="preview_01.png" width="50" height="50">
</div>
</div>
</div>
</a>
</div>
</li>
<li class="top-site-outer">
<div class="top-site-inner">
<div class="title">
<span dir="auto">
Winfuture
</span>
</div>
<a class="top-site-button" href="https://winfuture.de/" tabindex="0" draggable="true">
<div class="tile" aria-hidden="true">
<div class="icon-wrapper" data-fallback="h">
<div class="top-site-icon rich-icon"> <img src="preview_02.png" width="50" height="50">
</div>
</div>
</div>
</a>
</div>
</li>
<li class="top-site-outer">
<div class="top-site-inner">
<div class="title">
<span dir="auto">
ComputerBase
</span>
</div>
<a class="top-site-button" href="https://www.computerbase.de/" tabindex="0" draggable="true">
<div class="tile" aria-hidden="true">
<div class="icon-wrapper" data-fallback="h">
<div class="top-site-icon rich-icon"> <img src="preview_03.png" width="50" height="50">
</div>
</div>
</div>
</a>
</div>
</li>
<li class="top-site-outer">
<div class="top-site-inner">
<div class="title">
<span dir="auto">
golem
</span>
</div>
<a class="top-site-button" href="https://www.golem.de/" tabindex="0" draggable="true">
<div class="tile" aria-hidden="true">
<div class="icon-wrapper" data-fallback="h">
<div class="top-site-icon rich-icon"> <img src="preview_04.png" width="50" height="50">
</div>
</div>
</div>
</a>
</div>
</li>
<li class="top-site-outer">
<div class="top-site-inner">
<div class="title">
<span dir="auto">
Chip
</span>
</div>
<a class="top-site-button" href="https://www.chip.de/" tabindex="0" draggable="true">
<div class="tile" aria-hidden="true">
<div class="icon-wrapper" data-fallback="h">
<div class="top-site-icon rich-icon"> <img src="preview_05.png" width="50" height="50">
</div>
</div>
</div>
</a>
</div>
</li>
</ul>
<ul class="top-sites-list">
<li class="top-site-outer">
<div class="top-site-inner">
<div class="title">
<span dir="auto">
heise
</span>
</div>
<a class="top-site-button" href="https://www.heise.de/" tabindex="0" draggable="true">
<div class="tile" aria-hidden="true">
<div class="icon-wrapper" data-fallback="h">
<div class="top-site-icon rich-icon"> <img src="preview_01.png" width="50" height="50">
</div>
</div>
</div>
</a>
</div>
</li>
<li class="top-site-outer">
<div class="top-site-inner">
<div class="title">
<span dir="auto">
Winfuture
</span>
</div>
<a class="top-site-button" href="https://winfuture.de/" tabindex="0" draggable="true">
<div class="tile" aria-hidden="true">
<div class="icon-wrapper" data-fallback="h">
<div class="top-site-icon rich-icon"> <img src="preview_02.png" width="50" height="50">
</div>
</div>
</div>
</a>
</div>
</li>
<li class="top-site-outer">
<div class="top-site-inner">
<div class="title">
<span dir="auto">
ComputerBase
</span>
</div>
<a class="top-site-button" href="https://www.computerbase.de/" tabindex="0" draggable="true">
<div class="tile" aria-hidden="true">
<div class="icon-wrapper" data-fallback="h">
<div class="top-site-icon rich-icon"> <img src="preview_03.png" width="50" height="50">
</div>
</div>
</div>
</a>
</div>
</li>
<li class="top-site-outer">
<div class="top-site-inner">
<div class="title">
<span dir="auto">
golem
</span>
</div>
<a class="top-site-button" href="https://www.golem.de/" tabindex="0" draggable="true">
<div class="tile" aria-hidden="true">
<div class="icon-wrapper" data-fallback="h">
<div class="top-site-icon rich-icon"> <img src="preview_04.png" width="50" height="50">
</div>
</div>
</div>
</a>
</div>
</li>
<li class="top-site-outer">
<div class="top-site-inner">
<div class="title">
<span dir="auto">
Chip
</span>
</div>
<a class="top-site-button" href="https://www.chip.de/" tabindex="0" draggable="true">
<div class="tile" aria-hidden="true">
<div class="icon-wrapper" data-fallback="h">
<div class="top-site-icon rich-icon"> <img src="preview_05.png" width="50" height="50">
</div>
</div>
</div>
</a>
</div>
</li>
</ul>
</body>
</html>Sieht das besser aus?
Also ich finde ja, der "Tabellen"-Code ist/war schon übersichtlicher.
Gruß
Mira
Danke Sören!
Wie ich schon schrieb, lag das HTML schon lange auf der Platte!
Das "Grundgerüst" hatte ich dann vor einigen Tage neu erstellt
und habe dann "die alte Tabelle" eingefügt.
Hat ja auch irgendwie geklappt!
Weil aber so einiges nicht wirklich so angezeigt wurde, wie ich es gerne gehabt hätte
und ich auch nun Eurer Hilfe etwas Erfahrung in CSS gemacht haben,
wollte ich per CSS "eingreifen".
Wie ich nun sehe, war dieser Gedanke schon mal nicht schlecht,
aber ich muss mich jetzt erst einmal noch näher und wieder mit HTML beschäftigen.
Gruß
Mira
... Dann kannst das Ergebnis auf deine Fahne schreiben. Aber vorab schon nach Unterstützung fragen ...
... nicht alles nachfragen.
Ich will mir hier gar nichts "auf die eigene Fahne schreiben"!
Ich übe! Frage nach. Und jeder der es möchte, kann daraus machen was er/sie will.
Sörens Antwort hat mir sicherlich mehr gebracht, als Deine.
Denn er zähle "Ungereimtheiten" auf und machte mir auf NETTE Art klar,
dass ich da noch ein paar Hausaufgaben machen muss. 
Das MDN ist dafür ideal geeignet, ein Pdf für Css hat milupo mal verlinkt.
milupo
Kannst Du das pdf hier auch noch einmal verlinken, bitte.
Kann es nicht finden.
Gruß
Mira
Könntest Du sie nicht per Zip hier einfügen?
Oha, ja sicher.
Gruß
Mira
Moin, ja ist mir dann auch noch eingefallen,
aber es war schon so spät.
Hier liefere ich die Grafiken nach.
Der (mein) Hintergrund.
(Es kann im Prinzip jeder Wallpaper genommen werden)
Nun die Favicons.
Und nun die Previews
Gruß
Mira
Ein guter Anfang, dich! reinzuarbeiten und dann andere, wenn fertig, teilhaben zu lassen.
Ist das jetzt ernst gemeint und ein Lob,
oder eher nicht? Ich bin mir da gerade nicht so sicher. 
Gruß
Mira
Habe mich schon länger damit befasst und habe mir schwergetan, eine HTML-Seite zu "bauen"!
Nun habe ich es irgendwie hinbekommen.
Eine Startpage! Ein kleiner Ersatz für "Speeddeal".
Ja, ich weiß, hat jetzt nicht unbedingt direkt was mit dem Firefox zu tun,
aber,
es kommt auch viel CSS-Code vor,
und,
ohne dieses Board und meine "Gehversuche" den Firefox mittels CSS anzupassen,
würde diese HTML-Leiche immer noch hier bei mir auf der Festplatte dahin siechen.
Es gibt 25 Kacheln, habe jetzt nur die ersten 10 hier veröffentlicht.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Startseite</title>
<style>
body {
background-image: url("Rights.jpg");
}
p:nth-child(1) {
margin-block: 1px !important;
text-align: center !important;
padding-bottom: 2px !important;
color: #ff9600 !important;
font-size: 24px !important;
font-weight: bold !important;
}
th:nth-child(1),
th:nth-child(3),
th:nth-child(5),
th:nth-child(7),
th:nth-child(9)
{
padding-top: 10px !important;
padding-bottom: 1px !important;
border-color: transparent !important;
border-radius: 4px !important;
border-width: 1px !important;
border-style: outset !important;
font-size:15px!important;
font-weight: normal !important;
min-width: 190px !important;
max-width: 2000px !important;
}
td:nth-child(1),
td:nth-child(3),
td:nth-child(5),
td:nth-child(7),
td:nth-child(9)
{
width: 150px !important;
height: 120px !important;
border-color: #e1e1e170 !important;
border-radius: 8px !important;
border-width: 1px !important;
border-style: solid !important;
}
th:nth-child(2),
th:nth-child(4),
th:nth-child(6),
th:nth-child(8)
{
min-width: 5px !important;
max-width: 5px !important;
}
img:nth-child(1){
padding-left: 10px !important;
padding-right: 0px !important;
}
font:nth-child(2) {
padding-right: 15px !important;
padding-left: 10px !important;
padding-bottom: 2px!important;
}
td:nth-child(1):hover,
td:nth-child(3):hover,
td:nth-child(5):hover,
td:nth-child(7):hover,
td:nth-child(9):hover
{
background: #d2d2d218 !important;
border-color: #e1e1e1 !important;
border-radius: 8px !important;
border-width: 1px !important;
border-style: solid !important;
}
</style>
</head>
<body>
<p>Miras Startseite</p>
</body>
<CENTER>
<table>
<thead>
<tr>
<th> <img src="favicon-16x16.png"> <font color=#FFFFFF> heise online - IT-News</font></th>
<th> <img src="head.png" width="10" height="30">
<th> <img src="favicons_02.png"> <font color=#FFFFFF> Winfuture</font></th>
<th> <img src="head.png" width="10" height="30">
<th> <img src="favicons_03.png"> <font color=#FFFFFF> ComputerBase</font></th>
<th> <img src="head.png" width="10" height="30">
<th> <img src="favicons_04.png"> <font color=#FFFFFF> Golem.de: IT-News</font></th>
<th> <img src="head.png" width="10" height="30">
<th> <img src="favicons_05.png"> <font color=#FFFFFF> Chip.de</font></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="https://www.heise.de/" target="_blank"> <img src="preview_01.png" width="90%" height="100%"> </a>
</td>
<th> <img src="head.png" width="10" height="30"> </th>
<td>
<a href="https://winfuture.de/" target="_blank"> <img src="preview_02.png" width="90%" height="100%"> </a>
</td>
<th> <img src="head.png" width="10" height="30"> </th>
<td>
<a href="https://www.computerbase.de/" target="_blank"> <img src="preview_03.png" width="90%" height="100%"> </a>
</td>
<th> <img src="head.png" width="10" height="30"> </th>
<td>
<a href="https://www.golem.de/" target="_blank"> <img src="preview_04.png" width="80%" height="55%"> </a>
</td>
<th> <img src="head.png" width="10" height="30"> </th>
<td>
<a href="https://www.chip.de/" target="_blank"> <img src="preview_05.png" width="90%" height="100%"> </a>
</td>
</tr>
</tbody>
</table>
</CENTER>
<CENTER>
<table>
<thead>
<tr>
<th> <img src="favicons_06.png"> <font color=#FFFFFF> Aktuelle Nachrichten</font></th>
<th> <img src="head.png" width="10" height="30">
<th> <img src="favicons_07.png"> <font color=#FFFFFF> Supernature Board</font></th>
<th> <img src="head.png" width="10" height="30">
<th> <img src="favicons_08.png"> <font color=#FFFFFF> Dr.Windows</font></th>
<th> <img src="head.png" width="10" height="30">
<th> <img src="favicons_25.png"> <font color=#FFFFFF> Descmodder.de</font></th>
<th> <img src="head.png" width="10" height="30">
<th> <img src="wordpress.png"> <font color=#FFFFFF> BornCity</font></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="https://www.tagesschau.de/" target="_blank"> <img src="preview_06.png" width="90%" height="100%"> </a>
</td>
<th> <img src="head.png" width="10" height="30"> </th>
<td>
<a href="https://www.supernature-forum.de/forum.php" target="_blank"> <img src="preview_07.png" width="90%" height="50%"> </a>
</td>
<th> <img src="head.png" width="10" height="30"> </th>
<td>
<a href="https://www.drwindows.de/content/" target="_blank"> <img src="preview_08.png" width="90%" height="50%"> </a>
</td>
<th> <img src="head.png" width="10" height="30"> </th>
<td>
<a href="https://www.deskmodder.de/blog/" target="_blank"> <img src="preview_25a.png" width="90%" height="60%"> </a>
</td>
<th> <img src="head.png" width="10" height="30"> </th>
<td>
<a href="https://www.borncity.com/blog/" target="_blank"> <img src="preview_26.png" width="90%" height="40%"> </a>
</td>
</tr>
</tbody>
</table>
</CENTER>Wenn da mal jemand drüberschauen kann und mir sagen kann, ob es da etwas gibt,
das auch leichter oder einfacher umzusetzen geht.
Oder schöner!
Gerade das mit den preview-Bildchen und dem Rahmen td habe ich mir irgendwie einfacher vorgestellt.
Und auch die Icons th:nth-child(1) > img:nth-child(1) sitzen nicht so wirklich an Ihrem Platz.
Ich habe mir vorgestellt, dass die etwas Rechts eingerückt sind, mit ein wenig Platz dahinter dann der Text (Titel) kommt,
und wenn der zu lang ist, dann einfach per " ... " abgeschnitten wird.
Aber das bekomme ich einfach nicht hin.
Nun ja, aber so im Großen und Ganzen bin ich doch schon damit zufrieden
und kann jetzt "Speeddeal" von der Platte fegen.
Gruß
Mira
Wenn erlaubt, würde ich dieses "Projekt" hier gerne mit Eurer Hilfe weiter führen.
Nun gut, deine Entscheidung!
Wenn diese Mailadresse deine Hauptadresse ist mit der du vielleicht auch bei Banken oder anderen Shops angemeldet bist, wäre ein Schritt zum Identitätsklau getan.. BTW: Niemand muss Hinweisen folgen, eine Diskussion darüber braucht man aber auch nicht führen!
Habe doch die Grafik rausgenommen.
Und die Frage ist, war erst gemeint!
Gruß
Mira
