Positionnement et background

Version imprimable

27/03/2009, 21h27
Heyloua

Positionnement et background

Bonjour à tous,

http://lea-francois.site.voila.fr/le...x/accueil.html

Donc voilà, j'ai mis (j'ai sans doute tort) tout mon design en background, et donc j'arrive pas à positionner mes éléments (pour commencer la barre de menu et la publicité) car quand je retrecit ma fenêtre tout se decale.

Que me conseillez vous de faire ? Decoupez mon design en plusieurs partie ? Oui mais comment ?

Merci d'avance :)
27/03/2009, 21h34
Macmillenium

Bonsoir,

Citation:

Envoyé par Heyloua

Que me conseillez vous de faire ?

Personnellement je te conseils de commencer par :
http://xhtml.developpez.com/cours/ et http://css.developpez.com/cours/

Et revoir la structure/code de ton site par la suite ;)
27/03/2009, 21h49
GihefBey
Bonjour,

Tu as oublié de refermer une </div>
Mais deux </body> sont présents.

Tu as deux styles pour le body. Un seul suffirait.
Des définitions sont fautives :
color: 918b8f;
background-image: url(http://lea-francois.site.voila.fr/le...x/layout.png); no-repeat;
Il pourrait se limiter à :
Code:

1 2 3 4 5 body { color: #918b8f; background-color: #FFBA6D; background: url(http://lea-francois.site.voila.fr/lesite/index/layout.png) no-repeat center top; }
Mets tous tes styles dans la feuille de styles. Évite d'en ajouter dans les balises :
<div style="position: absolute; width: 257px; z-index: 0; left: 360px; top:370px">
De plus, 257px sont insuffisants.
Évite aussi les mises en forme en HTML :
<td bgcolor="#ffccff" width="10%">
<div align="center"><font size="0">

Tu pourrais aisément te passer de tableau pour obtenir le même résultat.
Et en découpant l'image d'arrière-plan, tu pourrais placer ces différentes images en arrière-plan de différents blocs qui y seraient positionnés.

Enfin, et ce n'est pourtant pas tout, place l'ensemble de ta page dans un bloc qui englobera donc tout, que tu centreras et auquel tu appliqueras l'image d'arrière-plan plutôt qu'au <body>.

++
Pendant les tests, on peut se passer de la pub (-;

-
27/03/2009, 22h53
Heyloua
Citation:
Envoyé par GihefBey

Bonjour,

Tu as oublié de refermer une </div>
Mais deux </body> sont présents.

Tu as deux styles pour le body. Un seul suffirait.
Des définitions sont fautives :
color: 918b8f;
background-image: url(http://lea-francois.site.voila.fr/le...x/layout.png); no-repeat;
Il pourrait se limiter à :

Code:

1 2 3 4 5 body { color: #918b8f; background-color: #FFBA6D; background: url(http://lea-francois.site.voila.fr/lesite/index/layout.png) no-repeat center top; }

Mets tous tes styles dans la feuille de styles. Évite d'en ajouter dans les balises :
<div style="position: absolute; width: 257px; z-index: 0; left: 360px; top:370px">
De plus, 257px sont insuffisants.
Évite aussi les mises en forme en HTML :
<td bgcolor="#ffccff" width="10%">
<div align="center"><font size="0">

Tu pourrais aisément te passer de tableau pour obtenir le même résultat.
Et en découpant l'image d'arrière-plan, tu pourrais placer ces différentes images en arrière-plan de différents blocs qui y serait positionnés.

Enfin, et ce n'est pourtant pas tout, place l'ensemble de ta page dans un bloc qui englobera donc tout, que tu centreras et auquel tu appliqueras l'image d'arrière-plan plutôt qu'au <body>.

++
Pendant les tests, on peut se passer de la pub (-;

-
Merci beaucoup de ta réponse.

En revanche je n'ai pas compris tes dernieres phrases (en gras), pourrait-tu m'expliquer un peu mieux ????

Dans l'attente, je ne préfère rien toucher.

Merci à toi ;-)
28/03/2009, 00h03
GihefBey

On trouve facilement des réponses dans les liens donnés par Macmillenium.
http://maxdesign.developpez.com/tuto.../centrer-bloc/

En y réfléchissant, l'image devrait rester en arrière-plan du body.

Si tu ne corriges rien, rien ne changera (truisme).

-
28/03/2009, 00h06
Heyloua

J'avoue que je suis vraiment perdue et que je ne comprends vraiment pas ce que je dois faire !

Même avec les liens que vous m'avez donné, et pourtant je les ai lu.

Désolé

Mais bon tampis.
28/03/2009, 15h39
HiRoN

Bonjour,

Citation:

Envoyé par Heyloua

J'avoue que je suis vraiment perdue et que je ne comprends vraiment pas ce que je dois faire ! Même avec les liens que vous m'avez donné, et pourtant je les ai lu.

Cela est normal, intégrer l'ensemble des notions de base en CSS demande un minimum de temps et d'essai pour comprendre.
Prends le temps de lire (relire) les liens, fais-toi une page "test" sur laquelle tu tenteras des choses.

Pour les phrases mises en gras :
"Et en découpant l'image d'arrière-plan, tu pourrais placer ces différentes images en arrière-plan de différents blocs qui y serait positionnés."
Ce qui signifie que tu devras créer plusieurs div, leur mettre en background certains parties de ton design (tout dépendra de la découpe de ton design et de la façon dont tu utilisera (ou pas) la notion de repeat) et que tu positionneras ou il faut (faire des essais sur les propriétés de positionnement tel que float te permettrait de mieu comprendre).

"bloc qui englobera donc tout, que tu centreras et auquel tu appliqueras l'image d'arrière-plan plutôt qu'au <body>"
Cela signifie, qu'en premier lieu, créer un div de la largeur de ton site, centré via CSS (margin) te servira de div container (div général englobant le site) dans lequel tu placeras les autres éléments.

Tout cela ne peut s'apprendre un 1 jour, donc comme dis plus haut, prends ton temps, documentes-toi et fais des essais ;)