Discussion :

[mimagyc]

Bonjour,
je cherche a faire des angle arrondie pour une balise DIV ...
j'ai parcouru les tutoriels du site, mais sans succès.

Merci.

[Strix]

Salut

Avec images

Sans width ni height fixe, tu construits 9 divs :

1 | 2 | 3
---------
4 | 5 | 6
---------
7 | 8 | 9

• dans les "cases" 1, 3, 7 et 9 : Tu places tes angles en fixant largeur et hauteur
• dans les "cases" 2, 4, 6 et 8 : Tu places tes droites horizontales (où tu fixes la hauteur) et verticales (où tu fixes la largeurs)
• 3 représente ton contenu

Avec un width fixe, tu construits 5 divs :

___1
---------
2 | 3 | 4
---------
___5

• Tous les éléments ont un width fixe

Sans images

Plusieurs types de coins te seront proposés : Stu Nicholls | CSSplay | Krazy Korners
Il faut faire afficher la source pour avoir le CSS et le HTML

[mimagyc]

Merci pour ta réponse, donc en effet , moi c'est sans images, seulement avec des background-color .

mais j'ai pas compris même avec le site ....

Voila ce que j'ai pu faire avec cela :
http://mimagyc.free.fr/sitero/

Mais il n'y as pas une façon plus facile a faire?
parce que je voudrait avoir un angle plus grand, donc je dois rajouter des ligne si je comprend bien ...

Avec image avant même que je poste, voila ce que j'avais fait http://mimagyc.free.fr/sitero2/


http://mimagyc.free.fr/sitero2/
sur celui ci ,je le fait avec les image, mais le souci c'est que la partie droite comme vous le voyez est décaller en bas ...

http://mimagyc.free.fr/sitero2/Style.css

merci.

[edit]
J'avance petit a petit ^^

Donc la tout marche pour le mieux; mon seul souci est que je voudrais que la partie pub ne dépasse pas la partie contexte, et que lorsque le contexte est plus grand que la pub, et bien que la couleur en background descende en meme temp que le contexte ....
Comment faire?

(doit-je faire un autre poste?)

Merci.

[clb56]

Salut

Avec image,

Tu pars du document html avec du vrai contenu et du vrai code pertinent.

Soit une section du flux, au hasard :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<p>Blabla</p>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<p>Blublu</p>

Bon comme c'est une section il faut l'annoncer par un heading de niveau adéquat (h1, h2, h3...)

Donc

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<hn>Telle section</hn>
<p>Blabla</p>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<p>Blublu</p>

Comme la section forme un flux de niveau block on utilise un div pour y regrouper ses éléments

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<hn>Telle section</hn>
 
<div class="contenu_section">
<p>Blabla</p>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<p>Blublu</p>
</div><!-- Fin .contenu_section -->

Comme l'ensemble <hn> + <div class="contenu_section"> est bien aussi un fragment de flux de niveau block, on le regroupe aussi dans un div.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div class="conteneur_section">
<hn>Telle section</hn>
 
<div class="contenu_section">
<p>Blabla</p>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<p>Blublu</p>
</div><!-- Fin .contenu_section -->
</div><!-- Fin .conteneur_section -->

Au passage les div mis en place sont déduits uniquement par rapport à la structuration du document et pas du tout par rapport à un stylage déterminé.

Les coins arrondis maintenant, de quoi à t'on besoin comme support de css ?
Ben de rien de plus que le code déjà écrit en fait. Il suffit juste d'identifier le dernier élément du flux de niveau block :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div class="conteneur_section">
<hn>Telle section</hn>
 
<div class="contenu_section">
<p>Blabla</p>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<p id="last_of_telle_section">Blublu</p>
</div><!-- Fin .contenu_section -->
</div><!-- Fin .conteneur_section -->

Pour la css ça donnera

.conteneur_section > image_coin 1
.conteneur_section hn > image_coin 2
.contenu_section > image_coin 3
#last_of_telle_section > image_coin 4

[Shinuza]

Wow, avant de se lancer dans ce genre de bricolage, la question est de savoir si ton bloc est extensible en largeur et en hauteur ou pas.

Si non, tu crées une porte coulissante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<div class="container">
<!-- Emplacement pour header -->
	<div class="content">
	</div>
</div>

Container comporte la partie du haut donc deux coins arrondis, et content contient les coins du bas. Tes coins seront fais de manière à prendre en compte une éventuelle couleur de fond et tes blocs seront parfaitement extensibles en hauteur. Bien sur tu utilise une seule image pour le haut et le bas. Cela s'applique en largeur ou en hauteur.

Si oui, dans un mode cumulé, alors tu vas faire des coins au cas par cas.

[mimagyc]

Je pense mettre mal exprimé dans mon dernier message, comme vous pouvez le voir sur http://mimagyc.free.fr/sitero2/index.php , j'ai réussi a faire mes angle correctement je pense ... (si vous pensez que non , dites le moi ^^, mais il est extensible en hauteur et largeur la) .

Mon souci maintenant , ce la div ou il y a écrit "pub" qui ne s'étend pas sur toute la hauteur de la div ou il y a le texte a droite.

Merci.

[clb56]

Je pense mettre mal exprimé dans mon dernier message, comme vous pouvez le voir sur http://mimagyc.free.fr/sitero2/index.php , j'ai réussi a faire mes angle correctement je pense ... (si vous pensez que non , dites le moi ^^, mais il est extensible en hauteur et largeur la) .

Oui bien sur, il n'y a pas de problème là dessus, le souci c'est plutôt le nombre très conséquent d'éléments vides et n'ayant rien particulièrement à faire dans le document html.
Imagines que tu changes un jour de design, toi même tu vas te dire qu'il devraient disparaitre tous ces <span></span> vides puisqu'ils n'existent que pour être support de tes coins arrondis et ne sont en rien déduits de la structuration du document html lui même.

PS : ma propre solution est évidemment valable aussi en design fluide (tout autant que fixe).

[mimagyc]

Ha d'accord, je comprend pourquoi tu me disais ca ^^


... mais malgré tes explication , je ne vois pas .. comment faire , selon ton explication , je dois mettre une div pour chaque coin?
aurait tu un exemple a me montrer?

Merci.

[clb56]

Oui, puisque j'ai pas mal travaillé là dessus.

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

je dois mettre une div pour chaque coin?

Ce n'est pas du tout comme ça que les choses se formulent et s'appréhendent.

On part du html et seulement du html, on utilise les div uniquement dans leur fonction principale qui est d'être un conteneur d'un fragment de flux de niveau block, c'est à dire de l'enchainement de plusieurs éléments de type block formant un tout pour le rédacteur et donc une section déterminée dans le document.

Ensuite et seulement ensuite on aborde la question des css. Et dans le cas spécifique des coins arrondis on s'aperçoit que la plupart du temps tout peut être mis en place sans la moindre difficulté sur la base du code html précédemment rédigé.

[SpaceFrog]

sinon y'a ça ... sans image !!!
ça pousse
http://www.cssplay.co.uk/boxes/krazy.html

[mimagyc]

Je pense avoir bien commencer ...
http://mimagyc.free.fr/sitero2/index2.php
Seulement , bete comme je suis, la couleur du header n'est pas une couleur web.
donc je dois mettre une image en background en dessous mes deux coin ... ?

Merci.

edit : erf, le texte Ro-site est en dessous ...

[SpaceFrog]

vraiment tu ne veux pas d'une solution sans image ?

[mimagyc]

Non, les angles ne sont pas assez grand je trouve, et je trouve ca un peut trop long pour ci peut .

Pour ma partie pub, je n'arrive toujours pas a la faire descendre jusque en bas ... ^^

[Nasky]

Un excellent site regroupe plein de scripts Ajax mais aussi CSS pour la mise en page et utilitaires en tout genre. www.ajaxrain.com ... et en particulier en séléctionnant le tag "Corners" (http://www.ajaxrain.com/tagcloud.php), t'auras quelques scripts tout faire pour avoir ce que tu veux... avec le petit effet web 2.0 évidemment

Nas'

[Bisûnûrs]

Tu as toujours ça sinon :

http://developpez.net/forums/showpos...7&postcount=14

[Shinuza]

Juste histoire de dire qu'il n'y a strictement aucun bricolage.

Si, regarde l'implementation que tu suggères, ça impose d'avoir 4 élements en plus du contenu.

J'ai conteneur et un contenu

[clb56]

Si, regarde l'implementation que tu suggères, ça impose d'avoir 4 élements en plus du contenu.

certainement pas ! Et je ne vois pas d'où tu sors ça !!!

Alors tu précises s'il te plait ! ...

Ta solution ne concerne que la très pauvre option "design à largeur fixe" et reste donc d'un intérêt très limité AMHA.

[Shinuza]

certainement pas ! Et je ne vois pas d'où tu sors ça !!!

Alors tu précises s'il te plait ! ...

Ta solution ne concerne que la très pauvre option "design à largeur fixe" et reste donc d'un intérêt très limité AMHA.

Ta solution impose une structure au bloc.

C'est adaptable, en largeur ou en hauteur, dans le cas on fais les deux, autant passer par un système comme http://www.spiffycorners.com/

Je propose une solution au cas par cas, j'ai un gros doute quand à la possiblité de son bloc de s'adapter dans les deux sens, donc ma solution fonctionne très bien.

Dans le cas contraire, et quitte à ajouter du contenu inutile, autant passer par une solution sans image cf plus haut.

En plus de cela, je propose une solution avec une seule image, ce qui est plus optimisé.

[clb56]

Ta solution impose une structure au bloc.

Non elle ne fait que confirmer la structure en terme de fragment de flux de niveau block. Elle n'impose ni n'invente quoi que ce soit.

C'est adaptable, en largeur ou en hauteur, dans le cas on fais les deux

Rien compris, mais bon, quoi qu'il en soit ce que je propose est adaptable à tout.

quitte à ajouter du contenu inutile,

Dans ce que je propose il n'y a strictement aucun contenu inutile.


J'aimerai être sur que tu tiens réellement compte de ce qui est réellement écrit. Parce que là je n'ai pas vraiment l'impression qu'on parle de la même chose.

[Shinuza]

Des coins arrondis, j'en fais depuis suffisament longtemps pour savoir qu'il y'a un soucis dans ton truc.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div class="conteneur_section">
<div class="contenu_section">
<hn>Telle section</hn>
<!-- Contenu -->
<p id="last_of_telle_section">Blublu</p>
</div><!-- Fin .contenu_section -->
</div><!-- Fin .conteneur_section -->

On est d'accord que c'est le code minimal pour avoir les coins arrondis avec ta solution?

C'est déja suffisant réducteur comme ça. Déja parce que tu utilises un id, et ensuite la structure est trop peu souple.

Une solution extensible en largeur ET en hauteur qui permet d'avoir un header, et qui peut être décliné de plein de manières.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
		<div class="block">
			<div class="top"><span>Idealement top est un élement header (hx)</span></div>
			<div class="contenu">
			</div>
		</div>

Appliquée ici, avec diverses tailles de block

http://verybadman.free.fr/block

Le code css n'est pas factorisé, mais ça montre bien les possibilitées du système. Idéalement on utiliserait deux images au lieu de quatres, et on peut aisement aller jusqu'a 5000 pixels de long sans soucis, c'est du png.