HTML/CSS: Navigatieitems deels rechts, wat doe ik fout?

[SvMp]

Ik heb een horizontale navigatiebalk gemaakt met een aantal items. Deze komen achter elkaar, van links naar rechts. Enkele items wil ik helemaal aan de rechter kant hebben. Tussen de items links en rechts moet een stukje ruimte zitten.

De HTML die mijn PHP-scripts genereren ziet er als volgt uit:

code:

<div id="navigatiebalk">

   <span id="navigatiearea_left">
      <span class="navigatieitem" onClick="location='nieuws.php';">Nieuws</span>
      <span class="navigatieitem" onClick="location='woningnood.php';">Over woningnood</span>
      <span class="navigatieitem" onClick="location='corporaties.php';">Corporaties</span>
      <span class="navigatieitem" onClick="location='index.php?sectie=4';">Volkshuisvesting Monitor</span>
   </span>

   <span id="navigatiearea_right">
      <span class="navigatieitem" onClick="location='privileges.php?sectie=1&taak=110';">Privileges</span>
      <span class="navigatieitem" onClick="location='instellingen.php';">Instellingen</span>
      <span class="navigatieitem" onClick="location='logout.php?sectie=1&taak=110';">Uitloggen</span>
   </span>

</div>

De CSS die daar betrekking op heeft is:

code:

/* *****************
   * Navigatiebalk *
   ***************** */
 
div#navigatiebalk {
    width: 758px;
    margin: 0px;
    padding: 0px;
    padding-top: 3px;
    padding-bottom: 3px;
    border: solid;
    border-width: 1px;
    background: #7a0000;
}

div#navigatiebalk span.navigatieitem {
    font: bold 11px arial;
    color: #ffffc0;
    border-right: solid;
    border-right-width: 1px;
    border-color: #000000;
    margin: 0px;
    padding: 3px;
    padding-left: 8px;
    padding-right: 8px;
    background: #7A0000;
    cursor: pointer;
}

div#navigatiebalk span.navigatieitem:hover { background: #b00000; }

div#navigatiebalk span#navigatiearea_left {

}

div#navigatiebalk span#navigatiearea_right {
   right: 0px;

}

Dit doet echter niet wat ik wil. Het rechter gedeelte komt namelijk precies achter het linker gedeelte. Met "right: 0" geef ik aan dat de rechterkant tegen de rechter kant van de div moet komen waar het zich allemaal in af speelt, maar dit gebeurt niet!

Voor zover ik weet zorgt right er voor dat ik kan positioneren t.o.v. de rechter kant en de div heeft een absolute lengte van 758 pixels.

Wat doe ik fout?

[ Voor 12% gewijzigd door SvMp op 21-09-2004 17:21 ]

[André]

Als je right wil gebruiken moet je de position op absolute zetten. Of je gebruikt ipv right een float:right.

[faabman]

en gebruik ipv een span met een onclick een anchor met een href

[SvMp]

André schreef op 21 september 2004 @ 17:21:
Als je right wil gebruiken moet je de position op absolute zetten. Of je gebruikt ipv right een float:right.

Heb ik al geprobeerd.

Position absolute levert op dat het rechter stuk helemaal aan de rechter kant van het browservenster komt, buiten de div van de navigatiebalk. Deze div heeft namelijk niet de volledige breedte van het browservenster.

Float: right geeft een juiste horizontale positie, maar het rechter gedeelte staat een stukje lager

[André]

Dan moet je de omliggende div op positiobn:relative zetten
En voor dat float probleem: zet je linkerkant dan op float:left

[ Voor 35% gewijzigd door André op 21-09-2004 17:27 ]

[SvMp]

André schreef op 21 september 2004 @ 17:27:
Dan moet je de omliggende div op positiobn:relative zetten
En voor dat float probleem: zet je linkerkant dan op float:left

In de div#navigatiebalk "position: relative;" zetten werkt inderdaad!

Maar hoe komt dat? Ik was in de veronderstelling dat position: relative de default is voor alle elementen.

[André]

svdmeer schreef op 21 september 2004 @ 17:53:
[...]


In de div#navigatiebalk "position: relative;" zetten werkt inderdaad!

Maar hoe komt dat? Ik was in de veronderstelling dat position: relative de default is voor alle elementen.

Daar heb je gelijk in. Maar voor deze dingen is het toch nodig dat je het even aangeeft

[Verwijderd]

Euh, 'position:static' is de default. Tenzij de UA style sheet het overschrijft is het gelijk aan de initial value aangegeven door het W3C.

En svdmeer, wat semantiek zou wel van pas komen