28220 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Après de long jours à me dépatouiller seul je m'en remets à vous.
j'ai des problemes avec mes floats mais différents selon le navigateur.
Sous IE : décalage entre mon footer, le corps et le header
Sous Firefox : décalage entre mon footer et le corps
Pour admirer c'est ici http://kwa29.free.fr/Sofibra/index3.html
De plus liens direct pour les 2 fichiers CSS associés
http://kwa29.free.fr/Sofibra/images3/base.css
http://kwa29.free.fr/Sofibra/images3/couleurs.css

Je vous poste tous de meme la ou je pense que cela péche :
HTML

<div id="x-footer-errata">
<a href="" title="Plan du site">plan du site</a> | 
<a href="" title="Mentions legales">mentions l&eacute;gales</a> | 
<a href="" title="Crédits photos">cr&eacute;dits photos</a>	
	
	<br />SOFIBRA &copy; 2002 -2005
	<a href="http://jigsaw.w3.org/css-validator" title="CSS Validator"><img src="images2/css.gif" alt="Aucune image..." /></a>	
	<a href="http://validator.w3.org/check/referer" title="X-HTML Validator"><img src="images2/xhtml.gif" alt="Aucune image..." /></a>
		</div>		


CSS

#x-footer {
	clear:									both;
	width: 							100%;
	margin: 							0 auto;
	text-align: 					center;
}
#x-footer img {
	border:							0;
}
.bando_gauche { 
	display: 							block; 
	float: 								left; 
	margin-right: 			0px; 
}
.bando_centre { 
	display: 							block; 
	margin: 							0px auto; 
}
.bando_droite { 
	display: 							block; 
	float: 								right; 
	margin-left: 				0px; 
}
#x-footer-errata {
	font-size: 						11px; 
	font-family:					Arial, Verdana, Helvetica, sans-serif;
	font-weight:					bold;
	color:								white;
	width: 							100%;

	text-align: 					right;
	padding-bottom: 	10px
}


Voili Voila. J'attend avec impatience vos remarques et commentaires. Smiley ravi
Je m'en sors plus. Cela fais deja 2 semaines que je me bats avec les div sans avoir un résultat convaincant.
J'ai tout cassé pour refaire encore une enieme fois.
Et le pb viens toujours des blocs... voir ici http://kwa29.free.fr/Sofibra/index3.html

Très franchement je ne souhaite pas polémiquer mais quand meme la mise en page sans tableau c'est vraiment la roulette russe. C'est pas très propre (hack pour IE, par pixel, ...) et c'est très contraignant.

Bref, j'en peut plus, aider mois messieurs dames avant que je fasse un lacher de chiens sur mes CSS. Merci beaucoup.... Smiley confus
Est ce que cela irait ??? :

#x-box-1 {
	width:								180px;
   border-left: 					gray 1px solid;
	border-bottom:			gray 1px dotted;
	float: 								left;
}
#x-box-2  {	
   margin: 							0 auto;
   border-left: 					gray 1px solid;
	border-bottom:			gray 1px dotted;
	width: 							500px;
	background: 				url('Edito_sofibra.gif') no-repeat center center;
	clear:									right;
overflow: hidden;
 } 

Modifié par Kwa29@louest (07 Mar 2005 - 16:20)
Administrateur
Tu ne t'en sors plus parce que :
- Tu veux réaliser en CSS ce que tu faisais auparavant en tableaux (tu "penses" tableau dans tes CSS)
- Tu veux aller très vite et acquérir des compétences très nouvelles en 2 semaines.

Sache que tout est possible en CSS, et la plupart du temps (99% du temps) sans hack. Pour ma part, j'ai toujours évité les hacks sur tous mes sites CSS.

Mais si tu es trop pressé par le temps, oublie ce nouvel apprentissage. Remets-toi aux tableaux et intègre les CSS progressivement (en gardant au début une architecture en tableau).

Une fois que tu maîtriseras les différents schemas de positionnement CSS, tu comprendras qu'il ne faut plus "penser" en tableaux et en cellules comme avant.
Merci beaucoup pour ta réponse Raphael.
Et effectivement tout ce que tu dis est vrai. cela fais 2 semaines que j'ai un site en tableau qui marche et qui valide.
Et depuis 2 semaines je me bats avec les floats, les div, ...
Je ne me doutais pas que l'apprentissage de cette méthode serait si longue...
Mais je trouve quand meme dommage de lacher l'affaire alors que je ne suis pas très loin du but visé (breton dans l'ame donc un peu tenu osi).

Bref je me donne encore une semaine et puis ensuite je reprend les tableaux.
PS : vous risquez fort de me voir pendant cet semaine. Smiley biggrin