[Résolu] Aide pour positionnement d'une DIV

Bonjour,

Voilà malgré plusieurs essais je n'arrive pas à mettre l'image du personnage qu'on voit à droite au bon endroit (c'est à dire comme sur ma maquette)

J'ai essayé les positionnements fixe ou absolu mais quand on déforme la page avec le navigateur tout est fixe sauf cette div

http://img15.hostingpics.net/pics/964072maquette01.jpg

Voilà j'ai donc à peu prés réussi à tout intégrer de ma maquette sauf cette image.

Une idée ?


Si besoin voici ceux que j'ai déjà codé :

EN LIGNE : http://fernandezj.pagesperso-orange.fr/index.html
Modifié par Julien64 (18 Oct 2012 - 11:42)

Vu l'architecture de ton code, pour afficher ton image à droite, tu peux utiliser la position absolute.

Pour pouvoir l'utiliser, il faut que tu appliques une position: relative sur son parent.
Donc ici, ajoute :

position: relative;

dans #blocPage

Et ceci:

#logo {
    position: absolute;
    right: 0;
    top: 50px;
}

Par contre si je peux me permettre, ton image n'est qu'une décoration, elle ne devrait donc pas être gérée donc le html mais dans le css via un background-image (sur le section par exemple);

Merci pour ta réponse.

Effectivement comme tu le soulignes ce n'est qu'une décoration, du coup je vais passer l'image dans le CSS pour voir.

Bonjour,

Background multiple via CSS3 peut également être une solution

#blocpage {
    background-image: url("images/guy.png"), url("images/wall.jpg");
    background-position: right 50px, left top;
    background-repeat: no-repeat, no-repeat;
    box-shadow: 0 25px 100px rgba(0, 0, 0, 0.9);
    margin: auto;
    width: 1050px;
}

Je viens de voir la méthode du background multiple que j'avais déja vu mais j'avoue ne pas y avoir pensé.

J'ai mis à jour la page : http://fernandezj.pagesperso-orange.fr/

Le rendu est parfait. Je vais peut être réduire la hauteur vu que le vide plus bas est inutile, enfin je vais voir après sur les prochaines pages si j'en ai besoin.

Merci 6l20

Voilà donc la modif :

#blocpage 
{
    background-image: url("images/guy.png"), url("images/wall.jpg");
    background-position: 780px 75px, left top;
    background-repeat: no-repeat, no-repeat;
    box-shadow: 0 25px 100px rgba(0, 0, 0, 0.9);
    margin: auto;
    width: 1050px;
    height: 1054px;
}

Sinon votre avis dans l'ensemble vous trouvez le rendu agréable ? le code est il propre à vos yeux ^^ ?
Modifié par Julien64 (18 Oct 2012 - 10:33)

En effet le background multiple et un bon moyen. Mais fait attention aux versions de ie8 et ie7 qui ne connaissent pas les nouvelles propriétés du css3...

Même chose pour les inline-block que tu as utilisé un peu partout.

Je te conseil de bien vérifier tous les comportement sur ie.

Il nous fait **** IE

J'ai pas vraiment chercher à rendre compatible avec les anciennes versions d'IE.

Le but est vraiment d'utiliser les propriétés du CSS3


Là sur ie8 c'est l'horreur

Evidemment Firefox 11.0 et Chrome 22 c'est parfait