28173 sujets

CSS et mise en forme, CSS3

Bonjour,

voila mon problème : j'aimerais que mon site s'adapte directement en fonction de la résolution de chacun. JE fais un site du même style que http://www.who-s-web.com/[/url] mais le soucis c'est que je n'arrives pas a bien positionner mon footer et ma carte! En fait j'ai mis ma carte en hauteur 100% or celle-ci prend plus déplace que ce que je voudrais vraiment... si je réduis la hauteur a 85%(par exemple) ma carte s'affiche super bien mais mon footer a disparu je ne sais ou...(peut être sous ma carte)

Voici mon code... Je ne peux pas mettre en ligne ce que j'ai fait donc il faudra faire avec! Smiley cligne

le html

<body onload="ggmap_load('47.65', '3.316667', '10');" onunload="GUnload();">
	<div id="header">
		<? include("header.php"); ?>
	</div>
	
	<div id="contenant">
		<div id="menu_droit">
			<? include("menu_droit.php"); ?>
		</div>
		<div id="centre">
			<div id="map"></div>
		</div>
	</div>
	<div id="footer">
		<? include("footer.php"); ?>
	</div>
</body>


et le css correspondant

body
{
	margin: 0; /* pour éviter les marges */
	padding:0;
	overflow:none;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	background-image:url(../_images/fond.jpg);
	background-repeat:repeat;
	height:100%;
	float:left;
}
html
{
	overflow:none;
	height:100%;
}

#header
{
	position:relative;
	width:100%;
	height:110px;/*Hauteur a changer selon l'image de fond*/
	background:#fff;
	padding:0;
	margin:0;
	border-bottom:4px solid #ccFF00;
	font-size:12px;
}

#contenant
{
	position:relative;
	width:100%;
	height:85%;
	overflow:hidden;
}

#menu_droit
{
	float:right;
	width:200px;
	height:100%;
	background-color:#CCFF00;
}


#centre
{
	height:100%;
	width:100%;
	margin-left:-200px;
}

#map
{
	position:relative;
	width:100%;
	height:100%;
	border:1px solid #C0C0C0;
}

#footer
{
	position:relative;
	bottom:0;
	background-color:#CCFF00;
	width:100%;
	height:30px;
}



N'hésitez pas si vous avez des idées... Merci à l'avance Smiley langue
Juste pour info footer = pied de page ?

Ensuite je suis pas un pro, mais je penses que si tu met ta map à 100% de hauteur et largeur, il est normal qu'elle prenne toute la place... Alors donne leurs une taille plus petite. Dis toi que ton en-tête, ton map et ton pied de page doivent faire 100% de hauteur (les 3 additionés, par exemple 30%+30%+40%) en plus de ca au lieu de mettre des pixel favorise les pourcentage, car si tu met en % ca s'adapte tendis qu'en pixel cela va toujours rester de la meme taille.
Modifié par Tidus_6_9_2 (28 Jan 2008 - 16:27)
Oui footer = pied de page...

J'ai essayer de mettre un pourcentage plus petit mais le problème c'est que ça ne marche pas comme je veux!! si je met 85% de hauteur a ma carte, elle prend bien 85% de place (c'est ce que je veux) mais si je réduis mon bloc mon footer disparait... enfin il disparait pas mais il y a des scrolls... et je veux éviter!!

Ce que je veux c'est exactement comme http://www.who-s-web.com/ [/url] en ce qui concerne le re-dimensionnement... Je sais pas si c'est possible en css... mais des fois que... Smiley langue
Donc commence par éviter de mettre des pixel en hauteur à ton footer.

Donne lui des poucentages.

Pis pour tous ceux aux quels tu as mis des pixel en hauteur, donne leurs des pourcentage. Tu me dira si sa marche mieux...

Et oublie pas que TOUT tes height additioné doivent donner 100% sinon tu auras un scroll

Sur le CSS que tu as mis il y en a 3 qui ont 100% de hauteur, donc ta page doit faire 300% environ...

Si jamais ton menu fait 100% de contenant... Donc corrige. Ton menu+ton centrage+ton map doivent faire 100% additionée
Modifié par Tidus_6_9_2 (28 Jan 2008 - 16:40)
C'est nickel ça marche bien... Mais ça me fait un petit soucis quand même! J'ai une très grande résolution et le soucis c'est que dans mon header (en tête) j'ai une image... c'est pour ça que j'avais fixer la hauteur en pixels. et lorsque j'ai une grande résolution mon image n'est pas assez grande et ca fait pas très joli... De même si quand je met une résolution petite.. l'image est coupé!

Pour l'instant je vais laisser comme ça... si d'autres idées viennent...

En tout cas merci parce que j'y avait même pas pensé!^^
Pour ton image essaie qqch comme ca <img src"ton image" alt="le nom que tu veux lui donner" width="valeur que tu veux en %">

Normalement elle devrait s'adapter elle aussi automatiquement.

Tu peux regarder sur mon site j'ai msi pour que tout s'adapte automatiquement ici
Modifié par Tidus_6_9_2 (28 Jan 2008 - 16:47)