JS, Html, Css

besoin d'un avis ou partager des connaissances en html,css,php ou sur CMS joomla,phpBB3..
Répondre
Nagi1704
Membre junior
Membre junior
Réactions :
Messages : 6
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
Membre
Membre
Réactions :
Messages : 81
Enregistré le : lun. sept. 03, 2018 10:04 am
Localisation : Région Occitanie
A remercié : 2 fois
A été remercié : 1 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
Site Admin
Site Admin
Réactions :
Messages : 412
Enregistré le : sam. févr. 24, 2018 6:26 am
Localisation : Loire atlantique
A remercié : 7 fois
A été remercié : 30 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_
Membre junior
Membre junior
Réactions :
Messages : 5
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é...

Nagi1704
Membre junior
Membre junior
Réactions :
Messages : 6
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:

Nagi1704
Membre junior
Membre junior
Réactions :
Messages : 6
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