Partage
  • Partager sur Facebook
  • Partager sur Twitter

Problème proportions tableaux sur mobile

Thewebmaster76
  • HTML / CSS
    20 septembre 2017 à 19:16:46

    Bonjour,

    Comme indiqué dans le titre, j'ai un problème de proportions de tableaux sur ma page internet quand celle ci est visionné via un mobile.

    Voici le lien du site si vous voulez checker, je vous met une page exemple : http://veryfastcars.kappatau.fr/nissan_gtr_r35_2012.html

    Alors certains me diront peut-être que j'utilise des tableaux pour la tipographie de la page et que c'est mal mais je fais comme je peux, j'aime programmer mais je ne suis pas un codeur de l'extrême, alors les div et compagnie pour la mise en forme je ne veux pas me mettre dedans pour comprendre... Enfin bref, j'espère que le problème peut-être règler par css histoire que je ne refasse pas toutes les pages une par une.

    Voici le code CSS, comme vous pouvez le voir j'ai essayé de forcer une mise en forme quand on est sur mobile mais en vain :

    /* CSS GENERAL */

body {
	
background-image: url(fond.jpg);


}

.normal {
	color:white;
font-family:Arial;
overflow-y: auto;
}

.youtube-player {
	width:100%;
	height:178%;
}

/* CSS MENU */




.menu {
	
	margin:0 auto;
	
}





.tdmenu {

border-collapse:separate;
border-spacing:10px 10px;
border-width:20px;
margin:auto;
text-align:center;
border-radius:8px 8px 6px 6px; /* arrondi coin onglet #4C0B5F */
background-color: firebrick;
background-image:-webkit-linear-gradient(top, firebrick 0%, #720000 100%); /* violet */
background-image:linear-gradient(to bottom, firebrick 0%, #720000 100%);
max-width:100%;

}

.tdmenu:hover {

border-collapse:separate;
border-spacing:20px 20px;
border-width:20px;
margin:auto;
text-align:center;
border-radius:8px 8px 6px 6px; /* arrondi coin onglet */
background:firebrick;
 /* violet */
max-width:100%;

}

.menu a {


text-decoration:none;
display:block;
padding:6px 35px;
color:#DDDDDD;
font-family:arial;
}

.menu a:hover {


text-decoration:underline;
display:block;
padding:6px 35px;
color:white;
font-family:arial;
}

/* CSS TABLEAUX */


.imgtbl {
text-align:center;
border-color:orange;
border-width:2px;
border-style:solid;
border-radius:14px 14px 14px 14px;
margin:0 auto;
border-spacing:0;
background-color:grey;
max-width:100%;

}

.imgtdtitre {
	text-align:center;
	color: white;
	font-family:Arial;
	
}


.imgtd {
	padding:10px;
	
}

.tblmdl {
	text-align:center;
	border-color:orange;
	border-width:1px;
	border-style:solid;
	background-color:darkgrey;
	margin:0 auto;
    border-spacing:0;
	max-width:100%;
	border-radius:14px 14px 14px 14px;
	
	
}

.tdtitremdl {
	font-size:1.1em;
	text-decoration:underline;
	font-weight: bold;
	color:red;
	border-color:orange;
	border-width:1px;
	border-style:solid;
	padding: 10px;
	
}

.tdtitremdlG {
	font-size:1.1em;
	text-decoration:underline;
	font-weight: bold;
	color:red;
	border-color:orange;
	border-width:1px;
	border-style:solid;
	padding: 10px;
	border-radius:14px 0 0 0;
	
}

.tdtitremdlD {
	font-size:1.1em;
	text-decoration:underline;
	font-weight: bold;
	color:red;
	border-color:orange;
	border-width:1px;
	border-style:solid;
	padding: 10px;
	border-radius:0 14px 0 0;
	
}




.tdmdl {
	font-size:1.1em;
	border-color:orange;
	border-width:1px;
	border-style:solid;
	padding: 10px;
	color:white;
	font-family:Arial;
	overflow-y: auto;
}

.tdmdlG {
	font-size:1.1em;
	border-color:orange;
	border-width:1px;
	border-style:solid;
	padding: 10px;
	color:white;
	font-family:Arial;
	overflow-y: auto;
	border-radius:0 0 0 14px;
}


.tdmdlD {
	font-size:1.1em;
	border-color:orange;
	border-width:1px;
	border-style:solid;
	padding: 10px;
	color:white;
	font-family:Arial;
	overflow-y: auto;
	border-radius:0 0 14px 0;
}

.tdmdlF {
	font-size:1.1em;
	border-color:orange;
	border-width:1px;
	border-style:solid;
	padding: 5px;
	color:white;
	font-family:Arial;
	overflow-y: auto;
	border-radius:0 0 14px 0;
	
}

.tdmdlF2 {
	font-size:1.1em;
	border-color:orange;
	border-width:1px;
	border-style:solid;
	padding: 5px;
	color:white;
	font-family:Arial;
	overflow-y: auto;
	border-radius:0 0 0 14px;
}


.tblaudio {
	text-align:center;
	margin:0 auto;
	width:70%;

}

.tdaudio {
	text-align:center;
	
}

.tblvideo {
	text-align:center;
	margin:0 auto;
	width:98%;
	background-color:grey;
	border-radius:8px 8px 8px 8px;
	border-spacing:10px;
	border:solid 1px orange;
}

.tdvideo {
	text-align:center;
	width:33%;
	
}


.bottom {
	text-align:center;
	margin:0 auto;
	width:100%;
	
}

.tdbottom {
	text-align:center;
	margin:0 auto;
	color:white;
	font-family:Arial;
	overflow-y: auto;
	font-size:1.7em;
	background-color:firebrick;
	width:40%;
}
	
	
.tdbottomG {
	text-align:left;
	margin:0 auto;
	color:white;
	font-family:Arial;
	overflow-y: auto;
	font-size:1.0em;
}


.link {

	color: #009AFF;
	text-decoration: none;
}

.link:hover {
	color: white;
	text-decoration:underline;
}

	
.finition {
	text-align:center;
	border-color:orange;
	border-width:1px;
	border-style:solid;
	background-color:darkgrey;
	margin:0 auto;
    border-spacing:0;
	max-width:100%;
	border-radius:14px 14px 14px 14px;
	
	
}

.tdfinition {
	font-size:1.1em;
	border-color:orange;
	border-width:1px;
	border-style:solid;
	padding: 10px;
	color:white;
	font-family:Arial;
	overflow-y: auto;
	
}

.tdfinitionG {
	font-size:1.1em;
	border-color:orange;
	border-width:1px;
	border-style:solid;
	padding: 10px;
	color:white;
	font-family:Arial;
	overflow-y: auto;
	border-radius:14px 0 0 0;
	
}

.tdfinitionD {
	font-size:1.1em;
	border-color:orange;
	border-width:1px;
	border-style:solid;
	padding: 10px;
	color:white;
	font-family:Arial;
	overflow-y: auto;
	border-radius:0 14px 0 0;
	
}

.tdfinitionG2 {
	font-size:1.1em;
	border-color:orange;
	border-width:1px;
	border-style:solid;
	padding: 10px;
	color:white;
	font-family:Arial;
	overflow-y: auto;
	border-radius:0 0 0 14px;
	
}

.tdfinitionD2 {
	font-size:1.1em;
	border-color:orange;
	border-width:1px;
	border-style:solid;
	padding: 10px;
	color:white;
	font-family:Arial;
	overflow-y: auto;
	border-radius:0 0 14px 0;
	
}
	
.tblmdl2 {
	width:90%;
	border-color:orange;
	border-width:1px;
	border-style:solid;
	background-color:black;
	margin:0 auto;
    border-spacing:0;
	max-width:100%;
	border-radius:14px 14px 14px 14px;
	table-layout:fixed;
	
	
}	
	
	
.lienmdl {
	font-size:1.1em;
	padding: 15px;
	color:white;
	font-family:Arial;
	overflow-y: auto;
	text-align:left;
}

.logo {
	margin:0 auto;
	width:100%;
	
	
}

.tdlogo {
	text-align:center;
	width:33%;
	
	
	
}

.tblvideoindex {
	margin:0 auto;
	background-color:grey;
	border-radius:14px 14px 14px 14px;
	border-spacing:20px;
	border-style:solid;
	border-width:2px;
	border-color:orange;
	
	
	
	
}

.tdvideoindex {
	text-align:center;
	width:100%;
	
}

.tdtxtindex {
	text-align:center;
	
	
}
	
	
.videoindex {
	
	width:848px;
	height:460px;
	
}
	
/* CSS TEXTE */

.titre {
	font-size:3em;
	text-decoration:underline;
	font-weight: bold;
	color:red;
	
}

.modele {
	text-align:center;
	font-size:3em;
	text-decoration:underline;
	font-weight: bold;
	color:white;
	font-family:Arial;
	}
	
	.minititre {
text-align:center;
	font-size:3em;
	text-decoration:underline;
	font-weight: bold;
	color:red;
	font-family:Arial;
	}


/* IMAGE */

.imgdrap {
	max-width:50%;
	border-radius:14px 14px 14px 14px;
	
	
}

.imglogo {
	
	max-width:50%;
	border-radius:14px 14px 14px 14px;
	
}





.size {
	max-width:100%;
	width:400px;
	margin: 0 auto;
	display:block;
}

.sizeG {
	max-width:100%;
	width:400px;
	margin: 0 auto;
	display:block;
	border-radius:0 0 0 14px;
}

.sizeD {
	max-width:100%;
	width:400px;
	margin: 0 auto;
	display:block;
	border-radius:0 0 14px 0;
}


t {
	border-width:2px;
	font-weight: bold;
	text-shadow: #000000 1px 1px, #000000 -1px 1px, #000000 -1px -1px, #000000 1px -1px;

}



.accueil {
	max-width: 60%;
}

.contact {
	color: red;
	text-align: center;
	font-weight: bold;
	font-size: 1em;
	font-family:Arial;
	text-decoration:none;
	}
	
.contact:hover {
	color: red;
	text-align: center;
	font-weight: bold;
	font-size: 1em;
	font-family:Arial;
	text-decoration:underline;
	}



.fil {
	
	color: #009AFF;
	text-decoration: none;
}

/*#3498DB*/

.fil:hover {
	color: white;
	text-decoration:underline;
}




@media (max-width:480px) {
    
img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video {
    max-width: 100%;
}

background-image: url(fond.jpg);
background-position: top;
background-repeat: repeat-y;
background-size:100% 100%;

}



@media (max-width:767px) {
    
img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video {
    max-width: 100%;
}

background-image: url(fond.jpg);
background-position: top;
background-repeat: repeat-y;
background-size:100% 100%;

}



@media (min-width:768px) and (max-width:979px) {
    
img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video {
    max-width: 100%;
}

background-image: url(fond.jpg);
background-position: top;
background-repeat: repeat-y;
background-size:100% 100%;

}

    En espérant qu'une âme charitable me porte secours, je vous remercie d'avance :)

    PS : si vous avez pas de temps à perdre à checker la page sur smartphone, voici 2 screens : https://drive.google.com/file/d/0B3MdljAAHVJRYVpnVDJjYjRJUlk/view?usp=drivesdk

    https://drive.google.com/file/d/0B3MdljAAHVJRTEpoRnh3ei1NZ2M/view?usp=drivesdk

    • Partager sur Facebook
    • Partager sur Twitter
    Scion
      21 septembre 2017 à 6:54:17

      Bonjour,

      et peux me dire (ou me montrer) le resultat attendu?
      Car pour moi c'est normal que tu ais ces resultats vu la maniere dont tu as code.

      Toi qui ne veux pas utiliser de div mais absolument des table tu devrais savoir que les table sont elastiques !!!
      En effet, imaginons que tu definisse en tableau de 400px de largeur eh bien si le contenu de ton tableau depasse 400px, ton tableau depassera 400px meme si tu as mis max-width: 400px;

      • Partager sur Facebook
      • Partager sur Twitter
      japanfigs.com | www.figurine-occasion.com
      Nicolas412
      • HTML / CSS
        21 septembre 2017 à 10:56:29

        Salut,

        Utilises-tu boostrap ? Il existe un moyen sympas pour rendre "responsive" tes tableaux.

        Check ici : https://v4-alpha.getbootstrap.com/content/tables/#responsive-tables

        • Partager sur Facebook
        • Partager sur Twitter
        La culture, c’est comme le parachute : si on ne veut pas s’écraser, il faut l’ouvrir.
        Thewebmaster76
        • HTML / CSS
          23 septembre 2017 à 14:46:30

          Scion a écrit:

          Bonjour,

          et peux me dire (ou me montrer) le resultat attendu?
          Car pour moi c'est normal que tu ais ces resultats vu la maniere dont tu as code.

          Toi qui ne veux pas utiliser de div mais absolument des table tu devrais savoir que les table sont elastiques !!!
          En effet, imaginons que tu definisse en tableau de 400px de largeur eh bien si le contenu de ton tableau depasse 400px, ton tableau depassera 400px meme si tu as mis max-width: 400px;


          Bonjour et merci de la réponse !

          Je voudrais comme résultat que toi soit proportionnel, que tout prenne toute la largeur de la page.

          Nicolas412 a écrit:

          Salut,

          Utilises-tu boostrap ? Il existe un moyen sympas pour rendre "responsive" tes tableaux.

          Check ici : https://v4-alpha.getbootstrap.com/content/tables/#responsive-tables


          Non je ne connais pas boostrap, j'essayerai ton truc dimanche ;)

          -
          Edité par Thewebmaster76 23 septembre 2017 à 14:51:17

          • Partager sur Facebook
          • Partager sur Twitter
          Thewebmaster76
          • HTML / CSS

          Problème proportions tableaux sur mobile

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
          • Editeur ●
          • Markdown