Höhe des DIV's passt sich nicht an Contentlänge an

kingpomm

Well-known member
ID: 213865
L
29 April 2006
699
28
Hallo.

Ich brauche mal Eure Hilfe, bin hier schon am verzweifeln. Also ich habe eine Seite komplett mit DIV's umzusetzen. Da aber in den Hauptdiv noch diverse andere reinmüssen (Vorschaubilder mit DIV's á la Youtube), sollte der Hauptdiv dynamisch nach unten gehen.
Wenn ich jetzt dem Hauptdiv den Attribut "position: fixed;" zuweise, dann kann ich gar nicht mehr scrollen und alles sieht aus wie ein Bild. Wenn ich dem Hauptdiv die Höhenangabe "100%" gebe, dann ist er auch nur so hoch wie der Browser. Min-width geht auch nicht, glaube das wird ganz ignoriert.

https://www.imgwelt.de/uploads/Z8AS135XDYM.jpg

Das hellgraue ist der Hauptdiv und die kleineren Boxen sind die Vorschaubilder-Div's.

Code:
<div class="outbox">
<div class="header_text"><img src="img/head_text.jpg" alt="..." /></div>
<div class="header_banner"><img src="img/banner.jpg" alt="Beispielbanner" /></div>
<div class="navi_leiste">
<div class="navi_leiste_button_1">Neu</div>
<div class="navi_leiste_button_2">Meist gesehen</div>
<div class="navi_leiste_button_3">Best bewertet</div>
<div class="navi_leiste_button_4">Einloggen/Registrierung</div>
<div class="navi_leiste_search">Suche: <input class="search_head" type="text" size="27" /></div>
</div>
<div class="submenu_top">Hier ein Beispieltext mit G und gg und grog gg und so weiter... <a href="#">Link</a></div>
<!--start_left_navi-->
<div class="menu_left">
	<div class="menu_left_topic">Videos</div>
		<div class="menu_left_button">> neueste</div>
		<div class="menu_left_button">> am meisten gesehen</div>
		<div class="menu_left_button">> am besten bewertet</div>
		...
</div>
<div class="content_outbox">
<h1>Die neuesten Videos (Immer)</h1><h2>Heute, 18.09.2007</h2>
<div class="video_preview">d</div>
<div class="video_preview">d</div>
<div class="video_preview">d</div>
<div class="video_preview">d</div>

<div class="video_preview">d</div>
<div class="video_preview">d</div>
<div class="video_preview">d</div>
<div class="video_preview">d</div>

<div class="video_preview">d</div>
<div class="video_preview">d</div>
<div class="video_preview">d</div>
<div class="video_preview">d</div>

<div class="video_preview">d</div>
<div class="video_preview">d</div>
<div class="video_preview">d</div>
<div class="video_preview">d</div>


</div>
</div>

Code:
.outbox {
	min-width:800px;
	width:90%;
	position:absolute;
	top:46px;
	left:54px;
	background-color:#333333;
}

.menu_left_button {
 	width:167px;
 	padding:2px;
	background-color:#494949;
	margin-bottom:1px;
}

.content_outbox {
	border:0px;
	position:absolute;
	top:166px;
	left:220px;
	width:76%;
	height: 100%;
}

h1 {
	font-size:15px;
	font-weight:normal;
}

h2 {
	font-size:13px;
	font-weight:bold;
}

.video_preview {
	background-color:#3A3A3A;
	border: 1px solid #4B4B4B;
	width: 175px;
	height: 190px;
	float: left;
	margin-right: 15px;
	margin-bottom: 10px;
}

Glaube das sollte reichen.

Vielen Dank schonmal, ich hoffe Ihr werdet mir eine große Hilfe sein. =)


MfG
 
... sollte der Hauptdiv dynamisch nach unten gehen.
Dann würde ich die Höhe einfach weglassen. Dann sollte er sie dynamisch an die benötigte Höhe anpassen.

Oder möchtest du eine mindest-Höhe haben? Dann mache aus dem hellgrauen ne Tabelle. Da kannst du height ja setzen und wenns zu klein ist, dann macht er sie größer.
 
Wenn ich dem Hauptdiv die Höhenangabe "100%" gebe, dann ist er auch nur so hoch wie der Browser. Min-width geht auch nicht, glaube das wird ganz ignoriert.
Probiers mal mit min-height und nicht min-width :p
Für den IE6 musst du aber weiterhin height drin haben. Damit die anderen Browser das nicht sehen, musst du entweder mit conditional comments[1] eine separate CSS-Datei laden oder ein CSS-Hack[2] verwenden.

[1]
[2] https://centricle.com/ref/css/filters/
 
Probier mal die Class von Video dinger position: relative; zu machen... dann sollte der zu mindestens im float bleiben


*edit* Boah was machst du da???? programmier das mal neu das hat ja von vorne bis hinten keine struktur und sinn :D

kleiner tipp VERSCHACHTELN und vorallem so einen aufbau nachgehen...

HTML:
<div class="maindiv">
  <div class="navi"></div>
  <div class="content"></div>
  <div class="footer"></div>
</div>
 
Zuletzt bearbeitet:
Probier mal die Class von Video dinger position: relative; zu machen... dann sollte der zu mindestens im float bleiben


*edit* Boah was machst du da???? programmier das mal neu das hat ja von vorne bis hinten keine struktur und sinn :D

kleiner tipp VERSCHACHTELN und vorallem so einen aufbau nachgehen...

HTML:
<div class="maindiv">
  <div class="navi"></div>
  <div class="content"></div>
  <div class="footer"></div>
</div>

Joa das mit "position: relative;" hab ich gemacht, aber an diese Bereiche (Navi, Content, Footer) habe ich davor nicht gedacht, aber schonmal davor was davon gelesen. Bin in Div-Layouts eher noch Anfänger. --> siehe letztes Zitat...

Probiers mal mit min-height und nicht min-width :p
Für den IE6 musst du aber weiterhin height drin haben. Damit die anderen Browser das nicht sehen, musst du entweder mit conditional comments[1] eine separate CSS-Datei laden oder ein CSS-Hack[2] verwenden.

[1]
[2] https://centricle.com/ref/css/filters/

Das min-width ist schon richtig, soll auch dynamisch breit sein und das funktioniert auch.

Dann würde ich die Höhe einfach weglassen. Dann sollte er sie dynamisch an die benötigte Höhe anpassen.

Oder möchtest du eine mindest-Höhe haben? Dann mache aus dem hellgrauen ne Tabelle. Da kannst du height ja setzen und wenns zu klein ist, dann macht er sie größer.

Die Höhe einfach weglassen funktioniert auch nicht. An ne Tabelle hab ich auch schon gedacht, aber ich mach's nicht für mich und der "Kunde" will eine Umsetzung nur mit Div's.

Ihr könnt ja mal in Eurem Editor den Code aus meinem ersten Post eingeben und selbst probieren, dann habt Ihr vielleicht bessere Vorstellungen... nicht böse gemeint, falls es sich so anhört. :D


MfG
 
Wenn ich mal was anmerken darf, Du machst es Dir viel zu kompliziert mit Deinen Umsetzungen. Du sollst nicht mit div´s neue Dinge erfinden nutze vorhanden und style diese entsprechend mit den css *thema: ul / li für die navi*

Schau Dir mal meine Referenzen in den Umsetzungen in meiner Sig an oder direkt das Design von Redraft.de dort habe ich einige leichte und schwierige Umsetzungen drin.
 
Wenn ich mal was anmerken darf, Du machst es Dir viel zu kompliziert mit Deinen Umsetzungen. Du sollst nicht mit div´s neue Dinge erfinden nutze vorhanden und style diese entsprechend mit den css *thema: ul / li für die navi*

Schau Dir mal meine Referenzen in den Umsetzungen in meiner Sig an oder direkt das Design von Redraft.de dort habe ich einige leichte und schwierige Umsetzungen drin.

Ja hab ich mir schon gedacht das sowas kommt. :)

Hatte aber mal versucht ein Wordpress-Layout zu machen, da muss man ja standartmäßig <li>- und <ul>-Listen nehmen. Habe ich nicht hinbekommen. Entweder war da ein Punkt zu sehen oder das Element/der Button war zu weit rechts. Damit komme ich irgendwie gar nicht klar. Aber danke für den Tipp, werde ich mir später mal anschauen.
 
Hi,

versuch es mal mit "clear:both;". Du kannst auch einfach einen Zeilenumbruch das "clear:both" geben, am besten irgendwo am Ende.
 
Wegen dem Buttons zu weit rechts gib nen kleinen Trick bzw Hilfsmittel.
ul Elemente haben standartmässig einen padding oder margin weiß nimmer genau.

Jedenfalls schreib ich immer am Anfang der CSS so globale Sachen wie border: 0;

also

Code:
* {
   padding: 0;
   margin: 0;
}

img {
   border: 0;
}
 
Wegen dem Buttons zu weit rechts gib nen kleinen Trick bzw Hilfsmittel.
ul Elemente haben standartmässig einen padding oder margin weiß nimmer genau.

Jedenfalls schreib ich immer am Anfang der CSS so globale Sachen wie border: 0;

also

Code:
* {
   padding: 0;
   margin: 0;
}

img {
   border: 0;
}

Danke.

Hi,

versuch es mal mit "clear:both;". Du kannst auch einfach einen Zeilenumbruch das "clear:both" geben, am besten irgendwo am Ende.

Ne, klappt auch nicht, denn sind die Videothumbs nur untereinander und die Contentbox passt sich auch nich an...
 
Habs nun umsetzen lassen, hatte keine Zeit mehr rumzuprobieren. Hätte wohl von Anfang an ganz anders an die Sache rangehen müssen vom Aufbau her.