Soucis de plusieurs css

Fermé
Trident - 24 avril 2014 à 03:04
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 24 avril 2014 à 03:58
Bonjour à tous,

Voilà rencontrant un souci de positionnement via plusieurs résolutions d'écran, j'ai décidé de créer un css par résolution. Le souci est qu'il m'en prend qu'un seul.

Si quelqu'un aurais l'aimable attention de m'aider ou me diriger dans la bonne direction cela serais gentil.

L'intégration est :
<link rel="stylesheet" type="text/css" href="prog/style.css" />
<link rel="stylesheet" type="text/css" media="(max-width: 1024px)" href="prog/1024.css" />
<link rel="stylesheet" type="text/css" media="(max-width: 1366px)" href="prog/1366.css" />

CSS 1024 :
@media (max-width: 1024px) {.menu {
position:absolute;
top:38.7%;
left:6.5%;
font-weight:bold;
font-size:22px;
z-index:3;
width:188px;
height:274px;
}
}

CSS 1366 :
@media (max-width: 1366px) {.menu {
position:absolute;
top:38.7%;
left:9%;
font-weight:bold;
font-size:22px;
z-index:3;
width:188px;
height:274px;
}
}

Merci d'avance

A voir également:

2 réponses

Je viens de résoudre mon souci en intégrant tous dans le même css

.menu {
position:absolute;
top:38.7%;
left:9%;
font-weight:bold;
font-size:22px;
z-index:3;
width:188px;
height:274px;
}

@media (max-width: 1024px) {.menu {
position:absolute;
top:38.7%;
left:6.8%;
font-weight:bold;
font-size:22px;
z-index:3;
width:188px;
height:274px;
}
}
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
24 avril 2014 à 03:58
Salut

déja si dans prog/style.css il y a une declaration de .menu c'est bien sur celle la qui sera prise en compte car si tu appelle un css sans media queries c'est celui la qui aura prévalence sur tout le reste et les autres appels avec media queries seront ignorés.

ensuite il faut déclarer que c'est un media screen comme cela

<link rel="stylesheet" type="text/css" media="screen and (max-width: 1024px)" href="prog/1024.css" />

<link rel="stylesheet" type="text/css" media="screen and (min-width: 1025px) and (max-width: 1366px)" href="prog/1366.css" />

attention tout ce qui est supérieur 1366px n'aura pas de css !

pour IE 8 et moins les media queries ne sont pas pris en charge donc tu peux faire un commentaire pour appeller

<!--[if lte IE 8]><link rel="stylesheet" type="text/css" href="prog/style.css" /><![endif]-->

ensuite dans les css comme la selection de la taille du media est deja filtrée avec le link href + media screen pas besoin de recommencer avec media screen and etc ... dans le fichier css
mets simplement
.menu { ....
}

voila
0