18041 sujets

Questions générales et questions de débutants

Positionnement d'un calque par rapport à une image [Resolu]

Pages :
Bonjour à tous !

Ceci est mon tout premier message chez Alsacéations !
Je suis débutant en css. Je réalise un deuxième site web (de ma vie) que je souhaite faire proprement...
voir : www.leim.fr

J'utilise deux images de fonds qui seront tout le temps présentes. Elles sont positionnées de façon à être toujours au centre grâce au CSS.

Comment faire pour placer mes zones de textes (calques) sur mon fonds et qu'elles soient toujours positionnées au bon endroit sur mon fonds et ce quelque soit la taille de la fenêtre du navigateur ?

J'ai lu plein de choses sur les tutoriaux (conteneur,positionnement...) mais je n'arrive pas à saisir qu'elle est la méthode globale que je dois employer...
Je cherche à faire quelque chose de très simple.
Une idée pour me mettre sur la bonne piste ?

Merci d'avance de vos réponses
Olivier
Modifié par OliveLEIM (01 Mar 2007 - 15:10)
OliveLEIM a écrit :
Ceci est mon tout premier message chez AC


Bonjour et bienvenue OliveLEIM Smiley smile

Juste entre nous, promis, je ne le répèterais pas, si "AC" veut dire Alsacreations, tu vas fâcher le patron du forum à inventer cette abrévation. Je te suggère de corriger ton post en utilisant le bouton "Editer" Smiley cligne Merci d'avance !
Modifié par dominique (28 Feb 2007 - 16:27)
Bonjour,

Je ne suis pas certain d'avoir bien compris ta demande (quels sont ces deux fonds?), mais s'il s'agit simplement de centrer l'ensemble de ton site (le fond en forme de cadre ainsi que le texte qui le superpose), il te suffira de créer par exemple une division de la largeur voulue en lui attribuant une image de fond ainsi que des marges latérales automatiques pour le centrage.

Ceci dit, un aperçu concret de ce que tu aimerais réaliser nous permettrait de t'aider plus efficacement! Smiley cligne
Hello Benjamin,

Merci de m'accorder un peu de temps !
Ma demande est très simple : comment ancrer des calques sur une image de fonds centrée dans le navigateur. Cette image de fonds est donc forcément mobile dans le navigateur. Les calques devront donc l'être aussi tout en restant anvré au bon endroit sur l'image de fonds.
Voir ce fonds sur www.leim.fr
Benjamin,

En effet, ca pourrait peut être marcher...
Concrètement, comment réaliser ceci ?
Merci de ta réponse
Bonjour,

Il conviendrait de placer l'ensemble de ton site dans un bloc conteneur que tu pourras éventuellement centrer dans le body en lui appliquant un margin: auto;[code]
<div id="conteneur>
<div id="header>/* en background ta frise*/
</div>
<div id="contenu">/* en background ton fond*/
<.......>
</div>
<div id="pied_page">
</div>
</div>

voulou
Re,

J'ai omis un point important, c'est le choix de la taille de ta page finale: pour quelle(s) résolution(s) ce site doit être optimisé ? Ceci conditionnera l'essentiel de ton code css et c'est une question à résoudre avant de poser le moindre index sur le clavier de ton PC...

Si j'ai un conseil, va faire un tour là : http://www.siteduzero.com/tuto-3-6-0-apprenez-a-creer-votre-site-web.html
Si tu veux faire les choses "proprement" commence par les bases.

Bon courage
Modifié par ghost (28 Feb 2007 - 19:19)
OliveLEIM a écrit :
C'est pour du 1024x768, visiblement le plus courant sur la toile

Effectivement. Ceci dit, je pense que c'est plus la quantité de contenu qui doit définir la largeur de ton layout que la moyenne d'utilisateurs sur les différentes résolutions. Ainsi, je crée par exemple pour l'instant un site de présence (entendre: site "carte de visite") où le contenu est très restreint, je n'ai donc aucune utilité à partir sur une base trop large: j'ai logiquement opté pour une largeur de 760px. Je conçois le projet en fonction de ce qu'il y a à dire, et non en fonction de ce que les statistiques disent (enfin, ce n'est pas pour ça qu'il ne faut pas en tenir compte hein Smiley cligne ).

Si tu comptes travailler pour du 1024, je te conseille de partir sur du 960px de large, option qui te donnera nombre de possibilités de grilles de mise en page ainsi que des marges (relativement) confortable sur un écran de 1024*768.

L'autre alternative, c'est l'utilisation de tailles relatives. Elle peut être dans certains cas très intéressante, mais demande tout de même une réflexion plus importante et quelques connaissances sur le sujet pour éviter d'avoir dans certaines résolutions des pages beaucoup trop large et par conséquent un formatage de texte inadapté à une lecture aisée.

edit: un peu de lecture si le sujet t'intéresse:
Faire un site pour toutes les résolutions

Cordialement,
Benjamin
Modifié par Benjamin D.C. (28 Feb 2007 - 19:50)
Re,

Une fois le width défini, il faut prendre en compte ton height, en effet ton background pour qu'il soit correct ne supporte pas le repeat-y et impose donc une hauteur fixe non modulable, est ce que le contenu sur l'ensemble des pages de ton site peut tenir sur cette hauteur ?
Sinon, comment le modifier ... (ce qui est réalisable)
Modifié par ghost (28 Feb 2007 - 21:04)
Salut,

ghost a écrit :

J'ai omis un point important, c'est le choix de la taille de ta page finale: pour quelle(s) résolution(s) ce site doit être optimisé ?
C'est une démarche d'un autre âge, ça Smiley cligne

La bonne question est plutôt "est-ce un design en largeur fixe ou en largeur fluide", non ? Si la réponse est "fixe", alors une largeur de l'ordre de 760 à 770 pixels permettra une utilisation confortable par (pratiquement) tous les visiteurs, et pas seulement "les plus répandus".

Si le design est fluide, la question se règle d'elle-même Smiley smile . La largeur à fixer sera plutôt la largeur maximale que la page peut atteindre ...

Ceci dit, j'ai l'impression que OliveEIM essaie de réaliser un site centré horizontalement & verticalement ? Si c'est bien le cas, créer un <div> aux dimensions de l'image de fond et le centrer verticalement et horizontalement devrait faire l'affaire.
Salut Thomas,

Je cherche a centrer le site horizontalement. Je me passerai du centrage vertical.
Si je crée une div centrée qui acceuil mon image fonds, es ce que je pourqis disposer de div pour mettre mon texte de façon à ce qu'elle reste ancrée au bon endroit sur l'image quelque soit la taille du navigateur de l'utilisateur ?
Et si j'essaie un truc comme ca :

CODE HTML
<body>
<div id="global">
<img src="Images/Frise.jpg">
<img src="Images/Fonds.jpg" width="1024" height="735" >
</div>
</body>
</html>

CODE CSS
#global {
margin-left: auto;
margin-right: auto;
width: 1024;
}

Visiblement, ca marche pas mais suis je sur la bonne piste ?
Salut,

Si tu veux mettre une image de fond, il faut utiliser la propriété CSS prévue à cet effet : 
<body>
   <div id="global">
   <h1>Titre de la page</h1>
   <p>Contenu ...</p>
   </div>
</body>

#global {
   width: 1024px;   /* Largeur fixée */
   margin: 0 auto;  /* Centrage horizontal */
   background: url(images/fond.jpg) 0 0 no-repeat;   /* Image de fond */
}

PS : Merci d'utiliser les balises adéquates ([ code] & [ /code] sans les espaces) lorsque tu insères du code dans tes messages ...
Ca donne ca : www.leim.fr

Ca a l'air centré.
Il y a un probleme de hauteur cpdt.
Quand est t il de mq frise ? Es ce que je peux mettre une autre image en entete ?
OliveLEIM a écrit :
Il y a un probleme de hauteur cpdt.
Quand est t il de mq frise ? Es ce que je peux mettre une autre image en entete ?

Il faut supprimer la couleur de fond des éléments à l'intérieur de #global, elle masque ce qui se trouve derrière.

Pour la hauteur, #global s'adapte à la longueur de son contenu. Il faut spécifier la hauteur si tu veux qu'il se comporte différement ...
Modifié par Thomas D. (01 Mar 2007 - 14:28)
Ok, maintenant j'ai une image de fonds centrée grace au css
Mes questions :

1. Comment rajouter ma frise en haut ? Est t il possible de mettre un background entête ?

2. Comment placer des zones de textes qui resteront sur mon image de fonds ?
Pour la frise, tu peux l'utiliser comme image de fon dsur n'importe quelle balise HTML, et pour positionner les zones de texte au bon endroit sur l'image de fond, il suffit d'utiliser les marges & padding ...
A tous,

Merci pour votre soutien.
J'ai bien peur que tout ceci soit un peu compliqué pour moi, je n'ai aucun pré requis Smiley decu
Je vais donc me contenter d'un site aligné à gauche avec des div positionnées en absolu tout comme sur mon premier "vrai" site : www.cinemannecy.fr

Prisonnier du WYSIWYG je suis, prisonnier du WYSIWYG je resterai Smiley bawling

Bon vent à tous
Pages :
Sujet clos
Aller à