[CSS] Probleem met positioneren tekst

[Mini-me]

Ik krijg het niet voor elkaar om meerdere regels tekst met een plaatje ervoor op elkaar te laten aansluiten, zodat de plaatjes doorlopen en de tekst leesbaar is.
Op dit moment heb ik het volgende:


Zoals je ziet, sluiten de plaatjes met de rode lijn mooi op elkaar aan. De tekst er rechts van is echter slecht leesbaar doordat letters als de p, g etc niet volledig op de regel passen.

CSS opmaak zoals ik dat nu heb:

Cascading Stylesheet:

.submenu{
    width: 149px;
    color: #FF3100;
    background-color: #FFFFFF;
    padding-left: 2px;
    padding-right: 2px;
    padding-bottom: 2px;
    margin-bottom: 2px;
}
.menuitem{
    color: #000000;
    overflow: hidden;
    vertical-align: text-top;
    width: 100%;
    height: 15px;
}

(Submenu is het div'je om de items heen)

Het lijkt dat door de height van de div de tekst omlaag gezet wordt, want het witte deel boven de letters in het menu is groter dan in de body text (zie je rechts op het plaatje).
Het horizontale streepje in de plaatjes is precies het midden, dus je zou verwachten dat als je 'vertical-align: middle' gebruikt, de tekst precies op dezelfde hoogte zou worden gerenderd. Maar niets is minder waar
Gebruik maken van 'vertical-align: top' werkt niet: de tekst wordt niet hoger geplaatst.

Wat zit er fout?

[Willem]

En als je de background-color:#ffffff; van het divje van het submenu eens even weghaalt?

[Mini-me]

Dan blijft het probleem en wordt mijn achtergrond blauw (ingesteld als achtergrondkleur van een omringende div )

[ Voor 24% gewijzigd door Mini-me op 27-11-2002 14:56 ]

[Verwijderd]

De tekst is blijkbaar te groot voor z'n bounding box maar krijgt niet de kans om de box groter te maken. overflow:hidden; lijkt mij de boosdoener. Als je dat weghaalt, echter, krijg je waarschijnlijk dat het niet meer mooi aansluit...

Kun je ook de HTML-code plaatsten, dan kunnen we misschien iets beters verzinnen.

[Willem]

Dan heb je inderdaad een probleem

Gewoon meer line-height definieren wat dus ook met zich meebrengt dat je een grotere afstand tussen de plaatjes van de rode lijn verder van elkaar moeten creeëren.

[edwinistrator]

ik zou je menu item divjes er uit gooien
en je submenu linkjes een class mee geven,

met padding left 15px en een background-image

lijkt mij wel een handige oplossing?


maar goed, zonder html source kunnen we niet echt veel beginnen..

[Mini-me]

OK, komt de HTML:

HTML:

<div class="submenu">
        Algemeen
        <div class="menuitem" onmouseover="this.className='menuitemover'" onmouseout="this.className='menuitem'" onclick="window.location.href='#';">
          [img]"menu/item_1.gif"[/img]Doelstellingen
        </div>
        <div class="menuitem" onmouseover="this.className='menuitemover'" onmouseout="this.className='menuitem'" onclick="window.location.href='#';">
          [img]"menu/item_1.gif"[/img]Oprichting & Geschiedenis
        </div>
        <div class="menuitem" onmouseover="this.className='menuitemover'" onmouseout="this.className='menuitem'" onclick="window.location.href='#';">
          [img]"menu/item_2.gif"[/img]Beleid
        </div>
      </div>

Zoals je ziet, werk ik met onmouseover etc. Ik zou zo 123 niet weten hoe je de achtergrond van de hele breedte van het menu wilt laten oplichten.. moet je dan met <span> gaan werken ofzo?

[Mini-me]

Ik heb het opgelost door een background-image te nemen zoals operation3 zei en de divjes te houden. Nadeel is dat ik extra classes nodig heb

[drm]

hm, misschien handig je eens een beetje te verdiepen in de CSS2 specificaties. scheelt in dit soort gevallen vaak een hele hoop geneuzel met classes. Vooral contextual is erg handig (gezien dit zo ongeveer het enige uit CSS2 is wat IE ook ondersteunt )