Design adaptatif

Darkmoon -
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;
}

<!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 ? :)

Afficher la suite

A voir également:

Design adaptatif
Memup feel design ✓ - Forum Disque dur / SSD
Maeva vient de créer son entreprise de design à montréal ✓ - Forum Loisirs / Divertissements
Disque dur multimédia memup - Forum Disque dur / SSD
Stb refsw design c'est quoi - Forum MacOS
Enlever stb refsw design ✓ - Forum Matériel & Système

1 réponse

Réponse 1 / 1

Utilisateur anonyme

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

Discussions similaires

sharp aquos + prise HDMI

Problème de reconnaissance Memup feel design

mon pc ne reconner pas memup feel design

Avis site azura home design / Azurahomedesign

HDMI verrouillé

Votre réponse

Discussions similaires