28173 sujets

CSS et mise en forme, CSS3

[RESOLU]Probleme positionnement image

Bonjour a vous tous je me permet de vous prendre un peu de votre temps si possible
j'ai un petit probleme avec la creation de mon site, le probleme vient que mon menu n'est pas pris en charge par IE, avec firefox tout se passe pour le mieux
en fait j'avais pris un bout du tuto qui se trouve ici http://blog.alsacreations.com/billets/arriere-plan.htm
pour mon menu
que vous pouvez avoir a cette adresse http://perso.orange.fr/decouverte-cuisine/
je vous met le css
body
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
background-color:#371212;
}
#header {
background-image:url(img_cuisine/titre.jpg);
width:650px;
height: 105px;
}
#conteneur {
position: absolute;
width: 650px;
margin-left: -200px; 
margin-top: -275px; 
top: 50%; 
left: 50%; 
background-color:#371212;
}
#centre {
margin-top:20px;
margin-left:0px;
margin-right:70px;
}
/***********************************************/
arriere /*menu*/
{
	position: absolute;	/* positionnement pour IE5 et IE5.5 */
	top: 149px;
	left: 1%;
	background:transparent url(img_cuisine/menue.jpg) top left no-repeat;	/* arrière-plan général du menu */
	width: 270px;
	text-align: center;
	height: 314px;
	
}
textmenu
{
position:absolute;
top:-1.5em;
left:1.5;
font-weight:bold;
color:#FFFFFF;
}
a{font-family:"english";
font-size:1.70em;
}


et pour l'HTML
<!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=iso-8859-1" />
<title>accueil</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
<!--
a:link {
	color: #000000;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #999999;
}
a:hover {
	text-decoration: none;
	color: #FFFFFF;
}
a:active {
	text-decoration: none;
	color: #332F51;
}
-->
</style>
</head>

<body>
<arriere><br />
  <br />
  <br />
 <a href="index.html">Accueil</a><br />
  <br />
 I&nbsp;<a href="histoire.html"> Histoire de la cuisine</a><br />
<br />
II&nbsp;<a href="recettes.html"> Différentes recettes du monde</a><br />
<br />
III&nbsp;<a href="termes.html"> Définition des termes culinaires</a><br />
<br />
IV&nbsp;<a href="chefs.html"> Quelques grands chefs</a><br />

<br />
<br />
<br />
</arriere>

<div id="conteneur">



	  <div id="header">

</div>

	    
  	<div  id="centre"><img src="img_cuisine/accueil.jpg" />
	
  	 
  	</div>
	  
	

   
</div>

</body>
</html>

pour le moment ce n'est pas le plus important il me reste a creer toutes les autres images mais qand meme
Voila en esperant avoir été assez clair
Merci d'avance
Modifié par oscars (28 Mar 2007 - 23:56)
Bonjour,

Ton positionnement à base d'absolute n'est pas bon (vraiment pas).
Ton menu devait se structurer sous forme de liste,

En gros, je te conseille d'aller faire un tour du côté des tutoriels pour repartir sur du "propre".

Tout le monde est passé par là, bon courage.
merci Ghost d'avoir pris le soin de repondre je me doutais que le code n'etais pas forcement bon, mais sinon pour rester dans le meme esprit il faut que je je me penche plus sur quoi
Merci
Juste en passant
pour ne pas paraitre stupide a part le menu qui m***** le reste du code est correct ou pas
Merci d'avance
Probleme resolu
j'avais pas chercher plus loin que le bout de mon nez
Merci encore Ghost pour l'idee de la structuration de formes de liste
j'ai repris une partie du tuto de raphael merci a lui
d'ailleurs
et que Alsa continue dans la meme lancer
j'avoue j'avais bouder le site c'est dernier temps faute de temps
Salut,

Résolu oui pour le menu, pour le reste tu es toujours en absolute et tu risques d'avoir des problèmes...

Tiens, le petit premier: essayes de redimensionner en largeur la fenêtre de ton navigateur et de passer en 800x600.

A bientôt
Merci Ghost
desole pas eu le temps de repondre plus tot, je viens tester effectivement
gros probleme. Que je me souvienne les cours que j'ai pus avoir, il faudrait pour ma mise en page des blocs en position relative c'est bien ça?
En tout cas encore Merci
Bonjour,

Pas tout à fait!

Un conteneur général width 100%
une colonne gauche en float: left contenant ton menu
un bloc centre dans le flux avec un margin-left: width de ta colonne gauche.
Si tu as besoin d'un footer, le positionner dans le flux en clear: left.

Pour le reste, retravailler tes images de fond pour les rendre extensibles (un peu compliqué mais pas infaisable ) ou alors (plus facile) donner une valeur fixe en px à ton conteneur pour n'avoir qu'à rendre extensible en longueur tes fonds (menu et contenu)

Pas un positionnement ni absolute, ni relatif ... Voilou
Merci pour votre aide
j'ai parcouru le forum le livre de raphael d'autres forum
Mais pour moi en ce moment j'ai pas toute ma tete
donc je melange un peu tout
Encore un grand merci et au besoin je relancerais un petit post
Sujet clos
Aller à