1. Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
    Information ausblenden

Frage Fehler im Code (Fb layout nach programmieren)

Dieses Thema im Forum "CSS" wurde erstellt von noyfb, 18 Dezember 2016.

  1. noyfb

    noyfb Neues Mitglied

    Registriert seit:
    18 Dezember 2016
    Beiträge:
    1
    Punkte für Erfolge:
    1
    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:
    Code (html5):
    1.    <title>Fb_head</title>
    2.    <link rel="stylesheet" type="text/css" href="Fb_head.css">
    3. </head>
    4.  
    5.    <div id="Webseite">
    6.  
    7.        <div id="header">
    8.            <div id="ausrichtungsRahmen">
    9.                <div id="f_sign">
    10.                    <h1> f </h1>
    11.                </div>
    12.      
    13.                <div id="suchFenster">
    14.                    <div id="eingabefenster">  
    15.                        <h1>suche nach...</h1>
    16.                    </div>  
    17.              
    18.                    <div id="searchSymbol">              
    19.                    </div>      
    20.                </div>
    21.          
    22.                <div id="profilbildfenster">
    23.                </div>
    24.          
    25.                <h1>Florian</h1>
    26.                <h1>Startseite</h1>
    27.          
    28.                <div id="friendSymbol">
    29.                </div>
    30.          
    31.                <div id="messageSymbol">
    32.                </div>
    33.          
    34.                <div id="woldSymbol">          
    35.                </div>
    36.              
    37.                <div id="fragezeichenSymbol">
    38.                </div>
    39.              
    40.                <div id="pfeilNachUntenSymbol">
    41.                </div>
    42.            </div>
    43.        </div>
    44.    </div>  
    45. </body>
    46. </html>
    CSS-Code:
    Code (css):
    1. body{
    2.    background-color:lightblue;
    3.    text-align:center;
    4. }
    5.  
    6. #webseite {
    7.    width:980px;
    8.    margin:0 auto;
    9. }
    10.  
    11. #header {
    12.    width:980px;
    13.    height:40px;
    14.    background:blue;
    15.    border-radius:5px;
    16.    -moz-border-radius:5px;
    17.    -webkit-border-radius:5px;
    18.    -o-border-radius:5px;
    19.  
    20. }
    21. #ausrichtungsRahmen {
    22.    width:980px;
    23.    height:30px;
    24.    background-color:red;
    25.    margin-top:5px;
    26. }
    27. #f_sign {
    28.    width:30px;
    29.    height:30px;
    30.    background-color:white;
    31.    float:left;
    32.    margin-top:5px;
    33.    margin-bottom:5px;
    34.    margin-left:5px;
    35. }
    36. #f_sign h1 {
    37.    color:blue;
    38.    float:right;
    39.    font-size:25px;
    40.    font-weight:bold;
    41.    font-family:Courier;
    42. }
    danke im Voraus
    Flo
     
    Zuletzt von einem Moderator bearbeitet: 19 Dezember 2016
    Werbung:

    Jetzt registrieren, damit diese Werbung verschwindet
  2. Spicelab

    Spicelab Mod | ZENmechanic Team Moderator

    Registriert seit:
    27 November 2015
    Beiträge:
    1.577
    Punkte für Erfolge:
    83
    <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.