28173 sujets

CSS et mise en forme, CSS3

[RESOLU] Repousser le footer ?

Bonjour à tous et à toutes !

Je suis en train de réaliser cette page Lien supprimé, Mais comme vous pouvez le constater, il y a quelques petites erreurs d'affichage.

Je voudrais faire ceci : Lien supprimé.

Sauf, que au lieu d'utiliser des boites en absolute défini avec top:..px; quine sont pas fluides, si je mets plus de texte, le footer (la barre noire) et la barre qui termine le cadre de texte (Lien supprimé)
n'est pas repoussée alors que je voudrais quel y soit.

Voila mon code :

/** CSS **/
#conteneur {
	position: absolute;
	width: 100%;
	display:block;
	float:left;
}

#header {
	position:absolute;
	width: 100%;
	height:243px;
	border: 0px;
	background: url(images/back_haut.gif) top; 
	background-repeat: repeat-x;
	background-color: #F6F6F6;
}

#centre {
	position:absolute;
	top: 243px;
	width: 100%;
	border: 0px;
}

#pied {
	position:absolute;
	width:100%;
	height: 75px;
	border:0px;
	clear: both;
}

/* HTML */
<body>
	<div id="conteneur">
		<div id="header">
			<div style="position:relative; width:800px; top:0px; left:50%; margin-left:-400px;">
				<img src="images/1.gif" style="width:800px; height:150px; display:block;" alt="" />
			</div>
			<div style="position:relative; width:800px; top:0px; left:50%; margin-left:-400px;">
				<img src="images/2.gif" style="width:210px; height:93px; display:block;  float:left;" alt="" />
				<div style="background-image: url(images/3.gif); width:380px; height:93px; float:left;">
					<br/>Titre
				</div>
				<img src="images/4.gif" style="width:210px; height:93px; display:block;  float:left;" alt="" />
			</div>
		</div>
		<div id="centre">
			<div style="position:relative; width:800px; top:0px; left:50%; margin-left:-400px; background-image: url(images/8.gif);">
				<div style="position:relative; width:75px; top:0px; float:left; background-image: url(images/8.gif);"><img src="images/5.gif" style="width:75px; height:91px; display:block;" alt="" /></div>
				<div style="float:left;">
					Texte<br/>
					Texte<br/>
					Texte<br/>
					Texte<br/>
					Texte<br/>
					Texte<br/>
				</div>
				<div style="position:relative; width:75px; top:0px; float:right; background-image: url(images/13.gif);"><img src="images/7.gif" style="width:75px; height:91px; display:block;" alt="" /></div>
			</div>
		</div>
		<div id="pied">
			<div>
				<a href="http://fluidblow.free.fr"><img src="images/17.gif" style="width:190px; height:75px; display:block; float:left; border:0;" alt="" /></a>
			</div>
		</div>
	</div>
</body>

Merci de m'aider, mais pour des pros du css comme vous ça ne devrait pas être compliquer Smiley cligne .

Bonne soirée.
FluidBlow
Modifié par FluidBlow (06 Jun 2006 - 17:38)
Bonsoir,
Ton image (#pied) se trouve en haut de ta zone d'affichage car tu as ton header en position:absolute donc sorti du flux. Ce genre de positionnement est à éviter dés que possible en parti à cause de genre de problème.
Ensuite tu as une combinaisaon de css local avec tes style issus de ta css, ce qui ne facilite en rien la résolution des problème que tu pourras rencontrer.
Tu as encore beaucoup de chose à améliorer... même si tu as l'air de comprendre le fonctionnement des styles, je te conseille vivement d'aller lire les bases indispensable de ce site pour commencer si tu veux t'éviter de perdre trop de temps dans le futur Smiley cligne
Modifié par Hermann (05 Jun 2006 - 19:35)
Bonsoir

a écrit :
Ton image (#pied) se trouve en haut de ta zone d'affichage car tu as ton header en position:absolute donc sorti du flux. Ce genre de positionnement est à éviter dés que possible en parti à cause de genre de problème.


Comment dois-je donc m'y prendre pour avoir une zone en absolute qui soit juste en dessous de la zone de texte ?

Merci beaucoup de m'aider.
FluidBlow
Tu dois supprimer un meximum de position absolute et le remplecer si possible par un positionnement par marges. Le positionnement absolute sert principalement à placer des éléments en les superposant par l'intermédiaire de z-index, adapater la taille d'un block à son contenu...
Tu dois aussi spécifier la taille des images dans ton code xhtml et non en css pour des raisons d'accessibilité. Le heigt et le width ne sont pas des attributs invalide en xhtml.
Je dois donc changer toutes mes boites div en position:relative; c'est bien cela ?

Mis à part la boite 'conteneur' ?

Merci encore,
FluidBlow
Modifié par FluidBlow (05 Jun 2006 - 19:50)
Vas voir aussi http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Centrer-les-elements-ou-un-site-web-en-CSS
pour le centrage horizontale de ton site.
Le positionnement:ralative ne sert principalement qu'à définir un conteneur initial comme base de positionnement. Exemple:
Si tu veux qu 'un block en position:absolute se place par rapport au bord gauche de ce conteneur initial et non au bord gauche de la zone d'affichage.
Modifié par Hermann (05 Jun 2006 - 20:05)
Hum...

Sa fonctionne parfaitement en position:relative; mais il y a un autre problème maintenant : j'ai une image qui doit etre en background et qui ne s'affiche pas sous Firefox alors que sous ie pas de prob (tiens pour une fois....)

Voir : Lien supprimé

J'envoi le code de ce passage :

/*Css*/
#centre {
	position:relative;
	border: 0px;
}

/*html*/
<div id="centre" style="width: 100%;">
	<div style="position:relative; width:800px; left:50%; margin-left:-400px; background-image: url(images/11.gif);">
		<div style="position:relative; width:75px; top:0px; float:left;"><img src="images/5.gif" style="width:75px; height:91px; display:block;" alt="" /></div>
		<div style="float:left;">
			Texte<br/>
			Texte<br/>
			Texte<br/>
			Texte<br/>
			Texte<br/>
			Texte<br/>
			Texte<br/>
			Texte<br/>
			Texte<br/>
			Texte<br/>
			Texte<br/>
			Texte<br/>
		</div>
		<div style="position:relative; width:75px; top:0px; float:right;"><img src="images/7.gif" style="width:75px; height:91px; display:block;" alt="" /></div>
	</div>
</div>


Merci beaucoup Hermann pour mon premier problème.
Bonne soirée à tous.
FluidBlow.
Modifié par FluidBlow (06 Jun 2006 - 17:39)
Sujet clos
Aller à