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

reivaxui

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

Auteur

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

Auteur

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"><!--image 300*400px-->
        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.

responsive

3 réponses