layout dem inhalt nach anpassen funktioniert nicht

cssnoob · 3 April 2009

hallo leute,
ich bin grad dabei ein layout zu erstellen. so wie auf dem bild soll es werden.

der inhalt soll im "main" stehen, falls der inhalt aber sehr lang ist, soll sich "content" automatisch anpassen. das soll dann so aussehen

der inhalt soll über "main" und "content" gehen. ich hoffe ihr vesteht wie ich es meine. was ist denn an meinem code falsch, dass es das div mit dem inhalt immer größer macht als das bild? dann hab ich noch das problem, das es im ie wieder ganz anders aussieht, als im firefox. könnt ihr mir helfen?? hier mein code

HTML:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body>
<div align="center">
  <div class="head"></div>
    <div class="mainBoarder">
  
          <div class="menu" align="left">    </div>
          <div class="content" ></div>
    </div>
    <div class="line"></div>
    <div class="foot" >    </div>
</div>
</body>
</html>

Code:

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

}

DIV.mainBoarder
{
    width: 1000px;
    height: 545px;
    background-image: url(images/layout2/menu.jpg);
    background-repeat: no-repeat;
}

DIV.menu{
    width: 200px;
    height: 545px;
    float: left;
    border: 1px red solid;
}

DIV.content{
    width: 770px; 
    height: auto;
    border: 1px yellow solid; 
    float: left;

}

DIV.line{
    background-image: url(images/layout2/main.jpg);
    height: 50px;
    width: 1000px;
    border: 1px green solid;
}


DIV.foot{
    width: 1000px;
    height: 80px;
    background-image: url("http://www.html.de/images/layout2/foot.jpg");
    
}

prm · 3 April 2009

Lass generell die Höhenangaben weg.
Die Höhenanpassung von menu und content kannst du über Faux Columns regeln.

Die veralteten align-Angaben solltest du nicht mehr verwenden, sondern alle Formatierungen per CSS festlegen.
Wie die horizontale Zentrierung funktioniert ist hier erklärt.

gib deinen seiten auch noch einen qualifizierten Doctype, damit auch im IE das CSS-Boxmodell funktioniert: Boxmodell und Internet Explorer

threadi · 3 April 2009

Kann man das irgendwo sehen? Wie ist der Doctype?

neuroleptika · 3 April 2009

Ist vielleicht Off-Topic.
Aber der IE ab Vers.6 stellt das Boxmodell auch mit unbekannten Doctype richtig da.
Z.b:

Code:

<!DOCTYPE quatsch>

Der IE würde damit nicht in den Quirks-Modus fallen.

Deshalb gibt es im IE6 auch kein Boxmodellproblem mit html5:

Code:

<!DOCTYPE html>

Er kennt diesen Doctype einfach nicht.

Hier ist allerdings überhaupt keiner vorhanden. Der IE rendert im Quirks-Modus.
Für den IE5 / 5.5 (win) spielt das keine Rolle. Er ist quasi der Quirks-Modus in Natura.

cssnoob · 4 April 2009

ich danke euch schon mal für eure hilfe, ein bisschen hat es mir auch weiter geholfen. vorher hatte ich noch gar keinen doctype festgelegt. hab es nochmal neu gemacht, hab aber immernoch ein problem.
hier erstmal der code

HTML:

<!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>
    </div>
    

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


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

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;   
}

so... es soll so sein, dass wenn inhalt das rote div geschrieben wird, das blaue div von der höhe her so bleibt und das grüne div sich automatisch dem inhalt nach vom roten div anpassen soll. also der inhalt soll dann über das grüne div drüber gehen. jetzt ist es noch so, dass das blaue div sich dem inhalt nach anpasst. wie realisiere ich das? bei welchem div muss ich noch was bearbeiten und was genau? danke schon mal für eure hilfe, ist echt wichtig.

neuroleptika · 4 April 2009

Deine Box läuft über.
Entferne das height aus DIV.mainBoarder und füge ein clearendes Element ein.
z.B:

Code:

...
.clearer {
clear: left;
}
...
 <div class="mainBoarder">
 <div class="menu" align="left">
 </div>
 <div class="content" >
</div>
[COLOR="Red"][B]<div class="clearer"></div>[/B][/COLOR]
 </div>
 <div class="line">
</div>
...

Bedenke, daß wir deine background-images nicht sehen können.
Ein online-Beispiel würde helfen.

cssnoob · 4 April 2009

neuroleptika schrieb:
Deine Box läuft über.
Entferne das height aus DIV.mainBoarder und füge ein clearendes Element ein.

danke für den tip, aber wenn du mal meinen beitrag vor dir anschaust, siehst du das ich ein neues modell gebaut hab und somit keinen mainBoarder mehr hab. könntest du mir bei meinem neuen modell weiter helfen? das hab ich auf die beiträge von den anderen usern zuvor angepasst. online-beispiel hab ich noch keins, sorry.

cssnoob · 4 April 2009

kann mir denn keiner helfen oder ist in dem forum nicht so viel los ?? :-(

_Thor_ · 4 April 2009

Ohne Onlinebeispiel wohl nur schwer.

cssnoob · 4 April 2009

ein online-beispiel sagt doch auch nicht mehr als dieses bild.

das orange ist ein teil, der 1px groß ist und immer weiter gehen soll, wenn der inhalt aus dem roten über das rote hinaus geht.

_Thor_ · 4 April 2009

cssnoob schrieb:
das orange ist ein teil, der 1px groß ist und immer weiter gehen soll, wenn der inhalt aus dem roten über das rote hinaus geht.

Das wird nicht funktionieren, da es nicht vorgesehen ist, dass ein nachfolgendes Element auf den Inhalt seines Vorgängers reagiert, wenn dieses zu klein ist.

cssnoob · 4 April 2009

aber bei vielen webseiten ist es doch so, dass das menü links eine gewisse größe hat und rechts der inhalt der seite länger ist als das menü, ohne dass das menü so groß sein muss wie der inhalt.

also so

[img=http://img155.imageshack.us/img155/4103/unbenanntzjs.th.jpg]

wie kann ich das denn sonst realisieren?? hab ich die divs falsch angeordnet? könnt ihr mir nicht genau sagen wie ich das machen kann? das rote menü soll immer so groß sein und wenn der inhalt rechts länger ist als das menü, dann soll unter dem menü der gleiche hintergrund sein, wie der hintergrund vom inhalt-div.

_Thor_ · 4 April 2009

Na das ist ja was ganz anderes, als deine ersten beiden Bilder.

Das ist relativ einfach zu machen.

Du nimmst ein <div>, in welches du dein Menü und deinen Inhalt schreibst. Dem <div> gibst du eine Hintergrundfarbe, dem Menü und dem Content auch (wenn du willst). Dann sollte es so sein, wie du möchtest.

PHP:

<div id="wrapper">
  <ul id="navigation">
    <li>Item</li>
     <li>Item</li>
     <li>Item</li>
     <li>Item</li>
     <li>Item</li>
   </ul>
  <p id="content">
    Text
  </p>
</div>

Das ganze natürlich noch per CSS formatieren, aber an HTML sollte das reichen.

cssnoob · 4 April 2009

ihr versteht mich glaub immernoch nicht ganz, ich hoffe jetzt wird es deutlicher. das ist mein layout. ich weißt nicht genau wie ich dieses bild in einzelne hintergründe aufteilen soll, damit rechts das inhalt-hintergrundbild der größe vom inhalt nach angepasst wird, ohne dass das menü-hindergrundbild sich wiederholt, deswegen wollte ich darunter noch ein einzelnes 1px hohes bild machen, was unter dem menü und unter dem inhalt ist, welches sich dann der höhe nach anpasst vom inhalt.

neuroleptika · 4 April 2009

Das ist ja schon wieder was anderes.
Zeige mal komplett was du vorhast.

Bernhard · 5 April 2009

Wenn ich das richtig verstehe, dann drückt er sich viel zu kompliziert aus.

@cssnoob,

Das Grundgerüst von Thor passt schon. Du gibst dem wrapper ein Hintergrundbild
oder eine Hintergrundfarbe und der navigation ein anderes Hintergrundbild - fertig.

Gruß
Bernhard

cssnoob · 5 April 2009

sorry, ich kann das schlecht erklären. hab es bist jetzt so realisiert. funktioniert auch soweit ganz gut, nur das mir noch ein css-style fehlt.

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:

<!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??

cssnoob · 5 April 2009

es funktioniert jetzt alles. hab nur noch ein kleines problem... wie krieg ich den body jetzt zentriert??

hier mein aktueller code.

HTML:

<!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>

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;
}

threadi · 5 April 2009

Bei #center "margin: 0px auto;" ergänzen.

cssnoob · 5 April 2009

threadi schrieb:
Bei #center "margin: 0px auto;" ergänzen.

hab ich versucht, aber macht es leider nicht :-(

layout dem inhalt nach anpassen funktioniert nicht

Neues Mitglied

Aktives Mitglied

Moderator

Aktives Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Moderator

Neues Mitglied