CSS Petit éclaircissement

Marsh Posté le 27-09-2005 à 16:45:42

Coucou,

Actuellement j'avais un truc de ce style là pour faire mes barres avec des coins arrondi:

Code :

<ul class="newsbarre">
<li class="newshautdroite"><img src="/images/newsdr.bmp" width="5" height="20" alt="bd" /></li>
<li class="newshautdroite">15/09/05</li>
<li class="newstitre"><img src="/images/newsga.bmp" width="5" height="20" alt="bg" /></li>
<li class="newstitre">Edito</li>
</ul>

Code :

.newsbarre {
font: 12px/20px normal arial, helvetica, sans-serif;
padding: 0px;
margin: 0px;
background-color: #8F8F45;
color: #FFF;
height: 20px;
overflow:hidden;
}
.newsbarre .newshautdroite {
float:right;
}
.newsbarre .newstitre {
float:left;
}
.newsbarre li {
display: inline;
list-style-type: none;
}

Mais ayant mis en place un systéme de changement de skin,
il faudrais plus que les 2 images soit dans le background

j'ai donc fait ceci:

Code :

<ul class="newsbarre">
<li class="newshautdroitebis"> </li>
<li class="newshautdroite">15/09/05</li>
<li class="newstitrebis"> </li>
<li class="newstitre">Edito</li>
</ul>

Et en changant le CSS

Code :

.newsbarre .newshautdroite,.newsbarre .newshautdroitebis {
float:right;
}
.newsbarre .newshautdroitebis {
background-image:url(/images/newsdrred.bmp) no-repeat;
width:5px;
}
.newsbarre .newstitre,.newsbarre .newstitrebis {
float:left;
}
.newsbarre .newshautdroitebis {
background-image:url(/images/newsgared.bmp) no-repeat;
width:5px;
}

Mais était ce judicieux??

Si oui cool..mais sa m'étonnerais

Sinon ...

Merci... :hello:

Reply

Marsh Posté le 27-09-2005 à 16:45:42

Reply

Marsh Posté le 27-09-2005 à 16:47:40

C'est absolument pas judicieux, c'est un pur bricolage insipide, reposant sur une utilisation non-sémantique d'élément, sur une utilisation incorrrecte d'entité (le   qui n'a complètement rien à foutre ici) et le seul moyen de faire des coins arrondis est celui-ci

Message cité 1 fois

Reply

Marsh Posté le 27-09-2005 à 16:51:34

Salut,

si je peux me permettre une petite remarque... le format BMP est absolument à bânir pour du WEB.

Reply

Marsh Posté le 27-09-2005 à 16:55:57

En plus ouais :jap:

Et le no-repeat qui squatte dans un background-image [:johneh]

Reply

Marsh Posté le 27-09-2005 à 16:59:12

Citation :

C'est absolument pas judicieux, c'est un pur bricolage insipide, reposant sur une utilisation non-sémantique d'élément, sur une utilisation incorrrecte d'entité (le   qui n'a complètement rien à foutre ici) et le seul moyen de faire des coins arrondis est celui-ci

C'est pour cela que je demandais votre aide...voulant avoir un site le mieux possible, je suis plus a quelques heures de boulot prés...
Loin de la perfection, mais là cette question me titiller depuis longtemps..

Oki , lol je prend tous cela en considération... oui le no-repeat erreur de ma part en enlevent -image c'est mieux

Reply

Marsh Posté le 27-09-2005 à 17:04:55

FlorentG a écrit :

C'est absolument pas judicieux, c'est un pur bricolage insipide, reposant sur une utilisation non-sémantique d'élément, sur une utilisation incorrrecte d'entité (le   qui n'a complètement rien à foutre ici) et le seul moyen de faire des coins arrondis est celui-ci

Enfin c'est pas top, car sans javascript sa ne marche pas!!! :heink:

Reply

Marsh Posté le 27-09-2005 à 17:06:54

On s'en fout. Sans JS, on aura une boîte normale, ce qui ne gêne rien... L'important, c'est d'accéder à l'information...

Reply

Marsh Posté le 27-09-2005 à 17:07:09

Sauf que si ca marche pas c'est pas bien grave
Et que on aura pas a toucher au code HTML lorsque dans ... disons quelques mois ... les premiers navigateurs css 3 seront presents

Reply

Marsh Posté le 27-09-2005 à 17:08:57

Oui c'est sur...

Reply

Marsh Posté le 27-09-2005 à 18:41:26

Bon et si j'utilise ceci:

border-radius: 7px;
-moz-border-radius: 7px;

Dacord sous IE sa marche pas...mais au moins j'aurais un code souple et prés pour le CSS3 et maybe IE7.....

C'est quand la sortie de ce dernier?

Reply

Marsh Posté le 27-09-2005 à 18:41:26

Reply

Marsh Posté le 27-09-2005 à 20:21:07

a quoi il sert le - devant moz-border-radius ?

Message cité 1 fois

Reply

Marsh Posté le 27-09-2005 à 20:29:52

Je sais pas...

j'ai pas testé en mettant que border-radius: 7px;

Enfin c'est bien sympas ce truc... :jap:

Reply

Marsh Posté le 27-09-2005 à 22:10:05

omega2 a écrit :

a quoi il sert le - devant moz-border-radius ?

C'est parce que c'est un attribut propriétaire. Théoriquement, les attributs proprios doivent commencer par un -. Donc tu peux faire si tu développes ton propre browser un :

#pouet {
-omega2-pouet-radius: 2em;
}

Et ça ne foirera pas au validateur, vu que c'est un truc proprio. Ca sert aux développeurs de navigateur la possiblilité de tester des technologies comme les CSS3, sans foirer au niveau de la validation...

Reply

CSS Petit éclaircissement

Sujets relatifs:

Leave a Replay