Redimensionnement automatique d'une page web

**Caidriq** · 10/11/2015, 21h49

Bonsoir,
Alors voila je m'explique je suis en train de faire un petit site juste en html/css,j'affiche juste 2 menus en ligne l'un en dessous de l'autre et des photos alignées à l'horizontale.

Voici mon code:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>INDEX</title>
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <div class="fixe">
            <ul>
                <li><a href="fujica1.html">Fujica ST705</a></li>
                <li><a href="canonet.html">Canon canonet 28</a></li>
            </ul>
            <ul>
                <li><a href="fujicapel1.html">Pellicule 1</a></li>
                <li><a href="fujicapel2.html">Pellicule 2</a></li>
                <li><a href="fujicapel3.html">Pellicule 3</a></li>
            </ul>
        </div>
        <span>
            <img src="photo/Pellicule1/1.JPG" alt="" />
            <img src="photo/Pellicule1/2.JPG" alt="" />
            <img src="photo/Pellicule1/3.JPG" alt="" />
            <img src="photo/Pellicule1/4.JPG" alt="" />
            <img src="photo/Pellicule1/5.JPG" alt="" />
            <img src="photo/Pellicule1/6.JPG" alt="" />
        </span>
    </body>
</html>

CSS:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
html{
    background-color: black;
    font-family: fantasy;
}
 
 
.center-div {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 107px;
    height: 100px;
}
 
#couleur{
    color: white;
    font-size: x-large;
    border: 3px solid white; 
}
 
a{
    text-decoration: none;
    color: white;
}
 
li{ 
    display : inline;
    padding : 0 0.5em;
    color: white;
    border: 1px dashed white;
}
 
span{
    white-space:nowrap;
    position: absolute;
    bottom: 0;
}
 
.fixe{
    position: fixed;
}

Alors déjà si il y a du code pas beau je suis pas contre des petits conseils vu que je débute,j'essaye de comprendre ce que je fais et de m'inspirer de choses "propres" prisent sur internet.

Mais ce que je veux c'est que en fonction de la taille de la fenêtre internet ou de l'écran du quidam qui veut voir mon site les photos et les menus s'adaptent pour ça ne se chevauchent pas et que ça ne fasse pas dégueulasse.

Et aussi une question,comme que je n'ai pas de scrollbar à droite mais seulement en bas pour naviguer à l'horizontal,la molette de la souris agisse sur le scrollbar du bas.

Je ne sais pas si tout ça c'est possible mais voila je pose la question.Et désolé si doublon il y a mais en cherchant j'ai pas trouvé grand chose...

Merci

**Caidriq** · 10/11/2015, 22h47

Je l'ai hébergé pour voir ce que ça donne:

http://caidriq.esy.es

A noter que seule fujica et pellicule 1 marche.

**Alkhan** · 12/11/2015, 09h22

bonjour,

Ce que tu cherches, c'est a faire du responsive design !

Invité · 18/11/2015, 23h58

Vois du côté des flexbox

Le nom est très évocateur.

Voici un petit site très pratique qui te permettra de te familiariser très rapidement.
Caniuse affiche un taux de pénétration de 100% sur l'ensemble des dernières versions de navigateurs et même sur Opéra Mini !

A utiliser sans modération.

http://the-echoplex.net/flexyboxes/

Redimensionnement automatique d'une page web

Dimensionnement en CSS

Discussions similaires

Partager

Partager