Changer padding pour une image afin qu'elle soit plus large que le texte

fra@alussinan.org (Fra) écrivait :

J'aimerais que cette image aille jusque sur les bords de la fenêtre et
ne tienne pas compte des marges du texte.

style='margin:0 -15px;' sur l'image, si le padding du texte est de 15px
à droite et à gauche.
--
Ce n'est pas parce qu'ils sont nombreux à avoir tort
qu'ils ont forcément raison. Coluche

Fra :

Hello

Soit un bloc (div) de texte avec un padding (marges gauche droite
larges).
Soit une image insérée à 100% de large.
J'aimerais que cette image aille jusque sur les bords de la fenêtre et
ne tienne pas compte des marges du texte.

Comment faire ?

(J'aimerais éviter de faire un nouveau bloc car la suite du texte a le
même formatage et aussi à cause du saut de ligne que ça créé.)

Si votre texte est normalement tagué, en particulier <p></p>, vous
pouvez faire dans votre CSS:

.lediv > * {
margin: 0 xxxpx;
}

.lediv > img {
margin: 0;
}

Le sélecteur d'enfant n'est nécessaire que pour des cas particuliers
d'imbrication, un <p> dans un <div> dans .lediv par exemple.
Le truc est de remplacer le padding dans le .lediv par du margin
appliqué aux éléments enfants. Du padding fonctionnerait également,
mais ce serait un peu différent, sur des <pre></pre> ou <code></code>
(?) par exemple.

--
Pierre Maurette

Otomatic <otomatic@oto.invalid> wrote:

fra@alussinan.org (Fra) écrivait :

> J'aimerais que cette image aille jusque sur les bords de la fenêtre et
> ne tienne pas compte des marges du texte.
style='margin:0 -15px;' sur l'image, si le padding du texte est de 15px
à droite et à gauche.

Le padding est de 17%. Si je met style='margin:0 -17%;' dans la balise
img, ça déborde bien, mais trop à droite (scroll au delà de la fenêtre
-et déborde de la div-) et pas assez à gauche (reste une marge de
padding)
--
Fra

Pierre Maurette <maurette.pierre@free.fr> wrote:

.lediv > * {
margin: 0 xxxpx;
}

.lediv > img {
margin: 0;
}

Le problème c'est que j'ai d'autres images intégrées dans cette div et
qu'il n'y en a qu'une que je veux faire déborder de la largeur.
--
Fra

Fra :

Pierre Maurette <maurette.pierre@free.fr> wrote:

.lediv > * {
margin: 0 xxxpx;
}

.lediv > img {
margin: 0;
}

Le problème c'est que j'ai d'autres images intégrées dans cette div et
qu'il n'y en a qu'une que je veux faire déborder de la largeur.

Ben vous créez une classe "pleine largeur". C'est fait pour ça.

.lediv > * {
margin: 0 xxxpx;
}

.lediv > img.fullwidth {
margin: 0;
}

--
Pierre Maurette

Pierre Maurette <maurette.pierre@free.fr> wrote:

Fra :
> Pierre Maurette <maurette.pierre@free.fr> wrote:
>
>> .lediv > * {
>> margin: 0 xxxpx;
>> }
>>
>> .lediv > img {
>> margin: 0;
>> }
>
> Le problème c'est que j'ai d'autres images intégrées dans cette div et
> qu'il n'y en a qu'une que je veux faire déborder de la largeur.

Ben vous créez une classe "pleine largeur". C'est fait pour ça.

.lediv > * {
margin: 0 xxxpx;
}

.lediv > img.fullwidth {
margin: 0;
}

Merci pour ton aide.
J'ai commencé à tagguer les blocs de textes qui ne l'étaient pas avec
des <span> et je me suis rendu compte que l'image à "élargir" était
placée dans une sous-div. Ca se gère comment au niveau des styles dans
notre cas ?
--
Fra

Fra :

Pierre Maurette <maurette.pierre@free.fr> wrote:

Fra :

Pierre Maurette <maurette.pierre@free.fr> wrote:

.lediv > * {
margin: 0 xxxpx;
}

.lediv > img {
margin: 0;
}

Le problème c'est que j'ai d'autres images intégrées dans cette div et
qu'il n'y en a qu'une que je veux faire déborder de la largeur.

Ben vous créez une classe "pleine largeur". C'est fait pour ça.

.lediv > * {
margin: 0 xxxpx;
}

.lediv > img.fullwidth {
margin: 0;
}

Merci pour ton aide.
J'ai commencé à tagguer les blocs de textes qui ne l'étaient pas avec
des <span> et je me suis rendu compte que l'image à "élargir" était
placée dans une sous-div. Ca se gère comment au niveau des styles dans
notre cas ?

Je ne saisis pas ce qu'est cette sous-div. Un reste d'une précédente
tentative de résoudre votre problème ?
Vous pourriez déjà étudier et éventuellement nettoyer votre code. Vous
pouvez vous aider du débogueur de votre navigateur (F12). Ensuite si
nécessaire vous pourrez poster une arborescence minimale, genre:
<div class="lediv">
[blah]
<p>[blah]</p>
<img class="hum" .../>
<span>[blah]</span>
<div class="lesousdiv">
<img class="humhum" .../>
</div>
[blah]
...
</div>

Si vous ne maîtrisez pas tout l'existant (ou ne souhaitez pas
intervenir) vous pouvez tenter un reset initial sur le bloc concerné:
.lediv * { margin: 0;}
ou
.lediv * { margin: 0; padding: 0;}


Normalement tous les enfants (directs) de .lediv devraient être des
éléments "block level", p, div, h1, etc., donc "display: block". Il est
logique de caractériser du texte, c'est un paragraphe, du code, un
titre, etc.
img est, selon le navigateur peut-être, "display: inline", vous
pourriez les forcer en inline-block, voire block:
.lediv img { display: inline-block;}

Le cas du span est un peu particulier. Ce n'est pas un bon remplaçant
de p. Une rustine sur la rustine serait:
.lediv > span { display: inline-block;}

Bref, c'est beaucoup de blahblah, mais en réalité c'est sans doute très
simple.

--
Pierre Maurette

Pierre Maurette <maurette.pierre@free.fr> wrote:

Ensuite si nécessaire vous pourrez poster une arborescence minimale

Actuellement ça se présente comme ça (y'a pas encore les feuilles de
style) :

- c'est l'image10.jpg que je veux élargir et elle est incluse dans la
div qui se s'affiche que l'orsqu'on clique sur "en savoir plus" -

-------
<div style=" background-color: #fff; color: #000; padding: 20px 17% 20px
17%; font-family: garamond, serif; font-size: 1.25em; box-shadow: inset
0px 5px 10px 0px #9b9b9b; text-align: justify; -webkit-hyphens: auto; "
lang="fr">

<p style=" font-size: 1.25em; text-align: left; ">Titre&nbsp;:</p>
<span style=" font-size: 1.05em; font-style: italic; text-align: left;
">
Sous-titre&nbsp;:
</span>
<img src="image.jpg" alt="" style=" float: right; margin-left: 10px;
width: 66%;">
<br>
<span>Patati patata</span><br>
<img src="image2.jpg" alt="" style=" display:block; margin:auto;
max-width: 100%; ">

<a href="#nogo" style="font-family: sans-serif; font-size: 0.7em;"
onclick="document.getElementById('lirelasuite').style.display = 'block';
this.style.display = 'none';">en savoir plus...</a>

<div id="lirelasuite">
Suite du baratin
<img src="image3.jpg" alt="" style="display:block; margin:auto;
max-width: 100%;">
et ceci cela* <br>
<img src="image4.jpg" alt="" style=" margin-top: 10px; margin-bottom:
10px; width: 66%; vertical-align: middle; "/>
<img src="image5.jpg" alt="" style=" width: 33%; vertical-align:
middle;"><br>
bla-bla
<img src="image6.jpg" alt="" style=" display: block; margin: auto;
margin-top: 10px; max-width: 100%; ">
<br>
<span style=" font-size: 1.05em; font-style: italic; ">
Sous-titre2&nbsp;:
</span>
<br>
Encore du baratin**
<img src="image7.png" alt="" style=" display: block; margin: auto;
max-width: 100%; ">
Blah
<img src="image8.jpg" alt="" style=" display: block; margin: auto;
margin-top: 5px; max-width: 100%; ">
Blaaaa
<img src="image9.jpg" alt="" style=" display: block; margin: auto;
margin-top: 10px; margin-bottom: 5px; max-width: 100%; ">
La fin du baratin***
<img src="image10.JPG" alt="" style=" width: 100%; ">
<p style="font-size: 0.9em; text-align: left; text-indent: -1.2em;
margin-left: 2.1em;">
* : note1
</p>
<p style="font-size: 0.9em; text-align: left; text-indent: -1.6em;
margin-left: 2.1em;">
** : note2
</p>
<p style="font-size: 0.9em; text-align: left; text-indent: -2.1em;
margin-left: 2.1em;">
*** : note3
</p>
</div>

</div>
-------

Si c'est trop compliqué je vais peut être séparer la partie visible et
la partie masquée dans deux div distinctes au lieu de les imbriquer.
(J'espérais naïvement une commande toute simple pour faire dépasser mon
image des marges de la div.)
--
Fra

Fra :

Pierre Maurette <maurette.pierre@free.fr> wrote:

Ensuite si nécessaire vous pourrez poster une arborescence minimale

Actuellement ça se présente comme ça (y'a pas encore les feuilles de
style) :

- c'est l'image10.jpg que je veux élargir et elle est incluse dans la
div qui se s'affiche que l'orsqu'on clique sur "en savoir plus" -

-------
<div style=" background-color: #fff; color: #000; padding: 20px 17% 20px
17%; font-family: garamond, serif; font-size: 1.25em; box-shadow: inset
0px 5px 10px 0px #9b9b9b; text-align: justify; -webkit-hyphens: auto; "
lang="fr">

<p style=" font-size: 1.25em; text-align: left; ">Titre&nbsp;:</p>
<span style=" font-size: 1.05em; font-style: italic; text-align: left;
">
Sous-titre&nbsp;:
</span>
<img src="image.jpg" alt="" style=" float: right; margin-left: 10px;
width: 66%;">
<br>
<span>Patati patata</span><br>
<img src="image2.jpg" alt="" style=" display:block; margin:auto;
max-width: 100%; ">

<a href="#nogo" style="font-family: sans-serif; font-size: 0.7em;"
onclick="document.getElementById('lirelasuite').style.display = 'block';
this.style.display = 'none';">en savoir plus...</a>

<div id="lirelasuite">
Suite du baratin
<img src="image3.jpg" alt="" style="display:block; margin:auto;
max-width: 100%;">
et ceci cela* <br>
<img src="image4.jpg" alt="" style=" margin-top: 10px; margin-bottom:
10px; width: 66%; vertical-align: middle; "/>
<img src="image5.jpg" alt="" style=" width: 33%; vertical-align:
middle;"><br>
bla-bla
<img src="image6.jpg" alt="" style=" display: block; margin: auto;
margin-top: 10px; max-width: 100%; ">
<br>
<span style=" font-size: 1.05em; font-style: italic; ">
Sous-titre2&nbsp;:
</span>
<br>
Encore du baratin**
<img src="image7.png" alt="" style=" display: block; margin: auto;
max-width: 100%; ">
Blah
<img src="image8.jpg" alt="" style=" display: block; margin: auto;
margin-top: 5px; max-width: 100%; ">
Blaaaa
<img src="image9.jpg" alt="" style=" display: block; margin: auto;
margin-top: 10px; margin-bottom: 5px; max-width: 100%; ">
La fin du baratin***
<img src="image10.JPG" alt="" style=" width: 100%; ">
<p style="font-size: 0.9em; text-align: left; text-indent: -1.2em;
margin-left: 2.1em;">
* : note1
</p>
<p style="font-size: 0.9em; text-align: left; text-indent: -1.6em;
margin-left: 2.1em;">
** : note2
</p>
<p style="font-size: 0.9em; text-align: left; text-indent: -2.1em;
margin-left: 2.1em;">
*** : note3
</p>
</div>

</div>
-------

Si c'est trop compliqué je vais peut être séparer la partie visible et
la partie masquée dans deux div distinctes au lieu de les imbriquer.
(J'espérais naïvement une commande toute simple pour faire dépasser mon
image des marges de la div.)

Ça ressemble à du "code généré". Il vous faut *avant tout* vous
l'approprier en le passant en CSS et par la même occasion en le
structurant. Ce n'est vraiment pas compliqué, c'est quand même bien
d'avoir un bon éditeur.
Suggestions:
Effectivement, vous pouvez, même si ce n'est pas indispensable, pour
plus de souplesse, utiliser des div distincts. Par exemple:

<div class="zorglubouter">
<div class="innerfixe">
...
</div>
<div class="innersuite">
...
</div>
</div>

ou

<div class="zorglubouter">
<div class="inner" id="fixe">
...
</div>
<div class="inner" id ="suite">
...
</div>
</div>


Le nom "zorglubouter" devrait être improbable, ça permet de ne pas
casser le reste du site en caractérisant par cette classe:
.zorglubouter #inner { ... }
ou
.zorglubouter h1 { ... }

Vous pouvez accéder à des familles de classes (plus ou moins des
classes de classes) si les noms ont été choisis dans ce but:
[class*="inner"] { margin: 0; padding: 0;}
ou mieux:
.zorglubouter > [class*="inner"] { margin: 0; padding: 0;}

Vous avez des span qui à mon avis devraient être des h1 et h2.

Pensez que vous pouvez affecter plusieurs classes à un élément, les
effets sont cumulatifs. Par exemple:
<img class="fullwidth vmiddle" ...

Vous pouvez donc faire, troisième option ;-) :
<div class="zorglubouter">
<div class="inner fixe">
...
</div>
<div class="inner suite">
...
</div>
</div>

--
Pierre Maurette

Pierre Maurette <maurette.pierre@free.fr> wrote:

Ça ressemble à du "code généré".

Même pas ! Je "travaille" comme un goret. Je suis partie du texte brut
et j'ai formaté les paragraphes au fur à mesure. (Je suis débutant.)

Il vous faut *avant tout* vous
l'approprier en le passant en CSS et par la même occasion en le
structurant. Ce n'est vraiment pas compliqué, c'est quand même bien
d'avoir un bon éditeur.

Je vais m'y atteler.

[...]

Vous pouvez accéder à des familles de classes (plus ou moins des
classes de classes) si les noms ont été choisis dans ce but:
[class*="inner"] { margin: 0; padding: 0;}
ou mieux:
.zorglubouter > [class*="inner"] { margin: 0; padding: 0;}

Vous avez des span qui à mon avis devraient être des h1 et h2.

J'aime pas les h1 h2, ça saute une ligne quand j'en veux pas et il faut
que l'enlève le gras.

Pensez que vous pouvez affecter plusieurs classes à un élément, les
effets sont cumulatifs. Par exemple:
<img class="fullwidth vmiddle" ...

Tiens j'ai appris deux nouvelles choses aujourd'hui !
Merci Pierre pour ton aide.


--
Fra