Recherche un peu d'aide. :)

Sebiou
Les bases HTML/CSS

Bonjour,

J'aimerais savoir si quelqu'un maitrisant le HTML et le CSS pourrait me donner un coup de main ?

J'ai commencé à créer un site qui est destiné à rester en local et non sur internet.

Malheureusement, ça ne fais que quelques jours que j'ai commencé le HTML et CSS et je crois que j'arrive au bout de ce que je peux faire.

Il ne reste plus que de la finition car le site fonctionne déjà comme ça, mais j'ai besoin de l'utiliser rapidement et j'aimerais bien qu'il soit bien dès le départ.

Je serais également preneur de conseil sur l'aspect du site (je suis pas quelqu'un de super créatif mdr).

Si l'un ou l'une d'entre vous est intéressé, ça m'aiderai beaucoup.

Sinon j'ai une question quand même, au cas ou personne ne soit intéressé. J'ai des images qui s'affiche sur la page quand je clic sur un bouton, j'aimerais que les images s'ajustent en fonction de la taille de l'écran de la personne qui regarde, mais j'ai pas trouvé comment faire malgré pas mal de temps :/ Si vous avez une idée je prend.

Merci d'avance,

Sebiou.

Edit : je viens de regarder les tuto de Grafikart qui sont pas mal du tous, malheureusement je n'arrive pas à faire ce que je veux... :/

12 réponses

ToinouPHP

Bonjour, regarde du coté des media queries :

Dans ton CSS :

@media only screen and (max-width: 600px) {
 .img {
    width: 100%; /* Les images prendront toute la largeur sur mobile */
  }
}

.img {
width: 25%; /* Les images prendront 25% de la largeur le reste du temps */
}
Sebiou
Auteur

Bonjour ToinouPHP,

Merci pour le code, malheureusement, je l'ai copié dans mon CSS mais ça ne fais rien. J'ai même essayé de mettre 1 000 % et 125 % mais rien ne change.

Je vous mets le code de ma page ci-dessous et mon CSS si vous pouvez me dire pourquoi ça ne fonctionne pas.

De plus, le site ne sera jamais lu sur un mobile, uniquement des écrans.

Merci encore,

La page :

'''
<html>

<head>
<title> Sous-sol </title>
<script type="text/javascript">
function changerimage(imgid,nom) 
{
       var img = document.getElementById(imgid);
       img.src   = nom;
}
</script>
<link rel="stylesheet" media="screen" type="text/css"  title="css" href="css.css">
<a href="site.html" class="topic">Accueil</a> - <a href="javascript:history.back()" class="topic">Retour</a>
</head>

<body>
<h1>Sous-sol</h1>

<div id="menu">
<p><font size="6"><span class="underline">Menu :</span></font></p>

<p>
        <button id="button" onclick="changerimage('cadre','images/ssol.PNG')">Extincteurs</button><br>
        <button id="button" onclick="changerimage('cadre','images/rdc.PNG')">SSI</button><br>
        <button id="button" onclick="changerimage('cadre','images/ssol.PNG')">Localisation des services</button><br>
        <button id="button" onclick="changerimage('cadre','images/ssol.PNG')">Réseau de chauffage</button><br>
        <button id="button" onclick="changerimage('cadre','images/ssol.PNG')">Portes et portails</button><br>
        <button id="button" onclick="changerimage('cadre','images/ssol.PNG')">Climatisations</button><br>
        <button id="button" onclick="changerimage('cadre','images/ssol.PNG')">Ascenseurs</button><br>
</p>

</div>  
<div id="contenu_etage">
<p>
<img id="cadre" src="images/vue_aerienne_accueil.JPG" alt="Mon image" class="responsive">
</p>
</div>

</body>

</html>
'''

Et ci-dessous le CSS que j'ai copié dans votre réponse (je l'ai mis tout en haut, si c'est important) :

'''
@media only screen and (max-width: 600px) 
    {
    .img 
    {
    width: 100%; /* Les images prendront toute la largeur sur mobile */
    }
    }

    .img 
    {
    width: 25%; /* Les images prendront 25% de la largeur le reste du temps */
    }
    '''

Cordialement,

popotte

Hello :)

Alors pour commencer, TOUT ton contenus doit être dans le body, donc ta navbar tu l'enlève du head et tu la met en haut du body x)

Ensuite pour ta règle CSS, alors en gros tu appliques une règle pour les balises qui ont comme class img, mais dans ton HTML ton image n'a pas la class img

CSS:

  • .img = Balise qui a comme class img
  • #img = Balise qui a comme id img
  • img = Balises <img>

En gros ton code devrait ressembler à ça:

HTML:

<html>
<head>
    <title> Sous-sol </title>
    <script type="text/javascript">
    function changerimage(imgid,nom) 
    {
           var img = document.getElementById(imgid);
           img.src   = nom;
    }
    </script>
    <link rel="stylesheet" media="screen" type="text/css"  title="css" href="css.css">
</head>

<body>
    <nav>
        <a href="site.html" class="topic">Accueil</a> - <a href="javascript:history.back()" class="topic">Retour</a>
    </nav>

    <h1>Sous-sol</h1>

    <div id="menu">
        <p>
            <font size="6"><span class="underline">Menu :</span></font>
        </p>

        <p>
                <button id="button" onclick="changerimage('cadre','images/ssol.PNG')">Extincteurs</button><br>
                <button id="button" onclick="changerimage('cadre','images/rdc.PNG')">SSI</button><br>
                <button id="button" onclick="changerimage('cadre','images/ssol.PNG')">Localisation des services</button><br>
                <button id="button" onclick="changerimage('cadre','images/ssol.PNG')">Réseau de chauffage</button><br>
                <button id="button" onclick="changerimage('cadre','images/ssol.PNG')">Portes et portails</button><br>
                <button id="button" onclick="changerimage('cadre','images/ssol.PNG')">Climatisations</button><br>
                <button id="button" onclick="changerimage('cadre','images/ssol.PNG')">Ascenseurs</button><br>
        </p>
    </div>  

    <div id="contenu_etage">
        <p>
            <!-- Ajoutes la class img -->
            <img id="cadre" class="img" src="images/vue_aerienne_accueil.JPG" alt="Mon image" class="responsive">
        </p>
    </div>
</body>
</html>

CSS:

/* Prends tout de suite cette habitude: Mobile first, tu fait ton css classique pour le mobile et ensuite tu applique les média pour les écrans plus grands */
.img {
    width: 25%; /* Les images prendront 100% de la largeur sur mobile */
}

@media screen and (min-width: 650px) {
    .img {
        width: 25%; /* Les images prendront 25% de la largeur sur PC */
    }
}
Sebiou
Auteur

Bonjour Popotte,

Merci beaucoup pour ton message qui m'a bien aidé.

J'ai failli renvoyé un message pour te dire que ça ne fonctionnai pas, mais au dernier moment je me suis rappelé de linker le html au css (j'ai tous copié dans un fichier test pour voir).

Il me reste plus qu'a trouver le bon pourcentage à mettre pour que tous s'affiche correctement.

Merci beaucoup :) :) :)

Séb.

Sebiou
Auteur

Ah ! Une dernière question sur ce sujet, est-il possible de centrer l'image affichée malgré le "menu" (au sein de "contenu_etage" ?

Merci d'avance,

Séb

popotte

De rien :p

Alors tu peux faire ça pour center

HTML:

<!-- la balise <p> c'est pour le texte, inutile -->
<div id="contenu_etage">
    <img id="cadre" class="img" src="images/vue_aerienne_accueil.JPG" alt="Mon image" class="responsive">
</div>

CSS:

.img {
    width: 25%;
    margin: auto; /* Ca va appliquer une marge auto à droite et à gauche ce qui va centrer l'élément */
}
Sebiou
Auteur

Merci pour le code.

En revanche, ça ne fonctionne pas. Je pense que j'ai d'autres trucs qui gêne peux être.

Je peux mettre tous mon css ici ? Ou sur discord ?

J'ai une ligne qui dit :

'''
.responsive 
    {
    width: 950px;
    height: auto;
    }
'''

C'est peux être ça qui marche pas du coups non ? (Enfin je pense pas, je l'ai mis en commentaire et ça change rien).

Séb.

popotte

Alors ton CSS tu peux tout mettre ici si tu veux, ou pour Discord c'est itaieb#2719

Pour ton .responsive pas de soucis, tu n'a pas d'élément avec la class responsive ^^

Peut être ton contenu_etage qu'il faut mettre à 100% de largeur?

Sebiou
Auteur

Je t'ai envoyé une invitation sur discord, je n'ai pas envie de polluer trop le forum :)

Sebiou
Auteur

Voici le contenu_etage

'''
#contenu_etage
    {
    margin-left:450px;
    }   
    '''
Sebiou
Auteur

Merci beaucoup pour le coup de main sur discord.

Super sympa Popotte.

Je cloture le ticket.

popotte

Avec plaisir ^^

Tu peux cloturer le ticket en cliquant sur l'icone "Résolu" à droite d'une des réponses :p