Nun, dann ist das Projekt "Eine Startseite als Ersatz für Speed Deal" abgeschlossen.
Wie wäre es, das Endergebnis nochmal hier einzustellen?
Nun, dann ist das Projekt "Eine Startseite als Ersatz für Speed Deal" abgeschlossen.
Wie wäre es, das Endergebnis nochmal hier einzustellen?
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>
Alles anzeigen
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.
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