Logo GNT
Actualités Tests & Guides Bons Plans
GTA 6 iPhone 17 Copilot Switch 2 Temu ChatGPT Tesla
OVH Cloud OVH Cloud
Entraide Développement Développement Langage PHP Changer padding pour une image afin qu'elle soit plus large que le texte

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

20 réponses
Avatar
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éé.)

Merci d'avance.
--
Fra
Signaler un problème avec ce contenu

10 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
1 2
Avatar
Olivier Miakinen
Bonjour,

Le 22/04/2015 21:14, Fra répondait à Pierre Maurette :

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.



???

Il suffit de spécifier dans les CSS qu'il ne faut pas sauter de ligne
ni mettre de gras sur un h1 ou un h2, non ?
Avatar
fra
Olivier Miakinen <om+ wrote:

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

???

Il suffit de spécifier dans les CSS qu'il ne faut pas sauter de ligne



Comment ça se note (pour le saut de ligne) ?
--
Fra
Avatar
Olivier Miakinen
Le 23/04/2015 21:39, (Fra) a écrit :

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

???

Il suffit de spécifier dans les CSS qu'il ne faut pas sauter de ligne



Comment ça se note (pour le saut de ligne) ?



Si c'est la hauteur d'une ligne entière ajoutée avant et après le h1 ou
h2, ça doit se corriger en remettant margin ou padding à 0 :
h1 { margin: 0 ; padding: 0 }

Si c'est juste que tu veux un affichage en mode ligne plutôt qu'en mode
bloc, alors ce sera plutôt :
h1 { display: inline }
Avatar
fra
Olivier Miakinen <om+ wrote:

> Comment ça se note (pour le saut de ligne) ?

Si c'est la hauteur d'une ligne entière ajoutée avant et après le h1 ou
h2, ça doit se corriger en remettant margin ou padding à 0 :
h1 { margin: 0 ; padding: 0 }



Apparemment margin-top:0;margin-bottom:0; a l'air d'avoir l'effet
escompté sur une balise <p> (je veux garder mes marges droites et
gauche) ; ça devrait aussi marcher sur <h1>...

Si c'est juste que tu veux un affichage en mode ligne plutôt qu'en mode
bloc, alors ce sera plutôt :
h1 { display: inline }



J'avais essayé ça sur un <p> et ça empêchait de faire des retraits de
paragraphe (ça se comportait comme un <span> du coup).
--
Fra
Avatar
fra
Pierre Maurette wrote:

Fra :
> Pierre Maurette 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;
}



Je viens de trouver un truc qui marche sans tout réorganiser dans
l'immédiat :

le style transform: scale(1.5)

(ça nécessite juste de prévoir la place autour)...

--
Fra
Avatar
Pierre Maurette
Fra :
Pierre Maurette wrote:

Fra :
Pierre Maurette 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;
}



Je viens de trouver un truc qui marche sans tout réorganiser dans
l'immédiat :

le style transform: scale(1.5)

(ça nécessite juste de prévoir la place autour)...



Je suis un peu pareil, capable de passer trois jours pour éviter deux
heures de boulot. En fait, je suis même pire que ça, sur le plan
papillonnage et procrastination.
Là, vous ajoutez une troisième rustine sur au moins deux autres. C'est
du CSS3, c'est sans doute intéressant. L'utilisation "normale" à mon
avis c'est que la valeur change avec transition sur un hover (par
exemple).
Si le fonctionnement vous satisfait, passez à autre chose. Pensez quand
même à vérifier sur les agents utilisateurs ciblés (au moins les trois
navigateurs dans leur version "à jour", mobile ou pas mobile ?; etc.).

--
Pierre Maurette
Avatar
SAM
Le 20/04/15 18:57, Fra a écrit :
Pierre Maurette 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" -



Je ne comprends pas tout(*) à cette organisation du HTML de cette page ! :-(


(*) comprendre :
« Je suis effaré de voir une telle *brouillonnerie* en dépit de toute
organisation structurelle "normale" »

Il faut toujours regarder sa production avec les styles désactivés afin
de voir si ça "se tient", si ça reste compréhensible.

-------
<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">



Pourquoi un P ? (pour un titre)
Les balises H n'existent plus ?

<p style=" font-size: 1.25em; text-align: left; ">Titre&nbsp;:</p>



Pourquoi un SPAN ?
- suivant un P
- pour un sous-titre !
les balises H n'existent plus ???

<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%;">



et hop! un BR !!!

<br>



il doit suffire de stopper la flottaison sur le SPAN suivant, non?

au passage : pourquoi un SPAN ?
la balise P n'existe plus ?

<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">



il suffit donc de styler l'image "image10.jpg" du div "lirelasuite"
non ?

#lirelasuite img[src='image10.jpg'] { margin-left: -10px }

ou même, simplement s'occuper de cette image :

img[src='image10.jpg'] { margin-left: -10px }

mais, à mon sens, ça reste assez proche du rustinage
et donc serait mieux :

#lirelasuite img.gauche { margin-left: -10px; width: 100%; }


(snip)
<img src="image10.JPG" alt="" style=" width: 100%; ">



<img src="image10.JPG" alt="" class="gauche">




Si c'est trop compliqué



c'est trop "compliqué" parce que trop "bricolé" !!!



Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
fra-PasDeSp
SAM wrote:

[...]
« Je suis effaré de voir une telle *brouillonnerie* en dépit de toute
organisation structurelle "normale" »



Je suis parti du texte brut et j'ai ajouté autour la mise en page...

[...]
Pourquoi un SPAN ?
- suivant un P
- pour un sous-titre !
les balises H n'existent plus ???



Je débute et je découvre au fur à mesure ces balises.
En essayant les balises H j'ai pas aimé le gras et j'ai laissé tombé
(oui j'ai appris ensuite qu'on pouvait l'enlever mais ça me simplifie)


--
Fra
Avatar
SAM
Le 06/05/15 18:00, Fra a écrit :
SAM wrote:

[...]
« Je suis effaré de voir une telle *brouillonnerie* en dépit de toute
organisation structurelle "normale" »



Je suis parti du texte brut et j'ai ajouté autour la mise en page...

[...]
Pourquoi un SPAN ?
- suivant un P
- pour un sous-titre !
les balises H n'existent plus ???



Je débute et je découvre au fur à mesure ces balises.
En essayant les balises H j'ai pas aimé le gras et j'ai laissé tombé
(oui j'ai appris ensuite qu'on pouvait l'enlever mais ça me simplifie)



Si tu veux absolument *tout* styler à ton idée, il faut commencer par
redéfinir (re styler) toutes les balises. Les mettre en "normal" sans
marge ni padding. Ça se fait en qques lignes d'un coup.
Y doit y avoir plein d'exemples sur le net.
Ensuite, il faut tout re-préciser.
Mais il parait que c'est "mal" ...
Il reste donc à peu près la même idée en mieux ;-)
la voir, par exemple ici :
<http://www.alsacreations.com/astuce/lire/36-reset-css.html>
Ezossi :
<http://www.alsacreations.com/astuce/lire/654-feuille-de-styles-de-base.html>


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
SAM
Le 06/05/15 18:00, Fra a écrit :
SAM wrote:

[...]
« Je suis effaré de voir une telle *brouillonnerie* en dépit de toute
organisation structurelle "normale" »



Je suis parti du texte brut et j'ai ajouté autour la mise en page...



Oui, bon, peut-être ...
mais la mise en page ça se prévoit
ça ne se fait pas à coups de SPAN et de BR — qu'on aura ensuite le plus
grand mal à éradiquer ! —
mais bien à l'aide de conteneurs adaptés (bloc - titre - paragraphe -
sous-element / liste de tous genres / form - fieldset - label - input )

les balises H n'existent plus ???



Je débute et je découvre au fur à mesure ces balises.
En essayant les balises H j'ai pas aimé le gras



t'aime pas mais ... c'est pratique si sans CSS (comme avec les
navigateurs textuels pour mal-voyants)

Si tu préfères qu'ils soient en "normal" ça ne prend qu'une ligne !

h1, h2, h3, h4 { font-weight: normal }


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
1 2