28216 sujets

CSS et mise en forme, CSS3

[RESOLU] Header/site/footer : pb avec les images

Bonjour.

Comme indiqué dans le titre mon site se compose de la maniere suivante:
HEADER + MENU (image)
SITE (toutes les infos possibles et imaginables)
FOOTER (avec mon nom bien sur Smiley cligne )

Le probleme est que quand j'integre des images dans la partie "SITE" avec la balise <img>, l'image chevauche mon FOOTER (dans le cas ou l'image est la derniere info du "SITE").

Merci d'avance
Modifié le 02 Feb 2005 - 13:00
Modérateur
Sans code ou lien pour voir où se situe le problème, on ne pourra pas t'aider. On ne peut pas deviner. Il y a plusieurs façons possible de créer une interface et de positionner les éléments.

Donc donnes-nous des éléments pour t'aider.
Alors ca c'est mon index:

<body>

<div id="conteneur">
     <div id="header">
		<div id="banner"></div>
     </div>
	 
     <div id="menu">
		<map name="mapmenu">
			<area shape="rect" coords="25,0,130,20" href="./main.php?page=accueil">
			<area shape="rect" coords="160,0,265,20" href="./main.php?page=menu2">
			<area shape="rect" coords="295,0,480,20" href="./main.php?page=menu3">
			<area shape="rect" coords="510,0,695,20" href="./main.php?page=menu4">
			<area shape="rect" coords="730,0,850,20" href="./main.php?page=menu5">
			<area shape="rect" coords="885,0,970,20" href="./main.php?page=menu6">
		</map>
		<img src="./images/menu.gif" usemap="#mapmenu" border="0" width="1000px">
	</div>
	
	<div id="centre">
		<?php
			if (!isset($_GET['page'])) $page= 'accueil'; else $page= $_GET['page']; 
			switch($page) {
				case 'accueil': include ('accueil.html');break;
				case 'menu2': include ('menu2.html');break;
				case 'menu3': include ('menu3.html');break;
				case 'menu4': include ('menu4.php');break;
				case 'menu5': include ('menu5.html'); break;
				case 'menu6': include ('menu6.html'); break;
			}
		?>
	</div>
	<div id="pied">Créée par xxx et xxx</div>
	</div>


Donc voila, le div id="centre" c'est la ou je met toutes mes infos.
Voila maintenant mon CSS:

body {
margin: 0;
padding: 0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
}
#conteneur {
position: absolute;
width: 100%;
}
#header {
top: 0px;
left: 0px;
height: 120px;
width: 100%;
background-image: url(../images/fondhead.gif);
}
#banner{
height: 120px;
width: 1000px;
background-image: url(../images/banniere.gif);
}
#menu {
width: 100%;
height: 20px;
background-color: #FFFB9B;
}
#centre {
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
background-color:#F6F6F6;
}
#pied {
text-align:center;
height: 30px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #9CD6FF;
}


Voila voila vous avez tout je pense.
Donc mon probleme est quand je met une image dans mon id="centre", elle chevauche mon FOOTER.

PS: le site est fait pour que la partie id="centre" s'allonge vers le bas au fur et a mesure qu'il y a du texte d'ecris.
Et si tu descendais ton footer ??
Je dis sa car moi j'aurais fonctioné comme ça mais j'ai que deux jours de css dans le cerveau Smiley confused

Moi je crois que j'aurais fais style 
margin-top:-..px;
bah mon footer est sencer descendre en fonction du texte dans le "centre".
Si c'est que du texte dans le "centre" le FOOTER descend. Mais avec les images non, c'est ca que je ne comprend pas.

Si je fait comme tu dis avec un margin, quand j'aurai que du texte, il va me faire une grosse marge de fou!!!
LoooL merci d'avoir répondus a ma bétise au moins j'apprends Smiley lol
Nan c'est vrai tu as raison c'est bizarre que l'image passe au dessus mais pas le texte Smiley sweatdrop
bah de ce que j'ai pu voir, j'ai l'impression qu'une image est gerer comme le texte mais au premier pixel en haut a gauche et apres comme si il n'y avait plus rien...


Personne ne peut m'aider?
Il faudrait virer le position: absolute; de ton #conteneur, ou du moins le remplacer par un position: relative; mais on a pas toute ta CSS je crois alors...

[ C'est le HTML dans les includes qu'il nous manque ]
Modifié le 01 Feb 2005 - 00:07
Bon, je retire toutes les betises que je viens de dire. J'ai essayer de mettre une image directement dans le tuto de alsacreation et ca marche donc mon code doit etre faux quelquepart.
Je vais tout revoir depuis le debut, car ca ne sers a rien de continuer sur de mauvaises bases.
Des que je retrouve mon erreur je la posterais. Ca peut tjs servir.
J'ai trouvé d'ou venait le probleme.

En fait si dans l'image, on met align="left" (ou right), et bien ca va merder comme mon site...

Je V essayer de trouver une magouille pour pallier ceci.

edit:

ce qui (je trouve) est bizarre c'est que mon site se compose comme ca:
<div id="header">......</div>
<dic id="centre">mon historique et mon image alignée a gauche</div>
<div id="footer">mon pied de page</div>

Comme vous pouvez lz remarquer, mon pied de page arrive APRES que j'ai refermer mon bloque "centre" et mon image se situe a l'interieur de ce bloque "centre". Donc je pense que normalement les valeurs affecter a l'image ne devraient pas affecter le footer.

PS : avec IE, l'image se retrouve derriere le footer
Modifié le 01 Feb 2005 - 00:34
Donc voila, j'ai fait un test avec l'exemple du site alsacreation. Un site de resolution 750px. Et dans le bloc principale je met simplement <img src="images.jpg" align=left></img>. Et voila le resultat. Quelqu'un peut il m'expliquer et m'aider a parrer ce pb? upload/703-pb.jpg
Tu utilises l'attribut align qui est déconseillé, tu devrais peut être pour l'image utiliser la propriété float en css en l'appliquant à ton image.

ps: c'est dommage que nous n'ayons pas un exemple en ligne Smiley cligne
non non avec float: left; ca me fait le meme probleme.
J'avais deja essayer, j'ai meme essayer en mettant mon image dans un bloc avec un float pour le bloc mais toujours le meme probleme lol. Je commence a desesperer. Mais bon, je pense qu'un specialiste va courrir a mon secour. lol
Je vous donne le source du petit site modifier.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Largeur fixe 750, header/contenu/footer.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
@import url("contenu_fixe.css");
</style>
</head>

<body>
<div id="conteneur">
	  <div id="header">header <a href="http://www.alsacreations.com/articles/modeles">(voir tous les modèles)</a> - <a href="http://www.alsacreations.com/articles/modeles/contenu_fixe.css">(voir
    la feuille de style CSS)</a>
</div>

	  <div id="centre">
  	  <p>partie centrale</p>
  	  <p>partie avec du contenu occupant le reste de la largeur</p>
  	  <p>partie avec du contenu occupant le reste de la largeur</p>
  	  <p>partie avec du contenu occupant le reste de la largeur</p>
  	  <p>partie avec du contenu occupant le reste de la largeur</p>
  	  <p>partie avec du contenu occupant le reste de la largeur</p>
  	  <p>partie avec du contenu occupant le reste de la largeur</p>
  	  <p>partie avec du contenu occupant le reste de la largeur</p>
  	  <p>partie avec du contenu occupant le reste de la largeur</p>
  	  <p>partie avec du contenu occupant le reste de la largeur</p>
  	  <p>partie avec du contenu occupant le reste de la largeur</p>
  	  <p>partie avec du contenu occupant le reste de la largeur</p>
  	  <p>partie avec du contenu occupant le reste de la largeur</p>
	  <img src="action_philanthropique.jpg" height="300"></img>
  	</div>
	  
	  <div id="pied">pied de page</div>
</div>
</body>
</html>




body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#conteneur {
position: absolute;
width: 750px;
left: 50%;
margin-left: -375px;
}
#header {
height: 100px;
background-color: #99CCCC;
}
#centre {
background-color:#9999CC;
}
#pied {
height: 30px;
background-color: #99CC99;
}
p {margin: 0;}

img {float: left;}


ps : le site n'est pas encore en ligne et j'ai quelques probleme avec mon compte dyndns Smiley decu
Modifié le 01 Feb 2005 - 19:14
oui.

Sachant que je ne connais pas la taille de l'image a priori. En effet, je fait un historique et il y a des images de tailles differentes dans plusieurs chapitres. Donc dans un chapitre, je vais avoir une image de 400px de haut (par exemple) et dans un autre, elle fera 200px.

J'espere que je m'explique correctement Smiley confus
Ton problème précédent vient à mon avis du fait que ton contenu du "centre" est trop court, en particulier si tu ne connais pas la taille des images a priori, et que ton image était placée dans le code à la fin de ta div centre.

Je te propose une autre une autre mise en page adaptée de la tienne qui va modifier la méthode de centrage de ton conteneur et appliqué la valeur both à la propriété clear que je rajoute à ton pied de page. Je déplace également ton image en début de ton code dans la div centre. Je commente le code css ci dessous:


body {
font-family:Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
text-align:center;/*pour forcer certains IE à centrer le conteneur, l'alignement du texte est rétabli dans #conteneur*/
}

#conteneur {
background-color:#9999CC;/*pour être raccord couleur #centre*/
width: 750px;
margin:0 auto;/*une méthode différente de centrage des élément, voir le tuto d'Alsa sur le centrage*/
text-align:left;/*pour certains IE qui ne comprennent pas*/
}

#header {
height: 100px;
background-color: #99CCCC;
}

#centre {
background-color:#9999CC;
}

#pied {
clear:both;/*oblige ton pied à se positionner sous un élément flottant, ton image*/
height: 30px;
background-color: #99CC99;
}

p {margin: 0;}

img {float: left;}

Le code html reste inchangé sauf pour l'image qui se retrouve comme suit:
<div id="centre">
<img alt="action_philanthropique (4K)" src="action_philanthropique.jpg" height="300" width="263" />
  	  <p>partie centrale</p>
(...)</div>
merci, l'image n'est plus au dessus de mon footer mais il reste un petit probleme. Smiley biggrin
Regarde sur le screenshot que j'ai fait, a l'endroit de l'image, le fond est blanc, et ma bordure sur la droite ne continue pas jusqu'en bas et mon padding-bottom n'apparait pas. En fait, j'aurais voulu que mon div #centre soit prolongé avec l'image.

Je sais je suis chiant mais bon, je continue a chercher dans mon coin. Si quelqu'un trouve une solution... ou toi Igor (tu m'as deja pas mal aidé... Smiley cligne )
Sujet clos
Aller à