Remplacer width:100%; par width:460px;

Bonjour,

je développe un site sous Symfony 2

j'ai 2 pages de css par page

c'est à dire si ma page s'appelle toto, j'appelerai general.css et toto.css

mon problème est que mon header est défini en width:100%; dans le général et que dans le responsive de toto, je voudrais le faire passer à width:460px; mais c'est le width100% qui prend le dessus

general.css

Code:

---

1 2 3 4 5 6 7 8

header{ position: relative; height: auto; width: 100%; z-index: 10; text-align: center; background-color: #fe0002; }

---

toto.css

Code:

---

1 2 3 4 5

@media screen and (max-width:460px){ footer{ width: 460px; } }

---

le head du site

Code:

---

1 2 3 4 5 6

{% block head %} <title>{{title}}</title> <link href="{{ asset('/monsite/css/general.css') }}" type="text/css" rel="stylesheet" media="screen"/> <link href="{{ asset('/monsite/css/toto.css') }}" type="text/css" rel="stylesheet" media="screen"/> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> {% endblock %}

---

Merci de votre aide

Bonjour,

Tu veux modifier le "header", mais dans toto.css, tu écris "footer"...

Tu as surtout besoin de lunettes ! 8O

Moi, ce que je ne comprends pas très bien, c'est pourquoi tu veux forcer la largeur à 460px pour les écrans de largeur inférieure à 460px ? :koi:

En effet avec des lunettes ça irait mieux ;)

Je teste ça ce soir.

Bovino,

J'ai besoin de forcer la taille du header car j'ai des balises que je ne veux pas compresser

Dans ce cas, il te suffit d'écrire :

Code:

---

1 2 3 4 5 6 7 8 9

header{ position: relative; height: auto; width: 100%; min-width: 460px; z-index: 10; text-align: center; background-color: #fe0002; }

---

et le tour est joué ;)

J'ai essayé la méthode "lunette" en mettant header dans le responsive desgin à la place de footer et ça marche ;)

Ma solution (message précédent) est tout aussi fonctionnelle !