Forum : responsive

Bonjour,

Voila, je bloque sur mon code :
HTML :

<body> <div id="boite"> <h1>Un cervidé félin</h1> <h2>Tapenade et motivation : éradication des nomenclatures.</h2> <img src="img/vache.jpg" alt="Petite vache" class="flotte marges" > <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at ex urna. Phasellus eu euismod diam. Aliquam pulvinar hendrerit sollicitudin. Duis eu euismod dolor. Aenean id nulla sed leo tempus varius id ut libero. Proin euismod tristique con.</</p> </div> </body>

CSS :

body{ margin:0px; padding:0px; background-color:yellow; } @media screen and (max-width:750px){ body{ background-color: red; } } .flotte {float: left;} .marges {margin: 0 10px 10px 0;} p { text-align: justify; }

le but est que mon image soit fluide et fera 40% de la largeur du bloque texte+image...
Je ne coprend pas sur qu'elle largeur de départ je dois me baser pour calculer les 40%. Il y a bien une largeur?
Merci

3 réponses

reivaxui,

il y a 9 ans

Je comprend pas ce que tu veux... Tu as un conteneur #boite et tu souhaites que ton img fasse 40% de cette div?

Eric Quattrociocchi,

il y a 9 ans

Bonjour
Exactement la question est :
mise en page d'un bloc composé d'une image,d'un titre d'un sous titre et d'un texte.l'image sera fluide.L'element aura 2 etats, de 0 a 750px et >750px avec 2 couleurs differentes biensur pour chaque etat.De plus l'image sera fluide, et fera 40% de la largeur du bloque texte+image...

et c'est la que je bloque, 40% de qu"elle largeur ??
.....

Eric Quattrociocchi,

il y a 9 ans

J'ai modifié mon code et voici ce que j'ai trouvé :
HTML :

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Devoir 1</title> <link rel="stylesheet" href="style.css" media="screen"></link> <body> <div id="boite1"> <h1>Un cervidé félin</h1> <h2>Tapenade et motivation : éradication des nomenclatures.</h2> </div> <div id="boite2"> <p> <img src="img/vache.jpg" alt="Petite vache" class="image"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at ex urna. Phasellus eu euismod diam. Aliquam pulvinar hendrerit sollicitudin. Duis eu euismod dolor. Aenean id nulla sed leo tempus varius id ut libero. Proin euismod tristique consectetur. Proin sit amet felis nisl. Nunc vel luctus risus. Nullam blablablabla</p> </div> </div> </body>

CSS :

body{ margin:0px; padding:0px; background-color:yellow; } @media screen and (max-width:750px){ body{ background-color: red; } } .image { float: left; margin: 0 10px 0 0; max-width: 40%; } p { text-align: justify; overflow: hidden; } #boite2{ border: 1px solid red; width: 50%; }

je pense que c'est pas trop mal.