Décalage

Bonjour à tous,

Je réalise un site web: http://guigui69.guigui69.free.fr/aparte/index2.html
(css: http://guigui69.guigui69.free.fr/aparte/css/style.css)

Mon problème c'est quand fonction de la résolution (ex 1024) celui-ci ce décale en bas.

Comment résoudre le problème ? Des conseils ?


guigui69

Salut,

Avec les media queries, faire sauter les paramètre float, margin et width de div#corp (elle se place superbement bien toute seule la div !) et ajuster un peu ton menu.

Remarque : Tu peu aussi faire sauter le param float de div#corp en général car il ne sert a rien. Joue avec le margin-left (largeur du menu + décalage) et laisse une width automatique

Sinon pour le fond : http://www.alsacreations.com/astuce/lire/1216-arriere-plan-background-extensible.html

Bonsoir,

je n'ai pas bien compris.

Avec les media queries, faire sauter les paramètre float, margin et width de div#corp (elle se place superbement bien toute seule la div !) et ajuster un peu ton menu.

Remarque : Tu peu aussi faire sauter le param float de div#corp en général car il ne sert a rien. Joue avec le margin-left (largeur du menu + décalage) et laisse une width automatique smile

Pour image de fond j'applique deja la méthode indiqué.


Merci

guigui69

guigui69 a écrit :
Pour image de fond j'applique deja la méthode indiqué.

Alors il y a quelque chose qui gêne ou que tu as loupé car lorsque la fenêtre est plus haute que large par exemple, on voit l'image se répéter sur l'axe des ordonnées.


Pour le reste je te disais de laisse le positionnement naturel de div#corp. Autrement dit :

div#corp {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
    color: #BDBDBD;
    font-family: 'Oxygen',sans-serif;
    font-size: small;
    height: 100%;
    [b]margin: 0 5% 0 35%;[/b]
    padding-left: 40px;
    padding-right: 40px;
}

par exemple. Sans float, position relative et sans width fixée (au pire mettre une max-width).

Merci , je viens de voir que c'est la seule page que j'avais oublié de modifier.

J'ai fait les modification cela semble fonctionner.

Mais j'ai remarqué un defaut que je n'arrive pas a corriger:

si je prend la page 1: http://guigui69.guigui69.free.fr/aparte/index.html

==> Les bande noir (menu a gauche) commence bien au début de la page, par contre si je me met sur la page 2 http://guigui69.guigui69.free.fr/aparte/index2.html

==> On peut voir un espace en haut.

Comment faire pour supprimer cette espace.
(Si j'enleve le texte de la page 2, la page se met correctement)

Quelle erreurs est-je commis ?

guigui69

Bonjour,

les balises de titre possèdent en général une marge par défaut.
Dans votre 2ème page, vous n'avez pas spécifié de margin pour votre titre "<h1>Le restaurant</h1>".
Vous pouvez lui appliquer un "margin-top: 0" pour supprimer cette bande en haut.

Merci c'est bien ca,


Je suis entrain de m'attaquer la partie pour IE

div#corp {

    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
    color: #BDBDBD;
    font-family: 'Oxygen',sans-serif;
    font-size: small;
    height: 100%;
    margin: 0 5% 0 35%;
    padding-left: 40px;
    padding-right: 40px;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);					
}

J'ai bien rajouté le code nécessaire pourtant j'ai pas le fond noir transparent sous IE 8 et IE9

Quelle erreur est je commis?

guigui69

Tu n'as pas définis de couleur de fond :

background-color: #000000;

Sur les autres ca marche car c'est :

background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);

qui donne a la fois la couleur de fond ET l'opacité mais du coup si tu zappes ça sous IE tu perds l'opacité ET la couleur de fond. Autrement dit tu as mis de la transparence sur... rien

PS : grâce a ton post j'ai découvert que IE8 avait un débogueur de code style Firebug O_o
(F12 pour les curieux http://msdn.microsoft.com/fr-fr/library/dd565627%28v=vs.85%29.aspx)
Modifié par _laurent (31 Aug 2012 - 10:59)