harte nuss: treemenu mit divs

mastermind · #1 (**permalink**) 27.03.2006, 11:46

hi@all,

seit kurzem beschäftige ich mich mit xhtml und css und jetzt möchte ich gerne ein treemenu (datei-explorer von window) programmieren.

soweit so gut, es funktioniert alles bis auf ein kleines problem!
wenn der baum breiter ist als das div wo es befindet, springt der text in die nächste zeile.

ist bei allen browser so!

ich kanns nicht genau beschreiben den fehler, aber schaut doch mal auf diese seite: www.foxxworxx.com/filemanager.

öffnet den baum (auf text klicken) : filemanager -> themes
jetzt seht ihr den fehler...

ich hoffe es kann mir geholfen werden!

mfg

mastermind

mazzo · #2 (**permalink**) 27.03.2006, 11:58

Mit overflow definiert man das anpassen der Inhalte an die Maße des Elternelements.

Mit "hidden" wäre der überstehende Bereich ausgeblendet, mit "scroll" auch, aber wenigstens noch zu erreichen.

mastermind · #3 (**permalink**) 27.03.2006, 12:15

hast du dir seite angeschaut??

also der text -> modern_blue soll in der gleichen zeile wie der ordner sein
laut code ist er es auch, mit div und float left...

es sollen ja die scrollblacken kommen wenn der inhalt grösser ist

cy

mazzo · #4 (**permalink**) 27.03.2006, 12:44

das Menu baut sich sehr langsam auf, oder? Ich hab grad mal rumgeklickt und ->filemanager->inc->js aufgeklappt.

hier der Quellcode dazu:

Code:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
	<title>filemanager</title>
	<meta http-equiv='Content-Script-Type' content='text/javascript' />
	<link href='themes/modern_blue/css.css' rel='stylesheet' type='text/css' />
	<script type='text/javascript' src='inc/js/xaja.js'></script>
	<script type='text/javascript' src='inc/js/js.js'></script>
</head>

<body>
	<div id='explorerMain'>
		<div id='explorerLeft'></div>
		<div id='explorerRight'> </div>
		<div class='clr'> </div>
	</div>
</body>
</html>

Was im #explorerLeft stattfindet kann ich niht sehen, "modern_blue" kann ich da somit auch nicht finden.

Die Eigeschaften von Overflow sind festgelegt wie oben beschrieben. Mit "auto" hast Du Scrollbalken nur wenn es Not tut, aber Texte brechen an Leerzeichen um, wenn der Container zu schmal wird. Das kannst Du mit "whitespace:nowrap" für den Text der jeweiligen Zeile verhindern.

mastermind · #5 (**permalink**) 27.03.2006, 14:03

also bei baut sich das menü schnell auf...

hier der screen:

im div #explorerLeft wird vie javascript das ein gefügt (ein menüpunkt code)

Code:

<div id="iconMore"><img... /><div ="iconFolder"><img... /><div id="txtDirname">modern_blue</div><div class="clr"> </div>
<div class='subCont' id='sub3'> </div>

warum kommt "modern_blue" in die nächste zeile??
[/code]

mazzo · #6 (**permalink**) 27.03.2006, 14:18

weil zwischen dem IMG und dem nachfolgenden DIV (ein span als Inlinelement wär da übrigens angebrachter) der Umbruch passiert, da der umgebende Container zu schmal wird.

Wenn Du beides, Bild und Text, in ein Element (Span) zusammentust und dem ein whitespace:nowrap verpasst, wird es nicht umgebrochen.

in einem Wort kann nicht umgebrochen werden, daher ragt morden_blue rechts raus.

mastermind · #7 (**permalink**) 27.03.2006, 15:12

also deine lösung geht nicht im ie, weil dort bricht er wieder...
hab aber jetzt die lösung, funktioniert in allen browsern...

Code:

<div id="..." style="background: url(plusFolder.gif) no-repeat;">text text</div><div id="subCont"> </div>

einziger nachteil, man muss alle zustände (plus, minus, ordner offen...) in verschienden grafiken machen...

hab das ergebnis online gestellt...

cy

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Script nur für Inhalt eines bestimmten DIVs	Kipperdesign	Javascript & Ajax	8	11.02.2013 13:03
DIVs wollen nicht in Container	Echnotron	CSS	4	22.02.2012 08:46
Unbekannte Anzahl Divs in Liste anordnen und horizontal und vertikal zentrieren	Alien	CSS	17	20.03.2011 10:23
n Div's in eine Zeile	Mustangore	CSS	9	20.08.2009 15:19
Divs nebeneinander, aber mittig	RomanM	CSS	2	24.10.2007 06:32