Geckozone

Bonjour, encore nouveau né dans l'utilisation de kompozer, je me tourne vers vous pour obtenir un peu d'aide!

J'ai créé une interace d'accueil pour mon "futur" site, avec quatre boutons (correspondant aux differentes pages) et une image de structure derriere.

Le problème est que l'image de structure et les boutons reagissent différemment lorsque l'on reduit la fenetre par exemple... L'image reste centrée, mais les boutons se déplacent.
Comment faire pour que l'ensemble soit "solidaire"?

L'image est centrée à l'aide de la barre d'outil, ce qu'il ne faut pas faire apparemment...

J'aimerais en fait que cette image soit le conteneur de mes boutons...

PS : j'ai déja visité les bases sur le siteduzéro, et quelques leçons sur Alsacréations, mais c'est différent lorsque l'on se retrouve tout seul sur kompozer...

Merci d'avance!

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11

Peut-on avoir une idée plus précise de ce que tu souhaites: copie d'écran, adresse de la page actuelle si elle est publiée, code de la page, quelque chose à nous mettre sous la dent, quoi!!

kortex a écrit : Comment faire pour que l'ensemble soit "solidaire"?

Comme tu l'as déjà compris , ne pas faire :

kortex a écrit :L'image est centrée à l'aide de la barre d'outil, ce qu'il ne faut pas faire apparemment...

C'est vrai que cela peut etre utile, comme le site n'existe pas encore, voila...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11

personne ne veut m'aider...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11

c'est un forum sur KompoZer, pas sur les timbres poste

merci, mais il suffit de cliquer sur l'image!

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727; InfoPath.2)

Je dirais qu'il faut positionner ton image à coup de css... Je n'ai pas compris si cette image devait occuper la partie droite du menu ou venir dessous...
De toute façon sans source nous resterons à des platitudes...
Il serait bon de publier ta page et nous donner l'adresse cela facilite grandement notre travail!

Anonymous a écrit :merci, mais il suffit de cliquer sur l'image!

ceci n'était pas faisable lors de mon précédent message...

En fait, pour l'instant cela se décompose de la manière suivante(pour la page d'accueil en tout cas):
_une image "de fond" comprenant le logo, le trait fushia et l'image 3D.
_mes quatre boutons à superposer à tout ça

Voici le code obtenu :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>accueil site</title></head>
<body style="color: white; background-color: black;" alink="#a8e415" link="white" vlink="#dd00dd"><br><div style="text-align: center;"><a href="contact.html"><img style="border: 0px solid ; position: absolute; top: 400px; left: 205px; width: 161px; height: 39px; z-index: 1;" alt="contact" src="contact.png"></a><a href="realisations.html"><img style="border: 0px solid ; position: absolute; top: 302px; left: 205px; z-index: 2; width: 161px; height: 39px;" alt="realisations" src="realisations.png"></a><a href="prestations.html"><img style="border: 0px solid ; position: absolute; top: 253px; left: 205px; width: 161px; height: 39px; z-index: 4;" alt="prestations" src="prestation.png"></a><a href="parcours.html"><img style="border: 0px solid ; position: absolute; top: 351px; left: 206px; width: 161px; height: 39px; z-index: 1;" src="parcours.png" alt="parcours"></a><img style="width: 900px; height: 581px;" src="structure-accueil.jpg" alt="ACCUEIL" align="middle"></div></body></html>

[Modo: pour une meilleure lisibilité, merci de mettre le code entre les balises [code.] et [/code.] (sans le point). c'est automatique en sélectionnant le code dans la rédaction du message et en cliquant sur la case code située au dessus de la zone de saisie]
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11

le mieux serait de mettre ton image de fond dans ton div et non sur ton div.
Idem pour tes boutons.
En pratique:
Tu supprimes l'image de fond
tu fais un clic droit sur ton div
> styles internes
> onglet boite: tu donnes en largeur et hauteur la dimension de ton image de fond
> onglet fond: > image > parcourir et tu sélectionnes ton image
> répétition:ne pas répéter
> position: centrer vertical et horizontal.

Ton image de fond est fixée

Tu fais la même chose pour <a>
> tu le fais pour ton premier lien puis sous l'onglet général, tu cliques sur "extraire et créer un style générique" et tu coche "tous les éléments de même type"

Tu as créé ta première feuille de style

Il te faudra peut-être réajuster la position des boutons, l'idéal étant de les positionner en "relative" par rapport au div de fond et non en absolu par rapport à la page.
Tu auras aussi intérêt à centrer le div de fond:
body: texte centré, puis pour le div, dans l'onglet boite:marges droite et gauche, mettre auto. ça peut être fait en même teps que les 1eres manips ci-dessus.

merci j'essaie tout de suite!

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11

j'ai fait un petit édit en fin de mon précédent message

Hum hum, ça à l'air facile comme ça...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11

Tu fais la même chose pour <a>

je dois supprimer tous mes boutons? Et refaire la manipulation comme indiqué?

l'image de fond est bien centrée grace aux marges, par contre pour les boutons je ne sais pas comment faire pour les repositionner, et si je dois supprimer la balise image et l'ajouter dans la balise "a" ou pas...
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11

Geckozone

Positions d'image

Positions d'image

Re: Positions d'image