28172 sujets

CSS et mise en forme, CSS3

Mon image dépasse sur la droite html/css

Bonjour et merci d'avance de votre attention ou de votre aide Smiley smile .
En gros j'ai 2 image avec des bort transparent qui sont superposer grâce a "position: absolute mais a cause de ça mon image dépasse légèrement sur la droite alors quelle devrai être comme la partit gauche ou il y a un petit écart.
je précise aussi que lorsque la page change de taille il faut que l'écart soit le même et que je ne veut pas rassembler les deux image avant de les mettre dans le site.
les codes en bref
 
<div id="img1">
<img src="02 part1.png" max width="100%" height="auto" />
</div>
<div id="img2">
<img src="02 part2.png" max width="100%" height="auto" />
</div>

et le css

#img1 { 
	position: absolute;	
	width:100%;
	height:auto;
	z-index:1;
	}
#img2 {
	position: absolute;
	width:100%;
	height:auto;
	z-index:2;
	}

merci d'avance j’espère avoir été assez clair Smiley sweatdrop
une petite image d upload/1531671945-71733-captureprobleme.png e ce que ca donne:
Administrateur
Hello,

C'est assez difficile de se prononcer avec aussi peu d'infos.

J'ai quelques remarques-questions qui pourront peut-être faire avancer les choses :
- pourquoi avoir encapsulé les images dans des div ? cela semble inutile et surtout source d'éventuels souci s'il y a des styles sur les div
- on dirait qu'il s'agit d'images de décoration, alors pourquoi ne pas avoir utilisé background-image en CSS avec les deux images ?
- tu as sans doute oublié les "-" à divers endroits : "02 part1.png" et "max width" sont mal écrits
Raphael a écrit :
Hello,

C'est assez difficile de se prononcer avec aussi peu d'infos.

J'ai quelques remarques-questions qui pourront peut-être faire avancer les choses :
- pourquoi avoir encapsulé les images dans des div ? cela semble inutile et surtout source d'éventuels souci s'il y a des styles sur les div
- on dirait qu'il s'agit d'images de décoration, alors pourquoi ne pas avoir utilisé background-image en CSS avec les deux images ?
- tu as sans doute oublié les "-" à divers endroits : "02 part1.png" et "max width" sont mal écrits


Bonjour déjà merci de ton aide Smiley biggrin .
En faite je ne vais pas le nier je ne mi connais pas trop en code d'ou toute les erreurs, je voulait tout faire par moi même du-coup on en arrive a ça Smiley sweatdrop .
du-coup j'ai essayer de corriger les erreurs que tu ma montrer et j'ai aussi essayer de simplifier le code , je vais répondre à ta question: ce n'est pas vraiment un décors j'ai essayer la fonction background mais ça ne correspondais pas. pour tout te dire c'est une page de manga qui défilera pour changer de page mais la bordure blanche de l image qui dépasse ne me plait pas trop ( après si ya vraiment pas le choix je ferait avec)
voici mon nouveau code (je sais pas si tu veux tout mon code ou pas donc je mes tout au cas ou )
<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Light Theme</title>
<link href="./Light Theme_files/simpleGridTemplate.css" rel="stylesheet" type="text/css">
</head>
	<body> 
	<header class="header">
    <h4 class="logo">mikki-kimii</h4>
    </header>
<img src="part1.png" alt="partie1" id="img" max-width="100%"  />
<img src="part2.png" alt="partie2" id="img" max-width="100%"  />
</body></html>


#img {
	position: absolute;	
	width:100%;
	}
header {
	width: auto;
	background-color: #B3B3B3;
	border-bottom: 1px solid #353635;
}
.logo {
	color: #fff;
	font-weight: bold;
	margin-left: auto;
	letter-spacing: 4px;
	margin-right: auto;
	text-align: center;
	padding-top: 15px;
	line-height: 2em;
	font-size: 20px;
}
body {
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
	background-color: #424242;
	margin: 1;
}

aussi en complément ce que j'ai actuellement
upload/1531848580-71733-capturequiestmal.png
et ce que j'aimerait avoir

upload/1531848673-71733-capturequiestbien.png

merci encore de ton aide si ya besoin de plus d'info je suis la Smiley biggrin
Modifié par mikki-kimii (17 Jul 2018 - 20:00)
Sujet clos
Aller à