[JS/HTML/CSS] een soort 'br' binnen een div erbij

[semicon]

Hallo,

ik heb een (waarschijnlijk voor de kenner) klein probleem, maar ik kom er niet uit...
Het gaat om een 'treemenu' die ik zelf aan het maken ben, de werking werkt wel, maar in het design gaat iets heel kleins mis (in zowel IE6/7 als FF). Hij plakt een IMG en een DIV na elkaar, terwijl ik het achter ellkaar wilt


Ik heb een kleine screenshot om het te laten zien:



Het blauwe (heb ik ingekleurd) is gewoon een leeg gifje of een + of minnetje, maar hij zet de volgende div op de volgende regel als ik het e.e.a. zo plak:

JavaScript:

            var objOperator = document.createElement('img');
            objOperator.src = TEMPLATE_FOLDER + '/' + OPERATOR_EMPTY;

            var objFolderContainer = document.createElement('div');
            objFolderContainer.className = 'folderNameContainer';

            var objFolderName = document.createElement('div');
            objFolderName.className = 'folderNameContainer';

            var objFolderImage = document.createElement('img');
            objFolderImage.src = TEMPLATE_FOLDER + '/folder_closed.gif';

            var objFolderNameText = document.createElement('span');
            objFolderNameText.className = 'folderText';
            objFolderNameText.appendChild(document.createTextNode(filterHTML(folderName)));

            objFolderName.appendChild(objFolderImage);
            objFolderName.appendChild(objFolderNameText);
            objFolderContainer.appendChild(objFolderName);

            this.folderNameText = objFolderNameText;
            this.folderImage = objFolderImage;

            var treemenuContainer = document.createElement("div");
            treemenuContainer.style.paddingLeft = "19px";
            treemenuContainer.appendChild(objOperator);
            treemenuContainer.appendChild(objFolderContainer);

Het heeft waarschijnlijk iets met de CSS of de javascript.appendchild ding te maken..

Cascading Stylesheet:

.folderNameContainer
{
    position    : relative;
    height      : 20px;
    cursor      : default;
}

.folderText
{
    padding     : 0 0 0 2px;
    color       : #000000;
}

enige relevante css code nog...

alvast bedankt als iemand het weet

[R4NCOR]

Heeft dit niet te maken met de align-property van je lege gifje? Zet die eens op left?

[BtM909]

Je image van je folder of je plusje floaten

Wat je ook kan doen (makkelijker vaak). Is je innerHTML van je body wegschrijven in een aparte div en dan zonder scripting testen of het eruit ziet zoals je zou willen.

[Johnny]

Een <div> heeft standaard een breedte van 100% en zal dus niet naast het plaatje passen en er onder gaan staan. Kan je niet de afbeelding binnen de <div> zetten?

[semicon]

Johnny, dit kan ik niet, want ik wil dat die tekst "geselecteerd" kan worden, maar daar hoort het plusje niet bij

edit: tevens float getest, werkt ook niet, het is inderdaad wel iets met dat 100%, ben op de goede weg, want als ik vaste width zet is hij goed

edit2: Ook align getest, dan werkt het in Mozilla niet meer...

[ Voor 49% gewijzigd door semicon op 08-02-2007 17:22 ]

[semicon]

Bij deze heb ik het eindelijk opgelost!

Het was echt eenvoudig, maar om die "selectie" te maken heb ik gewoon een span gebruikt met een background color, en het werkt wel best zo.. Ik had eerst dus zon div in een div getest, maar die nam dus weer 100% width over (iets met block element is altijd 100% ofzo) dus dacht, maak er eens een span in een div van, en dat werkt wel!

[moozzuzz]

Ik dacht dat het met een negatieve margin ook wel zou lukken, maar ben ondertussen al wat te laat (foei foei topix laten opstaan).