[xhtml/css] Overlappende tekst

[BertusG]

Ik ben met een nieuwe portfoliosite bezig en was toen ik er aan begon van voornemen om alles in CSS te doen. Om alles goed te krijgen in FF en IE ben ik inmiddels al heel wat dagen verder maar dat terzijde. Ben nu echter tegen een probleem aangelopen dat ik zelf niet voor elkaar krijg.

In Firefox


In Internet Explorer


Zoals jullie kunnen zien heb ik in FF te maken met een overlappingsprobleem als de tekst in de div portfoliotxt langer wordt dan de afbeelding. Post ik de CSS ter verduidelijking. Ik heb dus in div portfoliovak die als container dient voor de div .image en de div .portfoliotxt

Code

code:

.image {
    border:1px solid #999999;
    background-color:#666666;
    height:100px;
    width: 100px;
    margin-right: 10px;
    float: left;

}

.portfoliotxt {
    font-family: verdana;
    font-size:11px;
    color:white;
    height:100px;
    width: 338px;
    float: left;
}

.portfoliovak {
    margin-left: 20px;
    height:100px;
    width: 450px;
    margin-bottom: 20px;
}

P.s. als ik de height van de vakken niet in bijv. 100 px maar in 100% of auto zet dan gaat helemaal de layout er aan.......

[Pelle]

clear: both

[Verwijderd]

Een float vak geeft geen hoogte door aan z'n parent (IE doet dat natuurlijk weer wl ), je kan dit inderdaad oplossen met een clear: both (of clear: left)

[BertusG]

Pelle schreef op maandag 02 januari 2006 @ 13:34:
clear: both

Ik ben hier gelijk me aan de slag gegaan maar ook hiermee krijg ik het niet voor elkaar. Aan welke van de drie moet ik deze hangen in de CSS want het levert bij geen van allen het beoogde resultaat op.

Verwijderd schreef op maandag 02 januari 2006 @ 13:39:
Een float vak geeft geen hoogte door aan z'n parent (IE doet dat natuurlijk weer wl ), je kan dit inderdaad oplossen met een clear: both (of clear: left)

Hierop maak ik uit dat ik de clear: left of both moet meegeven aan de portfoliotxt. Dit levert echter in beide gevallen een vernaggelde layout op.

Edit: tot zover nog geen resultaten, al het andere wat ik doe goot de layout ernstig in de war. Als er nog mensen zijn die het voor me willen testen graag. dus hierbij nog een stukje html code:

code:

<div class="portfoliovak">
    <div class="image">[img]"images/LP_k.gif"[/img]</div>
        <div class="portfoliotxt"><strong>Opdrachtgever: </strong>-<br />
          <strong>Omschrijving:</strong> Ontwerp van een full colour advertentie voor plaatsing in  regionale dagbladen in het              noorden.<br />
          <br />
          <a href="javascript:PopupPic('images/LP_final.gif')"> Bekijk work </a></div>
</div>
<div class="portfoliovak">
    <div class="image">[img]"images/brick-art.gif"[/img]</div>
        <div class="portfoliotxt"><strong>Opdrachtgever: </strong>-<br />
          <strong>Omschrijving:</strong> Ontwerp van een full colour advertentie voor plaatsing in  regionale dagbladen in het              noorden.<br />
          <br />
          <a href="javascript:PopupPic('images/Brick-art-final.jpg')"> Bekijk work </a></div>
</div>
<div class="portfoliovak">
    <div class="image">[img]"images/teken_K.gif"[/img]</div>
        <div class="portfoliotxt"><strong>Opdrachtgever: </strong>-<br />
          <strong>Omschrijving:</strong> Ontwerp van een full colour advertentie voor plaatsing in  regionale dagbladen in het              noorden.<br />
          <br />
          <a href="javascript:PopupPic('images/teken.jpg')"> Bekijk work </a></div>
</div>

[ Voor 93% gewijzigd door BertusG op 02-01-2006 14:56 ]

[Verwijderd]

owkee, geef no de sluit div van portfoliotext een break met een clear: left, dus

code:

<div class="portfoliovak">
    <div class="image">[img]"images/brick-art.gif"[/img]</div>
        <div class="portfoliotxt"><strong>Opdrachtgever: </strong>-<br />
          <strong>Omschrijving:</strong> Ontwerp van een full colour advertentie voor plaatsing in  regionale dagbladen in het                 noorden.<br />
          <br />
          <a href="javascript:PopupPic('images/Brick-art-final.jpg')"> Bekijk work </a></div>
          <br style="clear: left"/>
</div>

trouwens, images geen width, height, hspace en vspace meegeven, dit kan je beter doen via CSS (dit kan je doen door in je CSS file het volgende te zetten:

Cascading Stylesheet:

.image img
{
width: 80px;
height: 80px;
margin: 10px;
}

verder moet je de alt attribuut defineren.

In de href van een a moet je geen javascript stoppen, maar in de onclick handeler (return false, om de href actie te cancelen). In de href zet je dan gewoon de url naar de image (Beter voor zoekengines en mensen zonder javascript)

[ Voor 97% gewijzigd door Verwijderd op 02-01-2006 16:29 ]

[Sappie]

BertusG schreef op maandag 02 januari 2006 @ 13:39:
Edit: tot zover nog geen resultaten, al het andere wat ik doe goot de layout ernstig in de war. Als er nog mensen zijn die het voor me willen testen graag. dus hierbij nog een stukje html code:

Heb er even naar gekeken. Hier een andere oplossing dan die van Par0xysm. hieronder vind je de 'nieuwe' css; je cleared de floats door middel van de overflow property in Firefox. IE doet dit uit zichzelf al. Ik heb ff misbruik gemaakt van de underscore hack in dit voorbeeldje; beter plaats je de IE only css dus tussen conditional comments. Verder dien je gebruik te maken van min-height ipv height:

code:

.image {
    border:1px solid #999999;
    background-color: #666666;
    width: 100px;
    height: 100px;
    margin-right: 10px;
    float: left;

}

.portfoliotxt {
    font-family: verdana;
    font-size: 11px;
    color: white;
    width: 338px;
    float: left;
}

.portfoliovak {
    margin: 0 0 20px 20px;
    min-height: 100px;
    overflow: hidden;
    _height: 100px; 
    _overflow: visible;
    width: 450px;
}

[ Voor 5% gewijzigd door Sappie op 02-01-2006 16:41 ]

[BertusG]

Sappie schreef op maandag 02 januari 2006 @ 16:39:
[...]
Uitleg Sappie

Dankje dit werkt idd goed, in zowel FF als IE.

Verwijderd schreef op maandag 02 januari 2006 @ 16:06:

Cascading Stylesheet:

.image img
{
width: 80px;
height: 80px;
margin: 10px;
}

Dit werkt idd mooier dan zoals ik het had. 1 ding snap ik het niet, dit werd automatisch toegepast op de afbeeldingen waarvan het de bedoeling was en bijv. niet op de header image (wat ook niet moet) hoe kan dat?? Dat kan ik ff niet afleiden uit het geheel
Heb 't al door

<br style="clear: left"/> methode werkte echter niet bij, maar goed dat is nu opgelost gelukkig.

[ Voor 71% gewijzigd door BertusG op 02-01-2006 18:33 ]