Sujet Précédent Sujet Suivant

Design adaptatif

Fermé
Darkmoon - 28 mai 2013 à 20:10
 Utilisateur anonyme - 29 mai 2013 à 09:14
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 : 


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

Réponse 1 / 1
Utilisateur anonyme
29 mai 2013 à 09:14
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
1

Discussions similaires

Avis site azura home design / Azurahomedesign
sandra -
Zaza -

6 réponses
je cherche un logiciel gratuit de stylisme
orianne -
titoursonmimi -

115 réponses
Bonjour je souhaite qu'on me traduise cette phrase
Vanille_3410 -
Utilisateur anonyme -

3 réponses
Problème de reconnaissance Memup feel design
sasa -
Kiagoo Ross -

6 réponses
Probleme Sharp TV
ooxpgoo -
technotv -

9 réponses