placer une image à droite de mon texte

**criscaro** · 04/12/2006, 13h43

bonjour,

après avoir lu et relu le cours de PB Naigeon sur les positions en CSS et après avoir tenté plusieurs possibilités, je n'arrive tj pas à caler mon image à droite de mon texte.

j'ai un div contenu
dans ce div, j'ai un div bloc pour le texte et une image dans ce mm div ; je pensais bêtement qu'en indiquant la valeur float:left à mon image, elle se mettrait à droite de mon texte ! hé bien non, elle se met à droite certes mais sous le texte !!!! donc il y a forcément quelque chose que je n'ai pas compris ou alors une erreur dans mon div contenu qui empêche ça mais quoi ????

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
		<div id="contenu">
 
			<div id="bloc1"> Bienvenue &agrave; toi, visiteur, voyageur... Arr&ecirc;te-toi un instant en ce lieu et repose-toi.<BR><BR>&nbsp;Tu es fatigu&eacute;, d&eacute;sorient&eacute; et troubl&eacute;. Tu te demandes ce qui se passe, tu as l'impression de sombrer dans la folie. Mais es-tu vraiment fou ?&nbsp; Ce que tu vois autour de toi est-il r&eacute;el ? Que  dirais-tu s'il n'existait pas un monde, mais une infinit&eacute; d'univers ? Si ton monde n'&eacute;tait qu'une ombre parmi les ombres ? Une Ombre se d&eacute;formant en fonction de son &eacute;loignement de la seule source de r&eacute;alit&eacute;... Ambre ... Viens avec nous, marche vers ton destin. Nous t'emmenons voyager &agrave; travers ... Ombre.
			 <img id="droite" src="img/mausolee_corwin.jpg" alt="Mausolée de Corwin" height=260px width=450px>
			</div>

et

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
div#contenu {
	width:75%;
	height:60%;
	float:left;
	text-align: justify;
	color: #00CECE;
	margin-bottom: 10px;
	font-size: 120%;
}
 
	div#bloc1{
		height: 45%;
		margin-left: 10px;
		margin-right: 10px;
		margin-bottom: 20px;
		position: absolute;
	}
 
	div#droite{
		float: left;
	}

le fait que j'utilise des pourcentages pose t-il problème ? Y a t-il autre chose ? bon je continue mes lectures et mes recherches ! il me reste encore quelques cheveux ....

merci pour les pistes et les tutos correspondants s'il y en a que je n'ai pas lu !

**MasterOfChakhaL** · 04/12/2006, 14h00

euh:

Code x :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
ANGLAIS   FRANCAIS
left      gauche
right     droite

peut-être un élément de réponse...

Sinon, un élément flottant se placera sur le côté s'il y a la place.

astuce vite fait:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

* { border: 1px solid red; }

te permettra de savoir un peu ou sont tes éléments. Ce n'est pas forcément parfait puisqe les bordures se rajoutent à la taille de tes blocks, mais ca permet souvent de se faire une bonne idée de ce qui se passe...

Je te laisse faire quelques essais...

**criscaro** · 04/12/2006, 14h13

merci master...

j'ai toujours eu un pb avec droite et gauche même en français !!!

merci de me rappeler la traduction!

cela dit, il est vrai que je n'ai pas donner de taille à mon bloc qui doit contenir mon image et si j'ai bien tt compris, je dois donner des tailles à id#"bloc1" et à id#"droite" ?

pourtant, il me semblait qu'en disant simplement float, le texte glisserait automatiquement le long de l'image, enfin tout au moins est-ce ce que j'avais lu ??? mauvaise interprétation de ma part ?

**MasterOfChakhaL** · 04/12/2006, 14h23

re,

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<div id="conteneur" >
  <img src="..." />
  bla bla bla
</div>

A mon avis, ce n'est pas la peine de mettre trop d'élément, ce qui précède me parait suffisant niveau xhtml.
Quand tu utilises float, l'ordre dans la source a une importance.

Quand tu utilises text-align, je me demande si cela ne force pas le texte à prendre toute le ligne d'où l'image en dessous. Je n'ai pas de certitude à ce sujet, ca pourrait bien dépendre des navigateurs...

Je te conseille également de déclarer la taille de l'image dans le css. Vu que tu sépares le fond de la forme, autant le faire entièrement

.

Dernière remarque qui me vient à l'esprit:
Ce n'est qu'un avis personnel mais je pense qu'indenter le code CSS pourrait t'induire en erreur.
En effet, l'arborescence du document xhtml peut se retrouver dans les sélecteurs, c'est tout.

**criscaro** · 04/12/2006, 18h15

re master,

merci de tes remarques !

si je veux séparer l'image du bloc texte c'est au cas où la personne avec qui je bosse me demande de changer cette image, je me suis dit qu'il serait plus simple pour moi de le faire ainsi !

lorsque j'indente mon texte en css, c'est pour me permettre de mieux voir dans quelle partie je suis de ma ccs par rapport à mon htlm, je trouve ça plus simple !

je joins un tit schéma de ce que je veux obtenir en fait sur cette fichue page, tu comprendras p-ê mieux ce que je cherche à faire !
en attendant, je poursuis mes recherches

**trotters213** · 04/12/2006, 18h19

Pourquoi dans ton CSS ne fais-tu pas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
div#bloc1{
height: 45%;
margin:0 10px 20px 10px;
float:left;
}
 
div#droite{
float: left;
}

Par contre comme MasterOfChakhal le dit, il faut que la somme des largeurs de ton images et ton texte ne dépasse pas la largeur du conteneur.

[edit]Pour avoir ce que tu veux :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<div> <!--rouge-->
  <div style="float:left;">logo avec background</div>
  <div style="float:right;">
    <div>titre1</div>
    <div>titre2</div>
  </div>
</div>
<div style="clear:both;"> <!--jaune-->
  <div style="float:left; width:100px;">menu avec background</div>
  <div style="float:right; width:400px;">
    <div>
      <div style="float:left;">bloc 1</div>
      <div style="float:right;">image droite</div>
    </div>
    <div style="clear:both;">
      <div style="float:left;">image gauche</div>
      <div style="float:right;">bloc 2</div>
    </div>
  </div>
</div>
<div style="clear:both;"><!--turquoise-->
  <div style="float:left;">image</div>
  <div style="float:right;">footer</div>
</div>

Non testé[/edit]

**criscaro** · 04/12/2006, 18h48

salut trotters213,

merci pour l'info, je ne savais pas qu'en htlm, je pouvais regrouper les marges ! bon truc ça, il y a sûrement un ordre à respecter dans ce cas ?

j'ai fait comme suggéré par master et j'ai donc séparé en 1 bloc et 1 image et ça marche !!!!!!

bon dès que j'aurai la réponse à ma question sur les marges et l'ordre à respecter, promis trotters je mets résolu !
merci de votre aide, en fait, je pense qu'à lire des tonnes de tutos à droite à gauche, je m'embrouille (vivement que mes bouquins arrivent !)

merci de votre aide tous les deux !!!

ps: si je reprends ton post édité, trotters, je remarque que tu mélanges htlm et css en fait ; je croyais qu'il était obligatoire (ou tt au moins fortement recommandé) de séparer les 2 ! et tu regroupes aussi beaucoup, ça je l'apprends, j'avais tenté ça au début mais je me suis faite "incendiée") !
allez je vais tester ce que tu m'a mis pour comprendre les avantages de ton "articulation"
si t'as 2 sec en plus tu peux me répondre pour l'ordre des margin stp, je prends des notes sur mon tit cahier

**trotters213** · 05/12/2006, 09h01

Envoyé par criscaro

merci pour l'info, je ne savais pas qu'en htlm, je pouvais regrouper les marges ! bon truc ça, il y a sûrement un ordre à respecter dans ce cas ?

Alors tu as plusieurs possibilités, dans le cas que je t'ai donné c'est donné l'ordre c'est haut droite bas gauche (TRBL en anglais).
Sinon tu peux avoir :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
margin:5px;        /* == margin:5px 5px 5px 5px;*/
margin:5px 0px;    /* == margin:5px 0px 5px 0px;*/
margin:5px 0px 3px /* == margin:5px 0px 3px 0px;*/

Envoyé par criscaro

ps: si je reprends ton post édité, trotters, je remarque que tu mélanges htlm et css en fait ; je croyais qu'il était obligatoire (ou tt au moins fortement recommandé) de séparer les 2 !

Alors là c'est super technique je sais pas si je vais pouvoir t'expliquer, ... c'est simplement que j'avais la flême de séparer le fond et la forme car je languissais qu'une chose, partir de mon taf pour rejoindre ma copine à la maison

Mais tu as parfaitement raison, sépare tout le temps le HTML et le CSS tu verras l'intérêt le jour où tu auras un gros site à mettre à jour (même avec un petit, remarque, ça marche aussi)

Envoyé par criscaro

et tu regroupes aussi beaucoup, ça je l'apprends, j'avais tenté ça au début mais je me suis faite "incendiée") !

Je ne comprend pas vraiment ce que tu veux dire par grouper ?

**criscaro** · 05/12/2006, 12h14

salut,

merci trotters pour tes réponses, j'ai pris note dans mon tit cahier !!! c'est tj bien de récupérer des infos telles que celles ci

quand je dis regrouper, je veux dire par là que tu regroupes des infos style (du css) en regard des lignes html !

mais il est vrai que je vais garder les bonnes habitudes, à savoir séparer fond et forme ! je pense que ce sera plus simple pour faire des modifs par la suite du genre modifier font, background, margin etc...

contente d'avancer un peu (beaucoup) grâce à toi et au forum ! je l'ai recommandé d'ailleurs !

bonne journée à toi