28220 sujets

CSS et mise en forme, CSS3

[Résolu] Affichage en ligne et colonne

Bonjour a tous

Voila j'ai un petit probleme pour la creation de ma feuille css:
upload/717-imgprob.gif

j'aimerai deplacer mon bloc rouge sous le gris et celui en bas sous l'autre gris:
Voici mes differents codes

/** bloc de base **/
body {
	margin:0;
	padding:0;
	text-align:center; /** permet de centrer la page sous ie **/
	background:#4E7D3E url(images/bg_body.gif) repeat-x;
}
#master {
	width: 760px;
	margin:0 auto; /** margin auto permet de centrer le contenu **/
	text-align:left; /** repositionne le texte en alignement gauche par defaut **/
	background:#31CAF3;
}
#tete {
	background: #4E7D3E url(images/bg_head.gif);
	height:126px;
}
.mascotte {
background: url(images/bg_mascotte.gif) no-repeat;
width:102px;
height:123px;
float: left;
}

.logo {
width:153px;
height:53px;
float:left;
margin-top:7px;
}

.annonce {
margin-top:11px;
width:505px;
background: url(images/bg_annonce.gif) no-repeat right bottom;
float:left;
height:48px;
}

.login {
	float: left;
	width:157px;
	background: url(images/bg_login.gif) no-repeat;
	height: 61px;

}

html>body .login {
	position:relative;
	overflow: hidden;
}


.pub {
	width:505px;
	background: url(images/bg_pub.gif) repeat-y right top;
	float:left;
	position:relative;
	height:77px;
}





<div id="master">
	<div id="tete">
		<div class="mascotte">
		  <img src="images/mascotte.png" width="102" height="123" />
		</div>
		<div class="logo">
			<img src="images/titre.png" alt="" width="153" height="53" />
		</div>
		<div class="annonce">
		</div>		
		<div class="login">
			 <form action="" enctype="application/x-www-form-urlencoded" id="connection">
				 <p>&nbsp;</p>
			</form>
		</div>			
		<div class="pub">
			<img src="images/pub.gif" alt="Publicit&eacute;" width="484" height="73" />
		</div>		
	</div>


Un grand merci d'avance pour votre aide
Modifié par comicway (21 Mar 2005 - 13:06)
Bonjour,
Pour augmenter tes chances de réponses je te conseille fortement de modifier ton titre, car un "problème de mise en page" on s'en doute un peu dans le salon "Css et mise en forme". Smiley cligne
Euh, le plus simple est à priori de placer le block rouge en float: left; et le gris viendra se mettre à la droite du block rouge tout seul. Tu n'aura plus qu'à mettre une marge à gauche à ce dernier pour que l'effet "colonne" persiste lorsque le block gris sera plus long que le rouge Smiley cligne

Voilà l'idée en gros.
Zut j'ai oublié de préciser les noms des differents blocs
en fait le plus grand à gauche gris c'est mascotte puis apres le gris c'est logo puis annonce, le rouge c'est login et puis celui tout en dessous c'est pub.

--> ici le rouge: login est deja en float:left
J'ai pas regardé ton code Smiley confused avant de te proposer ça ^^
J'essairai de voir quand j'aurais un peu de temps.
Essai de remanier le tout dans son ensemble.
Mais ton dessin est pas hyper clair. Pourrais tu nous en dire un peu plus sur le contenu, ce que représentent les blocks, leurs fonction, leur futur look, etc.
J'ai du mal à imaginer le résultat final que tu souhaites.
upload/717-imgprob1.gif

voila en gros les differents blocs
Et quant je fait un preview du site, j'obtient le cadre login qui se trouve sous annonce et pas sous titre
Modifié par comicway (21 Mar 2005 - 13:27)
oui la hauteur est de la hauteur de logo.

edit; de mascotte pas logo
Modifié par comicway (21 Mar 2005 - 13:28)
Je viens de trouver la reponse meacoulpa: en fait le logo descendais bcp trop bas ce qui faisais decaler le login
j'ai mis 5 au lieu de 7 dans margin-top
Modifié par comicway (21 Mar 2005 - 13:35)
Un truc que tu peux faire alors, c'est de mettre ta mascotte en position absolue, tu le met à gauche de ton bloc header, tu donne la hauteur de ta mascotte à ton header.
Ensuite, tu met chacun de tes 4 blocks en float: left; avec les dimensions qu'il faut, et ça devrait marcher comme il faut Smiley cligne
Sujet clos
Aller à