28172 sujets

CSS et mise en forme, CSS3

Gérer la taille d'une div vide en pourcentage

Bonjour,

J'aimerai positionner 4 objets img dans une div de la manière suivante :
schema


Ces rectangles sont donc des img vide auquel j'aimerai appliquer un background blanc avec une opacité pour masquer des parties d'une image en fond.


L'animation jQuery que j'aimerai réaliser est la suivante :
anim


Le soucis, c'est que je n'arrive pas à fixer la hauteur de mes balises vides en pourcentage. il gere bien la largeur, mais la hauteur reste à 0.

Voila mon code pour le moment :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>anim_nav1</title>

<style type="text/css">
#container {
  	margin-top:15%;
 	margin-left:auto;
  	margin-right:auto;
  	width:60%;
	border:1px solid black;
}

#container #centre {
	position:relative;
	margin-top:8%;
	width:60%;
	height:60%;
	margin-left:auto;
  	margin-right:auto;
	border:1px solid green;
}

#container #centre #capture {
	width:100%;
}

#container #centre .cache {
	position:absolute;
	display:inline;
	border: 1px solid red;
	background-color:white;
}

#container #centre #cacheH1 {
	height:30%;
	width:25%
}

#container #centre #cacheH2 {
	left:25%;
	height:30%;
	width:75%;
}

#container #centre #cacheM {
	top:30%;
	height:40%;
	width:100%;
}

#container #centre #cacheB {
	top:70%;
	height:30%;
	width:100%;
}

#container .trait {
	display:inline;
}

#container #traitsH, #container #traitsB {
	display:block;
	width:60%;
	margin-left:auto;
	margin-right:auto;
	border:1px solid yellow;
}

#container #traitsH1, #container #traitsH2, #container #traitsH3, #container #traitsB1, #container #traitsB2 {
	position:absolute;
	display:inline;
	background-color: black;
	width:1px;
	height: 4%;
}

</style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">
</script>

</head>

<body>

<div id="container">

    <div id="traitsH" class="trait">
    	<img id="traitsH1" />
   		<img id="traitsH2" />
    	<img id="traitsH3" />
    </div>

	<div id="centre">
		<img id="cacheH1" class="cache"/>
    	<img id="cacheH2" class="cache"/>
    	<img id="cacheM" class="cache"/>
    	<img id="cacheB" class="cache"/>
    
		<img id="capture" src="captures/nav1.jpg"/>
    </div>
    
    <div id="traitsR" class="trait">
    	<img id="traitsR1" />
    	<img id="traitsR2" />
    	<img id="traitsR3" />
        <img id="traitsR4" />
    </div>
    <div id="traitsB class="trait"">
    	<img id="traitsB1" />
    	<img id="traitsB2" />
    </div>
    <div id="traitsG" class="trait">
    	<img id="traitsG1" />
    	<img id="traitsG2" />
    	<img id="traitsG3" />
        <img id="traitsG4" />
    </div>
    
    <!--<div id="txt1">
    	<h3>Bouton Logo</h3>
    	<p>Lien cliquable permettant un retour direct à la page d'accueil de l'application.</p>
    </div>
    
    <div id="txt2">
    	<h3>Barre de navigation</h3>
    	<p>Un fil d'Ariane permet d'identifier rapidement votre positionnement dans l'application.</p>
    </div>
    
    <div id="txt3">
    	<h3>Carroussel horizontal</h3>
    	<p>Un carroussel de navigation horizontal à interactivité tactile.</p>
    </div>
    
    <div id="txt4">
    	<h3>Boutons annexes</h3>
    	<p>Des boutons renvoyant à des pages annexes en relation avec la page actuelle.</p>
    </div>-->
    
</div>

</body>

Modifié par jbgodard (09 Jan 2011 - 16:43)
Bonjour,

Tes liens ne sont pas corrects et ton code doit être placé dans la balise "code" dédié à la mise en page du code sur le forum. Merci de rééditer ton message.
Modifié par Spacedementia (09 Jan 2011 - 16:28)
bonjour,

il faut donner une référence de base a height équivalente à la hauteur de l'ecran par exemple et la transmettre jusqu'au élément concernés (notions d'heritage css):
ex:

html, body, #container {height:100%;}


ensuite, height ou width n'est pas applicable sur un element formater en "inline" et dans le flux naturel.

Opter pour un inline-block (valeur par defaut d'une balise image).

GC
@Spacedementia :

J'ai corrigé mon post, dsl j'avais mis des guillemets dans mon adresse url...


@gc-nomade :

Euh... je vais renseigner pour tes notions d'heritage mais j'avoue ne pas avoir saisie.
Il est possible de référencer la largeur en pourcentage d'un élément en fonction d'un autre qui ne serait pas son conteneur ??

Pour la suite ok, je vais le prendre en compte !
jbgodard a écrit :

@gc-nomade :
Il est possible de référencer la largeur en pourcentage d'un élément en fonction d'un autre qui ne serait pas son conteneur ??

Non, l'heritage se fait de parent vers enfant, dans le cas de height et width, il s'agit d'heritage direct seulement.

GC
D'accord, alors je ne vois pas à quoi sert ton code si un pourcentage est définit quoi qu'il en soit en fonction du parent.

premier conteneur -> 60% largeur de la fenetre;
contenu -> 50% largeur du conteneur;
etc...

Cela se fait automatiquement ?
Attention, une balise image n'est pas à utiliser sans l'attribut "src", cette balise sert à afficher une image elle ne peut pas être vide.

Il faut que tu utilises des balises <div> à la place de tes <img> vides.
Modifié par Spacedementia (09 Jan 2011 - 18:37)
jbgodard a écrit :
D'accord, alors je ne vois pas à quoi sert ton code si un pourcentage est définit quoi qu'il en soit en fonction du parent.

premier conteneur -&gt; 60% largeur de la fenetre;
contenu -&gt; 50% largeur du conteneur;
etc...

Cela se fait automatiquement ?


Pour comprendre les effets d'heritage des hauteurs largeurs, je te propose de tester une page avec des div et des images (met en srouce un gif transparent ) par exemple et une couleur de fond a chaque element (ou/et bordure) .

joue avec les pourcentage et imbrication ... je te suggere aussi de donner une couleur de fond a html et body differente. tu verras les effets d'heritages et de comportement et de l'utilité (ou non) de donner une hauteur aux parents. un pourcentage d'une valeur nulle ne donne ... rien.

... et c'est pas parceque ça passe avec width (1 element formater en block et dans le flux fait d'office 100% de la largeur dispo ...)
que ça passe avec height ... valeur variable qui depend du contenu.

Cordialement, GC
Hello,

Ben apparemment on ne peut gérer la taille d'une div en pourcentage que si son parent a déjà un une largeur ou une hauteur définit.
Enfin, c'est pas encore clair, je vais faire quelques test comme m'a conseillé gc-nomade.

Je met quand meme mon post en résolu.

++
Bonsoir,

Effectivement, la taille d'un div en pourcentage (ou autre élément de type "bloc") se cale toujours par rapport à la largeur de son parent. Donc si par exemple tu as :
<div id="parent">
<div id="enfant"></div>
</div>

et

#parent { width:50%;}
#enfant { width:50%;}

La largeur de ton div "enfant" sera égale à 50% de la largeur du div "parent" donc concrètement, ton div "enfant" aura la taille du div "parent" divisé par deux.

Voici un exemple un peu plus clair, si tu utilise le code suivant :
<div id="parent">
<div id="enfant"></div>
</div>

et

#parent { width:500px;}
#enfant { width:50%;}

La largeur de ton div "enfant" sera : 50% de 500px donc 250px
Sujet clos
Aller à