[CSS] verticaal uitlijnen in een verticale menubalk

[Rodyman]

Ik wil het volgende bereiken met behulp van CSS (geen tables dus):

code:

-------------
|  menu1    |
-------------
-------------
|  menu2    |
-------------
-------------
|  menu3    |
-------------
-------------
|  menu4    |
-------------

de menu items zijn gewoon plain text en moeten verticaal gecentreerd worden, en daar zit nu het probleem in.

Ik heb verschillende mogelijkheden met de search al bekeken maar t werkt allemaal niet naar behoren. En ik zou het toch graag ZONDER tables oplossen.

dit is een stukkie code zoals ik het nu heb (werkt alleen niet onder IE):

code:

#menukolom {

    color:          #000000;
    width:          143px;
}

#menutable {
    padding-left:   10px;
    padding-right:  0px;
    height:         20px;
    padding-top:    6px;
    background-color: #EFEFF7;
}

en de html:

code:

<div id="menukolom">
        <div id="menutable" onClick="location.href='/index.php'">Home</div>
        <div id="menutable" onClick="location.href='/index.php'">Home</div>
        <div id="menutable" onClick="location.href='/index.php'">Home</div>
        <div id="menutable" onClick="location.href='/index.php'">Home</div>
        <div id="menutable" onClick="location.href='/index.php'">Home</div>
</div>

Dit ziet er op zich goed uit in firefox, alleen werkt het weer eens niet naar behoren in Internet Explorer.

Ook met vertical-align: middle (eventueel display:table) wil het niet goed werken.

Heeft iemand enig idee hoe dit anders opgelost kan worden? Ben zelf nog een redelijke n00b op t gebied van een layout bouwen met CSS, maar wil het graag leren!

[ Voor 16% gewijzigd door Rodyman op 25-10-2004 11:39 ]

[CrashOne]

Hang je css is aan een list, ipv (waarschijnlijk) een div.
Een menu is immers een lijst met items.

[BtM909]

CrashOne schreef op 25 oktober 2004 @ 11:37:
Hang je css is aan een list, ipv (waarschijnlijk) een div.
Een menu is immers een lijst met items.

^^ idd

Daarnaast nog even het volgende:

• je geeft je div (die je straks gaat vervangen door een <li> een bepaalde hoogte, maar je moet ook de line-height aanpassen. Tekst wordt in principe automagisch verticaal gecentreerd.

• 0px mag je vervangen door 0;

• Geef je padding in de short-notatie op: padding:

[ Voor 12% gewijzigd door BtM909 op 25-10-2004 11:42 ]

[Rodyman]

BtM909 schreef op 25 oktober 2004 @ 11:40:
[...]

^^ idd

Daarnaast nog even het volgende:

• je geeft je div (die je straks gaat vervangen door een <li> een bepaalde hoogte, maar je moet ook de line-height aanpassen. Tekst wordt in principe automagisch verticaal gecentreerd.

• 0px mag je vervangen door 0;

• Geef je padding in de short-notatie op: padding:

Ok padding veranderd in korte vorm, 0px vervangen door 0 en de line-height toegevoegd aan de div.
En inderdaad nu zet hij hem precies in het midden! Alvast heeeeeel erg bedankt!

Maar als ik er een list van maak krijg ik van die gare bolletjes of nummers er voor te staan. Waarom is het toch slimmer om er een list van te maken en niet een div?

[Zoefff]

Omdat je met css ook die gare bolletjes weg kan halen. Bovendien is een <div> gewoon niet bedoelt voor een menu, net zoals een <p> niet is bedoeld voor enters zegmaar

Cascading Stylesheet:

list-style:none;

Daarmee krijg je de bolletjes uit je lijst weg.

[Rodyman]

Zoefff schreef op 25 oktober 2004 @ 11:55:
Omdat je met css ook die gare bolletjes weg kan halen. Bovendien is een <div> gewoon niet bedoelt voor een menu, net zoals een <p> niet is bedoeld voor enters zegmaar

Cascading Stylesheet:

list-style:none;

Daarmee krijg je de bolletjes uit je lijst weg.

hmm joah die bolletjes wel, maar dan verpest ie toch weer de lay-out. ik zal er vanavond nog eens goed naar kijken, moet nu weg. Alvast heel erg bedankt iedereen!

[Y0ur1]

Hou je er wel rekening mee dat dit met SP2 standaard niet werkt? Je krijgt zon balk bovenaan in IE

[ Voor 21% gewijzigd door Y0ur1 op 25-10-2004 12:02 ]

[BtM909]

Ik ga maar weer even spammen:

http://css.maxdesign.com.au/listamatic/index.htm
http://css.maxdesign.com.au/listamatic2/index.htm
http://css.maxdesign.com.au/listutorial/index.htm

Y0ur1 schreef op 25 oktober 2004 @ 12:02:
Hou je er wel rekening mee dat dit met SP2 standaard niet werkt? Je krijgt zon balk bovenaan in IE

Wat werkt niet standaard

[ Voor 39% gewijzigd door BtM909 op 25-10-2004 12:06 ]

[Woudloper]

Y0ur1 schreef op 25 oktober 2004 @ 12:02:
Hou je er wel rekening mee dat dit met SP2 standaard niet werkt? Je krijgt zon balk bovenaan in IE

Wat bedoel je met 'zon balk'? Deze opmerking is mij niet geheel duidelijk...

[Y0ur1]

Woudloper schreef op 25 oktober 2004 @ 12:06:
[...]

Wat bedoel je met 'zon balk'? Deze opmerking is mij niet geheel duidelijk...

zon schildje met "om de beveiliging van uw computer te verbeteren, heeft Internet Explorer dit bestand beperkt in het weergeven... etc". Dan moet je er eerst op klikken en dan op "geblokkeerde inhoud toestaan" drukken voordat het werkt.

[crisp]

Y0ur1 schreef op 25 oktober 2004 @ 12:26:
[...]


zon schildje met "om de beveiliging van uw computer te verbeteren, heeft Internet Explorer dit bestand beperkt in het weergeven... etc". Dan moet je er eerst op klikken en dan op "geblokkeerde inhoud toestaan" drukken voordat het werkt.

waarom? vanwege de onclick="location.href='..'" ?
Als dat zo is dan schrap ik IE helemaal van mijn lijst 'ondersteunde browsers' want dat zou echt nergens op slaan...

otoh is die JS natuurlijk helemaal niet nodig in dit voorbeeld; een anchor kan je ook stylen zoals je wilt en is ook toegankelijker.

[ Voor 12% gewijzigd door crisp op 25-10-2004 12:33 ]

[Y0ur1]

crisp schreef op 25 oktober 2004 @ 12:32:
[...]

waarom? vanwege de onclick="location.href='..'" ?
Als dat zo is dan schrap ik IE helemaal van mijn lijst 'ondersteunde browsers' want dat zou echt nergens op slaan...

otoh is die JS natuurlijk helemaal niet nodig in dit voorbeeld; een anchor kan je ook stylen zoals je wilt en is ook toegankelijker.

Vraag het de heren van dat bedrijf in Redmond:

[ Voor 7% gewijzigd door Pelle op 25-10-2004 13:30 ]

[Woudloper]

crisp schreef op 25 oktober 2004 @ 12:32:
waarom? vanwege de onclick="location.href='..'" ?
Als dat zo is dan schrap ik IE helemaal van mijn lijst 'ondersteunde browsers' want dat zou echt nergens op slaan...

Ja, dat is de reden. De balk waarover wordt gesproken is de zogenaamde 'information bar'. klik hier voor meer informatie. En op deze pagina staat nog meer informatie over XP SP2 en IE...

[crisp]

Woudloper schreef op 25 oktober 2004 @ 13:00:
[...]

Ja, dat is de reden. De balk waarover wordt gesproken is de zogenaamde 'information bar'. klik hier voor meer informatie. En op deze pagina staat nog meer informatie over XP SP2 en IE...

Ja, ik weet wat die gele balk is (ik heb thuis een laptop met winXP en SP2 - ik gebruik 'm alleen nooit - kut OS), maar sinds wanneer is een location.href een potentieel gevaar? Ja, in IE is het misschien een potentieel gevaar, maar doe dan wat aan de brakheid van je software en ga geen functionaliteit om zeep helpen

En ja, ik raak redelijk gefrustreerd van IE en met name van SP2 voor winXP - ik ben al de meest vreemde bugs tegengekomen in SP2 die het leven van een webdeveloper nog minder aangenaam maken (alsof IE zelf al niet erg genoeg was)...

[ Voor 17% gewijzigd door crisp op 25-10-2004 13:12 ]

[Verwijderd]

crisp schreef op 25 oktober 2004 @ 13:05:
[...]
2 fikse paragrafen tekst

Ik kan me voorstellen dat er zoiets kan gebeuren bij hele domme gebruikers:

code:

<a href="https://www.ikbeneenheleveiligebanksiteofzo.com"
    onclick="location.href='http://www.ikbenengengemeen.com'">
  blaaat
</a>

Correct me if I'm wrong..

[ Voor 11% gewijzigd door Verwijderd op 25-10-2004 13:15 ]

[BtM909]

Verwijderd schreef op 25 oktober 2004 @ 13:14:
[...]


Ik kan me voorstellen dat er zoiets kan gebeuren bij hele domme gebruikers:

code:

<a href="https://www.ikbeneenheleveiligebanksiteofzo.com"
    onclick="location.href='http://www.ikbenengengemeen.com'">
  blaaat
</a>

Correct me if I'm wrong..

Wat is hier mis mee dan crisp doelt meer op de bestaande exploits die niet gefixed worden in IE

[crisp]

BtM909 schreef op 25 oktober 2004 @ 13:16:
[...]

Wat is hier mis mee dan crisp doelt meer op de bestaande exploits die niet gefixed worden in IE

Ja, inderdaad. Dit is gewoon symptoombestrijding terwijl de daadwerkelijke bugs niet gefixed worden. Als IE zelf veilig zou zijn, dan zou het niet uitmaken dat je naar http://www.ikbenengengemeen.com zou worden geredirect...

[Zoefff]

Maargoed, het feit dat XPSP2 moeilijk doet over die onclick is alleen nog maar een extra reden om gewoon een lijst met <a> te gebruiken. Als je display:block; kan je bovendien op de hele <li> drukken om gelinkt te worden, dus werkt het precies hetzelfde als de <div> met onclick.

En als de layout vernachelt word, moet je gewoon even wat spelen met padding en/of margin