28172 sujets

CSS et mise en forme, CSS3

Position absolute et conteneur

Bonjour à tous

Jusqu’à aujourd'hui mes pages étaient structurée en xhtml 1,1 la façon suivante;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head></head>
<body>
    <div id="page">
        <div id="header">
            <div id="header_logo_text">
                <h1>header</h1>
            […]
        </div>
        <div id="center_column">
			[…]
        </div>
        <div id="footer">
            <div id="panier">
                […]
            </div>
           […]
        </div>
    </div>        
</body>
</html>


et je remontait la box panier avec un
#page {position:relative; margin: auto;max-width:979px}
#panier {
		position: absolute;
		top: 0;
		right: 0;
		width:211px;
}



Mon soucis est que je souhaite passer en HTML5 et donc supprimer le conteneur #page
<!DOCTYPE HTML>
<html lang="fr-FR" prefix="og:  http://ogp.me/ns#"   itemscope itemtype="https://schema.org/WebPage">
<head></head>
<body>
    <header>
        <h1>header</h1>
        […]
    <header>
    <div id="center_column">
	[…]
    </div>
    <footer>
        <div id="panier">
            […]
        </div>
       […]
    </footer>
</body>
</html>


du coup comment pourrais aligner en largeur la box panier sans passer par du javascript?
Administrateur
Bonjour,

tu peux garder ton conteneur #page (chez nous c'est .wrapper en général). (Le) header (de la page) n'a pas forcément à être enfant direct de body, aucune obligation. Par contre les navigateurs ne vont pas forcément comprendre que c'est Le header de la page et ne lui attribueront plus un role de banner, auquel cas il faut ajouter à la main ces landmark roles <header role="banner">
Cf http://anysurfer.be/fr/blog/detail/support-des-roles-aria-et-elements-html5-par-les-lecteurs-decran

Tu peux utiliser un élément main, apparu en HTML 5.0 au W3C à la place de ta colonne centrale (ou colonne centrale et panier, je sais pas trop comment ta page est organisée mais c'est sensé baliser le contenu principal donc pas le header ni la navigation ni le footer avec 50 liens ni une sidebar sans lien avec le contenu à côté Smiley smile )
Je te remercie.

Mais j'aimerai justement une syntaxe permettant de comprendre clairement le parties HEADER/FOOTER

Il y aurait une autre solution sans wrapper?


Pour le main je pensais à un <section> mais <main> serait peut être plus adapté.
Bonjour,

Dans le premier exemple que tu publies (actuellement en xhtml 1.1), il me semble que body peut déjà servir de wrapper à tes éléments flexibles vu que ceux-ci semblent être fils direct de cet élément.

Toutefois, tu peux effectivement remplacer #page par une balise main qui apportera plus de sémantique à cet élément.

De fait, non, tu ne peux te passer de wrapper pour tes éléments flexibles mais oui tu peux te servir d'élément déjà existant comme tel au lieu d'en créer un spécialement pour.

Si je reprends ton exemple en introduisant html5 + l'élément main, voici ce que ça pourrait donner:
<!DOCTYPE html>>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head></head>
<body>
    <main>
        <header>
            <div id="header_logo_text">
                <h1>header</h1>
            […]
        </header>
        <div id="center_column"><!-- ici une section ? pourquoi pas ! -->
			[…]
        </div>
        <footer>
            <div id="panier">
                […]
            </div>
           […]
        </footer>
    </main>        
</body>
</html>

Par contre je ne saisis pas pourquoi pour inclure #panier dans un footer. Si tu positionnes main relativement à body, que tu sors #panier du footer, tu pourrais aisément placer de manière absolue #panier dont la position se réfèrerait directement à celle de main (devenant alors son plus proche parent positionné de façon relative), non ?
Cette architecture te permettrait en outre, en définissant main comme étant un conteneur de flexibles (display: flex;) de positionner ton header ainsi que #center_column (et pourquoi pas aussi un vrai footer qui s'intercalerait juste avant #panier) de manière flexible donc adaptative.
Modifié par Greg_Lumiere (21 Nov 2016 - 14:43)
Sujet clos
Aller à