Hilfe beim Startpage erstellen (Speed Dial)

---rOOts---

Senior Member
Hi brächte einmal etwas Hilfe beim Erstellen einer (meiner) lokalen Startseite.

Ich möchte eine Html-Datei erstellen, die in etwa so ausschaut, wie man das von diversen Browserzusätzen her kennt.
Stichwort " Speed Dial"

Mit HTML komme ich nicht weiter. Zwar habe ich ein Gitter (Tabelle), aber
es ist für mich zu schwer, ich verstehe es einfach nicht, den Zellen feste "Größen zu geben
und dann kleine "Bildchen" ein zufügen, ohne das diese total verzerrt werden.
Die werden immer an die Größe der Zelle angepasst.

Code:
<!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");
} 
 
</style>
  
  </head> 
  
  
  <body>

<CENTER>
<table border="0">
 <tr>
   <td>
    <a href="file:///C:\Internet\Startseite/Page.html">
    <img src="preview.png"
    width="1075" height="70" 
    </a>
   </td>
 </tr>
<table border="0">
 <tr>
  <td>
    <a href="https://www.heise.de/" target="_blank">
    <img src="https://d5l07j6ktywkt.cloudfront.net/sdpreview/0/2c499407/1377508476-521b1c7c486e6/preview.png"
    width="210" height="140" 
    </a>
  </td>
  <td>
    <a href="https://winfuture.de/" target="_blank">
    <img src="https://d5l07j6ktywkt.cloudfront.net/sdpreview/0/c6c1d9fa/1410829628-54178d3ccf7d2/preview.png"
    width="210" height="140"
    </a>
  </td>
  <td>
    <a href="https://www.computerbase.de/" target="_blank">
    <img src="https://d5l07j6ktywkt.cloudfront.net/sdpreview/0/d88be9a0/1377532910-521b7bee4709c/preview.png"
    width="210" height="140" 
    </a>
  </td>
  <td>
    <a href="https://www.golem.de/" target="_blank">
    <img src="https://d5l07j6ktywkt.cloudfront.net/sdpreview/0/2bc0029b/1393800922-5313b6da8197a/preview.png"
    width="210" height="140" 
    </a>
  </td>

Dies ist nur der CODE für die erste Zeile mit fünf Spalten.

So komme ich aber nicht weiter!
Es führt wohl kein Weg an CSS vor bei.

Kann mir da jemand helfen?

Im Anhang ein Screenshot, wie ich es mir Vorstelle.
 

Anhänge

  • Unbenannt.JPG
    Unbenannt.JPG
    125,2 KB · Aufrufe: 231
file:///C:\Internet\Startseite/Page.html
entweder nur \ oder nur /, wobei html nur mit / arbeitet - also:
file:///C:/Internet/Startseite/Page.html

Was Breite angeht
<td width="1234px">
oder
<style>
.tdata {width: 1234px}
</style>

<td class"tdata">
CSS hat den Vorteil, dass man nur dort ändern muss.

Frage - was ist den mit den üblichen Dials falsch? Es gibt doch genügend Erweiterungen, wenn man IE und Edge aussen vor lässt.

Dein "Dial" hat einen Nachteil - es lädt bei jedem Aufruf die Bilder neu, wohl aus dem Cache,, wenn vorhanden, ansonsten leere Tabelle. Erweiterungen speichern solche Daten in der Datenbank, offline.

Das Hintergrundbild wird zB in Firefox regulär erst gar nicht geladen, weil nicht erlaubt, dito Chrome:
Links to local pages do not work - MozillaZine Knowledge Base

Ach Firefox und die /////
https://support.mozilla.org/de/questions/1098980
 
Ich habe es geschafft!
Und ganz ohne CSS.
Ich bin so stolz auf mich.

Code:
<!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");
} 
 
</style>
  
  </head> 
  
  
  <body>

<CENTER>
<table border="0">
 <tr>
   <td>
    <a href="Page.html">
    <img src="head.png"
    width="960" height="70" 
    </a>
   </td>
 </tr>
<table border="0">

 <tr>
  <td>   
    <img src="head.png" width="10" height="30">  
  </td>
  <td>
    <CENTER>
    <img src="favicons_01.png">
      <font color=#FFFFFF> heise online - IT-News</font> 
    </CENTER> 
         </td>
    <td>   
    <img src="head.png" width="10" height="30"> 
  </td>
  <td>
    <CENTER> 
    <img src="favicons_02.png">
      <font color=#FFFFFF> Winfuture.de</font> 
    </CENTER>  
  </td>
  <td>   
    <img src="head.png" width="10" height="30"> 
  </td>
  <td>
    <CENTER>    
    <img src="favicons_03.png">
      <font color=#FFFFFF> ComputerBase</font> 
    </CENTER>  
  </td>
  <td>   
    <img src="head.png" width="10" height="30"> 
  </td>  
  <td>
    <CENTER>    
    <img src="favicons_04.png">
      <font color=#FFFFFF> Golem.de: IT-News</font> 
    </CENTER>  
  </td>
  <td>   
    <img src="head.png" width="10" height="30"> 
  </td>
  <td>
    <CENTER>    
    <img src="favicons_05.png">
      <font color=#FFFFFF> CHIP</font> 
    </CENTER>  
  </td>
  <td>
    <img src="head.png" width="10" height="30"> 
  </td>  
 </tr> 

 <tr>
  <td>
    <img src="head.png" width="10" height="120">
  </td>
  <td>
    <CENTER>
    <a href="https://www.heise.de/" target="_blank">
    <img src="preview_01a.png"
    width="150" height="100%" 
    </a>
    </CENTER>
   </td>
  <td>   
    <img src="head.png" width="10" height="120"> 
  </td>
  <td>
    <CENTER>
    <a href="https://winfuture.de/" target="_blank">
    <img src="preview_02.png"
    width="150" height="100%"
    </a>
    </CENTER>
  </td>
  <td>   
    <img src="head.png" width="10" height="120">
  </td>
  <td>
    <CENTER>
    <a href="https://www.computerbase.de/" target="_blank">
    <img src="preview_03.png"
    width="170" height="100%" 
    </a>
    </CENTER>
  </td>
  <td>   
    <img src="head.png" width="10" height="120"> 
  </td>
  <td>
    <a href="https://www.golem.de/" target="_blank">
    <img src="preview_04.png"
    width="180" height="100%" 
    </a>
  </td>
  <td>   
    <img src="head.png" width="10" height="120"> 
  </td>
  <td>
    <CENTER>
    <a href="https://www.chip.de/" target="_blank">
    <img src="preview_05.png"
    width="150" height="100" 
    </a>
    </CENTER>
  </td>
  <td>
    <img src="head.png" width="10" height="120">
  </td>
 </tr>

 <tr>
  <td>   
    <img src="head.png" width="10" height="10"> 
  </td>
  <td>
    <CENTER>      
    <img src="favicons_06.png">
      <font color=#FFFFFF> Aktuelle Nachrichten</font>  
    </CENTER>  
  </td>
  <td>   
    <img src="head.png" width="10" height="10"> 
  </td> 
  <td>
    <CENTER>      
    <img src="favicons_07.png">
      <font color=#FFFFFF> Supernature-Forum</font> 
     </CENTER> 
  </td>
  <td>   
    <img src="head.png" width="10" height="10"> 
  </td>
  <td>
    <CENTER>      
    <img src="favicons_08.png"> 
      <font color=#FFFFFF> News - Dr.Windows</font> 
    </CENTER>  
  </td>
  <td>   
    <img src="head.png" width="10" height="10">
  </td>
  <td>
    <CENTER>      
    <img src="favicons_09.png"> 
      <font color=#FFFFFF> Android Forum</font> 
    </CENTER>  
  </td>
  <td>   
    <img src="head.png" width="10" height="10"> 
  </td>
  <td>
    <CENTER>      
    <img src="favicons_10.png">
      <font color=#FFFFFF> WindowsUnited</font> 
    </CENTER>  
  </td>
  <td>
    <img src="head.png" width="10" height="10"> 
  </td>  
 </tr>  

 <tr>
  <td>
    <img src="head.png" width="10" height="120">
  </td>
  <td>
    <CENTER> 
    <a href="https://www.tagesschau.de/" target="_blank">
    <img src="preview_06.png"
    width="150" height="100%" 
    </a>
    </CENTER>
  </td>
  <td>   
    <img src="head.png" width="10" height="120"> 
  </td>
  <td>
    <a href="https://www.supernature-forum.de/" target="_blank">
    <img src="preview_07b.png"
    width="180" height="100%" 
    </a>
  </td>
  <td>   
    <img src="head.png" width="10" height="120"> 
  </td>
  <td>
    <a href="https://www.drwindows.de/content/" target="_blank">
    <img src="preview_08.png"
    width="180" height="100%" 
    </a> 
  </td>
  <td>   
    <img src="head.png" width="10" height="120"> 
  </td> 
  <td>
    <CENTER>
    <a href="https://www.android-hilfe.de/" target="_blank">
    <img src="preview_09.png"
    width="150" height="100%" 
    </a> 
    </CENTER>
  </td>
  <td>   
    <img src="head.png" width="10" height="120"> 
  </td>
  <td> 
    <a href="https://windowsunited.de/" target="_blank">
    <img src="preview_10.png"
    width="180" height="100%" 
    </a>
  </td>
  <td>
    <img src="head.png" width="10" height="120">
  </td>
 </tr>

 <tr>
  <td>   
    <img src="head.png" width="10" height="10"> 
  </td>
  <td>
    <img src="favicons_11.png">
    <font color=#FFFFFF> myGully.com</font>  
  </td>
  <td>   
    <img src="head.png" width="10" height="10"> 
  </td>
  <td>
    <img src="favicons_12.png">
    <font color=#FFFFFF> Boerse.SX *****</font> 
  </td>
  <td>   
    <img src="head.png" width="10" height="10"> 
  </td> 
  <td>
    <img src="favicons_13.png">
    <font color=#FFFFFF> Just a moment ...</font> 
  </td>
  <td>   
    <img src="head.png" width="10" height="10"> 
  </td>
  <td>
    <img src="favicons_14.png">
    <font color=#FFFFFF> My*****</font> 
  </td>
  <td>   
    <img src="head.png" width="10" height="10"> 
  </td>
  <td>
    <img src="favicons_15.png">
    <font color=#FFFFFF> Facebook</font> 
  </td>
  <td>
    <img src="head.png" width="10" height="10"> 
  </td>  
 </tr> 

 <tr>
  <td>
    <img src="head.png" width="10" height="120">
  </td>
  <td>   
    <CENTER>    
    <a href="http://mygully.com/index.php" target="_blank">
    <img src="preview_11a.png"
    width="150" height="100%" 
    </a> 
    </CENTER>   
  </td>
  <td>   
    <img src="head.png" width="10" height="120"> 
  </td>
  <td>
    <CENTER>
    <a href="http://www.boerse.sh/" target="_blank">
    <img src="preview_12.png"
    width="150" height="100%" 
    </a> 
    </CENTER> 
  </td>
  <td>   
    <img src="head.png" width="10" height="120"> 
  </td>
  <td>
    <CENTER>
    <a href="https://www.boerse.to/" target="_blank">
    <img src="preview_13.png"
    width="150" height="100%" 
    </a> 
    </CENTER>
  </td>
  <td>   
    <img src="head.png" width="10" height="120"> 
  </td>
  <td>
    <a href="http://my*****/" target="_blank">
    <img src="preview_14.png"
    width="180" height="100%" 
    </a> 
  </td>
  <td>   
    <img src="head.png" width="10" height="120"> 
  </td>
  <td>
    <CENTER>
    <a href="https://de-de.facebook.com/login/" target="_blank">
    <img src="preview_15.png"
    width="150" height="100%" 
    </a>
    <CENTER>
  </td>
  <td>
    <img src="head.png" width="10" height="120">
  </td>
 </tr>

 <tr>
  <td>   
    <img src="head.png" width="10" height="10"> 
  </td>
  <td>
    <img src="favicons_16.png">
    <font color=#FFFFFF> funxd.pw</font>  
  </td>
  <td>   
    <img src="head.png" width="10" height="10"> 
  </td>
  <td>
    <img src="favicons_17.png">
    <font color=#FFFFFF> Serienjunkies</font> 
  </td>
  <td>   
    <img src="head.png" width="10" height="10"> 
  </td>
  <td>
    <img src="favicons_18.png">
    <font color=#FFFFFF> Serienjunkies - Info</font> 
  </td>
  <td>   
    <img src="head.png" width="10" height="10"> 
  </td>
  <td>
    <img src="favicons_19.png">
    <font color=#FFFFFF> fernsehserien.de</font> 
  </td>
  <td>   
    <img src="head.png" width="10" height="10"> 
  </td>
  <td>
    <img src="favicons_20.png">
    <font color=#FFFFFF> ebook-land.cc</font> 
  </td>
  <td>
    <img src="head.png" width="10" height="10"> 
  </td>  
 </tr> 

<tr>
  <td>
    <img src="head.png" width="10" height="120">
  </td>
  <td>
    <CENTER>
    <a href="http://funxd.pw/" target="_blank">
    <img src="preview_16a.png"
    width="160" height="100%" 
    </a> 
    </CENTER>
  </td>
  <td>   
    <img src="head.png" width="10" height="120"> 
  </td>
  <td>
    <CENTER>
    <a href="http://serienjunkies.org/" target="_blank">
    <img src="preview_17.png"
    width="150" height="100%" 
    </a>  
    </CENTER>
  </td>
  <td>   
    <img src="head.png" width="10" height="120"> 
  </td>
  <td>
    <CENTER>
    <a href="http://www.serienjunkies.de/" target="_blank">
    <img src="preview_18.png"
    width="150" height="100%" 
    </a> 
    <CENTER>
  </td>
  <td>   
    <img src="head.png" width="10" height="120"> 
  </td>
  <td>
    <a href="https://www.fernsehserien.de/" target="_blank">
    <img src="preview_19a.png"
    width="180" height="100%" 
    </a>  
  </td>
  <td>   
    <img src="head.png" width="10" height="120"> 
  </td>
  <td>
    <a href="http://ebook-land.cc" target="_blank">
    <img src="preview_20.png"
    width="180" height="100%" 
    </a>     
  </td>
  <td>
    <img src="head.png" width="10" height="120">
  </td>
 </tr>

 <tr>
  <td>   
    <img src="head.png" width="10" height="10"> 
  </td>
  <td>
    <img src="favicons_21.png">
    <font color=#FFFFFF> Buy & Download</font>  
  </td>
  <td>   
    <img src="head.png" width="10" height="10">
  </td>
  <td>
    <img src="favicons_22.png">
    <font color=#FFFFFF> Download mp3</font> 
  </td>
  <td>   
    <img src="head.png" width="10" height="10">
  </td>
  <td>
    <img src="favicons_23.png"> 
    <font color=#FFFFFF> it-blogger.net</font> 
  </td>
  <td>   
    <img src="head.png" width="10" height="10"> 
  </td> 
  <td>
    <img src="favicons_24.png">
    <font color=#FFFFFF> Vivaldi Browser</font> 
  </td>
  <td>   
    <img src="head.png" width="10" height="10"> 
  </td>
  <td>
    <img src="favicons_25.png">
    <font color=#FFFFFF> Descmodder.de</font> 
  </td>
  <td>
    <img src="head.png" width="10" height="10"> 
  </td>  
 </tr> 


 <tr>
  <td>   
    <img src="head.png" width="10" height="120"> 
  </td>
  <td>
    <a href="http://www.mp3million.com/" target="_blank">
    <img src="preview_21.png"
    width="180" height="100%" 
    </a> 
  </td>
  <td>   
    <img src="head.png" width="10" height="120"> 
  </td>
  <td>
    <a href="http://www.mp3fiesta.com/" target="_blank">
    <img src="preview_22.png"
    width="180" height="100%" 
    </a> 
  </td>
  <td>   
    <img src="head.png" width="10" height="120"> 
  </td>
  <td>
    <a href="https://it-blogger.net/" target="_blank">
    <img src="preview_23.png"
    width="180" height="100%" 
    </a> 
  </td>
  <td>   
    <img src="head.png" width="10" height="120"> 
  </td>
  <td>
    <CENTER>
    <a href="https://vivaldi.com/blog/" target="_blank">
    <img src="preview_24.png"
    width="150" height="100%" 
    </a> 
    </CENTER>
  </td>
  <td>   
    <img src="head.png" width="10" height="120"> 
  </td>
  <td>
    <a href="https://www.deskmodder.de/blog/" target="_blank">
    <img src="preview_25a.png"
    width="180" height="100%" 
    </a> 
  </td>
  <td>   
    <img src="head.png" width="10" height="120"> 
  </td>
 </tr>
 
    </CENTER>
  </body>
 </html>

Und so schauts aus.
 

Anhänge

  • Unbenannt.JPG
    Unbenannt.JPG
    272,7 KB · Aufrufe: 232
Was jetzt noch schön wäre, wenn das Feld, bzw, der Rahmen um das Feld sichtbar werden würde,
wenn man mit der Maus drüber fährt.
 
Ganz ohne, sicher? ;)
Und ganz ohne CSS.
Ich bin so stolz auf mich.

Code:

<style>
body {
background-image: url("Rights.jpg");
}

</style>
Das ist CSS intern, nicht extern als css-datei (meistens, kann auch txt oder bla heissen, solange es als Stylesheet eingebunden wird ;)

Hover gibt es nur als CSS, siehe duffguy.
 
Ein Quick and Dirty Hack

ab Zeile 8:


Und dann bei jedem klickbaren Pic ein class="rahmen" dazu zB. Zeile 98:
<img class="rahmen" src="preview_01a.png"
/QUOTE]

Vielen lieben Dank für den Tip.

Leider tritt nicht ganz der erhoffte Effekt ein.
Es wird bei diesem Quick and Dirty Hack zwar ein Rahmen erzeugt,
der "legt" sich aber nur um das "Bild".
Da diese html aber als Tabelle aufgebaut ist, wäre es schön,
wenn der Tabellenrahmen um das Objekt (also das Bild) entsehen würde.

Also irgendwie
Code:
<CENTER>
    <a href="https://winfuture.de/" target="_blank">
    <img src="preview_02.png"
    width="150" height="100%"
    </a>
    </CENTER>

von <CENTER> zu </CENTER>

das wird aber mit diesem "Hack" nicht gehen.
Der ist wohl nur für "Bild-Dateien".
 
Danke!

Ich habe die Datei noch einmal "gebaut"!!
Und,
ich habe den Hoverefeckt eingebaut. Sogar leicht transparent.

Überhaupt finde ich, dass mir die zweite Version meiner Startseite viel besser gelungen ist.

Ich finde es jetzt etwas übersichtlicher.

Danke noch einmal an alle Beteiligten für ihre Tips und Hilfen.

Code:
<style>

body {
  background-image: url("Rights.jpg");
} 

td {
	padding: 0.2em 0.5em;
	border-radius: 0.1em;
}

tbody td:hover {
	background-color: rgb(210, 210, 210);
	background-color: rgba(210, 210, 210,0.2);
}

th {
	font-family: sans-serif;
  text-align: left;
}

;
;table,
;th,
;td {
;	border: 1px solid white;
;	border-collapse: separate;
;}
;

</style>
.
.
.
<CENTER>
  <table>  
    <thead>
			<tr>
				<th>    <img src="favicons_01.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.de</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</font></th>
			</tr>
    </thead>

    <tbody>
			<tr>
				<td>
          <aside id="one"> <a href="https://www.heise.de/" target="_blank">  <img src="preview_01a.png" width="150" height="100%"> </a> </aside>
        </td>
        <th>    <img src="head.png" width="10" height="30"> </th>   
		
.
.
.
 
Oben