28112 sujets

CSS et mise en forme, CSS3

Tableaux débordent de la page sur mobile.

Bonjour,
Je suis nouveau sur alsacreations, j'espère que je trouverai mon bonheur ici, mon problème est assez embêtant, j'ai plusieurs tableaux sur mon site, et ils sont assez remplies, mais c'est le tableau le plus empli et donc le plus large, sur lequel la page se définie sa taille...
Du coup ça fait un tableau qui prend bien toute la largeur mais tout le reste n'est du coup pas adapter à la largeur.
Et aussi comme mon menu d'onglet est aussi un tableau, on ne voit pas les onglets à droite qui sont coupés quand on est sur mobile Smiley ohwell
Quelques images pour illustrer mes propos :
- https://drive.google.com/file/d/0B3MdljAAHVJRYVpnVDJjYjRJUlk/view?usp=drivesdk
- https://drive.google.com/file/d/0B3MdljAAHVJRTEpoRnh3ei1NZ2M/view?usp=drivesdk
Et bien sûr mon code html et css, même si mon css c'est un peu le bazar :
HTML page d'accueil
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    
	<head>
        
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
        
		<meta name="keywords" content="voiture, cars, modèles, moteur, marques, fast, fastcars, supercar" />
		<meta name="description" content="Retrouvez tous les modèles de voitures sportives sur VeryFastCars !" />
		<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi, maximum-scale=1"/>
			<link rel="icon" type="image/x-icon" href="favicon.ico" />
		
			<!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /><![endif]-->
						
				<title>
VeryFastCars : La référence de l'automobile sportive</title>
        
				
				<link href="design.css" rel="stylesheet" type="text/css">

				

	</head>
          
          
		<body>
		
		<center><a href="index.html" alt="VeryFastCars" title="VeryFastCars" id="top" /><img src="baniere.png" class="accueil" /></a></center><hr/>
		
		<p class="normal">Site en développement ! Tous les modèles ne sont donc pas disponibles. Merci de votre compréhension. Pour tout commentaire ou aide à apporter, cliquez sur le bouton "Contact".<br/><font color="lime">[&#10004;] &#10148; Marque complétée</font> / <font color="yellow">[&#9998;] &#10148; Marque partiellement complétée</font> / <font color="blue">[&#10008;] &#10148; Marque non complétée</font></p>

			<table class="menu" >
			<tr class="trmenu">
				<td class="tdmenu"><a href="alfa_romeo.html" >Alfa Romeo <font color="blue">&#10008;</font></a></td>
				<td class="tdmenu"><a href="alpine.html" >Alpine <font color="lime">&#10004;</font></a></td>
				<td class="tdmenu"><a href="aston_martin.html" >Aston Martin <font color="blue">&#10008;</font></a></td>
				<td class="tdmenu"><a href="audi.html" >Audi <font color="yellow">&#9998;</font></a></td>
				<td class="tdmenu"><a href="bentley.html" >Bentley <font color="blue">&#10008;</font></a></td>
				<td class="tdmenu"><a href="bmw.html" >BMW <font color="blue">&#10008;</font></a></td>
				<td class="tdmenu"><a href="bugatti.html" >Bugatti <font color="lime">&#10004;</font></a></td>
				<td class="tdmenu"><a href="chevrolet.html" >Chevrolet <font color="blue">&#10008;</font></a></td>
				<td class="tdmenu"><a href="chrysler.html" >Chrysler <font color="blue">&#10008;</font></a></td>
			</tr>
			<tr class="trmenu">
				<td class="tdmenu"><a href="dodge.html" >Dodge <font color="blue">&#10008;</font></a></td>
				<td class="tdmenu"><a href="ferrari.html" >Ferrari <font color="blue">&#10008;</font></a></td>
				<td class="tdmenu"><a href="fiat.html" >Fiat <font color="blue">&#10008;</font></a></td>
				<td class="tdmenu"><a href="ford.html" >Ford <font color="blue">&#10008;</font></a></td>
				<td class="tdmenu"><a href="honda.html" >Honda <font color="lime">&#10004;</font></a></td>
				<td class="tdmenu"><a href="infiniti.html" >Infiniti <font color="blue">&#10008;</font></a></td>
				<td class="tdmenu"><a href="jaguar.html" >Jaguar <font color="blue">&#10008;</font></a></td>
				<td class="tdmenu"><a href="jeep.html" >Jeep <font color="lime">&#10004;</font></a></td>
				<td class="tdmenu"><a href="koenigsegg.html" >Koenigsegg <font color="blue">&#10008;</font></a></td>
			</tr>
			<tr class="trmenu">
				<td class="tdmenu"><a href="lamborghini.html" >Lamborghini <font color="blue">&#10008;</font></a></td>
				<td class="tdmenu"><a href="land_rover.html" >Land Rover <font color="lime">&#10004;</font></a></td>
				<td class="tdmenu"><a href="lexus.html" >Lexus <font color="blue">&#10008;</font></a></td>
				<td class="tdmenu"><a href="lotus.html" >Lotus <font color="blue">&#10008;</font></a></td>
				<td class="tdmenu"><a href="maserati.html" >Maserati <font color="blue">&#10008;</font></a></td>
				<td class="tdmenu"><a href="maybach.html" >Maybach <font color="blue">&#10008;</font></a></td>
				<td class="tdmenu"><a href="mazda.html" >Mazda <font color="blue">&#10008;</font></a></td>
				<td class="tdmenu"><a href="mclaren.html" >McLaren <font color="blue">&#10008;</font></a></td>
				<td class="tdmenu"><a href="mercedes.html" >Mercedes <font color="blue">&#10008;</font></a></td>
			</tr>
			<tr class="trmenu">
				<td class="tdmenu"><a href="mini.html" >Mini <font color="blue">&#10008;</font></a></td>
				<td class="tdmenu"><a href="mitsubishi.html" >Mitsubishi <font color="blue">&#10008;</font></a></td>
				<td class="tdmenu"><a href="nissan.html" >Nissan <font color="lime">&#10004;</font></a></td>
				<td class="tdmenu"><a href="opel.html" >Opel <font color="blue">&#10008;</font></a></td>
				<td class="tdmenu"><a href="pagani.html" >Pagani <font color="blue">&#10008;</font></a></td>
				<td class="tdmenu"><a href="peugeot.html" >Peugeot <font color="blue">&#10008;</font></a></td>
				<td class="tdmenu"><a href="porsche.html" >Porsche <font color="blue">&#10008;</font></a></td>
				<td class="tdmenu"><a href="renault.html" >Renault <font color="blue">&#10008;</font></a></td>
				<td class="tdmenu"><a href="rolls-royce.html" >Rolls-Royce <font color="blue">&#10008;</font></a></td>
			</tr>
			<tr class="trmenu">
				<td class="tdmenu"><a href="seat.html" >Seat <font color="blue">&#10008;</font></a></td>
				<td class="tdmenu"><a href="skoda.html" >&#138;koda <font color="blue">&#10008;</font></a></td>
				<td class="tdmenu"><a href="subaru.html" >Subaru <font color="blue">&#10008;</font></a></td>
				<td class="tdmenu"><a href="tesla.html" >Tesla <font color="blue">&#10008;</font></a></td>
				<td class="tdmenu"><a href="toyota.html" >Toyota <font color="lime">&#10004;</font></a></td>
				<td class="tdmenu"><a href="volkswagen.html" >Volkswagen <font color="blue">&#10008;</font></a></td>
				<td class="tdmenu"><a href="volvo.html" >Volvo <font color="blue">&#10008;</font></a></td>
				<td class="tdmenu"><a href="forum.html" >FORUM</a></td>
				<td class="tdmenu"><a href="contact.html" >CONTACT</a></td>
				</tr>
		</table>        
      
			<br/><br/>
			
			<table class="tblvideoindex">
				<tr>
					<td class="tdvideoindex">
					<p class="normal">Dernière vidéo de WorldSupercars<br/>[MAJ le 09/09/17]</p>
					</td>
				</tr>
				<tr>
					<td class="tdvideoindex">
					<iframe class="videoindex" src="https://www.youtube.com/embed/es5y33l-o5U" frameborder="0" allowfullscreen></iframe>
					</td>
				</tr>
			</table><br/><hr/><br/>
		
		
		<center><p class="normal" >Copyright &copy; 2017 Tous droits réservés - VeryFastCars | Site créé par Nathanaël CONSTANT.</center>
		
		
		
		
		
		
		
		
		
		
		
		</body>
		</html>


HTML page d'un modèle
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    
	<head>
        
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
        
		<meta name="keywords" content="voiture, cars, modèles, moteur, marques, fast, fastcars, supercar" />
		<meta name="description" content="Retrouvez tous les modèles de voitures sur FastCars !" />
		<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi, maximum-scale=1"/>
			<link rel="icon" type="image/x-icon" href="favicon.ico" />
		
			<!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /><![endif]-->
						
				<title>
Nissan GT-R 570 ch | VeryFastCars</title>
        
				
				<link href="design.css" rel="stylesheet" type="text/css">

				

	</head>
          
          
		<body>
		
		
		<center><a href="index.html" alt="VeryFastCars" title="VeryFastCars" id="top" /><img src="baniere.png" class="accueil" /></a></center><hr/>
		
		
		
		<p class="normal">
			<a href="index.html" class="fil">Accueil</a> &gt; <a href="nissan.html" class="fil">Nissan</a> &gt; <a href="gtr.html" class="fil">GT-R</a> &gt; <b>Nissan GT-R R35 570 ch</b>
		</p>
		
		<p class="modele">Nissan GT-R R35 570 ch (2016-...) [1ère génération / 4e phase]</p>
		
		<table class="imgtbl">
			<tr class="imgtr" >
				<td class="imgtdtitre" colspan="2">Nissan GT-R R35 570 ch</td>
			</tr>
			<tr class="imgtr">
				<td class="imgtd"><img src="ngtr2016AV.jpg" class="sizeG" /></td>
				<td class="imgtd"><img src="ngtr2016DR.jpg" class="sizeD" /></td>
			</tr>
		</table><br/><br/>
		
		
		<table class="tblmdl" >
			<tr class="tdtitremdl">
				<td class="tdtitremdlG">Nom Moteur</td>
				<td class="tdtitremdl">Taille</td>
				<td class="tdtitremdl">Type</td>
				<td class="tdtitremdl">Suralimentation</td/>
				<td class="tdtitremdl">Puissance Maxi</td>
				<td class="tdtitremdl">Couple Maxi</td>
				<td class="tdtitremdlD">Nombre de soupapes</td>
				
			</tr>
			<tr class="tdmdl">
				<td class="tdmdlG">VR38DETT</td>
				<td class="tdmdl">3799 cm&sup3;</td>
				<td class="tdmdl">V6</td>
				<td class="tdmdl">Biturbo</td/>
				<td class="tdmdl">570 ch à 6800 tr/min (Régime Maxi 7000 tr/min)</td>
				<td class="tdmdl">637 Nm de 3600 à 6800 tr/min</td>
				<td class="tdmdlD">24 soupapes (4x6)</td>
				</tr>
		</table><br/><br/>
		
		
		<table class="tblmdl" >
			<tr class="tdtitremdl">
				<td class="tdtitremdlG">Boîte de Vitesse</td>
				<td class="tdtitremdl">Transmission</td>
				<td class="tdtitremdl">Consommation</td>
				<td class="tdtitremdl">Vitesse Max</td>
				<td class="tdtitremdl">Poids</td>
				<td class="tdtitremdl">Pneus</td>
				<td class="tdtitremdlD">Freins AV</td>
				</tr>
			<tr class="tdmdl">
				<td class="tdmdlG">Automatique à 6 rapports + mode séquentiel</td>
				<td class="tdmdl">Intégrale<br/>(ATTESA ET-S)</td>
				<td class="tdmdl">Mixte : 11,8 L/100<br/> Sportive : 22,6 L/100</td>
				<td class="tdmdl">315 km/h</td>
				<td class="tdmdl">1750 kg</td>
				<td class="tdmdl">AV : 255/40/R20<br/>AR : 285/35/R20</td>
				<td class="tdmdlF" >Disques ventilés percés<br/>Etriers fixes 6 pistons</td>
				</tr>
		</table><br/><br/>
		
		
		
		<table class="tblmdl" >
			<tr class="tdtitremdl">
				<td class="tdtitremdlG">Freins AR</td>
				<td class="tdtitremdl">Suspensions</td/>
				<td class="tdtitremdl">Dimensions</td>
				<td class="tdtitremdl">Ratios Poids</td>
				<td class="tdtitremdl">Ratios Litre</td>
				<td class="tdtitremdl">Emissions de CO2</td>
				<td class="tdtitremdl">Puissance Fiscale</td>
				<td class="tdtitremdl">0 à 100 km/h</td>
				<td class="tdtitremdlD">Prix Neuf/Occasion</td>
			</tr>
			<tr class="tdmdl">
				<td class="tdmdlF2">Disques ventilés percés<br/>Etriers fixes 4 pistons</td>
				<td class="tdmdl">Pilotables</td/>
				<td class="tdmdl">4710 x 1895 x 1370 mm</td>
				<td class="tdmdl">301 ch/T<br/>337 Nm/T</td>
				<td class="tdmdl">150 ch/L<br/>168 Nm/L</td>
				<td class="tdmdl">275 g/km (G)<br/>Malus : 10 000 &euro;</td>
				<td class="tdmdl">49 cv</td>
				<td class="tdmdl">2,8 sec</td>
				<td class="tdmdlD">A partir de 99 911 &euro;<br/>~ 99 000 &euro; (07/2017)</td>
			</tr>
		</table><br/>
		<hr/>
		
		<p class="minititre">Vidéos</p>
		
		<table class="tblvideo">
			<tr>
				<td class="tdvideo"><p class="normal">Essai Nissan GT-R 2016</p></td>
				<td class="tdvideo"><p class="normal">Nissan GT-R POV Test Drive 2017</p></td>
				<td class="tdvideo"><p class="normal">Review Nissan GT-R 2017 (anglais)</p></td>
			</tr>
			<tr>
				<td>
				<iframe title="xxxxxx" class="youtube-player" type="text/html" src="http://www.youtube.com/embed/eYmIVVWhqDs" frameborder="0" allowFullScreen>
				</iframe>
				</td>
				<td>
				<iframe title="xxxxxx" class="youtube-player" type="text/html" src="http://www.youtube.com/embed/SAQqppxFY-s" frameborder="0" allowFullScreen>
				</iframe>
				</td>
				<td>
				<iframe title="xxxxxx" class="youtube-player" type="text/html" src="http://www.youtube.com/embed/BmTcmz6lh00" frameborder="0" allowFullScreen>
				</iframe>
				</td>
			</tr>
		</table><br/>
		<hr/>
		
		<p class="minititre">Audio</p>
		
		<table class="tblaudio">
			<tr>
				<td class="tdaudio"><p class="normal">Acélération à l'arrêt (valves fermées)</p></td>
				<td class="tdaudio"><p class="normal">Acélération à l'arrêt (valves ouvertes)</p></td>
				<td class="tdaudio"><p class="normal">Acélération</p></td>
			</tr>
			<tr>
				<td>
				<audio controls="controls">
				<source src="audio/ngtr570chAAVf.mp3" type="audio/mp3" />
				Nous sommes navré mais votre navigateur n'est pas compatible
				</audio>
				</td>
				<td>
				<audio controls="controls">
				<source src="audio/ngtr570chAAVO.mp3" type="audio/mp3" />
				Nous sommes navré mais votre navigateur n'est pas compatible
				</audio>
				</td>
				<td>
				<audio controls="controls">
				<source src="audio/ngtr570chA.mp3" type="audio/mp3" />
				Nous sommes navré mais votre navigateur n'est pas compatible
				</audio>
				</td>
			</tr>
		</table><br/>
		<hr/>
		
		<p class="minititre">Infos supplémentaires</p>
		
		<center>
		<p class="normal">Finitions :<br/>
		<table class="finition">
			<tr/>
				<td class="tdfinitionG">Premium Edition</td>
				<td class="tdfinitionD">- Sièges sport en cuir noir perforé avec inserts en suédine<br/>- Système NissanConnect 8" tactile avec molette de commande R-Touch<br/>- Silencieux d'échappement actif en titane<br/>- Système Bilstein DampTronic avec 3 modes sélectionnables par le conducteur<br/>- Jantes en aluminium forgé 20" RAYS - 15 branches </td>
			</tr>
			<tr>
				<td class="tdfinition">Black Edition</td>
				<td class="tdfinition">Premium Edition +<br/>- Sièges Sport RECARO en cuir Noir et Rouge </td>
			</tr>
			<tr/>
				<td class="tdfinition">Gentleman Edition</td>
				<td class="tdfinition">Premium Edition +<br/>- Sièges sport en cuir Fauve, Noir, Rouge Ambré, ou Ivoire, finissage semi-aniline et surpiqûres cousues main<br/>- Cuir étendu Nappa avec surpiqûres sur la planche de bord</td>
			</tr>
			<tr/>
				<td class="tdfinitionG2">Track Edition</td>
				<td class="tdfinitionD2">Premium Edition +<br/>- Aileron arrière en fibre de carbone avec feu stop intégré<br/>- Jantes ultra-légères en aluminium forgé 20" NISMO - 6 branches<br/>- Système spécifique Bilstein DampTronic contrôlé électroniquement, ressorts exclusifs NISMO</td>
			</tr>
		</table>
		<p class="normal">Site officiel Nissan : <a href="http://www.nissan.fr/" class="link" />Nissan.fr</a></p>
		<p class="normal">Préparateur officiel de Nissan : Nismo</p>
		</center><br/>
		<hr/>
		
		<p class="normal">
			<a href="index.html" class="fil">Accueil</a> &gt; <a href="nissan.html" class="fil">Nissan</a> &gt; <a href="gtr.html" class="fil">GT-R</a> &gt; <b>Nissan GT-R R35 570 ch</b>
		</p>
		<hr/>
		
		<table class="bottom">
			<tr>
				<td class="tdbottomG">Copyright &copy; 2017 Tous droits réservés - VeryFastCars</td>
				<td class="tdbottom"><a href="#top" class="link" />&uArr; Remonter en haut de la page &uArr;</a></td>
			</tr>
		</table>
		
		
		
		</body>
		</html>


CSS
/* 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: auto;
	display:inline-block;
	overflow-y: hidden;
	max-width:100%;
	position:relative;
	
	
}





.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;

overflow-y: hidden
}

.menu a:hover {


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

overflow-y: hidden
}

/* 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: 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%;
	overflow-y: hidden
}


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%;
	overflow-y: hidden
}

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%;
	overflow-y: hidden
}

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

}


En espérant obtenir de l'aide,
cordialement,
Thewebmaster76 Smiley smile
Bonjour

Les tableaux font très mauvais ménage avec les écrans de petite taille. Ils sont à utiliser avec parcimonie et seulement quand c'est indispensable.
Pendant très longtemps, avant que le CSS devienne une technique suffisamment puissante et supportée par tous les navigateurs, on utilisait très souvent des tables imbriquées pour avoir des présentations propres, mais c'était avec l'idée implicite que les écrans allaient devenir de plus en plus larges. Un des problèmes que j'ai eu à traiter en ce temps là, c'était que mes pages n'avaient pas une bonne présentation sur les écrans très larges.

Dans votre cas, l'utilisation de tableaux est effectivement justifiée par la nature des informations que vous présentez, qui sont bien tabulaires, mais ça n'empêche pas que les tableaux, ayant pour objectif d'utiliser au mieux la largeur des écrans, sont en conflit avec les contraintes d'affichage sur des écrans étroits.

Je ne pense pas qu'il y ait de solution au problème "afficher cette page sur mobile sans changement du HTML".
Je crains que vous ne deviez repenser les pages différemment en pensant d'abord à ce que cela donne sur un mobile, qui plus est en présentation verticale.
Modifié par PapyJP (27 Sep 2017 - 10:55)
@papy Donc je dois tout refaire ? J'aurai jamais le courage et pas le temps non plus Smiley ohwell

@kustolovic La page que tu m'as partagé propose des solutions assez complexes pour mon niveau, néanmoins, j'ai réussi à améliorer ma page en utilisant la technique d'un code css :
@media screen and (max-width: 640px) {
	table {
		overflow-x: auto;
		display: block;
	}
}

Au moins tout est centré mais c'est juste que désormais, il faut scroller horizontalement les tableaux...
Thewebmaster76 a écrit :
@papy Donc je dois tout refaire ? J'aurai jamais le courage et pas le temps non plus Smiley ohwell

Les @media queries sont très bien pour améliorer un peu la situation d'un site auquel on ne veut pas toucher, et de toute façon ils sont indispensables pour que la présentation puisse s'adapter à différents types d'écran. Comme exemple, voici ce qu'il y a dans la feuille de style du site que je viens de passer près de deux ans à adapter:

html {
    font-size:17px;
    font-family: "AdelonSerial-Medium";
}
@media screen and (max-width:1024px) {
	html {font-size:1.7vw;}
}
@media screen and (max-width:705px) {
	html {font-size:12px;}
}

ça permet de donner une taille de caractères pour les écrans larges, réduire la taille des caractères sur des écrans moins large, sans pour autant rendre les caractères si petits sur les petits écrans qu'on n'arrive pas à les lire. Comme tu vois, ça ne fait que quelques lignes de CSS.

Pour le reste, tu fais comme tu veux, ça dépend des attentes de ton audience. Si scroller horizontalement ne les dérange pas, tu peux laisser les choses en l'état avec ton @media query.

Ça dépend également du nombre de pages de ton site. S'il n'y en a que quelques unes, ça va vite de tout reprendre à zéro. S'il y en a des milliers, c'est difficile à envisager.
Ton code de media query m'a déjà au moins permis de rétrécir mon texte, merci !
Quelque soit l'audience, le scrolling d'un tableau c'est toujours embêtant Smiley ohwell
J'ai au moins 100 pages, ça serait vraiment long Smiley decu
Y a pas moyen de forcer la taille d'un tableau ? ou encore on peut pas rétrécir le border-spacing (ou padding je sais plus), car sur mobile, la case autour du texte (pour les onglets du menu) est vraiment plus large que le texte, c'est de l'espace pris pour rien !!
Regarde : https://drive.google.com/open?id=0B3MdljAAHVJRRHdOMEdRV2F5R1U
Sujet clos
Aller à