- Firefox-Version
- 96.0.2 (64-Bit)
- Betriebssystem
- Windows 10 Version 21H2 (Build 19044.1466)
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.
