[CSS] Hoe menu bewerken?

[Verwijderd]

Ik heb nu in css een menu kunnen aanmaken.

Maar nu wil dat er kaders rond komen te staan en ook de kleur verandert als je over een link gaat.
Hoe doet men dat?

Greetz,

Manuel.

[Verwijderd]

Post misschiens eens de html samen met je huidige css dan kunnen we je al heel wat verder helpen.

Toch even dit:
- kader errond = border: 1px solid #000;
- kleur over link = a:hover { color: #fff; }

[-TheNose-]

Of lees even een stukje op w3schools, staat alles wat jij zoekt inclusief voorbeelden...

[Verwijderd]

-CKY2K- schreef op zondag 28 augustus 2005 @ 22:23:
Of lees even een stukje op w3schools, staat alles wat jij zoekt inclusief voorbeelden...

Ok dat zal ik eens bekijken dan.

Anders moet ik het eens posten.

[Verwijderd]

http://www.alistapart.com/articles/taminglists/
http://css.maxdesign.com.au/listamatic/

Hier zou je alles wel moeten kunnen vinden om je lists te stylen.

[Verwijderd]

Het lukt me dus niet om er kadertjes er rond te krijgen en kleuren enzo. Voor de rest werkt ie wel.
Dit heb ik tot nu toe voor de style:

.xmenu,{
white-space: nowrap;
list-style-type: none;
margin: 0;
padding: 0;
z-index: 10 }
.xmenu {
width: 100% }
.xmenu a,{
display: block }
.xmenu li,{
margin: 0;
padding: 0;
position: relative;
z-index: 11;
vertical-align: inherit;
behavior: url(hover.htc);
width: 130}
.xmenu li {
float: left }
.xmenu ul,{
background-color: white;
list-style-type: none;
display: block;
margin: 0;
padding: 0;
position: absolute;
z-index: 12 }
.xmenu ul {
top: 100%;
left: 0 }
.xmenu li>ul /* for W3C browsers */ {
margin: 0;
top: 3784px;
left: 3279px}
.xmenu ul li,{
margin: 0;
z-index: 13;
width: 100%;
float: none }
.xmenu ul li a,{
width: 100% }
.xmenu ul ul {
margin: 0;
z-index: 14;
top: 30%;
left: 100% }
.xmenu ul ul li,{
z-index: 15;
behavior: none }
.xmenu ul, .xmenu li:hover ul ul, .xmenu li.hover ul ul,{visibility: hidden }
.xmenu li:hover ul, .xmenu li:hover li:hover ul,
.xmenu li.hover ul, .xmenu li.hover li.hover ul,{visibility: visible }

En mijn menu ziet er als volgt uit :

<ul class="xmenu">

<li>BZL</a>
<ul>
<li><a href="wie.html">Lid Worden</a>
<li><a href="priesters.html">Club Lokaal</a>
<li><a href="priesters.html">Het Bestuur</a>
</ul>
<!--enz enz-->
<li>Kalender</a>
<ul>
<li><a href="web.html">Jupiler League</a>
<li><a href="codeguru.html">Beker van België</a>
<li><a href="codeguru.html">Champions League</a>
<li><a href="codeguru.html">Uefa Cup</a>
</ul>
<!--enz enz-->
<li>Informatie</a>
<ul>
<li><a href="web.html">Tickets</a>
<li><a href="codeguru.html">Bus Info</a>
<li><a href="codeguru.html">Het Weer</a>
</ul>
<!--enz enz-->
<li>Foto's</a>
<ul>
<li><a href="web.html">Competitie</a>
<li><a href="codeguru.html">Europees</a>
<li><a href="codeguru.html">Allerlei</a>
</ul>
<!--enz enz-->
<li>Links</a>
<ul>
<li><a href="web.html">1é Klasse</a>
<li><a href="codeguru.html">Officiële Bonden</a>
<li><a href="codeguru.html">Supporters Clubs</a>
<li><a href="codeguru.html">Spelers Sites</a>
<li><a href="codeguru.html">Allerlei</a>
</ul>


Ik zou dus graag een kadertje rond de eerste van 165 op 20 willen zetten met witte achtergrond. De tweede 150,20 de 3é 100,20 de 4é 100,20 en de 5é 135,20. Ik weet niet als dit kan anders moeten ze gewoon allemaal 130,20 zijn. Ook zou ik graag de lijntjes bij de lu's wegkrijgen en als het kan bij mouseover dat de teks een ander kleurtje krijgt.
Zoals gezegd ik weet niet als dat allemaal gaat maar hopelijk wel
Ik ben totaal geen kenner van CSS dus hopelijk kan me iemand helpen?

Groetjes,

Manuel.

[eghie]

Verwijderd schreef op maandag 29 augustus 2005 @ 22:09:
Het lukt me dus niet om er kadertjes er rond te krijgen en kleuren enzo. Voor de rest werkt ie wel.
Dit heb ik tot nu toe voor de style:

Cascading Stylesheet:

.xmenu,{
    white-space: nowrap;
    list-style-type: none;
    margin: 0;
    padding: 0;
    z-index: 10 }
.xmenu {
    width: 100% }
.xmenu a,{
    display: block }
.xmenu li,{
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 11;
    vertical-align: inherit;
    behavior: url(hover.htc);
    width: 130}
.xmenu li {
    float: left }
.xmenu ul,{
    background-color: white;
    list-style-type: none;
    display: block;
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 12 }
.xmenu ul {
    top: 100%;
    left: 0 }
.xmenu li>ul  /* for W3C browsers */  {
    margin: 0;
    top: 3784px;
    left: 3279px}
.xmenu ul li,{
    margin: 0;
    z-index: 13;
    width: 100%;
    float: none }
.xmenu ul li a,{
    width: 100% }
.xmenu ul ul   {
    margin: 0;
    z-index: 14;
    top: 30%;
    left: 100% }
.xmenu ul ul li,{
    z-index: 15;
    behavior: none }
.xmenu ul, .xmenu li:hover ul ul, .xmenu li.hover ul ul,{visibility: hidden }
.xmenu li:hover ul, .xmenu li:hover li:hover ul,
.xmenu li.hover ul, .xmenu li.hover li.hover ul,{visibility: visible }

En mijn menu ziet er als volgt uit :

HTML:

<ul class="xmenu">
    
  <li>BZL</a> 
    <ul>
      <li><a href="wie.html">Lid Worden</a> 
      <li><a href="priesters.html">Club Lokaal</a> 
      <li><a href="priesters.html">Het Bestuur</a> 
    </ul>
    <!--enz enz-->
  <li>Kalender</a> 
    <ul>
      <li><a href="web.html">Jupiler League</a> 
      <li><a href="codeguru.html">Beker van België</a> 
      <li><a href="codeguru.html">Champions League</a> 
      <li><a href="codeguru.html">Uefa Cup</a> 
    </ul>
    <!--enz enz-->
  <li>Informatie</a> 
    <ul>
      <li><a href="web.html">Tickets</a> 
      <li><a href="codeguru.html">Bus Info</a> 
      <li><a href="codeguru.html">Het Weer</a> 
    </ul>
    <!--enz enz-->
  <li>Foto's</a> 
    <ul>
      <li><a href="web.html">Competitie</a> 
      <li><a href="codeguru.html">Europees</a> 
      <li><a href="codeguru.html">Allerlei</a> 
    </ul>
    <!--enz enz-->
  <li>Links</a> 
    <ul>
      <li><a href="web.html">1é Klasse</a> 
      <li><a href="codeguru.html">Officiële Bonden</a> 
      <li><a href="codeguru.html">Supporters Clubs</a> 
      <li><a href="codeguru.html">Spelers Sites</a> 
      <li><a href="codeguru.html">Allerlei</a> 
    </ul>

Ik zou dus graag een kadertje rond de eerste van 165 op 20 willen zetten met witte achtergrond. De tweede 150,20 de 3é 100,20 de 4é 100,20 en de 5é 135,20. Ik weet niet als dit kan anders moeten ze gewoon allemaal 130,20 zijn. Ook zou ik graag de lijntjes bij de lu's wegkrijgen en als het kan bij mouseover dat de teks een ander kleurtje krijgt.
Zoals gezegd ik weet niet als dat allemaal gaat maar hopelijk wel
Ik ben totaal geen kenner van CSS dus hopelijk kan me iemand helpen?

Groetjes,

Manuel.

De groeten hoeven niet onder een post, die doen we elkaar altijd al. En zit de volgende keer ff code tussen [ code] en [ /code] blokken, anders wordt het zo'n zooitje.

met de property border, kun je randen maken om objecten en met border-color en background-color kun je ook dingen die je zoekt. Kijk eens naar die zaken bij w3schools.org.

[ Voor 17% gewijzigd door eghie op 29-08-2005 22:19 ]

[Verwijderd]

het verbaast mij zeer dat dit topic nog open is maar goed.

ik denk dat het het beste is als je eerst wat handleiding over css gaat lezen. en ook zelf wat inzet toont voordat je een topic opent , met de bedoeling dat er een kant en klare oplossing gepresenteerd wordt.

[Pelle]

Dit is toch allemaal wel erg basic hoor... zoek eens met google naar een CSS tutorial ofzo