[Résolu]Question philosophique sur un code CSS

Bonsoir,
Pour avoir des bordures de tous les côtés qui s'adaptent sur mon site (Etirable) j'ai fais ce qui suit, et j'aimerai savoir si je peux laisser ainsi d'un point de vue accéssibilité ?????
CSS:

/* propriétés communes à l'ensemble des 4 coins */
#Haut { background:url(../images/cont_H.jpg) 0% 0% repeat-x;}

#Bas{ background:url(../images/cont_B.jpg) 0% 100% repeat-x;}
#Gauche{ background:url(../images/cont_G.jpg) 0% 100% repeat-y;}
#Droite{ background:url(../images/cont_D.jpg) 100% 0% repeat-y;}
#cont_comm{ padding:15px; margin-bottom:2px; }
#bg_HG, #bg_HD, #bg_BG, #bg_BD {height:18px; width:18px; background-repeat: no-repeat; font-size:1px; /* correction d'un bug IE */}
#bg_HG {background: url(../images/cont_HG.jpg);}
#bg_HD {float: right; background: url(../images/cont_HD.jpg);}
#bg_BG {background: url(../images/cont_BG.jpg);}
#bg_BD {float: right; background: url(../images/cont_BD.jpg);}

HTML :

<div id="premier">
                  <div id="Haut">
	            <div id="Bas">  
	            <div id="Gauche">
	            <div id="Droite">  
               <div id="bg_HD"></div><div id="bg_HG"></div>  	
<div id="cont_comm">  
[[[[[[[[[[[[[[ MON CONTENU ]]]]]]]]]]]]]]]]]]]
</div>
	     <div id="bg_BD"></div><div id="bg_BG"></div>
	</div> <!-- Fin Droite -->
	</div> <!-- Fin Gauche -->
     </div> <!-- Fin Bas -->
     </div><!-- Fin Haut -->
 </div>

Voilà, est-ce raisonable de faire ainsi ????

Merci
Modifié par Express (27 Jul 2008 - 06:52)

Express a écrit :
Bonsoir,
Pour avoir des bordures de tous les côtés qui s'adaptent sur mon site (Etirable) j'ai fais ce qui suit, et j'aimerai savoir si je peux laisser ainsi d'un point de vue accéssibilité ?????

Waouh !

10 <div> imbriqués pour obtenir un résultat graphique ?
Hum, c'est marrant mais j'aurais tendance à dire : "non, non, et encore non !"

Le code que tu produis est pire qu'un tableau de mise en page mal fait, c'est dire...

Mais je t'invite à nous montrer ce que tu veux obtenir.
Sait-on jamais

D'ailleurs, en passant, voici un article qui pourrait t'intéesser :
- Arrêtons de remplacer systématiquement les tableaux par des div !

Cygnus a écrit :

.............
Mais je t'invite à nous montrer ce que tu veux obtenir.
Sait-on jamais
.............]

Je sais,je sais ...
Mon site spip beta

Le contour flouté en plein millieu de la page d'accueil
Modifié par Express (25 Jul 2008 - 20:26)

OK...
Bon, il faut avouer aussi que tu ne recherches pas la simplicité.
Ceci dit, il y a quand même moyen de faire moins pire.

Déjà tu crées une image de 1000px sur 1000px (par exemple) qui contiendra ton fond. L'idée c'est qu'elle soit suffisamment grande en largeur et hauteur pour que tu n'aies pas besoin de la répéter.

Ensuite tu appliques à ton premier bloc parent cette image en background (calée en haut à gauche)
Puis tu imbriques un second bloc dans le premier qui prendra comme arrière-plan cette image (calée en bas à droite)
Là, déjà tu devrais commencer à y voir plus clair. Il ne devrait alors que te rester les coin en bas à gauche et en haut à droite à placer.

Voilà, c'est une idée qui limite un peu les dégâts.
Mais je te conseille de faire une recherche car il me semble que clb avait trouvé une solution plus élégante.

Ok, je vois à peux près, mais qu'est-ce qui est gênant dans le code que je donne, pour bien comprendre ... ??

Express a écrit :
Ok, je vois à peux près, mais qu'est-ce qui est gênant dans le code que je donne, pour bien comprendre ... ??

Rien il est juste moche et pas très sémantique.

Salut,

Ouaaaow aussi... Tout ce code pour si peu !

Concernant le code, tu comprends bien que si tu fais ça plusieurs fois dans ta page, tu vas alourdir le code, et qui plus est il deviendra plus difficilement maintenable. Quand au coté sémantique, ces balises ne contiennent finalement aucun contenu, alors que tu pourrais utiliser une partie des balises du contenu que contient ton cadre, quitte à ajouter quelques balises génériques, pour obtenir la même chose.

Une petite explication plus détaillée pour réaliser quelque chose de plus simple !

Je ne voudrai véxer persone par mes écris, mais vous me présentez tous des exemples ou le background est de même réfèrence que le contour,or moi je souhaiterai que ce ne soit pas le cas, donc déjà ca change la donne ... ensuite ,pour bien comprendre mes erreurs et éviter de les reproduirent je me suis dis que j'allais vous demandés conseils, or ce n'est pas avec ce genre de réponse que je peux comprendre quoi que ce soit :

[quote=Changaco]Rien il est juste moche et pas très sémantique.[/quote]

autant ne rien répondre... ca ne m'aide pas du tout, bien au contraire, je dois continuer à poser des questions.Ensuite, pour répondre à

Mikachu a écrit :
Salut,
Ouaaaow aussi... Tout ce code pour si peu !
Concernant le code, tu comprends bien que si tu fais ça plusieurs fois dans ta page, tu vas alourdir le code.......

Ce code n'est pas reproduit, il entour la somme total des articles publiés sur mon portail, donc 1 seul fois ... donc le code n'est pas alourdit, seulement pour rester dans mon optique d'avoir une bordure complète diffèrente de mon background, puis je rester ainsi ou dois-je revoir le point de vue graphique de cette partie et changer ? dois-je passer en tableau, quelle est votre point de vue sur ce détail ?
Encore une fois, je ne demande qu'à comprendre, mais pour l'instant, j'ai pas réusis avec les liens donnés ,ne correpondant pas à mon objectif .

Peut-être pourriez vous plus simplement répondre à cette question , comment feriez-vous pour avoir une bordure arrondis aux 4 coins avec un rendu dégradé vers l'intérieur ou l'extérieur et un fond de couleur différente ?
Modifié par Express (26 Jul 2008 - 14:52)

Étant donné que les fonds multiples ne sont pas encore implémentés tu as besoin de 8 éléments pour faire ce que tu souhaites.
Cependant tu peux réduire ce nombre à 4 grâce à la technique exposée par Cygnus.
Enfin pour rendre ton code plus sémantique tu pourrais mettre des <span> (élément neutre) à la place des <div> (élément qui définit une division du document) même si ça n'a pas d'impact réel.

Bonjour à toi!

Je vais essayer d'apporter ma pierre à l'édifice:

Je pense que le tutorial proposé par Mikachu te donne la solution. Moi je ferais comme ça, mais ma solution apporte aussi beaucoup de code:

#boite {height: 18px;}
.gauche {float:left;width:18px;height:18px;background: url(cont_HG.jpg) top left no-repeat;}
.droite {float:right;width:18px;height:18px;background: url(cont_HD.jpg) top right no-repeat;}
.centre {overflow:hidden;height:18px;}

Et le HTML:

<div id="boite">
<span class="gauche"></span>
<span class="droite"></span>
<span class="centre"></span>
</div>

Le background de centre serait une image d'1 pixel de largeur et de 18 pixel de hauteur, répétée horizontalement, et représentant un dégradé vertical.

Il faudrait encore définir les marges, bordures, padding, etc. De plus, il faudrait peut-être utiliser un élément type clearer.

Il faut reconnaitre qu'il y a beaucoup de code juste pour donner un fond à une boîte. Oriente tes recherches sur les différentes possibilités d'obtenir des coins arrondis (c'est bien ce dont il s'agit), regarde ce site.

Bonne chance!

Bonjour,

Pour un bloc fluide en hauteur et largeur, avec des coins et bordures en images, et la nécessité d'utiliser de la transparence (donc pas d'images de fond se recouvrant), la technique la plus simple consiste à utiliser un tableau à quatre cellules:

<table class="box">
	<tr class="top">
		<td class="left">
			Ici le contenu du bloc.
		</td>
		<td class="right"></td>
	</tr>
	<tr class="bottom"><td class="left"></td><td class="right"></td></tr>
</table>

Trois cellules vide pour une de contenu ça n'est pas terrible, mais c'est déjà mieux que le typique tableau à 9 cellules.

Pour les images de fond il suffit d'appliquer le principe décrit ici (déjà pointé par Mikachu je crois). On peut travailler avec une image unique, ou avec plusieurs images, au choix.

Express a écrit :
Je ne voudrai véxer persone par mes écris, mais vous me présentez tous des exemples ou le background est de même réfèrence que le contour,or moi je souhaiterai que ce ne soit pas le cas, donc déjà ca change la donne

Je crois que personne n'a été vexé par ta réponse. Par contre, personne ne l'a comprise non plus. Le background «de même référence» que le contour?

Express a écrit :
Peut-être pourriez vous plus simplement répondre à cette question , comment feriez-vous pour avoir une bordure arrondis aux 4 coins avec un rendu dégradé vers l'intérieur ou l'extérieur et un fond de couleur différente ?

Pour la bordure dégradée arrondi, je crois que la réponse a déjà été donnée. Mais qu'entends-tu par «un fond de couleur différente»? Aucune couleur n'est «différente» dans l'absolu, elle est forcément différente de quelque chose.
Si tu nous donnais un exemple de ce que tu veux réaliser (à quoi ça ressemble graphiquement), ce serait peut-être plus simple. Si c'est ce qu'on peut voir sur la page suivante, eh bien là encore tu as toutes les cartes en main.

Pour information, ce que l'on voit sur http://beta.nouvellesduweb.com/ peut être réalisé avec le code HTML suivant:

<div class="box">
	<span class="deco-1"></span>
	<span class="deco-2"></span>
	<div class="box-inner">

		Ici le contenu de la boite.

	</div><!-- .box-inner -->
</div><!-- .box -->

et une seule image de fond, ou quatre images de fond séparées, aux choix (ici, une image unique marchera très bien).

PS: Battyboy, si je ne me trompe tu proposes une boite de hauteur fixe. Dans ce cas, on peut faire plus simple: il suffit d'utiliser deux éléments imbriqués. Mais ça ne correspond pas à la demande d'Express
Modifié par Florent V. (26 Jul 2008 - 17:08)

Florent V. a écrit :
........
Pour information, ce que l'on voit sur http://beta.nouvellesduweb.com/ peut être réalisé avec le code HTML suivant:

<div class="box">
	<span class="deco-1"></span>
	<span class="deco-2"></span>
	<div class="box-inner">

		Ici le contenu de la boite.

	</div><!-- .box-inner -->
</div><!-- .box -->

et une seule image de fond, ou quatre images de fond séparées, aux choix (ici, une image unique marchera très bien).
..........

Je ne comprend votre explication et avec une image, je ne sais pas faire, désolé ( mais si vous avez un lien à me proposé pour des explications...), je vais regarder de plus près les liens fournis et apprendre un peux plus la css
Modifié par Express (26 Jul 2008 - 17:54)

Alors là faudrait peut-être arrêter de chercher la petite bête...

Essaie toutes les solutions proposées avec un navigateur vocal et tu verras que celle que tu utilises déjà est BEAUCOUP mieux. Peut-être des spans à la place des divs, mais je vois pas trop bien pourquoi.

Quand à l'utilisation d'une image de 1000x1000 pixels, les 56k vous remercieront. Et pour les tableaux... ben venant de toi Florent ça me surprend.

Hello SiDi,

Merci pour tes remarques, mais elles me semblent un peu rapides. J'aurais quelques points à corriger et remarques à faire...

SiDi a écrit :
Alors là faudrait peut-être arrêter de chercher la petite bête...

Apprendre à écrire un code un peu plus propre, je ne crois pas que ce soit chercher la petite bête. C'est de l'autoformation.

SiDi a écrit :
Essaie toutes les solutions proposées avec un navigateur vocal et tu verras que celle que tu utilises déjà est BEAUCOUP mieux.

Franchement? Elles sont toutes plus ou moins équivalentes sur ce plan là. Le «beaucoup mieux» me semble erroné, et l'emploi des capitales peu opportun.
(Si tu en doutes, je t'invite à faire les tests avec un lecteur d'écran dont tu parles. )

SiDi a écrit :
Peut-être des spans à la place des divs, mais je vois pas trop bien pourquoi.

Les SPAN seraient restrictifs ici. Un span ne peut pas être un conteneur pour autre chose que des éléments de type en-ligne (et donc essentiellement du texte, court de préférence).

SiDi a écrit :
Quand à l'utilisation d'une image de 1000x1000 pixels, les 56k vous remercieront.

Dans mon article déjà indiqué plusieurs fois dans ce sujet, l'image suivante fait 887 sur 1191px, et pèse 5,86Ko. Notons que si j'avais pris le temps de l'optimiser correctement, elle aurait fait 1,2Ko (testé à l'instant).

Histoire d'en rajouter une couche, voici la bordure dégradée d'Express en 1200x3000px: 8,7ko. Ça reste un peu lourd, mais on peut descendre dans les 4ko si on n'a pas besoin d'une image aussi grande.
L'image:

SiDi a écrit :
Et pour les tableaux... ben venant de toi Florent ça me surprend.

J'utilise des tableaux de mise en forme quand des impératifs de mise en forme l'exigent. La structure que je proposais avec un tableau de 4 cellule peut être vaguement reproduite avec des DIV, mais de manière beaucoup moins fiable. Fiabilité moindre, gain d'accessibilité minime ou nul... je ne vois pas l'intérêt de se passer d'un tableau dans le cas que j'évoquais (à savoir, la nécessité d'avoir des images translucides qui ne se recoupent pas).
Par contre si on peut travailler avec des images opaques se recouvrant en partie, il devient tout à fait possible d'utiliser autre chose qu'un tableau, et c'est le sens de mon deuxième exemple de code HTML.

Express a écrit :
avec une image, je ne sais pas faire, désolé ( mais si vous avez un lien à me proposé pour des explications...)

Le lien a déjà été donné 2 fois (trois avec mon précédent message). Il suffit d'étudier le code des exemples.

On utilise la même image en background de plusieurs éléments, et on utilise abondamment background-position pour afficher en fond d'un élément donné une partie de l'image (le coins haut gauche, ou haut droit, ou bas gauche, ou bas droit, voire le centre).

Ok, il me semblai avoir compris mai je n'étais pas sûr....meci.

Toutefois si je peut me permettre, l'utilisation de plusieurs images est mieux qu'une seule non ? car dans le cas d'un bloc étirable, il faut pouvoir s'adapter au grandes résolutions , un de mes pc à un 24" en 1980*1240, et si je doit faire une image pour cette résolution MAX, elle va peser 10Ko ... non ? (j'en conviens, cette résolution est rare, mais elle existe ...il faut penser au petites comme aux grandes ! )
Modifié par Express (27 Jul 2008 - 06:58)

Express a écrit :
l'utilisation de plusieurs images est mieux qu'une seule non ?

Dans l'absolu, non. Une seule image, c'est un seul appel au serveur (au lieu de trois ou quatre ou cinq), et ça peut jouer sur les performances pour des sites à fort trafic. Bien sûr, mieux vaut deux images de quelques ko plutôt qu'une unique image de 50 ko.

Utiliser plusieurs images sera utile si on pense avoir un contenu de hauteur très importante, par exemple plus de 1500 ou 2000 pixels (avec l'image que je donne plus haut, la hauteur max du contenu sera d'un peu moins de 3000px). Si on fait plusieurs images pour un bloc de largeur fluide, il faudra une image pour la bordure de gauche (répétée en hauteur), une image pour la bordure de droite (répétée en hauteur), et pour le haut et le bas (coins et bordures) on pourra utiliser deux blocs vides imbriqués, et une image unique de dimensions 1200px sur 100px (sur le modèle de l'image que je donne plus haut), par exemple.

Express a écrit :
car dans le cas d'un bloc étirable, il faut pouvoir s'adapter au grandes résolutions , un de mes pc à un 24" en 1980*1240, et si je doit faire une image pour cette résolution MAX, elle va peser 10Ko ... non ? (j'en conviens, cette résolution est rare, mais elle existe ...il faut penser au petites comme aux grandes ! )

Si je donne une largeur de 2250px à la fenêtre de mon navigateur, ton bloc div#page sur http://beta.nouvellesduweb.com/ fait 1195px de large. Et l'image que je propose ci-dessus fait 1200px de large. Donc ça tient.
Ensuite, rien ne t'interdit de placer un max-width: 1600px ou quelque chose du genre sur l'élément BODY si ça te semble préférable.

Bon, on pourrait s'arrêter pendant des heures sur tel ou tel détail... mais dans l'ensemble le message est le suivant: si tu veux te former efficacement à l'intégration web, apprends à faire des découpages avec le moins d'éléments possibles (même si dans la pratique ce ne sont pas toujours les solutions les plus minimalistes que l'on retiendra), et apprends à te servir de background-position.

Salut,

Quand je dis BEAUCOUP mieux, j'évoque bien entendu l'utilisation du tableau. Çà me parait pas très sympa d'avoir à lire 2 ou 3 cellules vides pour avoir du contenu, sur un site qui se veut codé proprement.*

Pour la taille de l'image.. mea culpa... j'ai jamais réussi à obtenir si petit avec une si grosse résolution

SiDi a écrit :
Quand je dis BEAUCOUP mieux, j'évoque bien entendu l'utilisation du tableau. Çà me parait pas très sympa d'avoir à lire 2 ou 3 cellules vides pour avoir du contenu, sur un site qui se veut codé proprement.

Pas très sympa, mais pas tellement gênant non plus. Les deux gros problèmes avec les tableaux sont:
- les tableaux imbriqués à outrance;
- le non-respect du sens de lecture du tableau (de gauche à droite et ligne par ligne).

Les cellules vides ne sont pas un gros problème d'accessibilité. Donc je maintiens que ton «beaucoup» est très exagéré. On peut dire qu'éviter de faire un tableau avec quelques cellules vides est légèrement mieux pour l'accessibilité, mais pas capital.

SiDi a écrit :
Salut,

Quand je dis BEAUCOUP mieux, j'évoque bien entendu l'utilisation du tableau. Çà me parait pas très sympa d'avoir à lire 2 ou 3 cellules vides pour avoir du contenu, sur un site qui se veut codé proprement.

Un petit rappel de lecture ne me semble pas inutile : [Coup de gueule 3] Maléfiques tableaux !

SiDi a écrit :
Pour la taille de l'image.. mea culpa... j'ai jamais réussi à obtenir si petit avec une si grosse résolution

C'est tout le problème de l'optimisation...