Hilfe bei CSS

    Hallo,


    ich teste mich gerade mal ein wenig in CSS aus, deswegen ist die Frage schätze ich mal auch einfach zu beantworten. :)




    Auf dem Bild ist "Home" rot markiert das ganz soll die Navigation werden, das blaue soll später mal der Text werden ich möchte die Navigation aber vor dem Text haben sprich das kleine Lücke entsteht sondern das "Home" an den gelben Platz rutscht und die Lücke somit weg fällt. Mein CSS Code sieht z.Z. so aus.

    Spoiler anzeigen

    Code
    body{	background-color: #424242;}#header{	color: #E6E6E6;	margin-top: 1em;	margin-right: 0em;	margin-left: 2em;	margin-bottom: 1em;}.navi{	color: E8E8E8;	margin-top: 1em;	margin-right: 16em;	margin-left: 0em;	margin-bottom: 0em;}.text{	color: #E6E6E6;	margin-top: 2em;	margin-right: 16em;	margin-left: 16em;}

    Spoiler anzeigen

    Und mein HTML-Code so.
    Spoiler anzeigen

    HTML
    <html>	<head>		<title>ThePixel5D - NET</title>		<link rel="stylesheet" type="text/css" href="style/style.css" />	</head>	<body>			<h1 id="header">ThePixel5D</h1>			<div class="navi">				<p>HOME</p>			</div>			<div class="text">				<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>			</div>	</body></html>

    Spoiler anzeigen

    Ich hoffe ihr könnt mir die Frage beantworten.


    EDIT1: Text
    EDIT2: Code angepasst

    Einmal editiert, zuletzt von ThePixel5D ()

    CSS
    .text{	color: #E6E6E6;	margin-top: 2em;	margin-right: 16em;	margin-left: 16em;float:right;}


    Ggf. muss nach .text noch ein Div (oder beliebiges anderes Blockelement) mit der eigenschaft clear:both.

    Moderator der Bereiche: Coding, Vorstellungsrunde und Handelsecke. Über Verwarnungen, falls du zu den Wenigen gehörst, die eine Verwarnung von mir erhalten haben, kannst du jederzeit mit mir reden, sofern der Umgangston stimmt.


    expect us. / unkompetent. Das neue dynamisch. / easy-stripping.net - coming soon! / "9§. the entire website bestands out of english." / Vollprofi in allem, wo gibt und noch mehr; kann auch OOP.
    Kleine Coding-Frage? Schau doch in #dev im IRC vorbei, wir können dir sicher helfen.


    Ich bin für Aufträge im Bereich der Webentwicklung (z.B. User Control Panel) zu haben. Kontaktiere mich diesbezüglich einfach in einer privaten Nachricht mit deinen, möglichst konkreten, Vorstellungen.


    lesen.denken.posten. - [22:54:14] <Goldkiller2> früher gabs immer so coole user da stand in der signatur "lesen.denken.posten."


    Mafia 2 Multiplayer (m2mp.de) - Eine kostenlose Modifikation für Mafia 2, die es, ähnlich wie SAMP, erlaubt über das Internet oder LAN mit bis zu 1000 anderen Spielern zu spielen.

    CSS

    Spoiler anzeigen

    Code
    .text{	color: #E6E6E6;	margin-top: 2em;	margin-right: 16em;	margin-left: 16em;	float: right;}.clean{	clear: both;}

    Spoiler anzeigen

    HTML
    Spoiler anzeigen

    Code
    <body>			<h1 id="header">ThePixel5D</h1>			<div class="navi">				<p>HOME</p>			</div>			<div class="text">				<p>Text</p>			</div>			<div class="clean">			</div>	</body>

    Spoiler anzeigen


    Es ist immer noch nicht richtig die Lücke bleibt und "Home" steht nicht vor dem Text, sorry wenn ich mich doof anstelle aber ich bin totaler Anfänger in Sachen CSS.