18073 sujets

Questions générales et questions de débutants

Positionnement images float

Bonjour,

Je suis nouveau sur ce forum et j'espere que ce probleme n'a pas deja été traité.
Je souhaite positionner 2 images en haut du body l'une a gauche et l'autre a droite, j'ai donc utilisé float: left et float: right ce qui marche bien mais le probleme est pour la suite de la page, le texte que je met ensuite est systematiquement superposé aux images sauf qd j'ai quelque chose avant mes images....
Si jamais quelqu'un comprend mon probleme et a une idée de la reponse merci.
Bienvenue à toi duffy76..


afin de rétablir le flux normal de la page sous les images en question, il va te falloir donner la propriété "clear:both" au conteneur imédiatement en dessous des tes images.


tu as du code à nous montrer ?
Modifié par ernstein (05 Sep 2005 - 11:59)
Merci pour la rapidité de la réponse.

Voila le html et le CSS correspondant si jamais il y a des erreurs ou des trucs pas beau merci de me le faire remarquer je debute....


<body>
<img src="lion4.gif" alt="logo" class="logo">
<img src="titre.transparent3.gif" alt="titre" class="titre">


<div class="page">
<h1>Titre</h1>
blablabla
<br>
<br><br><br><br><br><br><br>
vw
dfg
<br><br><br><br><br><br>
dfgwdf
</div>
</body>



.logo {
	float: left;
	margin-left: 50px;
}

.titre {
	float: right;
	margin-top: 50px;
}

.page {
	clear: both;
	background-color: white;
	margin: 10%;
	padding: 30px;
	clear: left;
}


Avec ce code je n'ai effectivement plus de superposition du texte avec les images mais apparament il y a un probleme avec les marges de page qu iont l'air de passer au dessus des images Smiley ohwell .....
et bien en rapport à ce que j'ai compris de ton besoin je ferais les choses quelques peux différemment.

html :

<body>
<img src="lion4.gif" alt="logo" id="logo" />
<img src="titre.transparent3.gif" alt="titre" id="titre" />
<div id="page">
	<h1>Titre</h1>
	<p>lablablablablablablablablablablabla blablab lablablablablablablablab lablablablabla</p>
</div>
</body>


il est à mon avis plus pertinent de définir des id plutôt que des classes sur les blocs logo et titre dans le sens ou ils seront uniques dans la page.

ensuite tu peux faire un fichier CSS dans ce genre :


#logo {
float: left;
margin-left: 50px;
background-color:#3333CC;
}

#titre {
float: right;
margin-top: 50px;
background-color:#FFFF33;
}

#page {
clear: both;
background-color: white;
margin: 10%;
padding: 30px;
background-color:#663366;
}


j’ai supprimé le clear:left de page car le clear:both le remplace. les couleurs de fond se juste la pour matérialisé les blocs.
Merci pour cette precision sur les id
Le rendu est effectivement assez proche de ce que je cherche a par pour le margin-top de page qui s'applique apparament au dessus des images et non pas entre les images et le texte ya t il moyen de modifier cela?
n'aurais tu pas sous la main, un scaner, une feuille un crayon pour nous faire un petit crob de ce que tu souhaite au final ?

y'a des changes qu'en réalité il soit nécessaire de placer tes images dans des div pour générér des boites autour..

juste pour le fun, quand je commence à écrire le code d'une page ou d'un template html, je prends ma maquette, j'imagine des zones réctangles autour des principales.

ensuite tu écris ton code en définissant chaque zone par <div id="nomzone"> </div>

c'est un bon point de départ. près il ne faut pas oublier que chaque balise à au déprt un style de représentation propre au navigateur que tu utilise. çà vaut aussi pour les marges. Donc si dans ton esprit tu part sur un design précis au pixel près, il se peut qu'il soit bon d'annuler toutes les marges par defaut en utilisant le selecteur universel. "*" (il me semble avoir lu un post de Raphael à ce sujet.)

avec :



* {margin:0;
padding:0;
}


et ensuite tu ajoutera les marges que tu souhaites avoir en fonction des besoins.

si tu pouvais mettre ton code en ligne avec tes images ce serait plus simple pour avancer.
Modifié par ernstein (05 Sep 2005 - 14:04)
Sujet clos
Aller à