Discussion :

[tmlpqsdpmdlc]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
@media screen and (max-width:460px){
    footer{
        width: 460px;
    }
}

le head du site

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Invité]

Bonjour,

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

Tu as surtout besoin de lunettes !

[Bovino]

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 ?

[tmlpqsdpmdlc]

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

[Invité]

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

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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é

[tmlpqsdpmdlc]

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

[Invité]

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