Comment reproduire 3 blocs spécifiques en HTML/CSS ?

[julworld]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Safari
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Moi uniquement
Problème apparu depuis : maintenant
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour à tous,

Je me permets de vous contacter pour obtenir de l'aide pour le codage de blocs en html/css, respectant des formes particulières.

Je souhaite reproduire en codage le schéma sur l'image ci-jointe.
Une zone en forme de L, où une image de fond remplira l'intégralité de la zone en L, et la même chose pour les deux autres formes (le rectangle du milieu et le L inversé).

Autrement dit, les 3 zones représentent chacune une image de fond, par-dessus lesquelles des informations rempliront les zones.

• Comment procéder et dans quel ordre ?
(pour ne pas couper en 2 blocs les informations présentent dans les zones L)

Merci d'avance pour votre aide et vos conseils !

[julworld]

UP, j'ai besoin de votre aide

[julworld]

Up. Une idée pour réaliser cela ?

[julworld]

Up

[Daewyn]

Bonjour / Bonsoir !

Alors, à vue de nez en regardant ton schéma, mon conseil (solution) serait de tricher : puisqu'il est ardu de réaliser des formes pareilles en html, faire tout bêtement trois rectangles au dimensions et positions fixes, celui du milieu se superposant au deux autres afin d'en cacher des bouts et de donner l'illusion des formes de L. (je ne sais pas si je suis très claire xD)

C'est assez facile en utilisant l'attribut z-index qui permet de définir l'ordre de placement et en jouant sur les marges/position ^^
Par exemple comme ça (bon même si c'est très moche) :

Code:

<DIV style="width: 100%; height: 250px; position: relative;">
<div style="width: 400px; height: 250px; background-color: blue; position: absolute; top: 0px; left: 0px; z-index: 5;"><div style="border: 1px solid red; width: 120px; height: 215px; margin: 15px;">Texte 1</div><div style="border: 1px solid red; width: 175px; height: 75px; margin: 15px; position: relative; top: -92px; left: 140px;">Texte 1bis</div>
</div>

<div style="width: 300px; height: 150px; background-color: grey; position: absolute; top: 0px; left: 150px; z-index: 15;"><div style="border: 1px solid red; width: 265px; height: 115px; margin: 15px;">Texte 2</div>
</div>

<div style="width: 150px; height: 250px; background-color: green; position: absolute; top: 0px; left: 350px; z-index: 10;"><div style="border: 1px solid red; position: relative; top: 140px; width: 120px; height: 75px; margin: 15px;">Texte 3</div>
</div>
</DIV>

[MasDan]

Bonjour,

Avec un peu d'imagination, c'est réalisable en trois étapes.

Étape 1: Création et positionnement des 2 cadres (orange et violet) incluant le texte.


Étape 2: Insérer dans ces deux cadres un cadre (div avec id orange-cadre et violet-cadre) dont la fonction est d'empêcher le texte d'être présent sous le cadre vert. (La bordure rouge indiqué pour rendre visible l'espace occupé par ces 2 nouveaux cadres mais non inclus dans le code).


Étape 3: Ajout du cadre vert.


le CSS

Code:

#cadSup {
  width: 600px;
  height: 480px;
  box-align: center;
  display: inline-bloc;
}

#orange {
  position: relative;
  left: 0px;
  width: 300px;
  height: 450px;
  padding: 5px;
  color: #D7BCA6;
  border: 10px solid #FFFFFF;
  background-color: #DE6F14;
}

#orange-cadre{
  float: right;
  width: 100px;
  height: 185px;
  margin: 5px ;
}

#violet {
  position: relative;
  top: -480px;
  left: 320px;
  width: 250px;
  height: 450px;
  padding: 5px;
  color: #C9BCCF;
  border: 10px solid #FFFFFF;
  background-color: #942DC4;
}

#violet-cadre{
   float: left;
   width: 100px;
   height: 185px;
   margin: 5px ;
}

#vert {
  position: relative;
  top: -960px;
  left: 210px;
  width: 200px;
  height: 175px;
  padding: 5px;
  color: #AAD492;
  border: 10px solid #FFFFFF;
  background-color: #4E8032;
}

#img{
   float: left;
   width: 50px;
   margin: 2px ;
}

Le HTML

Code:

<div id="cadSup">
    <div id="orange">
      <div id="orange-cadre"></div>
      Lorem ipsum dolor sit amet,
      consectetur adipiscing elit. Phasellus viverra, leo in accumsan ultricies, risus enim imperdiet dui, sit amet feugiat ligula orci lobortis ex. Donec pretium laoreet sollicitudin. Integer condimentum porttitor rhoncus. Ut et erat porta, porttitor nisl ac, malesuada magna. Sed ac purus ut nibh vulputate convallis. Donec nec rhoncus dui. Phasellus a quam iaculis, fringilla ipsum vitae, rhoncus libero. Nunc consectetur commodo lorem, eu cursus felis dictum quis. Aliquam eget egestas turpis. Phasellus faucibus est eget turpis faucibus rhoncus. Pellentesque ornare lacus mattis neque vulputate, id placerat quam semper. Vivamus in feugiat sem. Proin at aliquet ex.  Vestibulum ut pellentesque velit.
   </div>
    <div id="violet">
      <div id="violet-cadre">
       .
     </div>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tincidunt ullamcorper diam eget feugiat. Nunc aliquam aliquet libero. In hac habitasse platea dictumst. Curabitur ultricies congue est. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus tincidunt tortor non arcu faucibus ornare. Aliquam elementum euismod ex at ultricies. Suspendisse in semper nunc. Donec cursus eros quis volutpat varius. Praesent ultricies ipsum sapien, eget ultrices risus tristique quis. Praesent nec neque posuere risus mattis facilisis.
    </div>
    <div id="vert">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     <img id="img" src="http://upload.wikimedia.org/wikipedia/commons/1/1e/Stonehenge.jpg" alt="image">
     Proin blandit dolor nisl, ut elementum neque venenatis sit amet. Integer non ante vel mauris fermentum tincidunt et ac felis. Vestibulum ex.
   </div>
 </div>

[julworld]

Un grand merci à vous deux pour vos conseils !

Merci MasDan pour le détail des étapes, je ne m'attendais pas à avoir cette précision !

Vous m'avez été d'une très grande aide. Encore merci.