• Es freut uns dass du in unser Minecraft Forum gefunden hast. Hier kannst du mit über 130.000 Minecraft Fans über Minecraft diskutieren, Fragen stellen und anderen helfen. In diesem Minecraft Forum kannst du auch nach Teammitgliedern, Administratoren, Moderatoren , Supporter oder Sponsoren suchen. Gerne kannst du im Offtopic Bereich unseres Minecraft Forums auch über nicht Minecraft spezifische Themen reden. Wir hoffen dir gefällt es in unserem Minecraft Forum!

<div> positioniert sich falsch.

Angel

Alle 354 Abonnenten von Xhadius
Ehem. Teammitglied
Mitglied seit
2 März 2012
Beiträge
1.455
Diamanten
50
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:
<body>
    <div id="Home" align="center">
        <h1>Home</h1>
    </div>
    <div id="Header">
        <h1>Überschrift</h1>
    </div>
    </table>
    <div id="Sidebar" align="center">
        <a class="menu" href="http://www.google.de">Platzhalter</a>
        <a class="menu" href="http://www.google.de/">Platzhalter</a>
        <a class="menu" href="http://www.google.de">Platzhalter</a>
        <a class="menu" href="http://www.google.de">Platzhalter</a>
    </div>
    <div id="Header2">
        <p>Dieser Header wurde noch nicht positioniert.</p>
    </div>
</body>
Hier das CSS Script:

Code:
#Header
{
    background-color: #47B2FF;
    height: 63px;
    width: 1043px;
    font-family: Times;
    color: White;
    text-align: center;
    float: right;
}

#Header2
{
    background-color: #404040;
    height: 70px;
    width: 991px;
    color: White;
    float: right;
}

#Home
{
    background-color: #404040;
    height: 133px;
    width: 204px;
    color: White;
    overflow: visible;
}

#Sidebar
{
    background-color: #47B2FF;
    height: 1000px;
    width: 199px;
    font-size: 18pt;
    padding-left: 5px;
    color: #404040;
    font-family: Arial;
    margin-top: auto;
    padding-top: 10px;
}

a.menu
{
    display: block;
    margin-bottom:5px;
    text-align:center;
    width:199px;
    text-decoration:none;
}

a.menu:hover
{
    color:White;
    background-color:#427CA5;
}

a.menu
{
    color: #404040;
    text-decoration: none;
}

a.menu:visited
{
    text-decoration: none;
}

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!
 
Zuletzt bearbeitet:

MiCrJonas

Threadripper
Mitglied seit
29 Oktober 2012
Beiträge
1.064
Diamanten
0
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:
    <div id="Home">
        <h1>Home</h1>
    </div>
    <div id="Header2">
        <p>Dieser Header wurde noch nicht positioniert.</p>
    </div>
Bei der Weite der Elemente musst du dann noch etwas rumprobieren. Du solltest aber %-Angaben, statt px benutzen.
 

Angel

Alle 354 Abonnenten von Xhadius
Ehem. Teammitglied
Mitglied seit
2 März 2012
Beiträge
1.455
Diamanten
50
Hat geklappt! Super, danke!
Und ebenfalls danke für den Hinweis mit den Prozentangaben :D!
 

Spamversender

Schafhirte
Mitglied seit
9 März 2014
Beiträge
121
Diamanten
0
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.
 
Oben