28173 sujets

CSS et mise en forme, CSS3

Mon webdesign CSS connait quelques problèmes....

Bonjour,
je me suis lancer dans mon premier site FULLCSS de ma vie dans le cadre d'un exercice scolaire.

J'ai réussi a faire le gros de la mise en page mais j'aimerais que l'on m'explique comment faire pour en finir avec ces trois derniers bug :

1. Comment faire en sorte que le texte reste dans sa zone et ne passe pas par dessus le footer ?

2. Comment faire pour que le texte entoure les images que j'ai mis ; j'ai eu connu la propriété mais je ne retrouve pas mes papiers... méaculpa...

3. comment faire pour que dans IE ma mise en page soit centrée alors qu'elle l'est dans firefox ?

Merci d'avance car j'aimerais vraiment comprendre un peu tout cela.
Modifié par Cdic (29 Mar 2007 - 22:43)
Salut.

Pour ton texte par-dessus le footer, impossible de t'aider sans un bout de ton code ou mieux un exemple en ligne.

Pour les images, ça doit être la propriété float dont tu parles.

Enfin pour centrer un site, on utilise généralement des marges auto à gauche et à droite sur le conteneur principal.
Salut,

Pour ton footer, il te suffit de mettre un clear:both à celui ci, rien ne devrait plus l'empêcher d'être en dessous de tout contenu, sans chevauchement.

Pour les images entourées de texte utilise la propriété float: left ou float: right selon le côté ou tu veux ton image. Celle ci doit se trouver avant le contenu qui l'encadre dans le code html.

Enfin, pour le centrage de site, va faire un tour du côté de la FAQ, çà devrait répondre à ta question.
Pour le positionnement cela marche mais j'ai encore le probleme pour mon ma div qui s'appelle bas et j'ai encore le probleme avec les images hélas.

Je viens de passer deux heures dessus... et je ne vois pas comment faire.
J'ai essayé déifférents parametres de float, je me demande d'ou cela peut venir.

Merci d'avance si vous voyez des solutions Smiley smile
Salut,
ben mon colon, comme mise en jambe du matin ça se pose là, heureusement qu'ultraedit a un merveilleux truc -> indenter à nouveau pour remettre tout ça d'équerre Smiley smile tu devrais faire la même because si un jour tu reviens dessus tu vas t'arracher les poils Smiley smile

Alors avant d'y retourner faire un peu mumuse, tu as mis ton image dans un div contourimage en dehors du div corps qui contient le texte. Comme ça, il y a peu de chance que le texte habille l'image !

en plus tu ne t'occupes pas du tout du div contour image qui s'en va donc prendre la largeur au moins de ce qu'il contient, soit l'image +
.contourimage img{
	margin-top: 10px ;
	border: 6px ;
	border-color: #006600 ;
	border-style:solid ;
	width: 150px ;
	height: 180px ;
	
	margin-left: 280px ;
	float:right ;
}
la marge de 280px à gauche, + 2x6px de bordure soit 442px !
même si tu rapatries tout ça dans le div corps qui contient le texte, celui-ci n'est pas près d'habiller l'image, le pauvre ne fait que 462px de large !
.corps {
	font-size: 12px ;
	
	margin-top: 0px ;
	margin-left: 200px ;
	margin-bottom: 0px ;
	margin-right: 0px ;
	
	padding-top: 0px ;
	padding-left: 0px ;
	padding-bottom: 0px ;
	padding-right: 0px ;
	
	width: 462px ;
}
(hautement simplifiable... en
width: 462px;
padding: 0;
margin: 0 200px 0 0;
font-size: 12px;
!!)

laisse donc l'image tranquille et attribue une largeur à ton div qui lui permette, une fois mis à l'intérieur de "corps" de laisser la place au texte pour lui tourner autour et tu verras, ça ira mieux. Bon, je vais jeter un oeil au pourquoi de ce texte de 1km qui passe par dessus le conteneur Smiley smile

Have swing
re,
et bé voilà, c'est tout con
#ligne{
	background-image: url("images/ligne.png") ;
	background-repeat: repeat-y ;
	width: 672px ;
	height:500px ;
}

ton conteneur ligne se ferme sous tout le corps du truc et comme il a une hauteur fixe de 500px et bé ton contenu se la joue overflow Smiley smile . Ton footer lui vient tout naturellement se poser sous la fin des conteneurs qui sont au-dessus mais le contenu de ceux-ci n'entendent pas se la laisser raconter comme ça. Vire juste la ligne
height: 500px;
et hop, tout rentrera dans l'ordre.

Alors maintenant, histoire de mourir moins sot Smiley smile comment j'ai trouvé ?
Un truc vieux comme les css (je crois d'ailleurs qu'il en est question qque part sur le site dans les astuces ou faq ou je ne sais plus Smiley smile )

j'ai remplacé
background-image: url("images/ligne.png") ;

par
background-color: red;

et là, je t'assure, c'est parlant quand tu vois un beau pavé rouge qui s'arrête et le texte qui passe par-dessus. C'est probablement un des trucs qui sauve la peau quand ça ch... avec des pavés qui ne se positionnent pas comme on veut, leur mettre des couleurs de fond bien pétantes et différenciées et, là, je t'assure, on voit qui fait quoi, qui est où, ce qui dépasse, etc

Have swing
Sujet clos
Aller à