28173 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai actuellement un petit souci technique.

Apres avoir realiser ma maquette sous toshop, je procede au decoupage et a la mise en forme css.

Voici la maquette :

http://ahulane.com/promoto/prop4.jpg

Donc le header est decoupé, et le souci serait par rapport au menu, je voudrais qu'il deborde sur le header et que la partie centraile soit correctement mise.

Pour cela j'avais pensé rapidement a un margin-top avec une valeur negative pour le faire remonter, mais en fait il remonte bien mais se trouve en dessous le header, pas cool.

Apres je suis allez voir pour positionner ce menu en "relative" et là j'arrive bien a le faire remonter en etant "au dessus" du header.
Donc sur ce coup là, impeccable.

Mais maintenant il s'agit de la partie centrale qui se met mal et je vois pas trop comment bien la placer, elle se place en "escalier" en dessous le menu.


http://ahulane.com/test.JPG

Ma solution actuelle : la mettre en relative egalement, calulé la hauteur du menu, et mettre un top negatif qui remonte le tout.

http://ahulane.com/test1.JPG

Mais bon ce n'est pas idéal et je le sais ..

Qqun peut m'aider ?

J'ai essayer avec des clear both, mais ca ne marche pas, ou en tout cas je m'y prend mal.



Voici le code visible a cette url :

http://ahulane.com/test.htm




Qqun connait surement l'astuce pour cela, on peut m'aider ?

Merci
Modifié par Ahulane (09 May 2006 - 19:38)
Je pense a plusieurs solutions:
-Mettre ton conteneur qui englobe tout en absolute, ton header dans le flux normal, ton menu en absolute avec left:0 , tu le remonte et spécifie sa largeur, et tu met ton conteneur central dans le flux normal. TOn pied de page devrait se mettre tout seul
TU peux voir ceci sur ce tuto

-ton menu tu le met en float:left, tu definis sa largeur, , tu le montes, et tu mets ton conteneur central en precisant une margin-left de la largeur du menu. Pour ton footer, tu le specifies en clear:both et ça devrait aller.

Et si le chevauchement te pose trop de souci, tu peux toujours incorporé graphiquement a ton image de header la partie qui chevauchera, et le reste dans le menu normal. Enfin il faut que la partie qui chevauche dans ton menu soit graphique.

VOilà jespere tavoir donné les pistes pour te debloquer.

A+
Ca y est , ca marche.

En fait j'etais effectivement parti de ce modele là. Mais comme je m'embrouille vite entre tous les positionnements possibles (float, relative, absolue) , ect, non pas que je ne lise pas les aides, mais qu'a force, c'est jamais vraiment evident (enfin pour moi), bah je bouine le code comme je peux.

Et là

j'ai juste essayé :

- top: 70px; sur le menu de gauche, il se decale bien comme il faut, impeccable.

Merci a vous, petit a petit, le css ne me deviendra limpide.


EDIT : Il y a pas à dire, ce forum et la mentalité de ce forum est vraiment un plaisir, les experimentés prennent le temps de renseigner rapidement les débutants, qui généralement ne bloque que sur un detail, et c'est vraiment sympathique.
Modifié par Ahulane (09 May 2006 - 19:47)