• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bitte um ein Grundgerüst

Orac

Mitglied
Hallo,
da ich leider nicht so bewandert bin mit HTML, CSS und Co wollte ich mal nachfragen ob mir jemand ein Grundgerüst "div etc" vorbereiten könnte für so ein Aufbau wie im Screenshot zu sehen ist ?

Das ganze ist für den Firefox gedacht.


rechtherzlichen Dank schonmal.
 

Anhänge

  • Unbenannt-1.jpg
    Unbenannt-1.jpg
    119,3 KB · Aufrufe: 18
Werbung:
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 :D
 
Werbung:
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.
 
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.
 
Zuletzt bearbeitet:
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
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 :cool:
 
Zuletzt bearbeitet:
Werbung:
oder einfach so viele divs wie benötigt erstellen, ihnen eine breite zu geben und diese dann mit flexbox nebeneinander zu klatschen, eine tabelle ist meiner Meinung nach sogar schwerer
 
Warum nicht stattdessen eine CSS-Tabelle? Die ist weitaus weniger verpönt :)
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 :D
 
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
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

  • Unbenannt-2.jpg
    Unbenannt-2.jpg
    46,9 KB · Aufrufe: 5
Werbung:
Zurück
Oben