Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Probleem hoogte div

michelsw
17 antwoorden
  • Graag roep ik jullie hulp in voor het volgende waar ik over struikel. Ik gebruik div's een berichten op mijn website te plaatsen. De div heeft een achtergrond (van donkergrijs naar wit) en eindigt met een grijze regel, een border.

    Als ik in de div een foto plaats en daarnaast wat tekst wordt de div niet opgerekt tot het formaat van de foto, die groter is dan de tekst.

    [img:9fd720c796]http://www.xs4all.nl/~switzarm/vb.jpg[/img:9fd720c796]

    Hoe kan ik dit op een nette manier oplossen? Opvullen met <br>'s verdiend geen schoonheidsprijs en een hoogte aan de div meegeven lijkt mij ook omslachtige oplossing omdat ik dan bij ieder bericht de hoogte van de div moet aangeven. Ik heb bij andere sites gekeken hoe zij dit oplossen, maar of ze gebruiken tabellen (waar ze niet voor bedoeld zijn), <br>'s of ik kom er simpelweg niet achter.

    Stuk uit de gebruikte code:


    [code:1:9fd720c796]
    <div class="blogentry">
    <h1>Testbericht</h1>
    <p class="date">Geplaatst op zondag 26 oktober 2008 - 21:19 uur</p>
    <p class="blog">
    <img class="imagefloat" src="../media/lastmovie.jpg" alt="">
    Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla.
    Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla.
    Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla.
    </p>
    </div>
    [/code:1:9fd720c796]

    Gebruikte css code:

    [code:1:9fd720c796]

    .blogentry {
    padding: 5px 5px 5px 5px;
    margin: 0 0 15px 0;
    background: url(images/bgblog.jpg) repeat-x #FFFFFF;
    border-bottom: 1px solid #DEDEDE
    }


    .date {
    font: 60% verdana, arial, sans-serif;
    color: #666666;
    margin: 0 0 5px 0
    }

    .blog {
    font: 70% verdana, arial, sans-serif;
    color: #000000;
    margin: 8px 0 15px 0
    }

    .imagefloat {
    border: 1px solid black;
    margin: 4px 4px 4px 0;
    float: left
    }
    [/code:1:9fd720c796]

    Wie o wie, helpt mij op weg?
  • Test je vanuit Internet explorer? Waar je dan waarschijnlijk naar op zoek bent is faux colums (ja, je moet de naam van het beestje weten!), zoek daar maar eens naar op dit forum of Google.
  • Volgens mij moet je nog een overflow toevoegen aan je .blogentry
  • Reuze bedankt, Ger en Gooly! In Firefox ziet het er nu prima uit:

    [img:441f5e12d8]http://www.xs4all.nl/~switzarm/vb2.jpg[/img:441f5e12d8]

    maar in IE7 helaas nog niet:

    [img:441f5e12d8]http://www.xs4all.nl/~switzarm/vb3.jpg[/img:441f5e12d8]



    Dit is nu de code:

    [code:1:441f5e12d8]
    <div class="blogentry">
    <h1>Testbericht</h1>
    <p class="date">Geplaatst op zondag 26 oktober 2008 - 21:19 uur</p>
    <div id="left">
    <img class="imagefloat" src="../media/lastmovie.jpg" alt="">
    </div>
    <div id="right">
    <p class="blog">
    Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla.
    Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla.
    Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla.
    </p>
    </div>
    </div>
    [/code:1:441f5e12d8]

    En de CSS:

    [code:1:441f5e12d8]
    .blogentry {
    padding: 5px 5px 5px 5px;
    margin: 0 0 15px 0;
    text-align: left;
    background: url(images/bgblog.jpg) repeat-x #FFFFFF;
    overflow: hidden;
    border-bottom: 1px solid #DEDEDE
    }

    #left {
    width: 160px;
    }
    #right {
    margin-left: 170px;
    }

    .date {
    font: 60% verdana, arial, sans-serif;
    color: #666666;
    margin: 0 0 5px 0
    }

    .blog {
    font: 70% verdana, arial, sans-serif;
    color: #000000;
    margin: 8px 0 15px 0
    }

    .imagefloat {
    border: 1px solid black;
    margin: 4px 4px 4px 0;
    float: left
    }
    [/code:1:441f5e12d8]

    Hebben jullie nog tips om deze "bug" te verhelpen?
  • Het klinkt een beetje paradoxaal ;-), maar werkt dit niet?:
    [code:1:5bdd85653c]#right {
    float: left;
    }[/code:1:5bdd85653c]

    Alleen weet ik even niet of je dan ook je #left, left moet floaten. (Omdat dit het parent element is van het plaatje en de 'eigenlijke' buurman van de #right)

    Bas? Drewster?
  • Inderdaad paradoxaal. :) Helaas werkt dit niet. Als ik dit in de stylesheet zet, dan begint ook in Firefox pas de tekst onder het plaatje. En in IE7 wordt het dan een rommeltje.

    Als ik dit doe werkt het wel:

    [code:1:a7f11c891e]
    #left {
    float: left;
    }
    #right {
    margin-left: 170px;
    }
    [/code:1:a7f11c891e]

    Maar deze oplossing levert me weer een ander probleem op. Als de tekst meer plek opneemt dan het plaatje, dan begint daaronder de tekst niet onder het plaatje. Dit wordt veroorzaakt door de margin-left in #right.

    [img:a7f11c891e]http://www.xs4all.nl/~switzarm/vb4.jpg[/img:a7f11c891e]

    Help! :D
  • Met <div id="right"> zet je de hele tekst in een ander element dan de afbeelding (die in div "left" staat) De content van het 'tekst element' zal dus nooit om de afbeeling heen vloeien. Volgens mij moeten afbeelding en text "Broer en zus" zijn. (Zoals in de initiele code in je eerste postje)
    Heb je overigens een correct doctype boven je code staan?
  • Ik denk dat dit artikel je wel een eind op weg helpt.
  • Heren, het is gelukt! :D

    In de stylesheet heb ik nu staan.
    [code:1:b47b6aaf95]
    #left {
    float: left;
    }
    [/code:1:b47b6aaf95]

    #right heb ik verwijderd en gebruik ik ook niet meer:

    [code:1:b47b6aaf95]
    <div class="blogentry">
    <h1>Testbericht</h1>
    <p class="date">Geplaatst op zondag 26 oktober 2008 - 21:19 uur</p>
    <div id="left">
    <img class="imagefloat" src="../media/lastmovie.jpg" alt="">
    </div>
    <p class="blog">
    Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla.
    Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla.
    Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla.
    Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla.
    Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla.
    Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla.
    Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla.
    </p>
    </div>
    [/code:1:b47b6aaf95]

    Gooly en Ger, hartelijk dank voor jullie hulp! :D
  • Dan kan je net zo goed ook de div om het plaatje ook weg halen, die is (en was) eigenlijk redelijk nutteloos, dan float je het plaatje gewoon links, dat kan ook prima hoor. Spaarzaam zijn met het rond strooien van divjes en spannetjes is een goede eigenschap :wink: .
  • Hm, ben er weer te laat bij… :D Als je trouwens meerdere .blogentries op één pagina hebt kan je problemen verwachten met de validatie van je code en onverwacht gedrag in de browsers. Waarom? Omdat je binnen de .blogentry werkt met id, maar er mag altijd maar één element met een bepaalde id per pagina zijn. Dus zorg ervoor dat je niet meerdere #left en #right krijgt, dan kan je er beter klassen van maken.

    - Bas
  • Bedankt, Drewster! Zo werkt het inderdaad ook.

    Bas, bedankt voor de tip! Daar was ik me nog niet van bewust.
  • Oh nee, toch niet. Ik heb nu de hele tijd getest met lange lappen tekst. Nu heb ik weer het oorspronkelijke probleem dat als de tekst minder ruimte inneemt de achtergrond niet ver genoeg doorloopt.

    [img:7c77dd9af6]http://www.xs4all.nl/~switzarm/vb.jpg[/img:7c77dd9af6]

    Ik ga weer puzzelen.
  • Het gaat nu onder Firefox goed, maar alleen onder IE nog niet.

    IEF7 (Fout)
    [img:080a8ce643]http://www.xs4all.nl/~switzarm/vbie.jpg[/img:080a8ce643]

    FF (Goed!)
    [img:080a8ce643]http://www.xs4all.nl/~switzarm/vbff.jpg[/img:080a8ce643]

    De huidige code:

    [code:1:080a8ce643]
    <div class="blogentry">
    <h1>Testbericht</h1>
    <p class="date">Geplaatst op zondag 26 oktober 2008 - 21:19 uur</p>
    <img class="imagefloat" src="../media/lastmovie.jpg" alt="">
    <p class="blog">
    Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla.
    Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla.
    Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla.
    Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla.
    Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla.
    Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla. Bla bla.
    </p>
    </div>
    [/code:1:080a8ce643]

    CSS:

    [code:1:080a8ce643]
    .blogentry {
    padding: 5px 5px 5px 5px;
    margin: 0 0 15px 0;
    text-align: left;
    background: url(images/bgblog.jpg) repeat-x #FFFFFF;
    overflow: hidden;
    border-bottom: 1px solid #DEDEDE
    }

    h1 {
    font-family: verdana, arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #073592;
    margin: 0 0 0 0
    }

    .date {
    font: 60% verdana, arial, sans-serif;
    color: #666666;
    margin: 0 0 5px 0
    }

    .imagefloat {
    border: 1px solid black;
    float: left;
    margin: 4px 8px 4px 0
    }

    .blog {
    font: 70% verdana, arial, sans-serif;
    color: #000000;
    margin: 8px 0 15px 0
    }
    [/code:1:080a8ce643]

    Wie kan mij de ultieme tip geven? :)
  • Kan je een online testpagina maken? Dan kan ik even snel kijken waar het fout gaat. Graag alleen het probleemgeval plaatsen, maar natuurlijk wel in goed html en met correcte doctype.

    - Bas
  • Het probleem is opgelost. Ik heb aan de div blogentry een breedte toegevoegd: width: 560px.

    Is dit een nette oplossing, of zou het nog netter kunnen? Want dan zet ik graag nog even een testpagina in elkaar.
  • Mooier zou waarschijnlijk zijn om aan [i:5d29736036].imagefloat[/i:5d29736036] de eigenschap [i:5d29736036]clear: right;[/i:5d29736036] of [i:5d29736036]clear: both;[/i:5d29736036] toe te voegen, wat zoveel wil zeggen als: rechts van mij geen andere drijvende objecten, of aan weerszijden geen andere drijvende objecten (resp).

    - Bas

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.