Utiliser div pour faire un trait?

[Gribouille26]

Salut,

Je cherche a faire un trait sur ma page...

Je sais ça peux sembler étrange, mais je voudrais simplement faire une barre horizontale dans ma page sans utiliser <hr>!

J'ai fait un calque que j'ai remplit de noir mais je ne parvient pas à le réduire à 2px!!!

Je ne sais plus comment faire, si vous avez une idée...

Voilà la page avec le pb: ici

Et la page bonne(mais <hr>): ici

[Loupilo]

Je vais regarder, mais tout d'abord, bravo. Bravo pour ce site et son sujet.

Et, qu'est ce qui ne vas pas avec <hr> ?

[Gribouille26]

Je ne sais plus trop, mais on m'a dit de laisser tomber les <hr>.

La raison?... euh.... me souviens plus!

Mais de toute façon,

j'aimerai savoir comment faire un calque de 2-3 px, stp.

Nb: merci pour les compliments, mais ce n'est pas mon asso (celle d'amis )

Modifié 28 Avril 2004 par Gribouille26

[Americas]

<div style="width:400px;height:1px;background-color: #FF0000;font-size:0;"></div>

Tu fais varier le width et le height à ta convenance.

ça te va ?

[Loupilo]

Bon, voilà ce que je viens de taper, et j'ai testé ; ça marche.

Dans le CSS :

#barre {

height:3px;

background-color:#000;

width:80%;

text-align: center;

position:absolute;

bottom:30px;

}

Dans le HTML :

<div id="barre"> </div>

++

[Gribouille26]

.barre {
position:absolute;
margin-top:408px;
width:700px;
margin-left:30px;
height:2px;
background: #000000;
}

En fait Americas a donné la réponse, un peu cachée:

font-size:0

Merci

Modifié 28 Avril 2004 par Gribouille26

[Americas]

et oui... l'attribut font-size est important

<!--

.barre {

position:absolute;

margin-top:408px;

width:700px;

margin-left:30px;

height:2px;

font-size:0;

background: #000000;

}

-->

</style>

[Denis]

Je ne comprends pas pourquoi tu voudrais te passer des <hr>... ça me semble une très mauvaise idée.

L'élément a une valeur sémantique très forte. Ce que tu essaie de faire avec ton div, c'est comme si tu essayais de te passer des <p> pour utiliser des <div> à la place, ou si tu voulais utiliser des <p class="titre"> au lieu des <h1>.

Il en résulterait un appauvrissement de la valeur sémantique de tes contenus et tous les agents utilisateurs alternatifs aux navigateurs tradionnels en souffriraient.

[Monique]

Bonjour Gribouille,

Le bloc div que tu veux faire n'aura aucun sens

La quête du sens

Mais il arrive que l'on ait besoin de regrouper des éléments à des fins de mise en page. C'est là qu'interviennent les calques ou <div>. Cet élément est à utiliser quand il n'y a rien d'autre à quoi se raccrocher, ce qui est somme toute assez rare. En effet, il existe souvent un conteneur déjà présent.

extrait d'une page d'OpenWeb : Y'a des calques qui s'perdent

Des balises sont prévues pour différents types de contenu, elles permettent de le structurer en titres, paragraphes... elles sont à privilégier dans tous les cas.

[Denis]

Toute la question de la sémantique Web (à ne pas confondre avec le Web sémantique comme nous le rappelle Fabrice Bonny dans l'humeur d'OpenWeb) mériterait probabement d'être approfondie... existe t-il de tels documents sur le Hub ? Je n'en ai pas encore trouvé.

[Americas]

Mais dans quel sens vous allez ?

Gribouille veut faire une ligne toute simple avec la balise DIV.

Sur son écran ça marche... et cette méthode lui permet d'obtenir des résultats plus efficaces et plus jolis qu'avec la balise HR.

Alors je ne vois pas où est le problème

[Denis]

Je crois que nous avons besoin de clairifier certaines choses. Nous aurions du commencer par ça, je m'excuse de ne pas l'avoir fait.

Elle servira à quoi cette ligne ? Elle est purement décorative ou elle sert de délimiteur entre deux sections ?

Si ce n'est que décoratif, attribuer une bordure à un <div> (ou tout objet de type bloc contenant l'information) fait amplement l'affaire parce que l'on parle d'un élément décoratif qui ne revêt aucune valeur sémantique. C'est purement de l'ordre des considérations de design et ça doit se passer dans la CSS. Si c'est pour séparer des contenus, donc structurer l'information, alors là, le <hr> devient important parce que la valeur du trait qui ne saurait être restitué convenablement sous tous les agent utilisateurs conservera tout de même un sens de frontière entre les deux sections sous tous les envronnements.

Suis-je plus clair ? Je m'excuse pour la confusion créée si c'est le cas.

[LaurentDenis]

Comme le rappelle Denis, hr est l'élément tout désigné pour créer une séparation entre des sections.

Il est vrai qu'il n'est pas aisément stylable. Pour trouver de l'aide à ce sujet, voir http://www.sovavsiti.cz/css/hr.html

Le meilleur compromis me semble de :

- placer avant tout des hr là où il faut (entre les grandes sections de la page : en-tête, contenu, menus, pied); C'est très agréable pour les utilisateurs de navigateurs textes.

- les cacher en CSS avec display:none (ou visibility:hidden)

- utiliser CSS pour générer des bordure-top et des bordure-bottom, ou éventuellement des background-image en bottom repeat si on veut des séparations graphiques plus évoluées mais sur des éléments ou des div existants. S'ils n'existent pas, c'est signe que la séparation ne s'impose pas, ou que la structure de la page n'est pas bonne.

cela dit, hr n'a... rien de sémantique du tout, dans la mesure où le XHTML 1.x est "plat" c'est à dire ne distingue pas des niveaux de structuration de texte emboîtés. C'est juste le minimum vital de balisage présentatif conservé en XHTML : il en fallait quand même un peu

Modifié 29 Avril 2004 par LaurentDenis

[Gribouille26]

Bon, à priori, tout le monde est Ok avec les <hr>, je ne sais plus j'ai tiré cette info qu'il fallait les éviter....

Je ne voyait pas trop la diférence en visuel, et plus habitué aux div, j'ai voulut faire comme ça.

Je comprend maintenant l'utilité des hr dans les navigateurs comme Lynx (on m'en avait déjà parlé...)!

On peut les cacher pour les autres navigateurs?

On peut aussi faire apparaitre un seul côté de la bordure d'un calque?

Comment fait-on

[Loupilo]

Au lieu de mettre "border : 1px solid #000;", tu mets "border-left : 1px solid #000;", et juste ta bordure de gauche sera touchée par le style.

++

[Gribouille26]

Ok, merci bien.

Et pour les cacher:

les cacher en CSS avec display:none (ou visibility:hidden)

Je choisit quoi?

[Monique]

Bonjour,

Je préfère visibility: hidden

L'élément n'est pas visible avec un navigateur graphique mais reste présent et rempli son rôle de séparation pour les navigateurs texte (et vocaux).

[Denis]

Je donnais récemment dans un autre sujet une différence entrre les deux. L'explication convient parfaitement à ce cas-ci :

http://www.webmaster-hub.com/index.php?sho...indpost&p=22278

Je retransmet, pour des raisons de commodité :

http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-display

Display none : This value causes an element to generate no boxes in the formatting structure (i.e., the element has no effect on layout). Descendant elements do not generate any boxes either; this behavior cannot be overridden by setting the 'display' property on the descendants. Please note that a display of 'none' does not create an invisible box; it creates no box at all. CSS includes mechanisms that enable an element to generate boxes in the formatting structure that affect formatting but are not visible themselves. Please consult the section on visibility for details.

http://www.w3.org/TR/REC-CSS2/visufx.html#visibility

Visibility hidden : The generated box is invisible (fully transparent), but still affects layout.

En français, le display: none ne génère aucun espace physique dans la page, alors que visibility hidden lui, oui (on dira qu'il est invisble, pas inexistant).

[Gribouille26]

Merci