Discussion :

[NewUserDelphi]

Bonjour

Une image vaut mieux qu un long discours alors...


Mon pb est le suivant : je voudrais reproduire le bandeau avec à gauche Service et à droite l'image de deux jeunes femmes.

Faire 2 colonnes avec texte à gauche et image à droit, ça c est ok. Mon pb est de parvenir à aligner le texte de la colonne de gauche avec les limites tracées en rouge.

Merci de votre aide .

[Invité]

Bonjour,

padding-left ?

Sans le moindre code, on ne peut rien dire de plus.

[NewUserDelphi]

Ah si javais le code....

Mais à bien y reflechir j ai trouvé une structure qui devrait fonctionner.
Pour une largeur de contenu de 1200 px et une fenêtre de 1900 px par exemple

une div sur la largeur totale en overflow:hidden de la couleur de fond.
dans cette div, deux divs à 50% de large dont celle de droite contient l image
dans la div de gauche, une div en float right de max-width:600 px.

Le pb est que je ne peux pas tester je suis en pose dej.

[Sodium]

En partant du principe que ta hauteur est fixe :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="banner-wrapper">
 
    <div class="banner-background left-background"></div>
    <div class="banner-background right-background"></div>
 
    <div class="content-wrapper">
 
         <div class="text">
 
               <h1>Services</h1>
 
               <p>Lorem ipsum</p>
 
               <!-- etc -->
 
         </div>
 
    </div>
 
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.banner-wrapper {
    position: relative;
}
 
.banner-background {
     position: absolute;
     top: 0;
     bottom: 0;
}
 
.left-background {
    left: 0;
    right: 50%; 
    background-color: // ta couleur
}
 
.right-background {
    right: 0;
    left: 50%;
    background-image: // ton image
    background-size: cover;
}
 
.content-wrapper {
    max-width: 980px // largeur maximum de ton contenu
    position: relative;
    margin: 0 auto;
}
 
.text {
    padding: 100px 0 30px 0 //à adapter selon le besoin
    width: 50%;
    position: relative;
}

[NewUserDelphi]

Merci, c est parfait, c est très exactement ce que je cherchais à faire.