Design adaptatif
Darkmoon
-
Utilisateur anonyme -
Utilisateur anonyme -
Bonsoir,
je souhaites créer une page avec un design extensible, j'ai vu qu'il fallait remplacer les px par des pourcentages .
J'ai donc fait ça :
et
(oui je sais pour le "z" mais je suis très pressé ...)
Mais rien ne change, les images vont les unes sous les autres lorsque je passe à une définition d'écran inférieur ...
Pouvez-vous m'aider s'il vous plait ? :)
je souhaites créer une page avec un design extensible, j'ai vu qu'il fallait remplacer les px par des pourcentages .
J'ai donc fait ça :
header
{
text-align: center;
}
body
{
font-family: shérif sans ms, serif;
background-color: #9ea6a9;
}
article
{
font-size: 17.5px;
text-align: justify;
}
aside
{
background-color: #adc1c8;
margin-left: 3%;
margin-right: 3%;
border: 2px black dashed;
}
z
{
visibility : hidden;
}
.signature
{
text-align: right;
font-style: italic;
}
h1
{
font-size: 65px;
text-align: center;
}
h2
{
font-size: 28px;
text-align: center;
}
footer
{
font-size: 13px;
text-align : center;
}
et
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>HIDA</title>
</head>
<body>
<header>
<div id="titre">
<h1>Histoire des arts</h1>
</div>
</header>
<section>
<aside>
<article>
<h2>Arman</h2>
<a href="img/ARMAN.jpg" title="Arman"><img src="img/ARMAN_mini.jpeg" alt="Arman" /></a>
<a href="img/armanb.jpg" title="Arman"><img src="img/armanb_mini.jpg" alt="Arman" /></a>
<p class="signature"></p>
</article>
</aside>
</section>
<br />
<footer>
Histoire Des Arts
</footer>
<script src="imZoom.v3.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">imZoom.autoApplyInto();
oo( function(){
imZoom.autoApplyInto(
{
screenOpacity : 0.8,
zIndex : 40,
anim : 1,
showTitle : 1,
},
document.getElementById('article')
);
});</script>
</body>
</p>
</html>
(oui je sais pour le "z" mais je suis très pressé ...)
Mais rien ne change, les images vont les unes sous les autres lorsque je passe à une définition d'écran inférieur ...
Pouvez-vous m'aider s'il vous plait ? :)
1 réponse
Bonjour, faire un design qui s'adapte, je pense que cela s'apprend une fois que l'on sait bienfaire en fix.
L'utilisation des media query et intéressante dans ces cas là :
http://css.mammouthland.net/css3/media-queries.php
https://openclassrooms.com/fr/courses
L'utilisation des media query et intéressante dans ces cas là :
http://css.mammouthland.net/css3/media-queries.php
https://openclassrooms.com/fr/courses
