Css style in meervoud op groep toepassen via enkele aanroep

zaterdag 4 februari 2012 15:16

Acties:

0 Henk 'm!

Topicstarter

Ik wil een css style toepassen op 40 items.
Op dit moment gebeurd dat doordat in het css bestand de stylen worden toegepast op a href.
Dit brengt het nare gevolg met zich mee dat ik geen a href meer kan toevoegen die de style niet krijgt.

De oplossing die ik ken is om 40x een class aan te spreken, maar is het niet mogelijk dit te groeperen, een enkele class aan te spreken en dan de style per individu toe te passen?

Voorbeeld:
Afbeeldingslocatie: http://i40.tinypic.com/v79uu1.png

Afbeeldingslocatie: http://i40.tinypic.com/v79uu1.png

Dus een link krijgt een grijze achtergrond, deze wordt uitgerekt en de tekst gecentreerd. Boven en onder is wat transparante ruimte. Als je dit in een div zou gooien krijg je natuurlijk een enkel groot grijs blok, wat niet de bedoeling is.

Alternatieve suggesties zijn ook welkom. In de goede richting kom ik er met google zoeken wel uit.

zaterdag 4 februari 2012 15:18

Acties:

0 Henk 'm!

Vos

AFCA

Zet ze in een overkoepelende div en geef de linkjes binnen enkel die div de betreffende stijl mee?

En als je de link een margin mee geeft wordt het niet 1 grijs blok hoor..

Vb.

code:

.test a {
  background:#ccc;
  width:200px;
  display:block;
  margin:4px 0;
}

code:

<div class="test">
<a href="#">hjasjasj</a>
<a href="#">hjasjasj</a>
<a href="#">hjasjasj</a>
</div>

Wat is de rode 'link' in je voorbeeld?

[ Voor 58% gewijzigd door Vos op 04-02-2012 15:37 ]

#36

zaterdag 4 februari 2012 15:20

Acties:

0 Henk 'm!

Verwijderd

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.test a {
color: #060;
}

a {
color: #06F
}
</style>
</head>

<body>

<div class="test">
<a href="">Hoi</a>
<a href="">Hoi</a>
<a href="">Hoi</a>
</div>

<a href="">Hoi</a>

</body>
</html>

zaterdag 4 februari 2012 15:21

Acties:

0 Henk 'm!

Verwijderd

Om even toe te voegen: groepeer de links in een container en spreek deze links aan door hun container:

.test a { } beinvloed alle <a> tags binnen klasse "test".

zaterdag 4 februari 2012 15:35

Acties:

0 Henk 'm!

Saturnus

Topicstarter

Thanks Vos en ItsNotRudy, dat werkt.

Met het rode geef ik een omschrijving van wat zich in de lijst bevindt, meer doet het niet.

zondag 5 februari 2012 11:28

Acties:

0 Henk 'm!

geert1

Je hebt al een oplossing voor de stijling, maar je zou ook kunnen nadenken over de inhoudelijk beste opzet van je html. De bedoeling van html is namelijk niet alleen dat je er stijling aan kunt hangen, maar juist dat het de informatie in je pagina zo precies mogelijk beschrijft en structureerd. Dit wordt over het algemeen semantiek genoemd.

Uit je voorbeeld maak ik op dat de bovenste rode balk een titel is die de links eronder omschrijft. Een meer correcte html-opzet zou dan kunnen zijn:

HTML:

<div class="links">
  <h2><a href="...">De titel van het blok</a></h2>
  <ul>
    <li><a href="...">Een linkje lorem ipsum</a></li>
    <li><a href="...">Een linkje dolor</a></li>
    <li><a href="...">Een linkje sit amet</a></li>
    <li><a href="...">Een linkje consecutetur</a></li>
  </ul>
</div>

Dit lijkt misschien allemaal extra code, maar met de juiste css-stijling is dit wel een nette methode. Het beschrijft namelijk dat de bovenste link een overstijgende waarde heeft boven de anderen, terwijl de andere linkjes inhoudelijk aan elkaar verbonden worden door ze samen in een lijst (ul) te plaatsen. Zo voeg je dus structuurinformatie toe aan je document, die Google kan gebruiken voor betere indexering, en ook voorleesbrowsers (voor blinden en slechtzienden bijvoorbeeld) hebben er baat bij. Daarnaast wordt je code beter begrijpelijk voor jezelf en anderen, omdat het meer beschrijvend is opgezet.

Mocht je dit interessant vinden (eigenlijk zou iedereen die iets op het web doet er kennis van moeten nemen), dan is hier een mooie tutorial te vinden: http://learn.shayhowe.com/html-css/terminology-syntax-intro/ (wordt nog periodiek uitgebreid). Succes!

[ Voor 11% gewijzigd door geert1 op 05-02-2012 11:31 ]

zondag 5 februari 2012 11:58

Acties:

0 Henk 'm!

R4gnax

geert1 schreef op zondag 05 februari 2012 @ 11:28:
Je hebt al een oplossing voor de stijling, maar je zou ook kunnen nadenken over de inhoudelijk beste opzet van je html. De bedoeling van html is namelijk niet alleen dat je er stijling aan kunt hangen, maar juist dat het de informatie in je pagina zo precies mogelijk beschrijft en structureerd. Dit wordt over het algemeen semantiek genoemd.

Uit je voorbeeld maak ik op dat de bovenste rode balk een titel is die de links eronder omschrijft. Een meer correcte html-opzet zou dan kunnen zijn:

Begin je over semantiek en dan ga je headings in een table of contents zetten. Doe dat eens niet.

Gebruik dan liever:

HTML:

<nav>
  <strong>De titel van het blok</strong>
  <ol>
    <li><a href="...">Een linkje lorem ipsum</a></li>
    <li><a href="...">Een linkje dolor</a></li>
    <li><a href="...">Een linkje sit amet</a></li>
    <li><a href="...">Een linkje consecutetur</a></li>
  </ol>
</nav>

Of misschien zelfs:

HTML:

<nav>
  <dl>
    <dt>De titel van het blok</dt>
    <dd><a href="...">Een linkje lorem ipsum</a></dd>
    <dd><a href="...">Een linkje dolor</a></dd>
    <dd><a href="...">Een linkje sit amet</a></dd>
    <dd><a href="...">Een linkje consecutetur</a></dd>
  </dl>
</nav>

zondag 5 februari 2012 19:04

Acties:

0 Henk 'm!

geert1

@R4gnax: Je gaat een beetje te kort door de bocht. Als het bijvoorbeeld gaat om een lijst van bronnen onder een artikel, met daarboven de titel "Bronnen", dan klopt het gebruik van een header wel degelijk. Wikipedia doet het zelf bijvoorbeeld ook zo, en zij gebruiken ook een header voor de titel "inhoud" bij de inhoudsopgave. Is ook niks mis mee, en zo zijn er veel meer voorbeelden.

Binnen goede semantiek is altijd ruimte voor discussie en persoonlijke voorkeur. Jouw voorbeelden zijn ook prima, en afhankelijk van de situatie beter of slechter. Daarover gaan twisten wordt alleen maar bekvechten om niks. Zolang een ontwikkelaar er in elk geval mee bezig is en er over nadenkt, dan is er voortschrijdend inzicht en ben je altijd beter bezig dan een willekeurige html-soep te bereiden

[ Voor 8% gewijzigd door geert1 op 05-02-2012 19:07 ]

Pagina: 1

Reageer

Onderwerpen