Sélectionner le bon élément

Bonjour à tous,

J'ai un petit problème qui me pose bien des soucis. Je développe un site via le CMS Drupal. Je recherche à designer un élément précis de ma page auquel je ne peux lui attribuer ni classe ni identifiant.
Voici le code de la page concernée :

[i]<div class="center-wrapper">
    [#red]<div class="panel-panel panel-col-first">[/#]
    [#red]<div class="panel-panel panel-col-last">[/#]
</div>
<div class="panel-panel panel-col-middle">
<div class="center-wrapper">
   [#blue] <div class="panel-panel panel-col-first">
    <div class="panel-panel panel-col-last">[/#]
</div>[/i]

Par défaut, dans le template de mon module, les éléments panel-col-first ont une largeur de 50%. Et moi, je souhaite attribuer aux deux éléments rouges des largeurs de 80% et 20% et cela sans toucher aux propriétes des éléments bleus.

Je n'arrive pas à déterminer une méthode qui me permettrait de toucher les éléments rouges uniquement. Avez vous une idée ?

Merci à tous !
Modifié par sportfly (19 Sep 2011 - 10:43)

Salut,


Passe par le CSS:

.panel-panel panel-col-first{

width:80%;

}

.panel-panel panel-col-last{

width:20%;
}

Bien sûr, ma question tient du CSS. Je me suis peut être mal expliqué :
Ma page possède 4 blocs disposés sur 2 lignes et 2 colonnes. Ces 4 objets possèdent les mêmes classes (voir le code html du premier message).
Et je souhaiterais que :
- les blocs de la première ligne soient disposés en 80%-20% (width)
- les blocs de la deuxième ligne conservent leur propriétés de base c'est à dire 50%-50%

Je ne parviens pas à disposer ces blocs comme je le voudrais.
Merci

@jmlapam : en écrivant ce code, les 4 blocs seront affectés et non ceux de la première ligne uniquement.

au temps pour moi comme disait Verlaine,

mais tu ne peux pas modifier avec un genre de :

<div class="panel-panel panel-col-first[#red]2[/#]">

???

tu peux utiliser le sélecteur CSS "+" pour ne pas cibler le premier par exemple. Ou utiliser la pseudo classe :first-child pour cibler ta première colonne.

first-child pas (re)connu par IE6 attention...
Modifié par jmlapam (19 Sep 2011 - 00:31)

IE6 on s'en balance pas mal aujourd'hui. À moins de faire un site en chinois peut-être.

Merci pour vos réponses.

Ca fonctionne très bien avec :

.center-wrapper:first-child .panel-col-first {
    width: 80%;
}

Merci à tous !
Modifié par sportfly (19 Sep 2011 - 10:42)

Vaxilart a écrit :
IE6 on s'en balance pas mal aujourd'hui. À moins de faire un site en chinois peut-être.

Content que tu ais trouvé ton bonheur sportfly