Des livres incontournables pour tout maîtriser

  • CSS2
  • Réussir son site web avec XHTML et CSS
  • PHP 5 avancé
  • Memento CSS
  • Memento XHTML
  • Ergonomie web
  • Bien rédiger pour le web
Rechercher dans le sujet :
Forum
» CSS et mise en forme
» [résolu] Faire déborder un container a gauche..
Auteur
Olorin
# 10 Jan 2009 - 20:19:36
Citer
11 Posts
 Bonjours a tous.
j'ai un petit soucis mais comme j'ai du mal a bien le définir je n'arrive pas a trouver de solution dans le forum et sur gogol..

j'ai un site construit sur du css, et je voudrais qu'il donne ca: (attention c'est des montages hein, le site sera plus beaux en vrai lol )

upload/18243-1Small.jpg

sur mon ecran c'est ok, ça fonctionne très bien. (1680*1050)

si on passe a des résolutions inférieures, ça se complique..
la partie centrale est bien centrée, mais quand le container qui contient les photos, derrière le tout, touche le bord gauche (sur du 800*600), la partie centrale n'est plus centrée...bon ce n'est pas très clair.. on vas le faire en image smile

les photos sont contenu dans un container dont voici le code:

#container{
width:1190px;
height: 100%;
margin: 10px auto;
background-image:url(../fondphoto.jpg);
background-repeat: no-repeat;

en rosée ici:
upload/18243-2Small.jpg

ce que ca donne sur une petite résolution:
upload/18243-4Small.jpg

voila ce que je voudrais obtenir:
upload/18243-5Small.jpg


je voudrais donc que le container 'déborde' sur la gauche afin de toujours rester centrer sur le abndeau et le contenu..

c'est possible avec le css?

par avance merci...
Modifié par Olorin (13 Jan 2009 - 13:45)
^
Olorin
# 12 Jan 2009 - 18:11:30
Citer
11 Posts
 ...en fait c'est exactement ce qu'on trouve sur le site d'allociné:
http://www.allocine.fr/

je n'arrive pas a comprendre comment c'est fait...
^
Florent V.
# 13 Jan 2009 - 01:58:15
Citer
Administrateur
17163 Posts
 Bonjour,

Petite méthodologie:
1. Installer Firebug (extension pour Firefox).
2. Apprendre à utiliser le mode «inspecter» de Firebug pour explorer le code HTML et CSS de manière simple et rapide.
3. Aller sur Allocine.fr ou autre site qui présente la disposition que tu souhaites (de préférence plusieurs sites).
4. Étudier la manière dont c'est fait grâce aux outils à ta disposition.

Et voilà. smile

http://fvsch.com 
^
Olorin
# 13 Jan 2009 - 10:44:58
Citer
11 Posts
 merci pour votre réponse:)

malheureusement j'ai déjà essayer d'étudier allociné avec firebug, sans trop comprendre comment ils ont fait..

la bonne nouvelle c'est que j'ai contourné le problème en mettant l'image non pas dans un container, mais directement dans le background. Et la
j'obtient ce que je voulais:)

 body{

    background-color:#DCEDF9;

    background-image:url(fondphoto.jpg);

    background-repeat: no-repeat;

    background-position: top center;

}

Modifié par Olorin (13 Jan 2009 - 10:45)
^
Florent V.
# 13 Jan 2009 - 11:57:52
Citer
Administrateur
17163 Posts
 Avec Firebug, tu as regardé quels styles CSS s'appliquent à l'élément BODY sur Allocine.fr par exemple?
http://fvsch.com 
^
Olorin
# 13 Jan 2009 - 13:44:54
Citer
11 Posts
 oui justement, je cherchais dans leur css tout les bloc, sans trop comprendre, alors que c'est tout simplement mis sur le body..

en fait avec du recul ca parait évident biggrin

merci encore:)
^
Le sujet est clos.
Aller à
Powered by Phedio v3.8.6 beta in 27.2 ms © dew