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

Frage Fehler im Code (Fb layout nach programmieren)

noyfb

Neues Mitglied
Hey Leuts,
ich versuche mir HTML selbst bei zu bringen und habe mir vorgenommen zu Beginn das Layout von Facebook zu programmieren.
Bin gerade bei der obersten Leite (wo Startseite usw. drinne steht..).
Ich bin dabei das "f" links zu coden, aber die Position ist total falsch, nur wenn ich das "f" auf font-size:20px stelle passt es. Kann mir jemand verraten wo mein Fehler liegt?

Hier ist mein HTML-Code:
HTML:
<html>
<head>
   <title>Fb_head</title>
   <link rel="stylesheet" type="text/css" href="Fb_head.css">
</head>

<body>
   <div id="Webseite">
  
       <div id="header">
           <div id="ausrichtungsRahmen">
               <div id="f_sign">
                   <h1> f </h1>
               </div>
      
               <div id="suchFenster">
                   <div id="eingabefenster">  
                       <h1>suche nach...</h1>
                   </div>  
              
                   <div id="searchSymbol">              
                   </div>      
               </div>
          
               <div id="profilbildfenster">
               </div>
          
               <h1>Florian</h1>
               <h1>Startseite</h1>
          
               <div id="friendSymbol">
               </div>
          
               <div id="messageSymbol">
               </div>
          
               <div id="woldSymbol">          
               </div>
              
               <div id="fragezeichenSymbol">
               </div>
              
               <div id="pfeilNachUntenSymbol">
               </div>
           </div>
       </div>
   </div>  
</body>
</html>

CSS-Code:
CSS:
body{
   background-color:lightblue;
   text-align:center;
}

#webseite {
   width:980px;
   margin:0 auto;
}

#header {
   width:980px;
   height:40px;
   background:blue;
   border-radius:5px;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   -o-border-radius:5px;
  
}
#ausrichtungsRahmen {
   width:980px;
   height:30px;
   background-color:red;
   margin-top:5px;
}
#f_sign {
   width:30px;
   height:30px;
   background-color:white;
   float:left;
   margin-top:5px;
   margin-bottom:5px;
   margin-left:5px;
}
#f_sign h1 {
   color:blue;
   float:right;
   font-size:25px;
   font-weight:bold;
   font-family:Courier;
}

danke im Voraus
Flo
 
Zuletzt bearbeitet von einem Moderator:
Werbung:
Kann mir jemand verraten wo mein Fehler liegt?
<h1> bringt ohne jegliche CSS-Formatierung von Hause aus einen voreingestellten Abstand im Textfluss mit, den Du nicht mit margin:0 zurückgesetzt hast.

Desweiteren definierst Du, in Korrespondenz zur Höhe von #header, für #ausrichtungsrahmen eine Höhe von 30px und oberen Außenabstand mit 5px, um es im Header vertikal zu zentrieren. Diese beiden Regeln wiederholst Du aber auch für sein Kindelement #f_sign, was rechnerisch dann keinen Sinn mehr ergibt.

Für Block-Kinderelemente wie #ausrichtungsrahmen muß die Breitenangabe des Elternelements (width:980px) nicht wiederholt werden, da sie automatisch 100% des verfügbaren Viewports einnehmen.

Im übrigen, wenn Du Neueinsteiger in HTML und CSS bist, gewöhne Dir direkt eine zeitgemäße Arbeitsweise in punkto HTML-Auszeichnung, zB <header> anstatt <div id="header">, sowie CSS-Techniken an, wie sie aktuell in der Praxis zum Einsatz kommen: im vorliegenden Fall anstelle von float:left|right das Flexbox-Modell (display:flex). Hiermit lassen sich dann auch die flexiblen Elemente vertikal ausrichten, ohne auf margin-Rgeln zurückgreifen zu müssen.
Moderation: Thread von HTML nach CSS verschoben.
 
Zurück
Oben