Zum Inhalt springen

Der Text erscheint unter dem DIV


Truble

Empfohlene Beiträge

Hallo also ich habe das folgendens Problem. Ich möchte dass meine seite mit den DIV elementen so aufgebaut wird:

attachment.php?attachmentid=1496&stc=1&d=1295650005

Also dass der eine div navi_l1 über dem Banner DIV ist.

Das habe ich ja auch hin bekommen nur wenn ich in dem div was rein schreiben

möchte erscheint der Text immer unter dem dem DIV und nicht in ihm.

Weiß da wer einen Rat?


body{

background-color: #666666;

	font-family:Arial, Helvetica, sans-serif;

	font-size:12px;

	text-decoration:none;

	color:#000000;

}


#main{

	height:auto;

	width:1024px;

	margin:0px auto;

}



#banner_main{

	height:389px;

	width:1024px;

	top:0px;

	left:0px;

	float:left;

	background:#F3C;

}


#sozial{

	height:38px;

	width:1024px;

	top:0px;

	left:0px;

	float:left;

	background:#060;

}


#banner{

	height:351px;

	width:1024px;

	top:38px;

	left:0px;

	float:left;

	background:#690;

}


#navi_l1{

	height:269px;

	width:156px;

	top:129px;

	left:690px;

	background:#000;

	position:relative;

	z-index:2;

	background:#600;

}



#content_main{

	height:auto;

	width:1024px;

	top:0px;

	left:0px;

	float:left;

	background:#F99;

}


#content{

	height:auto;

	width:690px;

	top:0px;

	left:0px;

	float:left;

	background:#6C3;

}


#navi_l2{

	height:123px;

	width:156px;

	top:0px;

	left:690px;

	background:#000;

	position:relative;

	background:#CFF;

}


#footer_l1{

	height:6px;

	width:1024px;

	top:0px;

	left:0px;

	float:left;

	text-align:center;

	background:#03F;

}


#footer_l2{

	height:20px;;

	width:1024px;

	top:0px;

	left:0px;

	float:left;

	text-align:center;

	background:#96F;

}

und der HTML:
<!doctype html>

<html>

<head>

	<title>Test</title>

	<link href="css/main_test.css" rel="stylesheet" type="text/css" />

</head>

<body>


<div id="main">


    <div id="banner_main">

        <div id="sozial"></div>


		<div id="banner"></div> 

        <div id="navi_l1">wiese hier?</div>     

    </div>   

    <div id="content_main">

        <div id="content">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 inviduno 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, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur

        </div>

        <div id="navi_l2">wie steht der da</div>

    </div>

        <div id="footer_l1"></div>

   		<div id="footer_l2"></div>   

</div>


</body>

</html>

Link zu diesem Kommentar
Auf anderen Seiten teilen

"#navi_l1" ist relativ positioniert, d.h. es verbleibt im Textfluss. Durch die vielen überflüssigen floats gestaltet sich die Sache in Deinem Beispiel dabei leider sehr unübersichtlich. Um das div aus dem Textfluss heraus zu nehmen, müsstest Du es absolut positionieren. Ansonsten kann ich nur dazu raten, alle sinnlosen CSS-Angaben erst einmal zu streichen: "top" und "left" ergeben nur zusammen mit "position" einen Sinn und mit überflüssigen floats macht Du Dir die Sache nur selbst schwer.

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...