Ce n'est pas de la mauvaise volonté, j'ai lu les liens qu'on ma donné, mais je ne comprends que de manière superficielle...
J'ai bien fouillé sur le site aussi, les liens que tu me montres, je suis tombée dessus et je les ai lu, mais j'ai du mal à tout comprendre.
C'est pour ça que je suis venue sur le forum, en espérant des explications plus prosaïques lol
J'ai beaucoup de mal avec les tuto théoriques purs, je me suis formée en autodidacte et j'ai forcément des manques en matière de technique pure parceque j'ai jamais réussi à me plonger dans un livre de code je décroche et je comprends rien.
J'ai besoin de manipuler pour comprendre.
Je sais faire des choses, mais je ne saurais pas forcément expliquer la technique derrière dans son entièreté.
Je vais vous montrer le code html en question, j'ai juste changé le texte pour un texte lambda:
Il y a une balise img dans le corps d'un paragraphe parceque j'ai placé mon image là en attendant de pouvoir faire mieux.
Je l'ai encadrée de "!" pour la sortir du flux pendant que je fais des essais avec la feuille de style.
Ce que je cherche à faire, c'est à ce que ça fonctionne uniquement avec la div "blocksample", sans que j'ai jamais besoin de la déplacer dans le code html.
Je veux pouvoir déplacer l'image à ma guise en fonction des changements de design.
Mon site sera interactif, avec plusieurs designs, et y'a aucun intérêt si je suis obligée de changer le code html, ce n'est pas ce que je cherche à obtenir.
<div id="block">
<div id="blocksample">
</div> <!-- blocksample -->
<h2>Lorem ipsum</h2>
<h3>dolor</h3>
<div id="blockmenu">
<ul>
<li><a target="_blanck" href="http://www.google.fr">GOOGLE</a></li>
<li><a target="_blanck" href="http://www.google.fr">GOOGLE</a></li>
<li><a target="_blanck" href="http://www.google.fr">GOOGLE</a></li>
</ul>
</div> <!-- blockmenu -->
<p><!img class="sample" src="images/sample.jpg" alt="" /!>Atque, ut Tullius ait, ut etiam ferae fame monitae plerumque ad eum locum ubi aliquando pastae sunt revertuntur, ita homines instar turbinis degressi montibus impeditis.
<br>
Atque, ut Tullius ait, ut etiam ferae fame monitae plerumque ad eum locum ubi aliquando pastae sunt revertuntur, ita homines instar turbinis degressi montibus impeditis et arduis loca petivere mari confinia, per quae viis latebrosis sese convallibusque occultantes cum appeterent noctes luna etiam tum cornuta ideoque nondum solido splendore fulgente nauticos observabant quos cum in somnum sentirent effusos per ancoralia, quadrupedo gradu repentes seseque suspensis passibus iniectantes in scaphas eisdem sensim nihil opinantibus adsistebant.
</p>
</div> <!-- block -->
Et je vous redonne le css qui concerne cette portion de code :
#block {
float: right;
width: 280px;
margin: 15px 0 0 0;
padding: 0 1em 0 1em;
background:#000000;
}
#block p {
position: relative;
float: top left;
text-align: left;
}
#blockmenu {
position: relative;
float: top left;
width : 280px;
margin : 0 0 20px 0;
}
#blockmenu ul {
margin-left : 0;
padding-left : 0;
list-style-type : none;
}
#blockmenu a {text-decoration : none;
display : block;
padding : 3px;
width : 274px;
border-bottom : 1px solid #eee;
background : #ecd8d8;
color : #666;
}
#blockmenu a:link, #navlist a:visited {
color : #666;
background : #c68a8a;
}
#blockmenu a:hover {text-decoration : none;
background : #c68a8a;
color : #fff;
}
#blocksample {
float: right;
margin: 50% 0 50px 0;
width: 150px;
height: 150px;
background: url(images/sample.jpg) bottom right no-repeat;
padding: 10px;
color : #fff;
}
Y'a sûrement pleins de trucs inutiles dans le css là tout de suite, je fais des essais avec les positions relatives et les pourcentages, mais rien n'y fait lol... Mon image ne veut pas se mettre en bas...
Ou alors elle s'y met, mais le texte ne se déroule plus librement à côté...
