Antworten auf deine Fragen:
Neues Thema erstellen

Div "body" schließt nur eins von drei, per include Befehl, eingefügten divs ein!

Jimbim

Noch nicht viel geschrieben

Hi!

Ich hab n Problem. Ich will mir ein Layout erstellen, dass von oben nach unten wie folgt aufgebaut sein soll: Header, Menü, Inhalt.

In ein div "body" werden die anderen drei (Header, Menü, Inhalt) per include-Befehl nacheinander eingefügt.

Der Header ist eingefügt und es funktioniert auch, das div "body" passt sich dem Header an, alles wunderbar. Wenn ich jetzt allerdings die anderen zwei divs (Menü, Inhalt) einfüge, passt sich das div "body" nicht mehr an.

Wenn ich die float in den CSS-Dateien entferne, dann funktioniert des wieder. Des muss doch aber auch anders gehen, ich will dieses Layout nämlich später mit mehrspaltigen Inhalt benutzten, dann brauch ich den float Befehl in der CSS-Datei.

dass ist mein HTML-Code (nur der body):

Code:
<body>

	<div id="body">
    
    	<div class="ro_body"> 
  		
        	<div class="lo_body">
    
    			<div class="ru_body"> 
    
   					<div class="lu_body">

						<div class="inhalt_body">
    
							<?php include ("../HTML/inh_header.html"); ?>
                            <?php include ("../HTML/inh_menu.html"); ?>
                            <?php include ("../HTML/inh_main.html"); ?>
                            
                      </div>
                       
                   </div>
              
              </div>
              
        </div>
       
   </div>
	
</div>
		
</body>

und der CSS-Code des Headers:

Code:
#header 	{
				width: 100%;
				margin: auto;
				position: relative;
			}
			
.ro_header	{				
				background: url(../images/grafik/header_ro.png) top right no-repeat;
			}

.lo_header	{				
				background:  url(../images/grafik/header_lo.png) top left no-repeat;
			}

.ru_header	{				
				background:  url(../images/grafik/header_ru.png) bottom right no-repeat;
			}

.lu_header	{				
				background: url(../images/grafik/header_lu.png) bottom left no-repeat;
			}

.inhalt_header	{			
					margin: auto;
					padding: 0px 0px 0px 0px;
					text-align: center;
					height: 200px;
					background-position: center 30px;
					color: #FFCC00;
				}

vom Menü:

Code:
#menu		{
				margin: 0px 0px 0px 0px;
				padding: 0px 0px 0px 0px;
				width: 100%;
				heigth: 30px;
				background-color: #333399;
				position: relative;
			}

und vom Inhalt:

Code:
#main		{
				width: 100%;
				height: 600px;
				margin: 0px auto 0px auto;
				padding: 0px;
				background-color: #aa9900;
				float: left;
				clear: both;
			}
			
.mainbox_ro 	{
				background: url(../images/grafik/box_ro.png) top right no-repeat;	
			}

.mainbox_lo 	{
				background: url(../images/grafik/box_lo.png) top left no-repeat;	
			}

.mainbox_ru 	{
				background: url(../images/grafik/box_ru.png) bottom right no-repeat;
			}

.mainbox_lu 	{
				background: url(../images/grafik/box_lu.png) bottom left no-repeat;	
			}

.mainbox_inhalt {
					margin: 0;
					padding: 0px 20px 20px 25px;
					min-height: 500px;
					text-align: justify;
					color: #333300;
				}
			
.mainbox_header	{
					margin: 10px auto 10px auto;
					padding: 0px 10px 0px 10px;
					text-align: center;
					top: 10px;
				}

Ihr könnt euch die Seite auch direkt anschauen, dann seht ihr selbst was passiert:




Wäre super, wenn mir jemand helfen kann!
 

Herr_D

offline

AW: Div "body" schließt nur eins von drei, per include Befehl, eingefügten divs ein!

Was fü 'ne Suppe... noch mehr div gingen nicht oder?



...wenn's so nicht funzt nochmal von vorne anfangen ;)



du inkludest irgendwie alles in ein div? Hast du das mal als html probiert?

der code der includeten html wäre ja auch noch mal spannend... da ist irgendwo ein </div> zu früh... bei der Suppe kein Wunder...


Code:
<div id=außenrum">
        <div id="header"><?php include ("../HTML/inh_header.html"); ?>
        <?php include ("../HTML/inh_menu.html"); ?></div>
        <div id="inhalt><?php include ("../HTML/inh_main.html"); ?></div>
        <div id="footer"></div>
</div>



Ich persönlich würde auch kein ID body vergeben, body ist reserviert für's html (nicht vorgeschrieben, aber besser zu merken)





Nur mal so zum Nachdenken:


HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">
		<meta name="Author" content="T.S.">
		<meta name="Copyright" content="Unbekannt">
		<meta name="Keywords" content="Unbekannt">
		<meta name="Description" content="Unbekannt">
		<meta name="Language" content="Deutsch">
		<link rel="stylesheet" type="text/css" href="../CSS/body.css">
		<link rel="stylesheet" type="text/css" href="../CSS/font.css">
		<link rel="stylesheet" type="text/css" href="../CSS/header.css">
		<link rel="stylesheet" type="text/css" href="../CSS/menu.css">
		<link rel="stylesheet" type="text/css" href="../CSS/mainbox.css">
		<link rel="stylesheet" type="text/css" href="../CSS/box_links.css">
		<link rel="stylesheet" type="text/css" href="../CSS/lightbox.css">
		<link rel="stylesheet" type="text/css" href="../CSS/lightbox.css" media="screen">
		<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
		<script type="text/javascript" src="../JS/prototype.js"></script>
		<script type="text/javascript" src="../JS/scriptaculous.js?load=effects,builder"></script>
		<script type="text/javascript" src="../JS/lightbox.js"></script>
		<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
		<title>Startseite</title>
	</head>

	<body>
		<div id="body">
			<div class="ro_body">
				<div class="lo_body">
					<div class="ru_body">
						<div class="lu_body">
							<div class="inhalt_body">
								<div id="header">
									<div class="ro_header">
										<div class="lo_header">
											<div class="ru_header">
												<div class="lu_header">
													<div class="inhalt_header">
														Hallo Welt!</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
								<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
								<div id="menu">
									<ul id="MenuBar1" class="MenuBarHorizontal">
										<li><a class="MenuBarItemSubmenu" href="#">Element 1</a>
										<ul>
											<li><a href="#">Element 1.1</a>
											<li><a href="#">Element 1.2</a>
											<li><a href="#">Element 1.3</a>
										</ul>
										</li>
										<li><a href="#">Element 2</a>
										<li><a class="MenuBarItemSubmenu" href="#">Element 3</a>
										<ul>
											<li><a class="MenuBarItemSubmenu" href="#">Element 3.1</a>
											<ul>
												<li><a href="#">Element 3.1.1</a>
												<li><a href="#">Element 3.1.2</a>
											</ul>
											</li>
											<li><a href="#">Element 3.2</a>
											<li><a href="#">Element 3.3</a>
										</ul>
										</li>
										<li><a href="#">Element 4</a>
										<li><a href="#">Unbenan </a>
										<li><a href="#">Unbena</a>
										<li><a href="#">Unbenan</a>
										<li><a href="#">Unbena</a>
									</ul>
								</div>
								<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
								<div id="main">
									<div class="mainbox_ro">
										<div class="mainbox_lo">
											<div class="mainbox_ru">
												<div class="mainbox_lu">
													<div class="mainbox_header">
														Hallo, ich bin der Header der Mainbox!</div>
													<div class="mainbox_inhalt">
														Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox Hallo Welt, ich bin mainbox</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>

</html>



Fällt dir was auf?
 

Poki29

Ps-ler ;-)

AW: Div "body" schließt nur eins von drei, per include Befehl, eingefügten divs ein!

Sowas sieht man auch nicht alle Tage... Wieso machst du denn sowas?
Mein Tipp(schon allein um Arbeit und Chaos bei Updates vorzubeugen) -> neu coden
 

cebito

undefined

AW: Div "body" schließt nur eins von drei, per include Befehl, eingefügten divs ein!

Kann mich nur anschließen, wozu die ganzen Divs? Poste mal ein Bild, wie es denn letztendlich aussehen soll, dann kann man dir zeigen auf was du getrost verzichten kannst...
 

Jimbim

Noch nicht viel geschrieben

AW: Div "body" schließt nur eins von drei, per include Befehl, eingefügten divs ein!

Mit den ganzen divs, also denen, die am Anfang oder am Ende des Namens immer lo, ro, lu oder ru stehen haben, erreiche ich, dass sich die einzelnen Divs dynamisch anpassen.

Am besten ist dass hier zu sehen:

Ändert doch mal die Größe des Fensters. Die Seite bzw. die divs passen sich dementsprechend an.

Sinvoll?
 
Zuletzt bearbeitet:

Herr_D

offline

AW: Div "body" schließt nur eins von drei, per include Befehl, eingefügten divs ein!

Das mit dem Anpassen hält sich aber auch in Grenzen ;)


Dann hilft wirklich nur durchzählen ;) der div... ich muß zur Schule kann also nicht *pfeifft*
 

Jimbim

Noch nicht viel geschrieben

AW: Div "body" schließt nur eins von drei, per include Befehl, eingefügten divs ein!

Wie weit sich das Anpassen auswirkt, liegt natürlich daran, welche Werte ich in den CSS Dateien angegeben hab.

Aber zurück zu meinem Problem. Ich hab alles durchgezählt und es passt alles.

Meiner Meinung hab ich irgend ein Problem mit dem float-Befehl. Wenn ich den raus lass, ist zwar alles im div "body" drin, aber mein header des Inhaltes erscheint rechts neben meinem Menü und rutscht insgesamt um einige pixel nach oben. Da muss irgendwo der Fehler liegen, ich komm aber nicht drauf! :schmoll:
 

Jimbim

Noch nicht viel geschrieben

AW: Div "body" schließt nur eins von drei, per include Befehl, eingefügten divs ein!

Geht doch, Problem gelöst!

Ich musste nur einen Footer mit "clear: left;" einfügen und schon hats funktioniert. Zuerst hab ich aber Ordnung in den ganzen Salat gebracht. Ich denk, ihr habt schon recht, war doch alles a bissl unübersichtlich und fehleranfällig.

Danke für eure Bemühungen!
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.614
Beiträge
1.538.351
Mitglieder
67.525
Neuestes Mitglied
mgtaucher
Oben