Reproduire ceci

Bonjour,

j'essais tant bien que mal de reproduire la mise en forme que vous voyez dans l'image. Je ne vois pas comment m'y prendre, ça fait plusieurs heures que je suis dessus. Je pense que je ne parviens plus à avoir le recul nécessaire pour prendre le problème autrement.

http://imgur.com/3aNLHO4

Pourriez vous m'éclairer s'il vous plait? Je vous remercie.

Hello,

Et bien c'est un cas d'intégration relativement simple et très classique… qu'est-ce qui te pose problème exactement ? Le positionnement des éléments ?

Où en est-tu ? Pourrais-tu partager ton avancement actuel sur une page en ligne (ou à défaut créer un jsFiddle ou un CodePen) ?

Pour l'instant je n'ai pas grand chose.

Je suis gêné par les bordures haut et bas des 2 blocs ainsi que par le chevauchement des boutons ronds sur la bordure basse.

Je ne sais vraiment pas par quel bout prendre ces blocs. J'ai fait un jsFiddle de ce que j'ai, mais c'est pas grand chose:

http://jsfiddle.net/3hq29/

Re,

Le plus simple c'est de fonctionner avec des images d'arrière plan. Après ça doit aussi se faire en full-css, mais bon…

Pour la zone de gauche, tu peux utiliser un élément <hr /> charté pour tes filets de séparation, ou after/before en CSS.
Pour la zone de droite :
– le filet du titre de section "nos applications" est une image de fond de ce titre.
– pour chacun des cinq blocs, tu utilise une image de fond (ou un gradient CSS + bordure inférieure) puis tu positionne le bouton rond sur la bordure basse avec un positionnement absolu en CSS.

Il y a pas mal de façon d'intégrer tout ça en fait…

Merci,

ce qui me perturbe c'est l'alignement des <hr /> avec l'image de fond de Nos Applications. Je sens que ça va pas aller.

Mais je vais mettre en place ce que tu as dit et voir tout ça.

Bonsoir,

je suis désolé mais je fais un blocage sur ce bas de page. A moins de mettre une grosse image je ne vois pas de solution.

Est ce que quelqu'un pourrait m'aider pour ce bas de page qui est pour moi récalcitrant.

Je vous remercie par avance.

L'espèce de vague bleue tu veux dire ?

Ce qui me pose problème c'est d'aligner sur la même hauteur les barres horizontales de gauche avec celles de droite. Apres les boutons rond je les fais en image en position absolue sur la ligne horizontale du bas, ça ne devrait pas poser de problème.

Mais le gros soucis pour moi, c'est bien d'aligner les barres horizontales de gauches avec celles de droites.

un petit up?

bonjour,
en css3 et avec display:table avec une structure comme un h1 suivi d'une liste, tu peut obtenir quelque chose de rapprochant: http://codepen.io/gc-nomade/pen/JHdpx , compatible avec de recents navigateurs cependant
L'alternative aux gradient est une image en fond , le zizag peut-etre un gif ou png au dessus d'une couleur de fond. pour IE8 et plus.

MA GNI FIQUE!!

merci beaucoup, je partais mal avec un DIV qui en englobait 2 en float: left.

Je n'ai jamais pensé à utiliser UL LI.

Merci de me permettre d'avancer.

Bonjour,

par contre concernant le zigzag, je ne parviens pas à le positionner à cheval sur la ligne du bas. Ca repousse mon texte vers le haut.
Au dessus d'une couleur de fond? Ainsi le png prendrait la couleur de fond?

Des propositions?

Merci encore.
Modifié par Alexking2005 (06 Mar 2014 - 17:41)