[CSS]Mouseover en Padding

[Verwijderd]

Hallo,

Ik heb mijn eerste css menu gemaakt is uiteindelijk gelukt zoals ik wil.
Alleen kom ik een paar problemen tegen en hoop dat iemand mij wilt helpen.

1:
Ik heb een li tag waar niks in staat deze dient als spacer met een hoogte van 14px.
De hoogte wordt in FF goed weergegeven alleen in IE is hij hoger als 14px.

Hoe krijg ik deze ook 14px?
Het kan als volgt: line-height:14px; en dan een leesteken invullen.
Maar dit vind ik niet echt netjes.
Lijkt erop dat IE height niet pakt?


2:
Ik heb een hoofdmenu met knoppen die ik een padding meegeef van 10px en submenu knoppen met een padding van 20px.
Nu heb ik een mouseover gemaakt alleen beweegt deze niet over de padding van 10 en 20px.
Hierdoor ziet mijn mouseover er niet zo uit zoals ik wil.

Wat ik zou willen is dat de mouseover over de hele rij beweegt. (als ik bv geen padding instel)
Ik kan natuurlijk ook geen padding instellen dan heb ik geen probleem.
Alleen vind ik het mooier als de tekst iets van de kantlijk begint.

Dit zijn de laatste 2 problemen die ik nog heb om het menu zo te maken zoals ik zou willen.

Hier is een link: http://www.wens.speedxs.nl/test3.html

En hier de code:

Cascading Stylesheet:

body {
    background-color:#5a5a5a;
    }
#navigation {
    width: 150px;
    line-height: 14px;
    color: #d4d4d4; 
    }
#navigation ul {
    list-style : none;
    margin: 0;
    padding: 0;
    }
#navigation li {
    border-bottom : 1px solid #5a5a5a;
    background-color : #000;
    }
#navigation li a:link, #navigation li a:visited  {
    display: block;
    text-decoration:none;
    color:#FFFFFF;
}
#navigation li a:hover {
    background-color: #00ff12;
    color: #000;
}
h3, h4 {
    font-size:11px;
    font-family:Arial, Helvetica, sans-serif;
    font-style:italic;
    font-weight:normal;
    margin:0;
    }
h3 {
    padding-left: 10px;
    }
h4 {
    padding-left: 20px;
    }
</style>

HTML:

<div id="navigation">
        <ul>
          <li><h3><a href="#">profiel</a></h3>
          </li>
          <li><h3><a href="#">impressie</a></h3>
          </li>
          <li><h3><a href="#">beursagenda</a></h3>
          </li>
          <li><h3><a href="#">contact</a></h3>
          </li>
          <li style="background-color:#5a5a5a; height:14px;"></li>
          <li><h3>online-store</h3>
          </li>
              <li><h4><a href="#">item1</a></h4>
              </li>
              <li><h4><a href="#">item2</a></h4>
              </li>
              <li><h4><a href="#">item3</a></h4>
              </li>
              <li><h4><a href="#">item4</a></h4>
              </li>
          <li style="border-bottom:0px;"><h3>shopping cart</h3>
          </li>
          <li style="line-height:25px; background-color:#3f3f3f;"><h4><a href="#">opvul</a></h4>
          </li>
          <li style="background-color:#5a5a5a; height:14px;"></li>
          <li><h3><a href="#">logged in?</a></h3>
          </li>
          <li><h3><a href="#">log out</a></h3>
          </li>
          <li style="background-color:#5a5a5a; height:14px;"></li>
          <li><h3><a href="#">disclaimer</a></h3>
          </li>
        </ul>
      </div

[ Voor 39% gewijzigd door Verwijderd op 02-05-2006 19:12 ]

[frickY]

1. Gebruik voor IE de font-size;

Cascading Stylesheet:

* html li.spacer {font-size: 14px}

Daar gelaten dat li-tjes gebruiken om te spacen imho erg ranzig is

2.
Maak van je A-tag een blok element, en pas je padding daarop toe, ipv op het listitem.

En waarom gebruik je een id, en niet een classname?

[ Voor 10% gewijzigd door frickY op 02-05-2006 19:17 ]

[Verwijderd]

....en waarom een heading <h3> en <h4> gebruiken in een menu?

[ Voor 16% gewijzigd door Verwijderd op 02-05-2006 19:32 ]

[Zerora]

IK vind het persoonlijk makkelijker om het op te lossen met:

Cascading Stylesheet:

td a
    {
        ...
    }

td a:hover
    {
        ...
    }

.tekstpositie
    {
        ...
    }

HTML:

<table>
    <tr>
        <td>
            <a href=""><div class="tekstpositie">Menu item 1</div></a>
        </td>
    </tr>
</table>

Je kunt dan de cel opmaken met de td a en td a:hover en de tekst zonder problemen (als het goed is) positioneren met de class die door het <div> element wordt gebruikt. In dit geval is dat "tekstpositie".

Verwijderd schreef op dinsdag 02 mei 2006 @ 19:33:
[...]


uh, ja maar tabellen voor layout zijn wel echt niet 2006 he?

Nee, maar het werkt wel.

[ Voor 27% gewijzigd door Zerora op 02-05-2006 19:34 ]

[Verwijderd]

Zerora schreef op dinsdag 02 mei 2006 @ 19:32:
tabelmeuk...

uh, ja maar tabellen voor layout zijn wel echt niet 2006 he?

^^ en bovenstaande edit met argument dat het wel werkt is onzin,.. als ik een lekkage oplos met wat tape dan werkt het ook, maar t is absloluut niet netjes. Zeker niet hoe we het graag in [WEB] willen zien en oplossen

[ Voor 39% gewijzigd door Verwijderd op 02-05-2006 19:38 ]

[WhiteDog]

Verwijderd schreef op dinsdag 02 mei 2006 @ 19:33:
[...]


uh, ja maar tabellen voor layout zijn wel echt niet 2006 he?

^^ en bovenstaande edit met argument dat het wel werkt is onzin,.. als ik een lekkage oplos met wat tape dan werkt het ook, maar t is absloluut niet netjes. Zeker niet hoe we het graag in [WEB] willen zien en oplossen

Maar wel nog steeds bijzonder effectief... Wat heeft iedereen tegen tabellen opeens

[Verwijderd]

WhiteDog schreef op dinsdag 02 mei 2006 @ 19:39:
[...]


Maar wel nog steeds bijzonder effectief... Wat heeft iedereen tegen tabellen opeens

Opeens? Onder welke steen kom je vandaan? Tabellen zijn voor tabulaire date en niet om je layout mee te maken. TS gebruikt mooi een <li> en CSS voor zijn menu en nu wordt er aangeraden een tabel voor te gebruiken, dat is natuurlijk gewoon onzin, vandaar mijn reply daarop.

[Blaise]

Het kan ook zonder extra elementen, dus gewoon lekker semantisch met:

HTML:

<ul>
   <li><a>
   <li><a>
      <ul>
         <li><a>
         <li><a>
      </ul>
   <li><a>
   <li><a>
</ul>

Het gaat erom om de juiste combinatie te vinden van padding/line-height/text-indent. Misschien heb je wat aan de CSS van http://yatiyana.nl/NL/ (http://yatiyana.nl/src/menu.css). Het is niet helemaal hetzelfde idee, maar op basis daarvan moet het zeker lukken. Height moet je juist niet gebruiken.

[ Voor 63% gewijzigd door Blaise op 02-05-2006 20:22 ]

[Verwijderd]

dankjulliewel voor je input.

Ik heb het volgende gedaan:

Cascading Stylesheet:

.padding10 {
    padding-left:10px;
}
* html li.spacer {font-size: 14px}

en in de body:

HTML:

<a href="#" class="padding10">profiel</a>

1:
Nu is het zo dat de rechterkant van profiel niet highlight als ik met mijn muis erover beweeg.
Maar wel het stukje in de padding in IE.
In FF werkt wel de higlight over de hele rij.

2:
De spacer werkt nu wel in IE maar niet in FF.

Ik heb een link online staan:http://www.wens.speedxs.nl/test4.html

frustrerend dat het in IE wel en FF niet werkt en dan weer eens in FF wel en in IE niet

UPDATE:

Ik heb in plaats van de spacer li de li afgesloten en daar een div voor in de plaats gezet:

HTML:

<ul>
 <li>2</li>
 <li>3</li>
 <li>4</li>
</ul>
<div></div>
<ul>
 <li>4</li>
 <li>5</li>
 <li>6</li>
</ul>

Nu werkt de higlight wel helemaal? snap er eigenlijk niks van maar ik denk dat dit toch de oplossing is vreemd genoeg?

Nu is het alleen nog zo dat wanneer ik mij div een class meegeef met een heigt pakt IE deze toch nog niet.
Zie link: http://www.wens.speedxs.nl/test5.html

[ Voor 83% gewijzigd door Verwijderd op 02-05-2006 22:05 ]

[Verwijderd]

Opgelost:

Heb in de tussen liggende div een font-size ingesteld van 14px;
Nu is de div spacer zowel in IE als FF 14px hoog.

[Borizz]

Waarom stel je niet gewoon een border-bottom in van 14px op het LI element die de ruimte op moet vullen? Of een padding bottom op het UL element?

[Verwijderd]

wanneer ik het zo doe:

Cascading Stylesheet:

#regel {
    font-size:11px;
    font-family:Arial, Helvetica, sans-serif;
    height: 14px;
    background-color:#5a5a5a;
    }

HTML:

<div id="navigation">
        <ul>
          <li><h3><a href="#" class="padding10">profiel</a></h3>
          </li>
          <li><h3><a href="#" class="padding10">impressie</a></h3>
          </li>
          <li><h3><a href="#" class="padding10">beursagenda</a></h3>
          </li>
          <li><h3><a href="#" class="padding10">contact</a></h3>
          </li>
        </ul>
        <div id="regel"></div>
        <ul>
          <li class="padding10"><h3>online-store</h3>
          </l>
              <li><h4><a href="#" class="padding20">item1</a></h4>
              </li>
              <li><h4><a href="#" class="padding20">item2</a></h4>
              </li>
              <li><h4><a href="#" class="padding20">item3</a></h4>
              </li>
              <li><h4><a href="#" class="padding20">item4</a></h4>
              </li>
          <li style="border-bottom:0px; padding-left:10px;"><h3>shopping cart</h3>
          </li>
          <li style="line-height:25px; background-color:#3f3f3f;"><h4><a href="#" class="padding20">opvul</a></h4>
          </li>
        </ul>
        <div id="regel"></div>
        <ul>
          <li><h3><a href="#" class="padding10">logged in?</a></h3>
          </li>
          <li><h3><a href="#" class="padding10">log out</a></h3>
          </li>
        </ul>
        <div id="regel"></div>
        <ul>
          <li><h3><a href="#" class="padding10">disclaimer</a></h3>
          </li>
        </ul>
        </div>

Dan werkt de mouseover over de hele rij in IE en niet alleen als ik over de tekst ga met mijn muis.
Wanneer ik een li een margin-bottom geef dan haal ik de div weg en dan werkt de highligt ook alleen maar op de tekst werderom weer in IE.

IS wel wat vreemd vind ik.

[ Voor 32% gewijzigd door Verwijderd op 02-05-2006 23:03 ]

[Verwijderd]

werkt wel met border-bottom: stond gewoon een foutje in mijn code.
waarom ik er niet aan gedacht heb? tsja . (gewoon niet bij me opgekomen)