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

HTML Boxen

P

PraktikumAvatarec

Neues Mitglied
Hey ,ich würde gerne mal nach einer Gesamt Html&Css Vorlage Fragen welche ungefähr die Boxen so ausrichtet wie auf dem Angehangenen Bild, die Farben spielen erstmal keine Rolle. Ich würde gerne mal eine abgespeichterte Vorlage haben an die ich mich richten kann.
Vielen Dank!
MfG Ava
html.jpg
 
Sempervivum schrieb:
Hier haben wir gerade etwas ganz ähnliches entwickelt:

Margin Padding Boxen (Nav + Content)

Hay. Hab ein paar anliegen bezüglich margin. Mein Problem ist das dass die Abstände zwischen den "Buttons" meiner NAV nicht gleichmäßig sind und ich finde den Fehler nicht. Home Info Teilnehmer...
www.tutorials.de www.tutorials.de
Zum Vergrößern anklicken....
Hey ^^
Danke für deine so schnelle Antwort jedoch muss ich ehrlich gesagt sagen dass ich nich ganz durchblicke.
Ich brauche keinen Inhalt in den Boxen sondern einfach nur die "sichtbaren" boxen dass man sieht dass sie vorhanden sind .
Ich weiss nicht ob das ganz verständlich ist aber ich suche eigentlich nur nach einer Vorlage die Boxen erstellt und die so ausrichtet wie auf dem oben gezeigten Bild.
Sorry für die unklarheit ,ich habe heute erst nach einer langen Zeit wieder angefangen mit HTMl
MfG Ava
 
Das ist einfach, wird dir nur bei der Erstellung von Webseiten kaum weiterhelfen. Das Layout von Webseiten ist immer vom endgültigen Inhalt abhängig. Also zunächst den HTML-Quelltext nach den korrekten HTML-Regeln erstellen und dann das Layout erstellen.

Ein Beispiel für deinen Wunsch:

Code: 
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Layout ohne Inhalt</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      body {
         margin: 0rem 0rem 0rem 0rem;
         display: flex;
         flex-wrap: wrap;
      }
      div:nth-child(1) {
         background-color: green;
         width: 100%;
         height: 25vh;
      }
      div:nth-child(2) {
         background-color: yellow;
         width: 50%;
         height: 25vh;
      }
      div:nth-child(3) {
         background-color: red;
         width: 50%;
         height: 25vh;
      }
      div:nth-child(4) {
         background-color: blue;
         width: 100%;
         height: 50vh;
      }
   </style>
</head>
<body>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
</body>
</html>
 
MrMurphy schrieb:
Das ist einfach, wird dir nur bei der Erstellung von Webseiten kaum weiterhelfen. Das Layout von Webseiten ist immer vom endgültigen Inhalt abhängig. Also zunächst den HTML-Quelltext nach den korrekten HTML-Regeln erstellen und dann das Layout erstellen.

Ein Beispiel für deinen Wunsch:

Code: 
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Layout ohne Inhalt</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      body {
         margin: 0rem 0rem 0rem 0rem;
         display: flex;
         flex-wrap: wrap;
      }
      div:nth-child(1) {
         background-color: green;
         width: 100%;
         height: 25vh;
      }
      div:nth-child(2) {
         background-color: yellow;
         width: 50%;
         height: 25vh;
      }
      div:nth-child(3) {
         background-color: red;
         width: 50%;
         height: 25vh;
      }
      div:nth-child(4) {
         background-color: blue;
         width: 100%;
         height: 50vh;
      }
   </style>
</head>
<body>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
</body>
</html>
Zum Vergrößern anklicken....
Hey , Vielen Dank!
Ich weiss das es mir beim gererellen Webistes erstellen keienesweges helfen wird.
Trotzdem Danke!
MfG Ava
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben