layout - inhalt länger als menü ??

cssnoobi · #1 (**permalink**) 04.04.2009, 20:19

ich hab ein layout, das so aussehen soll

ich weiß nur nicht ganz wie ich es realisieren kann. ich ab das menü und das hintergrundbild als ein hintergrundbild genommen und darunter wollte ich noch ein hintergrundbild machen, was dann der hintergrund nach dem menü ist und noch zum inhalt gehört. wenn der inhalt rechts über das menü hinaus geht, sollte das hintergrundbild nach dem menü und unter dem inhalt (1px groß) sich automatisch dem inhalt nach anpassen. jedoch wurde mir gesagt, dass das nicht möglich ist, da ein übergeordnetes element nicht auf eines darunter zugreifen kann.

wie kann ich also das layout realisieren?? helft mir bitte, ist echt dringend. am besten mit code.

Code:

body{
    margin: 0;
    padding: 0;
    width:100%;
    height:100%;
}


DIV.head
{
    width: 1000px;
    height: 100px;
    border: 1px black solid;
    margin: auto;
    
}


#center
{
    width: 1000px;
    border: 1px solid blue;
    margin: 30px auto;
    margin-top: 0px;
    margin-bottom: 0px;
} 

#inhalt
{
    width: 500px;
    border: 1px red solid;
    margin-left: 450px;
}

DIV.line{
    height: 50px;
    width: 1000px;
    border: 1px green solid;
    margin: auto;
}

DIV.foot{
    width: 1000px;
    height: 80px;
    border: 1px black solid;
    margin: auto;   
}

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> 

<html> 
<head> 
	<link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<body>

<div class="head">head</div>

<div id="center">

	<div id="inhalt">
	
	
	<br/>bla<br><br/>bla<br><br/>bla<br><br/>bla<br><br/>bla<br><br/>bla<br><br/>bla<br><br/>bla<br><br/>bla<br>r/>bla<br><br/>bla<br><br/>
	</div>

	
</div> 
<div class="line" ></div>


<div class="foot" > foot </div> 
</body>
</html>

oder gehe ich falsch an die sache heran?

biliskner · #2 (**permalink**) 04.04.2009, 21:20

Hiho ...

also du willst quasie das der untere, ich nenns mal bogen, immer unten ist, also unter dem text egal wie lang er ist, richtig ?

Wenn ja würde ich das ganze zerflücken. Da menü als solches ist ja fest, also kein problem. dann nimmst du denn oberen bogen in einen container.
Den Inhalt, der ja größer oder kleiner sein kann, muss nur von den linien eingekastet werden. Also machst du dir damit einen container wo die linien wegen mir als hintergrund bild sind und du sie dann mit "background-repeat:repeat-y" nach unten wiederholen lässt, oder du machst das mit "border: 1px solid". Dann hast du deinen Inhalt fertig.
Und zu guter letzt willst du ja unten deinen bogen auch noch haben, also machst du dafür noch einen container und setzt diesen unter den inhalt, somit ist er immer darunter, also unabhängig von der textlänge.

Hoffe das hilft dir ... und ist verständlich

Habe leider grade nicht die zeit dir das als code zu schreiben

mfg

cssnoobi · #3 (**permalink**) 05.04.2009, 13:06

ich danke dir schon mal. hab es bist jetzt so realisiert.

das rote sind einzelne divs mit einem anderen hintergrund. der code dazu ist bis jetzt so

Code:

body{
	margin: 0;
	padding: 0;
	width:100%;
	height:100%;
}

#center
{
	width: 1000px;
	border: 1px solid red;
	margin: 30px auto;
	margin-top: 0px;
	min-height: 100px;
	display: inline-block;
	
} 

DIV.head
{
	width: 990px;
	height: 100px;
	border: 1px black solid;
		
}

DIV.menuHead
{
	width: 200px;
	border: 1px black solid;
	float: left;
}

DIV.mainHead
{
	width: 790px;
	border: 1px black solid;
	float: left;

}

DIV.menuContent
{
	width: 200px;
	border: 1px black solid;
	float: left;

}

DIV.mainContent
{
	width: 790px;
	border: 1px black solid;
	float: left;
	height: 300px;
}

DIV.menuFoot
{
	width: 200px;
	border: 1px black solid;
	height: 50px;
	float: left;
}

DIV.mainFoot
{
	height: 100px;
	width: 990px;
	border: 1px black solid;
	float: left;
}

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> 

<html> 
<head> 
	<link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<body
<div id="center" >


	<div class="head">head</div>
	<div class="menuHead">menü head></div>
	<div class="mainHead">content head</div>
	<div class="menuContent">menü content</div>
	<div class="mainContent">main content</div>
	<div class="menuFoot">menü foot</div>
	
	<div class="mainFoot">main foot</div>

</div>

</body>
</html>

jedoch hab ich noch ein problem. das div "menuFoot" muss noch ein bisschen höher, sodass es unten auf der selbenen ebene ist wie der "mainContent". da fehlt noch irgend ein css-style. könnt ihr mir da helfen??

zimtstern* · #4 (**permalink**) 05.04.2009, 14:27

@biliskner,

hat er schon gut erklärt, wenn spalten unabhängig vom inhalt bis nach unten reichen sollen, werden hintergundbilder benötigt, die genauso eingefärbt werden, wie die navi. es hat ebenfalls eine größe und eine breite, die positionierung z.b.:

Code:

body { background: url(hg_zweispalter2.gif) repeat-y 0 0: }

cssnoobi · #5 (**permalink**) 05.04.2009, 14:37

wie zentriere ich jetzt meinen gesamten body? also nicht den inhalt, sondern das meine seite in der mitte vom browserinhalt ist und nicht links angepappt. das ging vorhin schon mal, aber bei meinem code jetzt nicht mehr.

Code:

body{
	margin: 0;
	padding: 0;
	width:100%;
	height:100%;
}

#center
{
	width: 1000px;

	margin-top: 0px;
	min-height: 100px;
	display: inline-block;
	background-image: url("images/layout2/menu.jpg");
	
} 

DIV.head
{
	width: 1000px;
	height: 200px;
	background-image: url("images/layout2/head.jpg");
		
}

DIV.menuHead
{
	width: 185px;
	height: 60px;
	background-image: url("images/layout2/menuHead.jpg");
	float: left;
}

DIV.mainHead
{
	width: 815px;
	height: 60px;
	background-image: url("images/layout2/mainHead.jpg");
	float: left;

}

DIV.menuContent
{
	width: 185px;
	background-image: url("images/layout2/menuContent.jpg");
	float: left;
	min-height: 300px;

}

DIV.mainContent
{
	width: 815px;
	background-image: url("images/layout2/mainContent.jpg");
	float: left;

}

DIV.menuFoot
{
	width: 185px;
	height: 60px;
	background-image: url("images/layout2/menuFoot.jpg");
	float: left;
	position: absolute;
	margin-top: 300px;
}

DIV.mainFoot
{
	height: 80px;
	width: 1000px;
	background-image: url("images/layout2/foot.jpg");
	float: left;
}

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> 

<html> 
<head> 
	<link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<body>
<div id="center" >
	

	<div class="head"></div>
	<div class="menuHead">menü head</div>
	<div class="mainHead">content head</div>
	<div class="menuContent">menü content</div>
	<div class="mainContent">
		main content<br>
	
	</div>
	<div class="menuFoot">menü foot</div>

	<div class="mainFoot">main foot</div>

</div>

</body>
</html>

zimtstern* · #6 (**permalink**) 05.04.2009, 15:07

ich habe es so gelöst:

HTML-Code:

body { margin:0; padding:0; }
#div { 
   border:3px solid #888;
   width: 1000px;
   max-height: 840px;
   margin-left: auto; /* Dadurch wird es zentriert */
   margin-right: auto;

cssnoobi · #7 (**permalink**) 05.04.2009, 19:16

wo soll ich denn das div drum machen? ich hab das zeug was du in body geschrieben hast, bei mir auch in den body gemacht und dein zeug unter #div bei mir in #center. aber leider wird trotzdem nichts zentriert.

zimtstern* · #8 (**permalink**) 05.04.2009, 21:36

hey,

bin grad selber am rumbasteln, ich schick dir mal meine code..der jetzt endlich funzt und sogar valide ist

PHP-Code:


			
<style type="text/css">

   

p { 

   font: 100,01% Verdana, sans-serif;

   color: black;

   background-color: transparent 

}

.links {

   float: left;

   padding-right: 20 px;

}

#div { 

   border:3px solid #888;

   width: 1000px;

   max-height: 840px;

   margin-left: auto; /* Dadurch wird es zentriert */

   margin-right: auto;

}

#header {

   background-image: url(headerrealia.jpg);

   width: 1000px;

   height: 200px;

   margin-top: o;

   padding-top: 0;

   position: fixed;

  

}

#navigation {

   background-image: url(navi1.gif);

   width: 1002px;

   height: 40px;

   margin-top: 200px;

   position: fixed; 

}

ul {

   font-family: sans-serif;

   list-style-type: none;

   display: inline;

   margin-left: 5px;

   margin-right: 20px;

   padding-left: 20px;

   padding-right: 20px;

}

li {

   display: inline;

   padding: 30px 40 px;

   border-left: 2px inset #000

}

#inhalt {

   background-image: url(hg.jpg); 

   background-attachment:fixed;

   width: 1000px;

   height: 600px;

   margin-top: 240px;

   overflow: scroll;

}

</style>

HTML-Code:

<body>
<div id="div">
  <div id="header">header</div>
  <div id="navigation">
  <ul>
   <li>Landkarte</li>
   <li>Termine</li>
   <li>Organisation</li>
   <li>Geschichte</li>
  </ul></div>
  <div id="inhalt">
   <img src="bilder/groeben.gif" alt="groeben" class="links" />
   <p> Im Ort existiert seit mindestens 200 Jahren eine Handdruckspritze der Feuerwehr.

Dieses Jubiläum nahmen einige B&uuml;rger des Ortes zum Anlass ein Fest zu organisieren.

Es fanden sich zusammen Helmut Eisentraut, Uwe Eisentraut, Gerd Simon, Andreas Ebing,

Rene Schieritz, Volker Beyer, G&ouml;sta Foege.

Es wurde in vielen Sitzungen ein Programm erdacht und durch die vielen flei&szlig;igen H&auml;nde der

mitwirkenden umgesetzt.Im Ort existiert seit mindestens 200 Jahren eine Handdruckspritze der Feuerwehr.

Dieses Jubiläum nahmen einige B&uuml;rger des Ortes zum Anlass ein Fest zu organisieren.

Es fanden sich zusammen Helmut Eisentraut, Uwe Eisentraut, Gerd Simon, Andreas Ebing,

Rene Schieritz, Volker Beyer, G&ouml;sta Foege.

Es wurde in vielen Sitzungen ein Programm erdacht und durch die vielen flei&szlig;igen H&auml;nde der

mitwirkenden umgesetzt..</p>
</div>
</div>
</body>

Ja, im Opera ruckelt die seite nicht..aber im firefox..mhm..schicke dir hier mal n link zur baustelle:

Realia Groeben

cssnoobi · #9 (**permalink**) 06.04.2009, 21:39

hab es jetzt so umgesetzt, funktioniert im firefox auch super, nur im internet explorer zeigt es das div "menüFoot" unten rechts in der ecke an, obwohl es unter das "menüContent"-Div soll. kann mir jemand helfen???

Code:

body{
	margin:0px; 
	padding:0px;
}

#center
{
	width: 1000px;
	background-image: url("images/layout2/menu.jpg");
    max-height: 840px;
	margin: 0px auto;
	border: 1px black solid;
} 

DIV.head
{
	width: 1000px;
	height: 200px;
	background-image: url("images/layout2/head.jpg");
		
}

DIV.menuHead
{
	width: 185px;
	height: 60px;
	background-image: url("images/layout2/menuHead.jpg");
	float: left;
}

DIV.mainHead
{
	width: 815px;
	height: 60px;
	background-image: url("images/layout2/mainHead.jpg");
	float: left;

}

DIV.menuContent
{
	width: 185px;
	background-image: url("images/layout2/menuContent.jpg");
	float: left;
	min-height: 300px;

}

DIV.mainContent
{
	width: 815px;
	background-image: url("images/layout2/mainContent.jpg");
	float: left;

}


DIV.menuFoot
{
	width: 185px;
	height: 60px;
	background-image: url("images/layout2/menuFoot.jpg");
	float: left;
	position: absolute;
	margin-top: 300px;
}

DIV.mainFoot
{
	height: 80px;
	width: 1000px;
	background-image: url("images/layout2/foot.jpg");
	float: left;
}

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> 

<html> 
<head> 
	<link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<body>
<div id="center" >
	

	<div class="head"></div>
	<div class="menuHead">menü head</div>
	<div class="mainHead">content head</div>
	<div class="menuContent">menü content</div>
	<div class="mainContent">
		main content<br>
	
	</div>
	<div class="menuFoot">menü foot</div>

	<div class="mainFoot">main foot</div>

	
	
<div style="clear: both;"></div>
	
</div>



</body>
</html>

zimtstern* · #10 (**permalink**) 06.04.2009, 22:02

im IE gibt es diesbezüglich oft Probleme, vielleicht extra eine Deklaration:
align: center einfügen?

Hehe, das einfachste, was ich bis jetzt gesehen habe:

Für eine optimale Gestaltung:

USE FIREFOX

ich habe es im Opera getestet und dort funzt es--

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
sidebar fixieren?	florianhwm	CSS	1	29.05.2009 17:23
Template: Inhalt überragt Layout trotz clearings	unicorn	CSS	3	16.09.2008 03:55
XHTML1.1: Menü und Inhalt ohne frames, wie das?	DuKe2112	(X)HTML	11	06.08.2008 11:13
IE 7: Brauchen Blocklinks im Menü Layout?	heiko_rs	CSS	2	27.05.2006 16:42
Breite von DIVs	Daniel	CSS	8	23.06.2003 18:01