5568 sujets

Sémantique web et HTML

[Résolu] Centrer un conteneur

Bonjour,

J'ai un soucis pour centrer horizontalement un conteneur (qui contient donc tout le contenu) je pense que mon code est bon mais sa ne marche pas Smiley decu

code html :

.conteneur
{
width: 1360px;
height: 1360px;
border: 10px red solid;
margin:0px auto;
}

code css

<!DOCTYPE html>
<html>


<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>ROD</title>
</head>

<div class="conteneur">
<body class="bodyaccueil">


<header>
<div class="menu">
</div>

</header>

</body>
</div>
</html>


J'ai pourtant bien mis une marge auto Smiley ohwell Merci beaucoup de votre aide.
Bonsoir.

Non, ton code HTML n'est pas bon, ni syntaxiquement ni sémantiquement.

Ton <div class="conteneur"> doit être inclus entre les balises body :

<body class="bodyaccueil">
<div class="conteneur">
....
</div>
</body>


En fait, hormis les balises d'en-tête, toutes les autres doivent être incluses entre les balises body.

De plus, logiquement, ton header devrait précéder le div conteneur, et par ailleurs, un div n'est pas la balise indiquée pour inclure un menu, on utilise ordinairement un :

<nav role="navigation">
<ul>
<li><a href="...">item de menu</a></li>
<li><a href="...">item de menu</a></li>
<li><a href="...">item de menu</a></li>
...
</ul>
</nav>


Et, petit détail, en CSS, lorsqu'une valeur est zéro, il n'est pas nécessaire de déclarer une unité.

Par ailleurs, si tu utilises un doctype HTML5, pourquoi n'utilises-tu pas plus de balises HTML5, par exemple <main>...</main> au lieu de <div class="conteneur">...</div> ? Mais attention, elles doivent être rendues dans les vieilles versions d'IE encore en usage.

Pour finir, il existe un outils en ligne pour vérifier le code HTML, le W3C Validator, CanIUse, un site pour vérifier quelles balises HTML, propriétés CSS, etc. sont supportées par quels navigateurs, etc., etc.

Enfin, avec des dimensions en pixels, que fais-tu des écrans plus petits ? L'heure est aux designs adaptatifs (adaptive design ou responsive design).

Je crois que tu devrais revoir sérieusement les bases du HTML/CSS. Je pense que tu trouveras pas mal de tutos sur Alsacréations, Openclassrooms, etc.

Bon courage.
Modifié par thierry (14 Feb 2015 - 18:54)
Bonjour Thierry et merci de votre réponse.
Effectivement je débute dans ce domaine j'ai visionné une vidéo de tuto classroom assez bien faite pourtant.
Je vais essayer de réviser sur vos sites cités.
Par contre même en mettant la balise comme conseillé :

<body class="bodyaccueil">
<div class="conteneur">
....
</div>
</body>

J'ai toujours un décalage sur ma page le conteneur (où j'ai mis une bordure rouge pour le visuel) est toujours plus rapproché de la gauche.

De quoi peut il s'agir svp ? (je vais planché sur le cours)

Merci
Bonjour Shinoby,

Je vois que tu débutes et que cela à l'air pas mal confus. Ne te décourage pas, ça finira par payer.

Par contre 2-3 trois petites choses, à commencer par:

shinoby76 a écrit :
je pense que mon code est bon mais sa ne marche pas

:)
Bon le principe en code, c'est que c'est toujours de la faute du dev'. Si c'était bon ça marcherait, si ça marche pas, c'est que c'est pas bon Smiley cligne

Au premier abord, je dirais qu'il est quand même vachement large ton container à centrer (width: 1360px), donc se pose la question de sur quelle résolution tu testes ton centrage.

Ensuite, en ce qui concerne le code que tu copies, pour plus de lisibilité, utilises le balisage qu'offre le forum (options en dessous des smileys quand tu écris ton message).
Tu écris d'abord ton code HTML ou CSS, puis tu le sélectionnes et applique la coloration syntaxique correspondante.

Comme il peut y avoir aussi pas mal d'autres règles CSS qui pourraient rentrer en conflit: comme ici tu fais appel à une feuille de style CSS externe dont on ne connait pas le contenu, ça peut fausser les diagnostiques.

Tu peux toujours prendre un screenshot et le joindre à ton message mais on est en 2015 et on a de chouettes outils donc si tu ne connais pas déjà, je te conseille de te créer un compte (gratuit) sur codepen.io où tu pourras recopier ton code en entier, le visualiser, le partager et nous permettre de mieux t'aider à le débugguer.

Bon là, à l'aveugle, je dirais que tu te coltines les margin du body héritée de la feuille de style de l'agent utilisateur.
C'est quoi ça? En gros c'est le style appliqué par le navigateur par défaut, voir le principe de la cascade (CSS : CASCADING StyleSheet, tout est dans le nom Smiley smile )
A lire: W3C | The Cascade

Bref, c'est pour ça qu'en général on utilise des reset CSS.
A lire: alsacreations | La Technique du Reset CSS

Si tu fais un test avec 
body { margin: 0; padding: 0; }


Bon courage.
Modifié par Sugarskill (15 Feb 2015 - 13:19)
Sujet clos
Aller à