Erste Hompage: Header

Bindl · 8 Dezember 2015

Hi zusammen,

ich habe mich mal mit HTML und CSS beschäftigt und möchte nun meine erste eigene Homepage erstellen.

Zuerst habe ich den head-Bereich gemacht und jetzt bin ich dabei den header zu schreiben.

Nun habe ich einige Fragen:

Ich möchte einen Art Box erstellen mit rotem Hintergund. Ein Logo (ein Bild) soll unten links und Links zu Social Media Seiten (Twitter, Facebook & Instagram) sollen oben rechts nebeneinander stehen.

Hier noch der Text der html-Seite:
<div id="header">
<a class="links.soc" href="Adresse">Twitter</a>
<a class="links.soc" href="Adresse">Facebook</a>
<a class="links.soc" href="Adresse">Instagram</a>

<img id="logo" src="________" />
</div>

Jetzt der CSS Teil:
#header {
background-color:red;
width:___;
height:___;
border:none; (Muss ich das angeben, wenn ich eh keinen Rand haben möchte?)
margin-top:___;
padding:15px;
}

#links.soc {
float;top-right; (Hiermit möchte ich erreichen das die Links sich recht oben orrientieren. Stimmt das?)
border:none;
text-align:center; (Ist der Text dann vertikal als auch horizontal zentriert ?)
width:___;
height:___;
margin:___; (Ist die Angabe unnötig, wegen text-align:center, width & height ?)
padding:___; (Ist die Angabe unnötig, wegen #header (padding Wert) ?)
}

#logo {
align:___; (Wie richtet man ein Bild aus? Es soll kein Hintergrund sein, sondern nur ein kleines Logo unten links)
width:___;
height:___;
}
margin und padding Angaben dürften ja hier unnötig sein, da padding ja bereits bei #header geregelt ist und margin bei einem Bild ja kaum Sinn macht.

Ich hoffe mir kann jemand weiterhelfen. Für die Hilfe bedanke ich mich schonmal im voraus.
Bitte korrigiert mich ganz genau, nur so lerne ich das Webdesign richtig.

Bindl

MrMurphy · 8 Dezember 2015

Hallo

Bitte korrigiert mich ganz genau,

Schwierig. Dazu müssen von dir genauere Informationen kommen. Deine Problembeschreibung und dein Beispielquelltext sind recht allgemein.

Außerdem haben wir keine Infos zum Logo, speziell dessen Größe.

ich habe mich mal mit HTML und CSS beschäftigt

Das Grundproblem ist, dass du offensichtlich veraltete Informationen bekommen hast.

Grundsätzlich sollte der header möglichst wenig Höhe einnehmen. Die Höhe sollte auch vom Inhalt bestimmt werden.

Die einzelnen Elemente im header werden dann mit dem Flexbox-Modell angeordnet.

border:none; (Muss ich das angeben, wenn ich eh keinen Rand haben möchte?)

Nein.

float;top-right; (Hiermit möchte ich erreichen das die Links sich recht oben orrientieren. Stimmt das?)

Nein. top-right gibt es nicht. Wenn du float verwenden möchtest solltest du zunächst die Grundlagen dafür lernen. Vor allem auch, wie du float mit clear oder einem clearfix wieder beenden kannst.

Aktueller ist aber wie schon geschrieben flex.

text-align:center; (Ist der Text dann vertikal als auch horizontal zentriert ?)

Nein.

Wie richtet man ein Bild aus?

Das sollte automatisch unten links sitzen. Ansonsten mit flex oder float.

margin und padding Angaben dürften ja hier unnötig sein

Das kann erst am konkreten Beispiel beurteilt werden.

nur so lerne ich das Webdesign richtig.

Es würde den Umfang des Forums sprengen, die alle Grundlagen zu erklären. Wir können eher zu konkreten Problemen konkrete Hilfe leisten. Das viele Informationen im Internet veraltet sind solltest du zu einem aktuellen Buch über HTML5 und CSS3 greifen. Zum Beispiel "Flexible Boxes" von Peter Müller.

Ich habe mal eine Beispielseite mit den wichtigsten Angaben erstellt:

HTML:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Header Layout</title>
   <style>
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-family: Sans-Serif;
         font-size: 120%;
      }
      body {
         margin: 0;
      }
      figure {
         padding: 0;
         margin: 0;
      }
      img {
         max-width: 100%;
         min-width: 0;
      }
      header {
         background-color: hsla(15,72%,70%,1); /*Hintergrundfarbe header*/
         margin: 0;
         padding: 1rem;
         display: flex;
      }
      header>:nth-child(1) {
         margin-top: 4rem; /*Höhe des header anpassen*/
      }
      header :nth-child(2) {
         margin-left: auto;
      }
      header :nth-child(1n+2) {
         max-width: 3rem; /*Größe der Social-Media-Icons anpassen*/
      }
      header :nth-child(1n+3) {
         margin-left: 1rem;
      }
   }
   </style>
</head>
<body>
   <header>
      <figure>
         <img src="https://de.wikipedia.org/static/images/project-logos/dewiki.png" alt="Logo">
      </figure>
      <figure>
         <img src="https://danielrehn.files.wordpress.com/2011/11/iconmonstr-twitter-3-icon.png" alt="Twitter">
      </figure>
      <figure>
         <img src="https://danielrehn.files.wordpress.com/2011/11/iconmonstr-facebook-3-icon.png" alt="Facebook">
      </figure>
      <figure>
         <img src="https://danielrehn.files.wordpress.com/2011/11/iconmonstr-instagram-icon.png" alt="Instagram">
      </figure>
   </header>
</body>
</html>

Gruss

MrMurphy

tanne · 31 Januar 2016

Das ist beeindruckend! Ich beneide Personen, die programmieren können. Ich habe meine Webseite mit Hilfe von Vorlagen erstellt. http://www.templatemonster.com/de/ Ich bin mit dem Ergebnis zufrieden.

nookie · 1 Februar 2016

tanne schrieb:
Das ist beeindruckend! Ich beneide Personen, die programmieren können. Ich habe meine Webseite mit Hilfe von Vorlagen erstellt. http://www.templatemonster.com/de/ Ich bin mit dem Ergebnis zufrieden.

HTML und CSS hat ja auch nichts mit programmieren zu tun. ;)

Erste Hompage: Header

Bindl

Neues Mitglied

MrMurphy

Senior HTML'ler

tanne

Neues Mitglied

nookie

I did it all for the nookie

Neueste Beiträge