Div Block wächst mit Inhalt??

Coe

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

sejuma

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.

Coe

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>

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

</div>

</body>
</html>

sejuma

Lass bei #content den height-Wert (100%) weg.

Coe

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

Grevas

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.

NyctalusNoctula

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.

Coe

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

Grevas

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

<!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&uuml;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>

Alles anzeigen

und das hier kannst jetzt mit deinen content füllen, viel spaß dabei x)

HTML

<!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&uuml;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>

Alles anzeigen

Farbanpassungen usw. kannst ja noch machen. Aber vom prinzip her ist das was du haben willst - nur ohne diese mistigen Tabellen *g*

Tags