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

Voir le sujet précédent Voir le sujet suivant Aller en bas

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

Message par julworld le Ven 29 Avr 2016 - 11:19

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 ! Smile


Dernière édition par julworld le Mer 4 Mai 2016 - 11:02, édité 1 fois

julworld
*****

Masculin
Messages : 695
Inscrit(e) le : 03/05/2009

http://prizeefrance.com
julworld a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment reproduire 3 blocs spécifiques en HTML/CSS ?

Message par julworld le Sam 30 Avr 2016 - 10:38

UP, j'ai besoin de votre aide Smile

julworld
*****

Masculin
Messages : 695
Inscrit(e) le : 03/05/2009

http://prizeefrance.com
julworld a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment reproduire 3 blocs spécifiques en HTML/CSS ?

Message par julworld le Dim 1 Mai 2016 - 11:03

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

julworld
*****

Masculin
Messages : 695
Inscrit(e) le : 03/05/2009

http://prizeefrance.com
julworld a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment reproduire 3 blocs spécifiques en HTML/CSS ?

Message par julworld le Lun 2 Mai 2016 - 12:15

Up

julworld
*****

Masculin
Messages : 695
Inscrit(e) le : 03/05/2009

http://prizeefrance.com
julworld a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment reproduire 3 blocs spécifiques en HTML/CSS ?

Message par Daewyn le Mar 3 Mai 2016 - 1:38

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>

Daewyn
***

Féminin
Messages : 182
Inscrit(e) le : 23/06/2011

Daewyn a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment reproduire 3 blocs spécifiques en HTML/CSS ?

Message par MasDan le Mer 4 Mai 2016 - 4:38

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>

MasDan
*****

Masculin
Messages : 856
Inscrit(e) le : 24/05/2011

http://projetaum2.forumactif.com/
MasDan a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Comment reproduire 3 blocs spécifiques en HTML/CSS ?

Message par julworld le Mer 4 Mai 2016 - 11:01

Un grand merci à vous deux pour vos conseils ! Very Happy

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.

julworld
*****

Masculin
Messages : 695
Inscrit(e) le : 03/05/2009

http://prizeefrance.com
julworld a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum