Bitte um ein Grundgerüst
- Ersteller Orac
- Erstellt am
Ist in diesem Fall etwas für die hiesige Jobbörse ;)
NetAktiv
Senior HTML'ler
Oder mit ein wenig Eigeninitiative liefert eine Suche eine Vorlage für eine Homepage, die man nach ein wenig Einlernen selbst anpassen kann. Auch viele fertige (auch kostenlose) Produkte wie Wordpress oder CMS Systeme bieten zahllose Templates. Wenn man überhaupt nichts tun will, dann hilft nur eine adäquate Bezahlung 
Danke für die Antworten erstmal.
Das ganze mit Wordpres CMS und so wieter brauch ich garnicht, geschweige den eine Datenbank.
Das soll nur meine eigene Startseite im Firefox werden.
Die Bilder mach ich mit ein Bildbearbeitungsprogram und die Suche ist Google.
Na mal sehen wie ich das dann machen werde.
Das ganze mit Wordpres CMS und so wieter brauch ich garnicht, geschweige den eine Datenbank.
Das soll nur meine eigene Startseite im Firefox werden.
Die Bilder mach ich mit ein Bildbearbeitungsprogram und die Suche ist Google.
Na mal sehen wie ich das dann machen werde.
NetAktiv
Senior HTML'ler
Also das einfachste ist für den Anfang (aber das ist völlig verpönt), man nimmt eine HTML-Tabelle mit x Zeilen und y spalten und in jeder Zelle ist ein Link. Ein Link besteht aus dem Tag <a href="xxx"> für Anchor und endet mit </a> und dazwischen kommt das, was den Link beschreiben soll (Text oder Bild). das xxx im href zeigt auf die URL der Zielseite, also beispielsweise http://google.de und ein Bild wird dargestellt durch <img src="aaa.jpg" alt="aaa">.
Ich denke, mit ganz wenig Suchen kannst es nun erst mal einen Entwurf machen und im nächsten Schritt ersetzen wir die Tabelle durch eine andere Konstruktion :)
Beginn erst mal einfach mit ein paar Links mit Bildern, ohne darauf zu achten, wo die angeordnet werden (also ohne Tabelle), oder erst nur Bilder auch noch ohne Link.
Ich denke, mit ganz wenig Suchen kannst es nun erst mal einen Entwurf machen und im nächsten Schritt ersetzen wir die Tabelle durch eine andere Konstruktion :)
Beginn erst mal einfach mit ein paar Links mit Bildern, ohne darauf zu achten, wo die angeordnet werden (also ohne Tabelle), oder erst nur Bilder auch noch ohne Link.
Zuletzt bearbeitet:
Warum nicht stattdessen eine CSS-Tabelle? Die ist weitaus weniger verpönt :)
https://jsfiddle.net/spicelab/vLbunozk/
Das Demo erhebt selbstverständlich keinen Anspruch auf Vollkommenheit bzgl. der Dimensionierungen - ist halt nur ein Grundgerüst
Zuletzt bearbeitet:
NetAktiv
Senior HTML'ler
Ich wollte kein Beispiel liefern, sondern Orac zum selber Machen animieren und das mit den CSS Tabellen zu erklären, fand ich erst mal zu komplex. Aber wenn sie nun noch die Links in deine CSS Tabelle baut ist sie auch semantisch korrekt
Hallo,
ich habe mal angefang mit folgendem Inhalt der CSS und HTML Datei bzw ich habe den Queltext von
Spicelab verlinkt hat.
in HTML Datei
in CSS Datei
Ergebnis
siehe Screenshot
wenn ich jetzt die suche oben drücber haben möchte, das geht mit <Div> form und input oder ?
ich habe mal angefang mit folgendem Inhalt der CSS und HTML Datei bzw ich habe den Queltext von
Spicelab verlinkt hat.
in HTML Datei
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Test</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="xxx/favicon.ico">
<ul>
<li>
<div>box 1</div>
<div>box 2</div>
<div>box 3</div>
<div>box 4</div>
<div>box 5</div>
</li>
<li>
<div>box 6</div>
<div>box 7</div>
<div>box 8</div>
<div>box 9</div>
<div>box 10</div>
</li>
<li>
<div>box 11</div>
<div>box 12</div>
<div>box 13</div>
<div>box 14</div>
<div>box 15</div>
</li>
</ul>in CSS Datei
Code:
* {
margin:0;
padding:0
}
ul {
display:table;
border-spacing:10px;
table-layout:fixed;
width:1125px;
margin:auto
}
ul li {
display:table-row
}
ul li div {
display:table-cell;
width:225px;
height:150px;
padding:4px;
border:2px dashed lightgrey;
border-radius:4px;
box-sizing:border-box;
}Ergebnis
siehe Screenshot
wenn ich jetzt die suche oben drücber haben möchte, das geht mit <Div> form und input oder ?
Anhänge
NetAktiv
Senior HTML'ler
<input type="xxx"> sind Eingabefelder, type="search" speziell für Suchen,
Definition siehe http://www.w3schools.com/html/html_form_input_types.asp
Test unter http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_search
Definition siehe http://www.w3schools.com/html/html_form_input_types.asp
Test unter http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_search
