Problème d'affichage sous WP
Fermé
Antoine47
Messages postés
1380
Date d'inscription
samedi 13 juin 2009
Statut
Membre
Dernière intervention
23 août 2018
-
24 mars 2016 à 00:39
Antoine47 Messages postés 1380 Date d'inscription samedi 13 juin 2009 Statut Membre Dernière intervention 23 août 2018 - 24 mars 2016 à 17:26
Antoine47 Messages postés 1380 Date d'inscription samedi 13 juin 2009 Statut Membre Dernière intervention 23 août 2018 - 24 mars 2016 à 17:26
A voir également:
- Problème d'affichage sous WP
- Affichage double ecran - Guide
- Windows 11 affichage classique - Guide
- Problème affichage fenêtre windows 10 - Guide
- Modifier affichage heure iphone - Guide
- Problème affichage mail zimbra free ✓ - Forum Mail
1 réponse
Antoine47
Messages postés
1380
Date d'inscription
samedi 13 juin 2009
Statut
Membre
Dernière intervention
23 août 2018
156
24 mars 2016 à 17:26
24 mars 2016 à 17:26
Voilà mon CSS
/* Pour les ecrans superieurs à 1024 px on applique les regles suivantes */
/* Styles generaux à appliquer dans tous les cas.*/
body {
background: #7f7f7f;
margin : 0px;
line-height: 1.75;
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
text-align:justify;
}
a {
color:#000000;
}
p {
margin: 1.75em 0;
font-weight: 300;
letter-spacing: 0.025em;
word-spacing: 0.025em;
}
#image {
float: left;
width: auto;
margin: 0 10px 10px 0;
}
#texte {
width:100%;
}
p.mention {
font-size : 12px;
color:#000000;
text-align: center;
margin-top: 0px;
}
h1, h2 {
margin: 1em 0 0.5em;
letter-spacing: 0.125em;
word-spacing: 0.125em;
text-transform: uppercase;
text-align: left;
}
h1 {
font-size: 1.3em;
}
h2 {
font-weight: normal;
}
h3 {
color: #000000;
font-size : 16px;
}
ul {
list-style:none;
margin-left:0px;
padding-left:0px;
}
ul li {
margin-left:0px;
padding-left:0px;
}
/* Menu de Navigation */
nav {
display: flex;
margin : 0px auto 0px auto;
}
nav ul {
width : 1024px;
list-style-type: none;
display: flex;
margin : 0px auto;
padding: 0;
}
nav li {
flex: 1;
background: #595959;
}
nav a {
display: flex;
color:#fff;
text-transform: uppercase;
text-decoration:none;
margin : 0px auto;
justify-content: center;
align-items : center;
padding: 5px 0px;
}
nav a:hover {
background: #7f7f7f;
margin : 0px auto;
padding: 5px 0px;
}
li.active {
background: #bfbfbf;
}
/*Sous menu de navigation */
ul.nav {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
text-align : center;
text-transform: uppercase;
}
li.nav a {
display: block;
color: #000;
text-decoration: none;
color:#fff;
}
li.nav a:hover {
background-color: #7f7f7f
}
li.navactive{
background: #7f7f7f
}
/* Header */
header {
width:100%;
background:#000000;
border-bottom: 1px solid red;
margin : 0px auto;
padding-top : 0px;
}
#logo {
margin : auto;
text-align : center;
}
/* Footer*/
footer {
width:100%;
margin : 0px auto;
}
/* Contenu*/
section.bloc_page {
display: flex;
color: #000000;
background-color: #bfbfbf;
width: 1024px;
margin: 0px auto;
}
article {
flex: 4;
padding: 1px 0px;
margin-left : 20px;
margin-right : 20px;
}
aside {
flex: 1;
margin: 5px 5px ;
}
iframe {
border: 0px;
}
ul.level_0 {
list-style-type:disc;
margin-left: 10px;
}
ul.level_1 {
list-style-type:circle;
margin-left: 25px;
}
/* Les Tableaux*/
table {
background: #FEFEFE;
border: 1px solid black;
border-collapse: collapse; /*fusion des bordures*/
margin-left : auto;
margin-right : auto;
}
caption {
background: #7f7f7f;
border: 1px solid black;
border-bottom: none;
padding: 5px;
font-size: 120%;
font-weight: bold;
color: black;
}
th {
background: #a6a6a6;
}
td, th {
border: 0px solid black;
padding: 9px 27px;
text-align: left;
font-size : 13px;
}
/* Formulaire de contact*/
#form-contact label {
margin:4px 0;
color:#000000;
display:block;
text-align : center;
}
input {
display:block;
width:70%;
color:#000;
border:1px solid #000000;
padding:10px;
margin : 0px auto 15px auto;
}
textarea {
display:block;
width:70%;
color:#000;
border:1px solid #000000;
padding:10px;
margin : 0px auto 15px auto;;
}
.bouton-envoyer {
cursor:pointer;
background-color:#7f7f7f;
border:1px solid #000000;
color:#ffffff;
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-size : 13px;
width:25%;
font-weight:bold;
margin : 10px auto;
}
.bouton-envoyer:hover {
background-color: #595959;
}
/* Regles appliquees aux ecrans inferieurs à 1024px */
@media all and (max-width: 1024px)
{
body {
width: auto;
margin: 0;
padding: 0;
}
/* fixer une largeur maximale de 100% aux elements potentiellement problematiques */
img,
table,
tr,
td,
textarea,
input,
embed,
video,
iframe,
nav {
max-width: 100%;
padding: 0;
margin-left : auto;
margin-right : auto;
}
/* conserver le ratio des images */
img {
height: auto;
}
nav {
width: 100%;
}
nav ul {
display:flex;
flex-direction: column;
}
section.bloc_page {
background-color: #bfbfbf;
width: 100%;
margin : 0px;
padding : 10px 0px 25px 0px;
display : block;
padding : 0;
}
article,
aside {
display : block;
width : 100%;
margin : 0px;
padding : 0;
}
ul.nav {
width: 100%;
}
aside {
text-align : center;
}
form {
width : 100%;
}
h1 {
font-size: 1em;
text-transform: none;
}
p {
font-size: 13px;
margin : 0px;
}
input, textarea {
margin : auto;
padding-top : 5px;
padding-bottom : 5px;
}
#image {
width: 100%;
text-align : center;
}
#texte {
width: 100%;
}
}
/* Pour les ecrans inferieurs à 320px, on n'affiche pas les tableaux*/
@media all and (max-width: 320px)
{
table {
display : none;
}
video {
display : none;
}
}