Hallo Ihr,
ich hoffe Ihr könnt mir helfen, ich bin gerade dabei ein neues layout für meine Homepage zu erstellen und diesmal möchte ich kein layout haben, bei dem der inhalt in einer art i-frame dargestellt wird, sondern das der div block mit dem Inhalt mit wächst. Wisst ihr was ich meine? Ich hab in I-net gelesen das man die höhe einfach nicht angeben soll, nur mein problem ist, wenn ich das so mache funktioniert es zwar mit dem Internet Explorer aber nicht bei Firefox.
Vielleicht wisst Ihr ja was ich da machen kann.
Vielen Dank schon mal im Vorraus.
lg Coe
Div Block wächst mit Inhalt??
-
-
Die Höhe eines Div passt sich seinem Inhalt an.
Um zu beurteilen, weshalb das bei dir im FF nicht klappt, bräuchte man einen Link zu deiner Seite.
Ich vermute aber, dass bei dir der Hintergrund im FF nicht vollständig angezeigt wird. Das tritt dann auf, wenn du ein Element gefloatet hast und vergessenn hast zu clearen: http://www.ohne-css.gehts-gar.net/0042.php
Falls das nicht hilft: bitte einen Link zur Seite. -
vielen dank für den link, aber der hat mir hier nicht wirklich weiter geholfen.
vielleicht könnt ihr mir ja helfen wenn ich euch den html code poste?
wenn ich den code so verwende, funktioniert es im Internet explorer so wie es sein soll. aber im firefox wächst jetzt zwar der div block mit dem inhalt, aber die hintergrundfarbe nicht. ich hab jetzt echt schon alles ausprobiert, aber ich komme nicht drauf warum es nicht funktioniert.
würde mich freuen wenn mir jemand helfen kann.
lg Coe
ach ja der HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Golden Retriever Rüde Bandit</title>
<style type="text/css">
body {
background: #7d6d5e;
}html,body { height:100%; margin:0; padding:0; text-align:center; }
div#center {background-color:#5a5148; width:800px; margin: 0 auto 0;}img { border: none; }
A:active {border: none; TEXT-DECORATION: none}
A:link {border: none; TEXT-DECORATION: none}
A:visited {border: none; TEXT-DECORATION: none}#navi {
margin-top: 0px;
height: 20px;
width: 800px;
}#header {
height: 201px;
width: 800px;
}#content {
margin-top: 5px;
min-height: 100%;
height: 100%;
width: 795px;
background: #5a5148;
}body {
scrollbar-face-color: #5a5148;
scrollbar-shadow-color: #5a5148;
scrollbar-highlight-color: #6c6258;
scrollbar-3dlight-color: #6c6258;
scrollbar-darkshadow-color: #6c6258;
scrollbar-track-color: #6c6258;
scrollbar-arrow-color: #6c6258;
}
-->
</style>
</head><body style="color: rgb(0, 0, 0); background-color: rgb(125, 109, 94);" alink="#000000" link="#000000" vlink="#000000">
<div id="center">
<div id="navi"><img src="Image/Unbenannt-1_01.jpg">
<a href="?path=index"><img src="Image/Unbenannt-1_02.jpg">
</a><a href="?path=neues"><img src="Image/Unbenannt-1_03.jpg">
</a><a href="?path=webmiss"><img src="Image/Unbenannt-1_04.jpg">
</a><a href="?path=bandit"><img src="Image/Unbenannt-1_05.jpg">
</a><a href="?path=tagebuch"><img src="Image/Unbenannt-1_06.jpg">
</a><a href="?path=galerie"><img src="Image/Unbenannt-1_07.jpg">
</a><a href="?path=freunde"><img src="Image/Unbenannt-1_08.jpg">
</a><a href="?path=ofangelhearts"><img src="Image/Unbenannt-1_09.jpg">
</a><a href="?path=goldi"><img src="Image/Unbenannt-1_10.jpg">
</a><a href="?path=sonstiges"><img src="Image/Unbenannt-1_11.jpg">
</a><a href="?path=gb"><img src="Image/Unbenannt-1_12.jpg">
</a><a href="?path=kontakt"><img src="Image/Unbenannt-1_13.jpg">
</a><a href="?path=links"><img src="Image/Unbenannt-1_14.jpg">
</a><img style="border: 0px solid ;" alt="" src="Image/Unbenannt-1_15.jpg"></div><div id="header"><img alt="" src="Image/header.jpg"></div>
<div id="content"><?php include 'content.php'; ?></div></div>
</div>
</body>
</html> -
Lass bei #content den height-Wert (100%) weg.
-
hab ich auch schon probiert dann sieht das so aus.
hier der link
http://www.unser-bandit.de/layneu.php?path=neues
muss allerdings mit firefox geöffnet werden, weil bei internet explorer funktioniert es -
bin ichs nur oder ist da nicht ein <div id="content"><?php include 'content.php'; ?></div></div> zu viel?
/P.S. schau ma in den http://validator.w3.org/ , dein file das du includest hat noch mal ein doctype usw. das sollte nicht sein.
-
schau dir mal den Quelltext deiner Seite an mit rechtklick -> Quelltext anzeigen. Du öffnest ständig dubiose divs, deren Sinn sich mir nicht erschließt und schließt sie dann doppelt wieder.
-
Grevas
hey das mit dem </div> zu viel das hab ich auch gerade bemerkt, aber daran liegt es nicht. und mit dem doctype das hab ich auch alles entfernt aber es funktioniert trotzdem nicht. Weiß echt nicht woran das liegt.
NyctalusNoctula
du meinst das mit <div id="header" usw.... ??
das sind verschiedene div blöcke da ich navigation, header, inhalt usw einzeln in div blöcke packe...
lg Coe -
So hab jetzt ma dein code den du hier gepostest hast mal korrigiert und getestet - so läufts. Nur die Farbangaben veränderst du in deinem Content irgendwo noch mal, so sind sie eindeutig ganz anders.
</div> und höhen angaben entfernt - tada content div wächst mit... Nur was bringts, wenn der irgendwo durch ein fehler in der content.php wieder geschlossen wird? *g*
das hier geht.
HTML
Alles anzeigen<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>Golden Retriever Rüde Bandit</title> <style type="text/css"> body { background: #7d6d5e; } html,body { height:100%; margin:0; padding:0; text-align:center; } div#center {background-color:#5a5148; width:800px; margin: 0 auto 0;} img { border: none; } A:active {border: none; TEXT-DECORATION: none} A:link {border: none; TEXT-DECORATION: none} A:visited {border: none; TEXT-DECORATION: none} #navi { margin-top: 0px; height: 20px; width: 800px; } #header { height: 201px; width: 800px; } #content { margin-top: 5px; width: 795px; background: #5a5148; } body { scrollbar-face-color: #5a5148; scrollbar-shadow-color: #5a5148; scrollbar-highlight-color: #6c6258; scrollbar-3dlight-color: #6c6258; scrollbar-darkshadow-color: #6c6258; scrollbar-track-color: #6c6258; scrollbar-arrow-color: #6c6258; } --> </style> </head> <body style="color: rgb(0, 0, 0); background-color: rgb(125, 109, 94);" alink="#000000" link="#000000" vlink="#000000"> <div id="center"> <div id="navi"><img src="Image/Unbenannt-1_01.jpg"> <a href="?path=index"><img src="Image/Unbenannt-1_02.jpg"> </a><a href="?path=neues"><img src="Image/Unbenannt-1_03.jpg"> </a><a href="?path=webmiss"><img src="Image/Unbenannt-1_04.jpg"> </a><a href="?path=bandit"><img src="Image/Unbenannt-1_05.jpg"> </a><a href="?path=tagebuch"><img src="Image/Unbenannt-1_06.jpg"> </a><a href="?path=galerie"><img src="Image/Unbenannt-1_07.jpg"> </a><a href="?path=freunde"><img src="Image/Unbenannt-1_08.jpg"> </a><a href="?path=ofangelhearts"><img src="Image/Unbenannt-1_09.jpg"> </a><a href="?path=goldi"><img src="Image/Unbenannt-1_10.jpg"> </a><a href="?path=sonstiges"><img src="Image/Unbenannt-1_11.jpg"> </a><a href="?path=gb"><img src="Image/Unbenannt-1_12.jpg"> </a><a href="?path=kontakt"><img src="Image/Unbenannt-1_13.jpg"> </a><a href="?path=links"><img src="Image/Unbenannt-1_14.jpg"> </a><img style="border: 0px solid ;" alt="" src="Image/Unbenannt-1_15.jpg"> </div> <div id="header"><img alt="" src="Image/header.jpg"></div> </div> </div> </body> </html>
und das hier kannst jetzt mit deinen content füllen, viel spaß dabei x)
HTML
Alles anzeigen<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>Golden Retriever Rüde Bandit</title> <style type="text/css"> body { background: #7d6d5e; } html,body { height:100%; margin:0; padding:0; text-align:center; } div#center {background-color:#5a5148; width:800px; margin: 0 auto 0;} img { border: none; } A:active {border: none; TEXT-DECORATION: none} A:link {border: none; TEXT-DECORATION: none} A:visited {border: none; TEXT-DECORATION: none} #navi { margin-top: 0px; height: 20px; width: 800px; } #header { height: 201px; width: 800px; } #content { margin-top: 5px; width: 795px; background: #5a5148; text-align: center; } body { scrollbar-face-color: #5a5148; scrollbar-shadow-color: #5a5148; scrollbar-highlight-color: #6c6258; scrollbar-3dlight-color: #6c6258; scrollbar-darkshadow-color: #6c6258; scrollbar-track-color: #6c6258; scrollbar-arrow-color: #6c6258; } .content-headline { width: 500px; text-align: center; background-color: #cbc2bd; padding: 10px 0; border-style: double; border-color: #f00; } .content-header { width: 500px; font-size: larger; text-align: center; padding: 10px 0; } .content-text { width: 500px; font-size: normal; } .content-div { width: 500px; margin: auto auto; text-align: center; } --> </style> </head> <body style="color: rgb(0, 0, 0); background-color: rgb(125, 109, 94);" alink="#000000" link="#000000" vlink="#000000"> <div id="center"> <div id="navi"><img src="Image/Unbenannt-1_01.jpg"> <a href="?path=index"><img src="Image/Unbenannt-1_02.jpg"> </a><a href="?path=neues"><img src="Image/Unbenannt-1_03.jpg"> </a><a href="?path=webmiss"><img src="Image/Unbenannt-1_04.jpg"> </a><a href="?path=bandit"><img src="Image/Unbenannt-1_05.jpg"> </a><a href="?path=tagebuch"><img src="Image/Unbenannt-1_06.jpg"> </a><a href="?path=galerie"><img src="Image/Unbenannt-1_07.jpg"> </a><a href="?path=freunde"><img src="Image/Unbenannt-1_08.jpg"> </a><a href="?path=ofangelhearts"><img src="Image/Unbenannt-1_09.jpg"> </a><a href="?path=goldi"><img src="Image/Unbenannt-1_10.jpg"> </a><a href="?path=sonstiges"><img src="Image/Unbenannt-1_11.jpg"> </a><a href="?path=gb"><img src="Image/Unbenannt-1_12.jpg"> </a><a href="?path=kontakt"><img src="Image/Unbenannt-1_13.jpg"> </a><a href="?path=links"><img src="Image/Unbenannt-1_14.jpg"> </a><img style="border: 0px solid ;" alt="" src="Image/Unbenannt-1_15.jpg"> </div> <div id="header"><img alt="" src="Image/header.jpg"></div> <!-- content --> <div id="content"> <!-- das hier kannst so oft verwenden wie dus brauchst. --> <div class="content-div"> <div class="content-headline">11. September 2009</div> <div class="content-header">Überschriftstext</div> <div class="content-text">Hallo erstmal und so weiter.</div> </div> </div> </div> </body> </html>
Farbanpassungen usw. kannst ja noch machen. Aber vom prinzip her ist das was du haben willst - nur ohne diese mistigen Tabellen *g*