28173 sujets

CSS et mise en forme, CSS3

Faire une div sous une autre visuellement

Bonjour à tous !

j'ai par exemple le code source suivant :
<div id="bas">ça s'affichera en bas</div>
<div id="haut">ça s'affichera en haut</div>

Comment faire pour que le bloc "haut" s'affiche en haut du bloc "bas" ?
J'ai essayé position:absolute; mais ça ne garde pas les marges ...

Merci d'avance pour toute réponse .
#conteneur {position: relative;}
#bas {position: absolute; bottom: 0;}

essayes la faq c'est plein de solutions...
Si je comprends bien, le but est de rendre deux éléments dans le sens inverse à leur place dans le flux. Or, sans la feuille de style (feuille de style désactivée, navigateur non graphique, lecteur d'écran, terminaux mobiles...) on se retrouve avec l'ordre de départ.

Il y aura donc un public qui verra Alpha Bravo, et l'autre qui aura Bravo Alpha.

C'est fait exprès que ça soit moyennement logique ?

Quelle est la contrainte qui impose ce genre de bidouille ? Smiley sweatdrop
Lord_Coder a écrit :
mais ça ne garde pas les marges ...


Quelles marges ?????????????

La formulation de ta question est pour l'instant incompréhensible.
clb56 a écrit :
Je suis tellement azimut que je l'ai fait...

Ici : http://www.ecoledemusique.concarneau.fr

Effectivement, le menu de navigation est situé à la fin du code, mais en haut de la page (positionnement absolu).

Je pense qu'on peut distinguer les éléments « périphériques » au contenu de la page, tels que les menus de navigation et informations générales sur le site, du contenu de la page lui-même.

Pour le contenu de la page à proprement parler, il est très fortement recommandé de faire correspondre l'ordre dans le code et l'ordre d'affichage, surtout si l'ordre de lecture des divers éléments est nécessaire ou utile à la compréhension du contenu.

Pour les menus de navigation et autres informations générales, leur place au sein de l'élément body est déjà problématique en soi. HTML était prévu pour fonctionner avec un contenu de document dans body, et des informations de navigation dans head... mais :
1 - ces dernières ne sont pas ou peu supportées par les navigateurs ;
2 - cette manière de faire correspondait à une vision de documentaliste, et ne répondait pas aux besoins des « sites internet » (concept qui ne va pas forcément de soi).

Bref, il faut faire avec des éléménts de navigation et informations propres au « site » au sein même du contenu des pages. À partir de là, les débats tournent autour du fait de placer la navigation en début de code ou en fin de code (après le contenu), avec des arguments pour les deux options, mais rien de très convaincant. Chacun fera donc comme il lui plaira, tout en veillant à assurer :
1 - une structure de titres de section cohérente ;
2 - des liens d'évitement (pas cachés visuellement !) pour accéder facilement au contenu et/ou au menu de navigation.
Bon par exemple j'ai ce code suivant :

#container{
width:800px;
height:auto;
margin-left:auto;
margin-right:auto;
}
#logo{
margin-top:10px;
margin-left:10px;
margin-right:10px;
background:#ffffff url('logo.png');
}
#contenu{
margin: 10px 10px 10px 10px;
}

Et le code HTML serait celui-ci :

<html>
<head>
<style type="text/css">
/* Le code CSS ci-dessus */
</style>
</head>
<body>
<div id="container">
<div id="logo"></div>
<div id="contenu">Lorem ipsum</div>
</body>
</html>

Mais si j'utiliserai position:relative dans container et position:absolute ( avec top:100 pour contenu et top:0 pour logo ) dans contenu et logo , je perdrai les marges définies dans contenu et logo .
Peut quelqu'un m'aider ?
mpop a écrit :

Effectivement, le menu de navigation est situé à la fin du code, mais en haut de la page (positionnement absolu).

Je pense qu'on peut distinguer les éléments « périphériques » au contenu de la page, tels que les menus de navigation et informations générales sur le site, du contenu de la page lui-même.

Pour le contenu de la page à proprement parler, il est très fortement recommandé de faire correspondre l'ordre dans le code et l'ordre d'affichage, surtout si l'ordre de lecture des divers éléments est nécessaire ou utile à la compréhension du contenu.

Pour les menus de navigation et autres informations générales, leur place au sein de l'élément body est déjà problématique en soi. HTML était prévu pour fonctionner avec un contenu de document dans body, et des informations de navigation dans head... mais :
1 - ces dernières ne sont pas ou peu supportées par les navigateurs ;
2 - cette manière de faire correspondait à une vision de documentaliste, et ne répondait pas aux besoins des « sites internet » (concept qui ne va pas forcément de soi).

Bref, il faut faire avec des éléménts de navigation et informations propres au « site » au sein même du contenu des pages. À partir de là, les débats tournent autour du fait de placer la navigation en début de code ou en fin de code (après le contenu), avec des arguments pour les deux options, mais rien de très convaincant. Chacun fera donc comme il lui plaira, tout en veillant à assurer :
1 - une structure de titres de section cohérente ;
2 - des liens d'évitement (pas cachés visuellement !) pour accéder facilement au contenu et/ou au menu de navigation.

Désolé mais si je mets la barre de navigation verticale sous le contenu ( dans la source HTML ) , ceux qui ont un navigateur ancien ( ou sont handicapés ) , peuvent voir le contenu puis le menu , et ça serait aussi une bonne optimisation SEO ^^
En fait, j'ai du mal à voir concrètement ce que tu veux faire.

L'exemple avec le logo correspond à ton problème, ou pas vraiment ? Vouloir faire apparaître le logo d'un site en dessous du contenu (et placer le contenu en deuxième dans le code) me semble un peu bizarre.

Pour la Search Engine Optimization, j'avoue ne pas être assez calé dans le domaine pour dire si les bénéfices espérés sont réels (je veux bien, d'ailleurs, une source qui démontrerait que c'est le cas, et qui ne se contenterait pas de dire « c'est mieux de faire comme ça »). Mais pour revenir à notre sujet : quel est, très exactement, l'objectif ?

S'il s'agit de placer un menu en fin de code et le contenu (moins de liens internes, plus de texte où l'on retrouvera les mots-clefs du site) en début de code, il me semble que la solution de clb56 tient la route. En gros, on laisse le contenu en positionnement statique (on peut lui donner un margin-top pour ménager un espace pour le menu), on place le menu à la fin, et on positionne le menu en absolu (par rapport à son bloc parent positionné en relatif, par exemple).

De plus, je ne comprends pas quel est le problème avec les bordures. Tu voudrais que les bordures du bloc positionné en absolu repoussent les autres blocs ? Pour être clair, ça n'est tout simplement pas possible, et c'est dû justement au positionnement absolu.
Sujet clos
Aller à