28173 sujets

CSS et mise en forme, CSS3

Bonjour,

Tout d'abord je vous montre la maquette:
http://www.vhcrea.be/cipatest/mqt.jpg

Voilà, mon problmeme est le suivant:
je souhaite repeter verticalement l'image background du "contenugauche" et celle du "contenudroit" suivant leurs contenu. (qui sont appellé via un include php, pour preciser).

Mais comme vous pouvez le voir ici:
http://www.vhcrea.be/cipatest/index-test.php
le texte deborde sans que l'img se repete.
J'ai beau avoir essayé diverses possibilitées je n'arrive pas a voir mon/mes erreurs...
voici le .css:
http://www.vhcrea.be/cipatest/cipa.css

ceci dit je viens de faire un test dans IE et je remarque que tout foire mais que le repeat-y fonctionne ^^

Un grand merci a vous de pouvoir m'aider, m'eclairer.
Bonjour Smiley smile

Je te conseille d'utiliser le validateur xhtml pour vérifier la structure de ta page :
_ les balises '<link>' et '<style>' doivent se situer entre les balises '<head'> et '</head>'
- les commentaires qui couvrent ton adresse mail englobent une balise '</span>' , il faudrait donc que tu sortes cette derniere du commentaire

Pour ce qui est des css, le bloc 'conteneur' ne contient que des div en
float:right(ou left)

Il n'a donc pas de hauteur puisque vide (renseigne-toi sur les propriétés de float : float retire un élément du 'flux' .

Par exemple, les blocs 'header', 'menu' n'ont pas besoin de cette propriété a priori.

Pour savoir comment réagissent mes blocs ,en général, je leur donne une bordure bien voyante provisoire, histoire de savoir où ils sont situés (border:1px solid red ou une autre couleur affreuse mais bien voyante Smiley cligne )
(ne pas oublier que ajouter une bordure à un bloc modifie la taille de ce bloc cf : Gérer les modèles de boîtes CSS standard et Microsoft )

Je vais essayer de voir plus en détails mais mes connaissances en css ne me permettront surement pas de t'aider d'avantage ^^'
Bon courage ++ Smiley smile

voir aussi : Comprendre le positionnement des balises en CSS

EDIT: Je vois mal comment tu pourrais faire correspondre les backgrounds de 'bas gauche' et 'bas droite' :
- soit tu donne une hauteur fixe à 'contenu gauche' et donc , des que le texte seras trop long, tu auras un vilain scroll au millieu de ta page,
- soit je sais pas ^^

Par contre, je remarque que 'bas gauche' et 'bas droit' ne contiennent rien. A quoi servent t-il ? seulement à décorer en leur mettant un background-image ?
++
Modifié par cruz (23 Mar 2006 - 18:43)
Merci de ta réponse Cruz.

-En fait les balises Style affichées dans le body de l'index etaient du a un style que j'avais appliqué ds la page "menu" qui est include dans l'index, pour le menu..
Soit j'ai corrigé... Merci;)

-Sinon pour les commentaires qui englobe l'email c'etait juste pour qu'il ne soit pas affiché.

-Pour la prorpiete Hauteur de "header" "menu" il me semble etre obligé de l'indiquer pour que l'img s'affiche.

-'basgauche' et 'basdroit' ne servent bien qu'a ma mise en page et donc a n'afficher qu'une img de background.

Pour finir, je commence a me demander si c'est bien realisable ce que je souhaite faire, car en plus de repeter l'img 'contenu gauche' je dois faire correspondre la hauteur de 'contenudroit' en rapport a 'contenugauche'.
j'ai chercher de la doc similaire a ce type de mise en page mais je n'ai encore rien trouvé qui puisse m'aider Smiley decu

je rajoute ici le lien vers le code source de mes pages, pour ne pas vous baser sur le code source de l'affichage index.
http://www.vhcrea.be/cipatest/

Encore merci de ton aide Cruz Smiley cligne
je continue ma recherche ++
J'ai exactement les 2 mêmes problèmes que toi, alignement des colones de mon site et ce problème de non répétition du motif de mon block sous mozilla. Si quelqu'un à la solution j'écoute Smiley biggrin
j'ai réussi à repeter le contenu de gauche, mais celui de droite suis pas Smiley ohwell

par contre je sais pas si t'as vu mais quand on répète le fond du contenu gauche on voit une coupure ça fait pas terrible Smiley cligne
Le probleme vient du fait que les elements ont une hauteur height fixe mettre height:auto le probleme sera resolu
Oui merci Jp94.
Sinon aurai-tu une idée de comment indiquer au 'contenu droit' d'avoir la meme hauteur que le 'contenugauche'?
Modifié par Veanz (24 Mar 2006 - 14:10)
Salut,

Mais d'après ton exemple, si on ajoute pas mal de contenu à la partie centrale, la partie de droite ne suivra pas, non ?

Une solution simple serait de mettre #basdroite en position absolue, et de ne mettre qu'une seule image de fond commune pour #contenugauche et #contenudroite.
Et supprimer tous les float dont tu n'as pas besoin...

A+

ps : mettre height: auto; ne sert à rien ici.
Bonsoir Veanz,

Voici ce que je te propose :

Page de test

Je te laisse le soin de regarder le code et de réaliser les réglages de finitions. Smiley cligne

Je ne sais pas si avec ce montage tu pourras aboutir sur ta maquette.
N'hésites pas à faire signe sur le forum.

Pour les commentaires sur le pourquoi du comment, on voit ça la semaine prochaine si ça te dit. Ce soir j'ai la tête comme une enclume. Smiley ravi

J'aime bien ton fond de page, il est chouette.

A+ Smiley cligne