PC <div> positioniert sich falsch.

Dieses Thema im Forum "Offtopic" wurde erstellt von Angel, 8. Oktober 2014.

  1. Angel
    Offline

    Angel Moderator Redakteur

    Registriert seit:
    2. März 2012
    Beiträge:
    1.442
    Ort:
    Niedersachsen
    Minecraft:
    BeatingAngel
    Hey Community,
    da ich in letzter Zeit ein winziges bisschen HTML und CSS gelernt habe und auch weiterhin üben möchte, kam mir heute der Einfall ich schreibe eine kleine HP zum Üben.

    Nun habe ich aber ein Problem, ich habe zwar eine Sidebar und einen "Home" Bereich, der noch nicht verlinkt ist, allerdings will mein Header nicht dahin wo ich es möchte, nämlich nach rechts oben, neben den Home Button, welcher in der linken oberen Ecke ist. >.> Hier erstmal der Body Tag mit CSS Script
    HTML:
    1.  
    2.     <div id="Home" align="center">
    3.         <h1>Home</h1>
    4.     </div>
    5.     <div id="Header">
    6.         <h1>Überschrift</h1>
    7.     </div>
    8.     </table>
    9.     <div id="Sidebar" align="center">
    10.         <a class="menu" href="http://www.google.de">Platzhalter</a>
    11.         <a class="menu" href="http://www.google.de/">Platzhalter</a>
    12.         <a class="menu" href="http://www.google.de">Platzhalter</a>
    13.         <a class="menu" href="http://www.google.de">Platzhalter</a>
    14.     </div>
    15.     <div id="Header2">
    16.         <p>Dieser Header wurde noch nicht positioniert.</p>
    17.     </div>
    18. </body>
    19.  
    Hier das CSS Script:

    Code (Text):
    1.  
    2. #Header
    3. {
    4.     background-color: #47B2FF;
    5.     height: 63px;
    6.     width: 1043px;
    7.     font-family: Times;
    8.     color: White;
    9.     text-align: center;
    10.     float: right;
    11. }
    12.  
    13. #Header2
    14. {
    15.     background-color: #404040;
    16.     height: 70px;
    17.     width: 991px;
    18.     color: White;
    19.     float: right;
    20. }
    21.  
    22. #Home
    23. {
    24.     background-color: #404040;
    25.     height: 133px;
    26.     width: 204px;
    27.     color: White;
    28.     overflow: visible;
    29. }
    30.  
    31. #Sidebar
    32. {
    33.     background-color: #47B2FF;
    34.     height: 1000px;
    35.     width: 199px;
    36.     font-size: 18pt;
    37.     padding-left: 5px;
    38.     color: #404040;
    39.     font-family: Arial;
    40.     margin-top: auto;
    41.     padding-top: 10px;
    42. }
    43.  
    44. a.menu
    45. {
    46.     display: block;
    47.     margin-bottom:5px;
    48.     text-align:center;
    49.     width:199px;
    50.     text-decoration:none;
    51. }
    52.  
    53. a.menu:hover
    54. {
    55.     color:White;
    56.     background-color:#427CA5;
    57. }
    58.  
    59. a.menu
    60. {
    61.     color: #404040;
    62.     text-decoration: none;
    63. }
    64.  
    65. a.menu:visited
    66. {
    67.     text-decoration: none;
    68. }
    69.  

    Der Header2 wurde noch nicht richtig positioniert und häng irgendwo unten rum. Mein Problem derzeit ist eigentlich der Header, welcher eigentlich ganz oben neben dem Portal sein sollte, zumindest weiß ich nicht wie ich ihn da hin kriege...Derzeit hängt er oben an der Sidebar, welche direkt unter dem Portal hängt.

    (Zwischen Header und Sidebar ist extra 1 px Platz, damit ich einen kleinen Überblick darüber habe, ob es überhaupt passt.)

    Würde mich über Hilfe freuen!
     
    #1
  2. MiCrJonas
    Offline

    MiCrJonas

    Registriert seit:
    29. Oktober 2012
    Beiträge:
    1.069
    Bei der Klasse "Home" fehlt: "float: left". Außerdem musst du den Div-Container für den 2. Header im Quelltext unter den Home-Container setzen.
    Code (Text):
    1.  
    2.     <div id="Home">
    3.         <h1>Home</h1>
    4.     </div>
    5.     <div id="Header2">
    6.         <p>Dieser Header wurde noch nicht positioniert.</p>
    7.     </div>
    8.  
    Bei der Weite der Elemente musst du dann noch etwas rumprobieren. Du solltest aber %-Angaben, statt px benutzen.
     
    #2
    Angel gefällt das.
  3. Angel
    Offline

    Angel Moderator Redakteur

    Registriert seit:
    2. März 2012
    Beiträge:
    1.442
    Ort:
    Niedersachsen
    Minecraft:
    BeatingAngel
    Hat geklappt! Super, danke!
    Und ebenfalls danke für den Hinweis mit den Prozentangaben :D!
     
    #3
  4. Spamversender
    Offline

    Spamversender

    Registriert seit:
    9. März 2014
    Beiträge:
    118
    DIV ist in HTML5 nicht mehr Standard. Für Header sollte HEADER verwendet werden, für alles was bisher DIV war ist SECTION empfohlen (ka wieso ist eben neuer Standard - dauert aber noch ewig bis die browser das nicht mehr unterstützen).Allg. wurde für jeden möglichen Anwendungsbereich ein neuer Containert definiert. Für Menüs sollte man z.B. NAV verwenden. Und für ein Menü empfehle ich die A's in eine UL bzw. OL zu packen, damit du dann bessere Funktionen zum positionieren hast.
     
    #4