Nom d’utilisateur : Mot de passe : Se souvenir de moi

JS, Html, Css

Répondre
Avatar du membre
Nagi1704
Toilien junior
Toilien junior
Réactions :
Messages : 2
Enregistré le : jeu. mars 21, 2019 11:17 pm

JS, Html, Css

Message par Nagi1704 » jeu. oct. 24, 2019 9:09 pm

Bonjour,
J'ai besoin d'aide pour un devoir où j'aimerais mettre une sorte de multifenetre, je ne sais pas vraiment comme décrire. Mais j'aimerais obtenir un résultat pareil à celui de cette page :
https://www.sncf.com/fr
J'ai déjà essayé plusieurs choses avec une table, des div mais ça ne marche pas.
J'espère que quelqu'un saura m'aider.
Merci d'avance de vos précieuses réponses :respect: :merci: :lol:



Avatar du membre
Kartazion
Toilien
Toilien
Réactions :
Messages : 63
Enregistré le : lun. sept. 03, 2018 10:04 am
Localisation : Région Occitanie
A remercié : 2 fois

Re: JS, Html, Css

Message par Kartazion » jeu. oct. 24, 2019 9:23 pm

Bonsoir.

Vous avez les frames <iframe>
C'est pour les multi cadres

https://forum.alsacreations.com/topic-4-64094-1-Le-css-et-les-balises-Iframe.html

Avatar du membre
Mightymax
Toilien Admin
Toilien Admin
Réactions :
Messages : 720
Enregistré le : sam. févr. 24, 2018 6:26 am
Localisation : Loire atlantique
A remercié : 7 fois
A été remercié : 38 fois

Re: JS, Html, Css

Message par Mightymax » ven. oct. 25, 2019 9:24 am

salut
je dirai en utilisant un framework comme bootstrap ou symfony....

Avatar du membre
qn_
Toilien junior
Toilien junior
Réactions :
Messages : 4
Enregistré le : sam. déc. 29, 2018 1:49 pm
A remercié : 1 fois
A été remercié : 1 fois

Re: JS, Html, Css

Message par qn_ » ven. oct. 25, 2019 8:49 pm

Salut.
Il faut voir le code source avec le mode développer du navigateur.
En regardant la feuille css, les div ont des class css qui changent en fonction de la largeur de l'écran:
La meme class "one-third" ou "two-thirds" a un "width" différent selon largeur de l'écran:

@media (min-width: 545px){
.one-third{-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% / 3 - .01px)}
.two-thirds{-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% / 3 * 2 - .01px)}
}

@media (max-width: 544px){
.block-key-number-item.one-half, .block-key-number-item.one-third{width:100%}
}

@media (min-width: 545px) and (max-width: 768px){
.top-news .two-thirds{width:calc(100% / 1 - 4rem - .01px)}
}

Sais pas trop si c'est l'effet cherché...

Avatar du membre
Nagi1704
Toilien junior
Toilien junior
Réactions :
Messages : 2
Enregistré le : jeu. mars 21, 2019 11:17 pm

Re: JS, Html, Css

Message par Nagi1704 » jeu. oct. 31, 2019 6:46 pm

Merci pour votre aide, j'ai essayé avec <iframe> et ça a plutôt bien marché même si je n'ai pas réussi à avoir le graphisme final que je voulais vraiment. :merci:

Avatar du membre
Nagi1704
Toilien junior
Toilien junior
Réactions :
Messages : 2
Enregistré le : jeu. mars 21, 2019 11:17 pm

Re: JS, Html, Css

Message par Nagi1704 » jeu. oct. 31, 2019 6:51 pm

<html>
<body>
<table> <!-- balise qui délimite la table-->
<tr> <!-- une nouvelle ligne -->
<td><input type="button" value="heure d'arrivée" id="fin" /></td>
<td><input type="button" value="heure de départ" id="debut" /></td>
<td><input type="button" value="durée du trajet" id="milieu" /></td>
</tr>
<tr><iframe id="fenetre" title="fenetre"
width="300" height="220" src="heure0.html"></iframe>
</tr>
</table>


<script type="text/javascript">

document.getElementById("fin").addEventListener("click",fin);
document.getElementById("debut").addEventListener("click",debut);
document.getElementById("milieu").addEventListener("click",milieu);
function fin() {
document.getElementById("fenetre").src="heure0.html"
}
function debut() {
document.getElementById("fenetre").src="heure1.html"
}
function milieu() {
document.getElementById("fenetre").src="heure2.html"
}

</script>
</body>
</html>

Voilà je laisse mon fichier, si jamais cela pourrait être utile à quelqu'un

Répondre