Sebiou,
il y a 3 ans
Merci beaucoup pour le coup de main sur discord.
Super sympa Popotte.
Je cloture le ticket.
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,
il y a 3 ans
Bonjour, regarde du coté des media queries :
Dans ton CSS :
Sebiou,
il y a 3 ans
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,
il y a 3 ans
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 classimg#img= Balise qui a comme idimgimg= Balises<img>
En gros ton code devrait ressembler à ça:
HTML:
CSS:
Sebiou,
il y a 3 ans
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,
il y a 3 ans
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,
il y a 3 ans
De rien :p
Alors tu peux faire ça pour center
HTML:
CSS:
Sebiou,
il y a 3 ans
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,
il y a 3 ans
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,
il y a 3 ans
Je t'ai envoyé une invitation sur discord, je n'ai pas envie de polluer trop le forum :)
Sebiou,
il y a 3 ans
Voici le contenu_etage
'''
#contenu_etage
{
margin-left:450px;
}
'''
popotte,
il y a 3 ans
Avec plaisir ^^
Tu peux cloturer le ticket en cliquant sur l'icone "Résolu" à droite d'une des réponses :p