18041 sujets

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

Float right [résolu]

bonjour à tous !!
J'ai plusieurs question liées à un tuto de chez Alsacréations..

Il s'agit entre autre de pouvoir intégrer une image en float right au top d'un site ...ce que j'ai réussi à faire ici ... http://franck.sacco.free.fr mais qui ne marche pas avec Internet explorer sous l'adresse de mon blog ici : http://culturgraphe.free.fr/blog/

Quelqu'un a t'il une idée ? Smiley rolleyes
J'ai fait pas mal de recherches et de manip je ne vois pas pourquoi sous Ie cela ne fonctionne pas ...

Merci de votre aide
Modifié par franky (06 Jul 2007 - 20:21)
Re bonjour à tous !

J'ai fait quleques modifs, et j'ai pu tant bien que mal caler mon image à droite...
(pirogue)
Maintenant je souhaiterai arriver à faire descendre le texte en haut pour le 



						<div id="top">

	<img src="images/palm.gif" alt="feuille illustration" width="158" height="100"/>       
	 <p>
         "L'image est un révélateur du monde qui nous entoure..."
         </p>

		 
	  
		
		
			
					 
						
					
#top img{
float: right;
margin: 0 0 0 0;
}  
      
#top 
	{	
	background:#1A8BD0 url(images/eau.jpg) top left no-repeat;	
	height:100px;
	}

#top p {
font-family:"bitstream Vera Sans",verdana, arial, Helvetica, serif;
font-size: 1.1em;
margin:70px 0 0 180px;
color:white;
font-weight:bold;
}

le gros souci ...c'est qu'avec firefox le margin ne fait pas descendre le texte mais tout le bloc ...au contraire Sous IE tout fonctionne...
Quelle est l'astuce ?
Merci de votre aide

http://culturgraphe.free.fr/blog/index.php[/url]


Exemple tiré du livre CSS 2 (Merci Raphael) éh oui je l'ai moi !
Bonjour,

franky a écrit :
le gros souci ...c'est qu'avec firefox le margin ne fait pas descendre le texte mais tout le bloc

Rajouter un padding: 1px 0; au bloc concerné, et lire la page suivante pour les explications : Blocs imbriqués et fusion des marges.

Mais bon, c'est loin d'être « le gros soucis » sur cette page. Le gros souci, ça serait plutôt le positionnement très tarabiscoté des blocs, avec utilisation de marges négatives (en EM qui plus est !) pour placer les colonnes. Si je remets à zéro les marges négatives des deux colonnes latérales (qui, avec ma configuration, sortent à moitié de l'écran et ne sont donc pas lisibles correctement), la véritable structure du document se révèle, et on y voit un peu plus clair.

Il faudrait remettre tout ça à plat :
- ne surtout pas utiliser les EM pour les largeurs, marges et padding latéraux des éléments (tester les conséquences lors de l'agrandissement du texte pour comprendre pourquoi) !
- positionner les colonnes flottantes avec un peu plus de cohérence et un peu moins de bidouille. Voir ce tutoriel : Un design fluide avec trois «colonnes», grâce au positionnement flottant.
Florent V. a écrit :
Bonjour,


Rajouter un padding: 1px 0; au bloc concerné, et lire la page suivante pour les explications : Blocs imbriqués et fusion des marges.

Mais bon, c'est loin d'être « le gros soucis » sur cette page. Le gros souci, ça serait plutôt le positionnement très tarabiscoté des blocs, avec utilisation de marges négatives (en EM qui plus est !) pour placer les colonnes. Si je remets à zéro les marges négatives des deux colonnes latérales (qui, avec ma configuration, sortent à moitié de l'écran et ne sont donc pas lisibles correctement), la véritable structure du document se révèle, et on y voit un peu plus clair.

Il faudrait remettre tout ça à plat :
- ne surtout pas utiliser les EM pour les largeurs, marges et padding latéraux des éléments (tester les conséquences lors de l'agrandissement du texte pour comprendre pourquoi) !
- positionner les colonnes flottantes avec un peu plus de cohérence et un peu moins de bidouille. Voir ce tutoriel : Un design fluide avec trois «colonnes», grâce au positionnement flottant.

Je voulais vous remercier pour votre aide
J'ai en effet réglé le problème de la banière haute du site pour IE...
Et j'ai suivi votre conseil à propos de la mise en page des trois colonnes remises à 0 pas de em que des px c'est mieux pour l'affichage ...
Par contre là j'ai du faire un truc qui va pas ..je n'arrive plus à caler la colonne de droite correctement .
Je vais encore faire un tour sur les liens que vous m'avez donné

Merci à vous
Disons que là il faudrait revoir l'ordre des éléments dans le code HTML, et au passage supprimer les trois ou quatre div imbriqués qui ne servent pas à grand chose ici (mais ça pourrait désactiver certains styles qui utilisent les identifiants ou classes de ces div dans leurs sélecteurs, donc faut voir...).

En gros, la technique la plus simple consiste à avoir, dans l'ordre :
- colonne de gauche (float: left) ;
- colonne de droite (float: right) ;
- bloc central (marges de chaque côté).
C'est la technique expliquée sur le tutoriels pour trois colonnes flottantes.

Quand on maitrise un peu les flottants, on peut complexifier un tout petit peu pour avoir trois blocs dans le même ordre que l'ordre d'affichage. Ce qui donnerait :
- bloc conteneur en width: 80%; float: left, avec à l'intérieur :
- - colonne de gauche en width: N% ou Npx; float: left ;
- - bloc principal non flottant avec marge à gauche de la largeur de la colonne de gauche.
- colonne de droite non flottante avec marge à gauche de 80% (ou un contexte de formatage... voir le tutoriel sur les trois colonnes pour plus de détails).

Mais bon, la première solution n'est pas si mauvaise. Smiley cligne
Florent V. a écrit :
Disons que là il faudrait revoir l'ordre des éléments dans le code HTML, et au passage supprimer les trois ou quatre div imbriqués qui ne servent pas à grand chose ici (mais ça pourrait désactiver certains styles qui utilisent les identifiants ou classes de ces div dans leurs sélecteurs, donc faut voir...).

En gros, la technique la plus simple consiste à avoir, dans l'ordre :
- colonne de gauche (float: left) ;
- colonne de droite (float: right) ;
- bloc central (marges de chaque côté).
C'est la technique expliquée sur le tutoriels pour trois colonnes flottantes.

Quand on maitrise un peu les flottants, on peut complexifier un tout petit peu pour avoir trois blocs dans le même ordre que l'ordre d'affichage. Ce qui donnerait :
- bloc conteneur en width: 80%; float: left, avec à l'intérieur :
- - colonne de gauche en width: N% ou Npx; float: left ;
- - bloc principal non flottant avec marge à gauche de la largeur de la colonne de gauche.
- colonne de droite non flottante avec marge à gauche de 80% (ou un contexte de formatage... voir le tutoriel sur les trois colonnes pour plus de détails).

Mais bon, la première solution n'est pas si mauvaise. Smiley cligne

Bon après diverses manipulations le problème semble résolu..mais c'est chaud quoi ...surtout avec IE . La j'ai rajouté une largeur fixe, puis joué avec le margin ...c'est clair qu'il faudrait encore passer les em en px ..mais bon

Merci beaucoup en tous cas !! Smiley biggrin
Sujet clos
Aller à