XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   harte nuss: treemenu mit divs (http://xhtmlforum.de/showthread.php?t=39346)

mastermind 27.03.2006 12:46

harte nuss: treemenu mit divs
 
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 27.03.2006 12: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 27.03.2006 13: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 27.03.2006 13: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 27.03.2006 15:03

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

hier der screen:

http://www.foxxworxx.com/tree.gif

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 27.03.2006 15: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 27.03.2006 16: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


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:48 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2020, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019