18041 sujets

Questions générales et questions de débutants

Faire un cadre arrondi ou graphique en CSS et XHTML (livre)

J'ai rêvé d'un générateur de div qui convertissait les tableaux en css et xhtml, surtout pour ce qui concerne les bords arrondis, je suivis le mode d'emploie dans le livre css2 j'ai réussi à afficher les mêmes résultats mais lorsque j'ai voulu faire une adaptation je n'y suis pas parvenue. Dans la vielle méthode des tables je faisait un tableau de 3lignes sur 3colonnes, j'obtenais donc 9cellules.la 2ème et la 8ème étaient redimentionnable en largeur. la 4ème et la 6ème en hauteur et la cellule centrale la "5" accueillait le contenu. Dans la technique d'un cadre arrondis j'ai 4images, mon cadre est plus sophistiqué il en comporte 8, si quelqu'un peu m'aider ce serait fantastique, j'attrape déjàn des cheveux blancs, c'est dommage à mon age, parce que ça fait 15jours que je galère
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>cadre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<center>
<br><br>
<table width="200" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td>
			<img src="images/hautgauche.gif" width="18" height="18" alt="" /></td>
		<td>
			<img src="images/hautcentre.gif" width="100%" height="18" alt="" /></td>
		<td>
			<img src="images/hautdroit.gif" width="18" height="18" alt="" /></td>
	</tr>
	<tr>
		<td>
			<img src="images/cotegauche.gif" width="18" height="100%" alt="" /></td>
		<td width="100%" height="100%">Lorem ipsum dolor dolor dolor oh oui c'est ça souffrir mais pourquoi pourquoi donc tant de haine /..(</td>
		<td>
			<img src="images/cotedroit.gif" width="18" height="100%" alt="" /></td>
	</tr>
	<tr>
		<td>
			<img src="images/basgauche.gif" width="18" height="18" alt="" /></td>
		<td>
			<img src="images/bascentre.gif" width="100%" height="18" alt="" /></td>
		<td>
			<img src="images/basdroit.gif" width="18" height="18" alt="" /></td>
	</tr>
</table>
</center>
</body>
</html>
upload/10990-cadrearron.gif
Modifié par yayaskaya* (19 Feb 2007 - 14:31)
yayaskaya* a écrit :
J'ai rêvé d'un générateur de div qui convertissait les tableaux en css et xhtml


Surtout pas. Les tableaux de présentation sont un abus indispensable, qui permet actuellement l'existence des mises en pages full-CSS.

yayaskaya* a écrit :

, surtout pour ce qui concerne les bords arrondis


Non. Ce n'est pas la bonne cible. La cible est: rencoigner les coins arrondis. Le coin arrondi est une sottise de graphiste incompétent quant aux implémentations CSS.


a écrit :
Dans la vielle méthode des tables je faisait un tableau de 3lignes sur 3colonnes, j'obtenais donc 9cellules.


Pourquoi changer si cela marchait avant ? Plutôt que de chercher des astuces CSS qui n'auront pas de valeur ajoutée, il serait préférable de faire la même chose avec des tableaux de présentation accessibles, et de ne pas perdre de temps ici.

a écrit :
ça fait 15jours que je galère
*

Aucun code XHTML CSS ne mérite plus de 30 mn d'attention. Au-delà, il faut le jeter et réfléchir à ses méthodes. Ce qui signifie en général revenir à ce qu'on sait faire, et juste chercher à le faire mieux
Modifié par Laurent Denis (21 Feb 2007 - 09:33)
Florent V. a écrit :
Pour une largeur fluide, ça devient beaucoup plus prise de tête.


Oui, ça fait longtemps que les 30 mn sont passées Smiley lol
Florent V. a écrit :

Pour une largeur fluide, ça devient beaucoup plus prise de tête.



PFFfff... Smiley lol

C'est tellement simple que j'ai presque honte de donner le lien Smiley langue

http://www.clb56.fr/test_css/test_roundcorner/

Alors évidemment si la question c'est de savoir comment se boutique un document html alors ça prend un peu plus de 30 mn. Mais ce n'est pas complètement perdu si ça permet au moins de comprendre qu'un document peut comporter des sections, que les headings <hn> permettent d'indiquer et de hiérarchiser ces sections, que les div permettent de concrétiser ces mêmes sections en vue d'une utilisabilité autre que la seule structuration du document (mise en oeuvre de css par exemple).

pi une fois que t'as compris ben t'as compris... Donc les 30 mn sont à comparer à une éternité de pataugeage html Smiley smile

Et pi après les coins arrondis full css design fluide à largeur limitée et tout le tsouin tsouin ben c'est un claquement de doigt ... Si, si.

Il n'y a qu'un seul truc là dedans. Quand on fait des css c'est qu'on a fait du html. Et si on n'a pas fait de html alors on ne fait pas de css mais très précisemment n'importe quoi. Et cela ne vaut pas que pour les coins arrondis, loin de là...


A propos de <table> :

Pourquoi utiliser <table> si on n'en n'a pas besoin, ni pour le document html, ni pour quoi que ce soit d'autre.
Modifié par Christian Le Bouler (19 Feb 2007 - 15:52)
Christian Le Bouler a écrit :



PFFfff... Smiley lol

C'est tellement simple que j'ai presque honte de donner le lien Smiley langue


Non, désolé.

(Coins dépendant du code HTML / de la classe du premier et du dernier élément du bloc concerné. Bricolage inutilisable en production en dehors des sites persos. Essayez de vendre ça au responsable d'un backoffice un tant soit peu plus complexe qu'un weblog... Smiley cligne )
Modifié par Laurent Denis (19 Feb 2007 - 16:50)
Laurent Denis a écrit :


Non, désolé.

(Coins dépendant du code HTML / de la classe du premier et du dernier élément du bloc concerné.


Ben ce n'est pas si vrai que ça je trouve :

Concernant le premier élément du bloc concerné :

C'est une chose que je trouve depuis longtemps remarquable. Avec quelle aisance les gens arrivent à concevoir, à envisager, des zones graphiquement repérables dans un rendu à l'écran (et là je ne parle pas de coins arrondis du tout, un simple background-color suffit) sans envisager une seule seconde que cette zone repérable doit bien correspondre à quelque chose dans le document lui même. Ce genre d'effet visuel n'est pas en général une pure fantaisie complêtemment irrationnelle et sans fondement.
Et ce à quoi cela correspond dans le document c'est bien des sections qui d'un point de vue de toute bête et toute basique qualité de conception doivent avoir un heading de niveau adéquat.
Par rapport à chaque section ce heading sera unique dans son niveau de généralité, si c'est un <h3> alors ce sera le seul <h3> du bloc concerné.
Et il sera évidemment en début de flux.

Cet élément est donc parfaitement caractérisé et utilisable d'un point de vue css sans aucune utilisation de class ou id. Contenu généré ou pas, car s'il y a du contenu généré alors c'est le contenu du <hn> qui sera entre autre généré et non le fait que tel <hn> de niveau déterminé ouvre telle séquence de flux dans le document.

Et si cet élément <hn> n'est pas présent alors là question n'est pas comment on fait mais qu'est ce qu'on a fichu.

Donc à tout le moins nos magnifiques zones graphiquement repérables, sauf à être de purs produits surréalistes devraient correspondre à quelque chose comme ceci :

1.

...

... Un contenu ...

...


2.

<hn>Heading de la section comprennant le contenu concerné</hn>
...

... Un contenu ...

...


Et pour rendre cela utilisable
3.

<div class="conteneur_ensemble_section">
<hn>Heading de la section comprennant le contenu concerné</hn>
...

... Un contenu ...

...
</div><!-- fin .conteneur_ensemble_section -->


Et pour rendre cela encore plus utilisable
4.

<div class="conteneur_ensemble_section">
<hn>Heading de la section comprennant le contenu concerné</hn>

<div class="contenu_section">
...

... Un contenu ...

...
</div><!-- fin .contenu_section -->
</div><!-- fin .conteneur_ensemble_section -->


Concernant les coins arrondis, juste à titre d'exemple Smiley lol , on vient à partir d'un code d'une banalité complète, d'une rigueur complète, d'un minimalisme complet et d'une absence de bricolage complet de régler la question pour 3 coins sur 4.



Oui, oui je sais il en faut 4 de coins ... Ba un petit div ou span vide dans ce cas et l'affaire est réglée Smiley smile
Evidemment après s'être vraiment posé la question de savoir s'il y en a réellement besoin de cet élément vide. A cela on ne peut répondre a priori, donc on ne peut pas répondre "non impossible" a priori.
Modifié par Christian Le Bouler (19 Feb 2007 - 23:27)
Merci pour le lien christian !

j'ai lu ton exemple attentivement...

Je me met au CSS pour la reprogramation de mon site... il y a du boulot
Merci pour vos messages, difficile de trouver le bout du tunnel, d'ailleurs j'ai fais un truc à la hache, si vous voulez bien y jetter un oeil... Smiley confus 
<!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" xml:lang="fr" lang="fr">
<link href="cadre.css" rel="stylesheet" type="text/css" />

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>
     CADRE.
    </title>
  </head>
  <style>
#conteneur {
	width: 50%;
}
body {
	margin: 0;
	padding: 5px;
	font: 0.8em Verdana, Arial, Helvetica, sans-serif;
}
p {
	margin: 0 0 10px;
}
#content {
	padding-left: 20px;
	padding-right: 20px;
	background: #FFF;
}
#top {
	position: absolute;
}
#topleft {
	top: 0;
	left: 0;
	width: 18px;
	background: url(images/hautgauche.gif) no-repeat;
}
#topcenter {
	top: 0;
	background: url(images/hautcentre.gif) repeat-x;
}
#topright {
	top: 0;
	width: 18px;
	background: url(images/hautdroit.gif) no-repeat;
}
#left {
	float: left;
	top: 25px;
}
#sidecenterleft {
	background: url(images/cotegauche.gif) repeat-y;
}
#right {
	float: right;
	top: 25px;
}
#sidecenterright {
	background: url(images/cotedroit.gif) repeat-y;
}
#bottom {
	clear: both;
}
#bottomleft {
	bottom: 0;
	left: 0;
	width: 18px;
	background: url(images/basgauche.gif) no-repeat;
}
#bottomcenter {
	bottom: 0;
	background: url(images/bascentre.gif) repeat-x;
}
#bottomright {
	bottom: 0;
	width: 18px;
	background: url(images/basdroit.gif) no-repeat;
}
#conteneur, #topleft, #topright, #bottomleft, #bottomright {
	position: absolute;
	margin: 0;
}
#topcenter, #top, #topleft, #topright, #bottom, #bottomleft, #bottomcenter, #bottomright {
	right: 18px;
	height: 18px;
}
  </style>
  <body>
  <!------ Début Conteneur ------>
    <div id="conteneur">
		<!-- top border-->
			<div id="top">
				<div id="topleft"></div>
				<div id="topcenter"></div>
				<div id="topright"></div>
			</div>
		<!-- End top border-->
		 <!-- Left side-->
			  <div id="left">
				<div id="sidecenterleft"></div>
			  </div>
		 <!-- End Left side--> 
		 <!-- Right side-->
			  <div id="right">
				<div id="sidecenterright"></div>
			  </div>
		 <!-- End Right side-->
			 <!-- Main-->
			  <div id="content">
				<p>Même avec contenu central court, l'utilisation des flottants combinés à l'utilisation de la propriété <code>clear:both;</code> sur le pied de page, permet à ce dernier de "pousser" le conteneur pour intégrer les éléments en float. Le pied de page est correctement positionné à la suite des parties en float les plus longues.</p>
				<p>Si le contenu central est plus long que les menus latéraux, il "pousse" également le pied de page vers le bas.</p>
				<p>Même avec contenu central court, l'utilisation des flottants combinés à l'utilisation de la propriété <code>clear:both;</code> sur le pied de page, permet à ce dernier de "pousser" le conteneur pour intégrer les éléments en float. Le pied de page est correctement positionné à la suite des parties en float les plus longues.</p>
				<p>Si le contenu central est plus long que les menus latéraux, il "pousse" également le pied de page vers le bas.</p>
			  </div>
			 <!--End Main-->
			 
			 <!-- Bottom border  -->
			  <div id="bottom">
				<div id="bottomleft"></div>
				<div id="bottomcenter"></div>
				<div id="bottomright"></div>
			  </div>
	  		<!-- End Bottom border -->
    </div>
 <!------ End Conteneur ------>
  </body>
</html>


un peu d'indulgence pour les débutants Smiley sweatdrop
yayaskaya* a écrit :
j'ai oublié de remercier Laurent Denis pour ces remarques constructives, elles m'ont beaucoup aider Smiley rolleyes
A voir ton code, c'est en tout cas bien dommage que tu ne les aies pas écoutées...
j'essaie plusieurs pistes mais effectivement je n'ai pas encore exploiter complètement la leur. C'est vraiment pas simple. Smiley sweatdrop
Florent V. a écrit :

Un peu de tact, au passage ? Smiley cligne


OK, quand on en est rendu à ce point de démolition en règle du html alors la solution de ne pas mettre de coins arrondis du tout est clairement à envisager.

c'est de deux choses l'une.

. Soit on fait l'effort d'apprendre à maitriser la mise en oeuvre des css sur un code html cohérent.

. Soit on ne fait rien et on passe à autre chose. De toute façon il y a de quoi faire pour s'occuper par ailleurs utilement et agréablement.

Mais quoiqu'il en soit la génération spontanée de html sauvage en masse (qu'il s'agisse de div, span, td et pourquoi pas b, coucou les nifty corners...) pour quelque chose dont on peut très bien se passer, les coins arrondis ça ne sert en fait à rien. Et bien cela c'est vraiment n'importe quoi.
Modifié par Christian Le Bouler (20 Feb 2007 - 21:45)
Sujet clos
Aller à