28172 sujets

CSS et mise en forme, CSS3

Bonjour

Je sais que le problème est déjà abordé dans un post juste en dessous avec une solution que je suis allé lire écrit par Raphael... je ne m'en suis pas sorti pour autant... depuis hier miniuit 30, je m'arrache les cheveux... même dans le bouquin CSS 2 de Raphael... j'ai eu beau relire le chapitre sur le placement des blocs (chapitre 8)... rien à faire.

Mes code me sembles OK mais dans Firefox... le preview... c'est le foutoire.

Alors mes blocs sont tous en relative... en absolute j'ai essayé aussi... ca va pas mieux... je vous soumet mes codes et demande à vos yeux avertis votre analyses :

Le CSS (partis concernés) :

...
#contenugeneral {
position:relative;
margin:auto;
top:10px;
width:1000px;
height:auto;
}
#cadrehaut {
position:relative;
margin:auto;
width:1000px;
height:36px;
background-image:url(images/cadres/cadre_haut.png);
}
#cadremilieu {
position:relative;
width:1000px;
background-image:url(images/cadres/cadre_milieu.png);
background-repeat:repeat-y;
}
#cadrebas {
position:relative;
margin:auto;
width:1000px;
height:36px;
background-image:url(images/cadres/cadre_bas.png);
}

#contenu {
	position:relative;
	float:left;
	left:30px;
	top:5px;
	width:600px;
	height:auto;
}
#footer {
position:relative;
padding:5px;
height:15px;
width:auto;
text-align:center;
background-color:#97BF0D;
}
...


Et le HTML :

<body>
<div id="contenugeneral">
	<div id="cadrehaut"></div>
	<div id="cadremilieu">
  		<div id="contenu"><?php include("contenu/accueil.php"); ?></div>
  		<div id="contenupub"><?php include("pubs.php"); ?></div>
	</div>
	<div id="cadrebas"></div>
</div>
 <div id="footer"><?php include("footer.php"); ?></div>
</body>


Ce qui se passe c'est que le "cadrehaut" se retrouve suivi de "cadrebas" (alors qu'il devrai venir après le "cadremilieu") . Le "footer" se retrouve superposé en haut de "cadremilieu"... alros qu'il est devrai être tour en bas. Smiley bawling Smiley bawling Smiley bawling
Par ailleurs, l'image en background du "cadremilieu" qui devrai se répéter verticalement en fonction du contenu ne se fait pas non plus.


J'y comprends rien.
J'ai cherché sur le forum... un ou 2 post en dessous du mien le problème est soulevé et c'est Mikatchu qui renvoi vers un article de Raph... qui ne m'a pas permis de voir ou est mon erreur.

Merci de votre aide.... sincèrement je comprends pas.
Modifié par milsou2 (30 Aug 2009 - 17:37)
As-tu un zonning ou une maquette/shéma de ce que tu souhaite faire ?
Déjà tout définir en position absolute c'est pas terrible, avec des marges et des padding tu peux avoir le même résultat que ce que tu semble avoir voulu faire.
Modifié par pfoofen (30 Aug 2009 - 16:47)
C'est gentil à toi Heyoan de ton lien... que je vais regarder très attentivement ce soir... sinon par rapport au codes que j'ai mis... tu y vois quelque chose à changer ?
Merci bien
milsou2 a écrit :
sinon par rapport au codes que j'ai mis... tu y vois quelque chose à changer ?
Eh bien le plus important est que tous les position:relative; me semblent inutiles. Ensuite tout dépend du rendu que tu souhaites obtenir...

Ah oui : plutôt que de préciser width:1000px; pour tous les blocs conteneurs il serait bien plus simple de les placer tous à l'intérieur d'un autre bloc conteneur global dont il suffirait de préciser la largeur...
OK OK > un peu moins d'indication de positions dans mes DIV et tout rentre dans l'ordre.
Merciiii Smiley biggrin

L'article de Florent m'a été bien précieux... en effet mes indication de position: relative a tout va... c'est pas bien !
Je dors moins bête ce soir.
Merci
Modifié par milsou2 (30 Aug 2009 - 17:41)