[CSS]Angle arrondi pour une balise <div>

**clb56** · 02/08/2007, 06h41

Envoyé par 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 -->

Je note surtout que le souci c'est ce que je disais :

Envoyé par clb56

J'aimerai être sur que tu tiens réellement compte de ce qui est réellement écrit.

Parce que le code que tu donnes, et qui n'est rien d'autre que celui d'un doublage de conteneur effectivement pas très heureux

... N'est pas celui que j'avais écrit qui, lui, est bien :

Code :

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

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

c'est à dire en dehors de l'utilisation du dernier élément du flux identifié un code tout à fait analogue au 2ème code que tu présentes :

Code :

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

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

La vraie différence c'est que tu produis au final une pure construction de <div> pour laquelle il faudra que le débutant comprenne en quoi cela peut correspondre à un quelconque balisage html structurant.

C'est méthodologiquement une erreur, celle là même qui fait que l'on continue à lire un peu partout qu'il faut remplacer les tableaux par des <div>

Pour ma part je commence avec le vrai balisage structurant, celui qui doit être présent dans le document. Je montre ensuite comment les balises <div> peuvent être mise en place dans le document html en cohérence avec le balisage déjà existant et pas au petit bonheur en fonction d'envies cosmétiques des css.

Sinon

Code :

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

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

Mmm, je sais bien que les spécifications autorisent <div> à contenir du simple balisage inline ou même du texte anonyme. Mais bon, "Idéalement" la balise dont la fonction est de structurer le flux de niveau inline sans détermination particulière existe déjà, c'est <p>

**Shinuza** · 02/08/2007, 06h54

Et c'est bien pour ça j'indique qu'il faut utiliser un heading

cf Le lien que j'ai posté : http://verybadman.free.fr/block/

**clb56** · 02/08/2007, 07h05

Alors dans ce cas ta solution est exactement la même que la mienne simplement tu remplaces l'utilisation du dernier élément identifié par un doublage de conteneur sur le <hn>.

Je ne voies donc pas trop pourquoi pour en arriver là il a fallu que tu contestes tout ce que j'ai écrit

Sur ta solution, ben si le dernier élément du flux n'est pas identifiable comme tel pourquoi pas

Encore faut il être clair sur le fait qu'il s'agit bien d'un doublage de conteneur.

Mais bon je sais d'expérience que le plus souvent cette identification est possible

**mimagyc** · 02/08/2007, 08h38

Merci de prendre a coeur mon sujet ...

Voila ou j'en suis rendu http://mimagyc.free.fr/sitero/index3.php

Merci à Bisûnûrs ,
(Et oui j'ai opter pour une solution non imagé )

J'ai toujours mon superbe problème de la hauteur de ma partie pub qui ne prend pas toute la hauteur du contenue ...

**Bisûnûrs** · 02/08/2007, 09h09

Envoyé par mimagyc

J'ai toujours mon superbe problème de la hauteur de ma partie pub qui ne prend pas toute la hauteur du contenue ...

Il y a de nombreux posts sur le forum qui explique l'utilisation de height:100%.

Un élément ne peut avoir une hauteur en pourcentage que si son élément parent a une hauteur définie, et ce jusqu'à l'élément le plus haut dans la hierarchie si nécéssaire : html.

**mimagyc** · 02/08/2007, 09h17

D'accord, mais etant donner que le "height" parent on va dire n'as pas de height fixe non plus, etant donné que il s'agrandit en fonction des donnée qu'il va afficher ...

**clb56** · 02/08/2007, 10h14

Avec des documents aussi mal fichus tu ne risques pas d'aller loin je le crains

bon

1. Tu séquences le texte "Fonctionnement technique ... ... sous leur nom d'utilisateur." avec plusieurs <p>

2. Tu peux aussi faire précéder ce texte par un <hn>, ça ne mord pas ces bêbêtes là tu sais

3. Tu regroupes le tout dans un <div> auquel tu donnes un identifiant.

Après on verra, c'est très simple en fait, il suffit de tricher

**mimagyc** · 02/08/2007, 10h35

Je n'ai aps du tout comprendre une fois de plus ,
en fait si j'utilise pas les balise <p> c'est pour ne pas avoir ce résultat la

http://mimagyc.free.fr/sitero/index3.php

Tricher!

**Bisûnûrs** · 02/08/2007, 10h48

Tu devrais commencer ta feuille de style par :

Code :

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

1
2
3
4
*{
   margin:0;
   padding:0;
}

**mimagyc** · 02/08/2007, 11h00

c'est fait ....

**clb56** · 02/08/2007, 11h12

Petite modification de la css pour ton exemple trois, j'ai enlevé les déclarations propriétés/valeurs inutiles.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
div#contenue {
background-color:#7e96a1;
}
div #autre {
float:left;
background-color:#7e96a1;/* pas vraiment utile mais bon */
width:130px;
 
}
div#texte {
margin-left:130px;
padding-left:15px;
background-color:#d1e2e9;
}

Envoyé par Bisûnûrs

Tu devrais commencer ta feuille de style par :

Code :

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

1
2
3
4
*{
   margin:0;
   padding:0;
}

Je ne suis pas sur que ce soit une bonne idée pour un débutant que d'initialiser ainsi les valeurs par défaut des agents utilisateurs. En fait je ne suis pas sur que ce soit utile pour qui que ce soit d'ailleurs

**mimagyc** · 02/08/2007, 11h21

Merci beaucoup au personne qui m'ont aidé,

( margin => marge externe ; padding => marge interne ) ...

Merci pourtour,
j'apprends avec mes erreurs , donc merci d'avoir prix du temps pour moi.

PS : j'ai remarquer que si la partie pub etait plus grande que la partie contenue, et bien la partie contenue ne s'agrandissai pas non plus ...

**Bisûnûrs** · 02/08/2007, 11h26

Envoyé par clb56

Je ne suis pas sur que ce soit une bonne idée pour un débutant que d'initialiser ainsi les valeurs par défaut des agents utilisateurs. En fait je ne suis pas sur que ce soit utile pour qui que ce soit d'ailleurs

Vu les différences de marges par défaut selon les navigateurs, pour les balises form, p, et hn entre autres, si on tient à faire un site "au pixel près" je pense que c'est une bonne idée de procéder comme tel, surtout si on ne connaît pas toutes les différences de feuille de style par défaut de toutes les balises entre tous les navigateurs.

Après, je code de cette manière et cette méthode n'engage que moi.

Envoyé par mimagyc

Ha ,
j'ai remarquer que si la partie pub etait plus grande que la partie contenue, et bien la partie contenue ne s'agrandissai pas non plus ...

La balise hn n'existe pas ... On parle de hn pour dire h1 à h6. Sachant de plus que ce sont des balises doubles.

**mimagyc** · 02/08/2007, 11h52

Bizarrement je connaissait les balise <h1> etc. mais j'ai voulu faire bete comme mes pied et suivre les instruction a la lettre ...

http://mimagyc.free.fr/sitero/index.php

la pub étant plus grand que le contenue, ca donne ca

**clb56** · 02/08/2007, 12h09

Code :

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

1
2
3
4
5
6
7
 
div#contenue {
background-color:#7e96a1;
overflow:auto; /* cela créé un contexte de formatage qui empèche l'élément flottant de sortir de son conteneur, non reconnu par IE */
 
zoom:1; /* donne le haslayout au conteneur pour IE, cela entraine un bug qui permet d'obtenir le même résultat qu'un contexte de formatage pour les navigateurs standards qu'est ce qu'il faut pas inventer hein ? :))*/
}

**mimagyc** · 02/08/2007, 12h14

http://mimagyc.free.fr/sitero/index.php

la partie en dessous le contenue reste de la meme couleur que la partie pub

Merci.

**clb56** · 02/08/2007, 12h17

Bon pour gérer le fait que ce qui est stylé en barre latérale gauche soit plus long que la partie texte principale mieux vaut la css suivante :
Avant tout créer une image bg_contenue.jpg de 130px de large et mettons 5px de haut de couleur #7e96a1 et

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
div#contenue {
overflow:auto;
zoom:1;
background:#d1e2e9 url(bg_contenue.jpg) repeat-y left top;
}
div #autre {
float:left;
background-color:#7e96a1;/* redevient utile si css active et images non chargées suivant la couleur du texte */
width:130px;
 
}
div#texte {
margin-left:130px;
padding-left:15px;
background-color:#d1e2e9;/* plus vraiment utile cette fois */
}

**mimagyc** · 02/08/2007, 12h44

Merci beaucoup ca marche

Mais bien sur il a fallu une image,
et je voudrait proposer sur le site en partie admin ou tu peu changer la couleur du site,
donc une solution sans image serait superbe!
mais je veut pas en demander de trop

Merci!

Edit : c'est possible sans image?

*Désolé pour le double post...

**clb56** · 02/08/2007, 13h22

Très bien si ça te convient, je pense quand même que tu devrais faire un petit détour par une formation de base en html pur et dur, si j'ose l'expression

Partir comme tu le fais du rendu souhaité et non de la logique de construction, structuration, organisation du document avant tout rendu, risque fort de t'handicaper pour la maitrise des feuilles de style.

Bon courage

**mimagyc** · 02/08/2007, 14h27

A vrai dire je préfèrerais une solution sans images ...

Je sais que je ne connais pas bien le css, mais je par du principe que c'est en faisant que l'on apprend, .. bon bien sur je bute, et c'est la que j'ai besoin de votre aide

.
de toutes facon je le referai ce site, mais j'apprends que comme ca moi

[CSS]Angle arrondi pour une balise <div>

CSS

Discussions similaires

Partager

Partager