[CSS] Groeinde div met image in Firefox

[Dannydekr]

Ben bezig met een website voor iemand. Het design heeft een menu met een achtergrond. Heb dus de achtergrond in 3en gedeeld. Een topdiv met achtergrond, een middendiv met achtergrond (repeat Y) en een bottomdiv met achtergrond..

Normaal gesproken werkt dit, maar het heeft bugs. In IE moet je een leeg teken in de topdiv doen " ". Maar daar rekt hij gewoon goed mee met de content (anders zie je de topdiv niet). In firefox moet je ook een   in de topdiv doen, maar daar is het probleem dat hij tijdens het groeien ruimte tussen de topdiv en middendiv en bottomdiv laat zien. Alsof er een spacing op staat zegmaar.



Dit is de code:

code:

<div id="lefttop"> &nbsp; </div>
        <div id="left">
          <p>Linker menu </p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
        </div>
        <div id="leftbottom"> &nbsp; </div>

Dit is de CSS;

code:

#lefttop{
              width: 260px;
              height: 21px;
              background-image:url(images/bglefttop.png);
}

#left {
    width: 260px;
    height: 100%;
    background-image:url(images/bgleft.png);
    
}

#leftbottom{
             width: 260px;
             height: 20px;
              background-image:url(images/bgleftbottom.png);
}

[Dannydekr]

background-repeat werkt niet. En wanneer ik repeat-y achter de URL zet zie ik helemaal geen achtergrond.

[Verwijderd]

margin:0 en padding:0? op je leftbottom en lefttop en een margin:0 op je left?

[Verwijderd]

background-repeat: repeat-y; ?

edit: how sorry voor de buddel...


toevoeging: op de left hoeft geen height:100%, dan wordt ie te groot, kan beter geen height zetten, dan groeit ie mee zoals je wil.

[ Voor 74% gewijzigd door Verwijderd op 12-06-2007 14:25 ]

[Verwijderd]

Google eens op het "position" attribuut.

Kort door de bocht: standaard in de meeste doctypes zijn divs position:static, in deze mode hebben veel attributen geen effect. Probeer eens te werken met position:relative. Relative divs zijn altijd zichtbaar ook zonder inhoud of voorgedefinieerde hoogte.

Verder is je tekening erg cryptisch, zou je mayb wat duidelijker kunnen zijn?

[ Voor 10% gewijzigd door Verwijderd op 12-06-2007 14:28 ]

[Dannydekr]

Maakt allemaal geen verschil. Position relative werkt ook niet..het ligt ook niet aan de overige code, Heb namelijk een test document gemaakt met alleen de code en de CSS van die DIV. Nog steeds hetzelfde probleem in Firefox.

[ Voor 77% gewijzigd door Dannydekr op 12-06-2007 14:30 ]

[Dannydekr]

Heel vreemd, wanneer ik de 3 divs een border geef, werkt het principe wel. maar dit is natuurlijk nutteloos omdat ik geen border kan gebruiken

[Verwijderd]

@dannydeman... heb je al iets van mijn voorstellen geprobeerd?? Combineer dat met de position:relative die j.ostie toevoegde...

post anders even css wat je tot nu toe hebt.

[Verwijderd]

Haha, by the way ik zie het nu pas maar <p> elementen hebben standaard margins boven en onder, kijk eens of het daar aan kan liggen.

[ Voor 16% gewijzigd door Verwijderd op 12-06-2007 14:38 ]

[Dannydekr]

Heb overal de margins en paddings op 0 gezet (werkt niet) heb bij alle drie position relative gezet (werkt nie).

Hier in een rar bestand de test HTML:

http://members.chello.nl/akruik/tweakers.rar

edit:

haha, werkt inderdaad die <P> tags weghalen. En dat was alleen maar voor het overzicht! Bedankt voor het spotten

[ Voor 24% gewijzigd door Dannydekr op 12-06-2007 14:42 ]

[Savantas]

Zoiezo zou ik een menu op laten bouwen uit <ul><li>, niet een zooi geneste divs.
zo bv:

HTML:

    <div id='lefttop2'>
        <h3>Linker menu</h3>
        <ul>
            <li>keuze 1</li>
            <li>keuze 2</li>
            <li>keuze 3</li>
            <li>keuze 4</li>
            <li>keuze 5</li>
        </ul>
    </div>

en

Cascading Stylesheet:

h3 {
    width: 260px;
    background: url(images/bglefttop.png) no-repeat;
    margin: 0;
    padding-left: 15px;
    padding-top: 3px;
}

#lefttop2 {
    width: 260px;
    background-image:url(images/bgleft.png);
    background-repeat: repeat-y; 
    }

li {
    margin: 0;
    padding: 0 15px;
    }

ul {
    width: 260px;
    height: 20px;
    background: url(images/bgleftbottom.png) no-repeat left bottom;
    margin: 0;
    padding-top: 20px;
    padding-bottom: 20px;
    position:relative
}

Eventueel bij meerdere keren voorkomen van elementen gebruik maken van classes of id's, natuurlijk...

[ Voor 83% gewijzigd door Savantas op 12-06-2007 15:11 ]

[Verwijderd]

Denk ook niet dat dat de bedoeling was, die p's waren er gewoon voor het uitrekken van zijn div.

Maar inderdaad is het maken van menu's met list items het eleganst. kijk listamatic maar eens.

[Scheeve]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Dit zou ik even bovenaan de pagina zetten

[OkkE]

Scheeve schreef op dinsdag 12 juni 2007 @ 15:59:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Dit zou ik even bovenaan de pagina zetten

Als ik kijk naar zijn HTML, en het feit dat IE nog niet goed omgaat met XHTML, zou ik er een HTML4.01 Strict DTD van maken.

-- edit --

Zelf los ik zulke zaken vaak zo op btw;

HTML:

<div class="block">
<div>
<div>
<p>tekst</p>
</div>
</div>
</div>

En dan met CSS de buitenste DIV een background-image (re-repeat, top) en een padding-top, de middelste een background-image (no-repeat, bottom) en de binneste DIV een background met repeat-y en evt. wat padding links en rechts.

[ Voor 33% gewijzigd door OkkE op 12-06-2007 16:41 ]

[Dannydekr]

Dat menu item was voor de test, ik gebruik ExponentCMS, maar was eerst bezig met de basislayout voordat ik Exponent er in verwerk..Alles is goed gekomen.

[T-MOB]

Even googlen op margin-collapsing is zeker aan te raden...

[Verwijderd]

IMHO gaat deze doctype het best om met CSS zonder al te veel cross-browser quirks.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">