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.

[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