28172 sujets

CSS et mise en forme, CSS3

Margin-top 100% en fonction d'un div conteneur

Bonjour à tous,

J'essaie de placer un élément à l'intérieur d'un div servant de conteneur. Voici le CSS utilisé:

#globalContainer{
	width: 100%;
	height: 100%;
}

#header-out{
	width: 100%;
	height: 100%;
	background-color: black;
}

#header{
	width: 940px; /* Set to % when possible */
	height: 240px; /* Set to % when possible */
	margin: 0px auto;
}

#header .title{
	margin-top: 100%;
	margin-left: 100%;
	width: 250px;
	height: 100px;
}


Et mon code HTML...

<body>
	<div id="globalContainer">
		<div id="header-out">
			<div id="header">
				<div class="title">Test</div>
			</div>
		</div>
	</div>
</body>


Le problème est que mon margin-top: 100% de ma classe "title" ignore les dimensions de mon div "header". Le margin-left fonctionne à merveille, mais pas le margin-top. Ainsi, plutôt que de voir ma classe title apparaître en bas à droite de mon div Header, il apparaît à droite de mon div Header, mais en bas complètement de la page.

J'ai essayé d'utiliser un Position: Relative avec un top & left plutôt que des marges, le tout fonctionnait mais lorsque je mettais un 2e élément en float: left, il ignorait la propriété left et se superposait donc avec la fin de mon bloc title.

J'aimerais savoir, comment puis-je faire en sorte que le margin-top de mon title corresponde avec le height de mon header plutôt que de l'écran ?

Merci et bonne journée !
Bonjour,

Cela ne règle pas mon soucis... Voici un schéma du résultat voulu:


-----------------Header----------------
|                                     |
|                                     |
|                                     |
|    Title    Logo           Menu     |
|                                     |
---------------------------------------

Comme vous pouvez le voir, mes éléments sont situés vers le bas de mon header avec une petite marge à gauche. Je peux arriver à ce résultat en utilisant un margin-top avec un faible % (duquel je n'ai nullement confiance car je ne sais avec exactitude sur quoi il se base...) OU en utilisant Position: Relative avec une valeur pour Top et Left pour chaque élément. Cependant, je ne crois nullement que ces solutions soient en ligne avec les bonnes pratiques.

Logo et menu ne sont pas encore dans mon code, mais je dois être prêt à les recevoir
Modifié par Calden (21 Nov 2012 - 22:19)
Oui, mais pas complètement en bas

C'est pourquoi je voulais utiliser le margin-top avec un %, pour mettre ces éléments à 70% du haut de mon header.
Ton margin-top et ton margin-left (100%) correspondent à 100% de 940px c'est pourquoi tu as ce décalage en bas à droite (marin-top et left de 940px).
Hmm wow,

C'est vraiment étrange. Pourquoi hérite-t-il de la largeur du div parent plutôt que de la hauteur pour mon margin-top ? Y a-t-il moyen de le faire hériter de la hauteur ?

Sinon, quelle serait la meilleure méthode pour arriver au résultat voulu ?

Merci !
Tu peux essayer ça :
<div id="header">
	  <div id="title">title</div> 
             </div> <script >
var hauteur = document.getElementById('header').offsetHeight;
document.getElementById('title').style.marginTop = 0.70*hauteur +'px'
 </script>

Ton margin top title est à 70% du height de header
Modifié par rodolpheb (23 Nov 2012 - 10:08)
Considérant que je vise un design compatible avec tous les navigateurs et tous les appareils, est-ce que javascript pour un tel cas est vraiment la meilleure solution ? On m'a toujours dis d'éviter le Javascript lorsque possible car certains utilisateurs désactives ceux-ci.
Je ne discute pas de la nécessité impérative du cas particulier où il faudrait prendre en compte la désactivation de js. Effectivement si ton site concerne les 2% d'utilisateurs, tu devras penser à une solution alternative.
Modifié par rodolpheb (23 Nov 2012 - 17:12)
Bonjour !

Merci pour ce voyage dans le temps, rodolpheb…

Passons sur les petits détails croustillants (language="javascript", sérieusement ?) ; que se passe-t-il si #header change de taille après que tu as fait ton calcul en JS ?
Modifié par Julien Royer (23 Nov 2012 - 10:37)
Bonjour,

Je suis dans un contexte assez particulier, les gens qui visiteront mon site ont, selon mes recherches, des navigateurs pouvant aller jusqu'à Internet Explorer 6. J'ai aussi la certitude que certains ont le javascript désactivé, ils sont en milieu de travail pour la plupart donc facebook etc. est désactivé de toute manière.

Voyez-vous une solution ?

Sinon, je sais qu'en ajoutant Position: Relative avec un Top et un Left fonctionnait, par contre l'élément "Logo" de mon header se superposait un peu avec l'élément "Title", comme s'il ignorait la valeur Left de mon title. Je suppose qu'en ajoutant le même élément Left le problème serait réglé.

Autrement, je peux toujours utiliser des valeurs très petites pour mon margin-top tel que 5-10%, cela donne le résultat désiré sur mon écran.

Malgré ces deux alternatives, je crains que celles-ci ne soient pas en accord avec les bonnes pratiques du web et donc, pourrait me réserver quelques surprises.
Sujet clos
Aller à