CSS selector vraagje - Softwareontwikkeling

donderdag 16 april 2009 18:26

Acties:

0 Henk 'm!

Topicstarter

Ik ben een beetje met HTML een CSS aan het klooien en heb voor mijn pagina een menu gemaakt, dit menu ziet er ongeveer als volgt uit.

HTML:

<body id="pagina1">
<ul>
<li><a href="url" class="pagina1">Pagina1</a><li/>
<li><a href="url" class="pagina2">Pagina2</a><li/>
<li><a href="url" class="pagina3">Pagina3</a><li/>
<li><a href="url" class="pagina4">Pagina4</a><li/>
</ul>
<body/>

Is het mogelijk om, met behulp van CSS selectors automatisch voor pagina1 de link van pagina1 te selecteren en vorm te geven, voor pagina2 de link naar pagina2, etc. etc.
Ik weet dat het kan door zoiets als;
#pagina1 .pagina1 a, #pagina2 .pagina2 a, ...{vormgeving}
Maar dan moet ik iedere combinatie apart aangeven en dat zou ik liever niet doen.
Ik heb op de W3C site rondgekeken en dit ziet er veelbelovend uit maar ik weet niet echt hoe ik dat op bovenstaand voorbeeld toe zou kunnen passen.

Hopelijk weet iemand hier meer van.
Bij voorbaat dank.

donderdag 16 april 2009 18:27

Acties:

0 Henk 'm!

disjfa

be

je miost een spatie tussen je url en je class. Content is geen html tag.

En zonder class kan dit niet, als je er nu een spatie tussen zou zetten zou het wel werken

Als je ze als class aanroept ivp id

[ Voor 10% gewijzigd door disjfa op 16-04-2009 18:28 ]

disjfa - disj·fa (meneer)
disjfa.nl

donderdag 16 april 2009 18:33

Acties:

0 Henk 'm!

Ook al Bezet

Topicstarter

disjfa schreef op donderdag 16 april 2009 @ 18:27:
je miost een spatie tussen je url en je class. Content is geen html tag.

Waarom wil ik body toch altijd content noemen.....?
Hoe dan ook, daar gaat het niet om, dit is maar een snel in elkaar gedraaid voorbeeld. Het gaat er om dat ik niet weet hoe ik dit* in de CSS moet doen.

*Automatisch de <a> selecten met een class identiek aan de id van de <body> waar hij in staat.

donderdag 16 april 2009 18:35

Acties:

0 Henk 'm!

Herko_ter_Horst

Aangenomen dat je je bedoelt dat je op verschillende pagina's één van de links anders wil vormgeven kun je een "current" class maken die je per pagina toekent aan de bijbehorende link.

Dus op pagina 1:

HTML:

<ul>
 <li class="current">Pagina 1</li>
 <li>Pagina 2</li>
 <li>Pagina 3</li>
</ul>

En dan op pagina 2:

HTML:

<ul>
 <li>Pagina 1</li>
 <li class="current">Pagina 2</li>
 <li>Pagina 3</li>
</ul>

Je kunt niet met één CSS file dezelfde markup op verschillende pagina's verschillend laten renderen. Je kunt ook geen random lookups doen van andere elementen met die attribute selector, daarvoor heb je JavaScript nodig.

[ Voor 10% gewijzigd door Herko_ter_Horst op 16-04-2009 18:37 ]

"Any sufficiently advanced technology is indistinguishable from magic."

donderdag 16 april 2009 19:01

Acties:

0 Henk 'm!

Ook al Bezet

Topicstarter

Herko_ter_Horst schreef op donderdag 16 april 2009 @ 18:35:
Aangenomen dat je je bedoelt dat je op verschillende pagina's één van de links anders wil vormgeven kun je een "current" class maken die je per pagina toekent aan de bijbehorende link.

Dus op pagina 1:
HTML:
1
2
3
4
5
<ul>
 <li class="current">Pagina 1</li>
 <li>Pagina 2</li>
 <li>Pagina 3</li>
</ul>
En dan op pagina 2:
HTML:
1
2
3
4
5
<ul>
 <li>Pagina 1</li>
 <li class="current">Pagina 2</li>
 <li>Pagina 3</li>
</ul>

Ja, die methode gebruikte ik eerst, ik vind hem echter niet echt elegant. het liefst wil ik de HTML code van iedere pagina zoveel mogelijk hetzelfde houden.

donderdag 16 april 2009 19:07

Acties:

0 Henk 'm!

Xander

Het lijkt me toch de netste oplossing. Ik heb geen idee hoe je die hele website op wilt bouwen, maar een serverside scriptingtaal als PHP of ASP is natuurlijk uitermate geschikt om automatisch die class aan het goede linkje te hangen.

PC specs!---Pulse mee voor GoT!
[22:49:37] <@Remy> ik wil een opblaasbare dSLR :+

donderdag 16 april 2009 19:34

Acties:

0 Henk 'm!

mcDavid

Ook al Bezet schreef op donderdag 16 april 2009 @ 19:01:
[...]

Ja, die methode gebruikte ik eerst, ik vind hem echter niet echt elegant. het liefst wil ik de HTML code van iedere pagina zoveel mogelijk hetzelfde houden.

Andere opties zijn:
- alle items een ID en de css dynamisch maken
- Javascript

Beiden zijn denk ik niet te prefereren boven het bovengenoemde...

donderdag 16 april 2009 21:18

Acties:

0 Henk 'm!

Ook al Bezet

Topicstarter

mcDavid schreef op donderdag 16 april 2009 @ 19:34:
[...]

Andere opties zijn:
- alle items een ID en de css dynamisch maken
- Javascript

Beiden zijn denk ik niet te prefereren boven het bovengenoemde...

Javascript doe ik liever niet, een pagina moet ook zonder zo goed mogelijk werken. Wat bedoel je met dynamische CSS?

Xander schreef op donderdag 16 april 2009 @ 19:07:
Het lijkt me toch de netste oplossing. Ik heb geen idee hoe je die hele website op wilt bouwen, maar een serverside scriptingtaal als PHP of ASP is natuurlijk uitermate geschikt om automatisch die class aan het goede linkje te hangen.

PHP ben ik me ook in aan het verdiepen. had er niet eens an gedacht om dat hiervoor te gebruiken, bedankt.

donderdag 16 april 2009 21:32

Acties:

0 Henk 'm!

Xander

Ook al Bezet schreef op donderdag 16 april 2009 @ 21:18:
[...]

PHP ben ik me ook in aan het verdiepen. had er niet eens an gedacht om dat hiervoor te gebruiken, bedankt.

Het is toch uitermate geschikt voor dit soort dingen.

PHP:

$currentpage = "Pagina 2";
$pages = Array("Pagina 1", "Pagina 2", "Pagina 3", "Pagina 4");
echo '<ul>';
foreach ($pages as $page) {
  echo '<li><a href="url"';
  if ($page == $currentpage) {
    echo ' class="current"';
  }
  echo '>'.$page.'</a></li>';
}
echo '</ul>';

In praktijk zul je die $currentpage en $pages niet rechtstreeks in je php-code kloppen natuurlijk (die $currentpage zal vaak uit en $_GET-variabele komen, $pages uit een database), maar het idee lijkt me duidelijk.

PC specs!---Pulse mee voor GoT!
[22:49:37] <@Remy> ik wil een opblaasbare dSLR :+

donderdag 16 april 2009 23:42

Acties:

0 Henk 'm!

mcDavid

Ook al Bezet schreef op donderdag 16 april 2009 @ 21:18:
[...]

Javascript doe ik liever niet, een pagina moet ook zonder zo goed mogelijk werken. Wat bedoel je met dynamische CSS?

[...]

PHP ben ik me ook in aan het verdiepen. had er niet eens an gedacht om dat hiervoor te gebruiken, bedankt.

Dat je in de <head> een stukje inline CSS zet wat per pagina verandert. Is een andere optie maar ik zie geen voordeel t.o.v. de HTML per pagina veranderen.

Overigens, volgens mij heeft ieder zichzelf respecterend CMS wel zo'n menufunctie ingebouwd. CMS Made Simple weet ik het iig zeker van.