Problème positionnement vertical d'images
CupClem
Messages postés
3
Date d'inscription
Statut
Membre
Dernière intervention
-
CupClem Messages postés 3 Date d'inscription Statut Membre Dernière intervention -
CupClem Messages postés 3 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Débutant dans le monde de la programmation j'ai un problème pour le positionnement d'image.
J'ai 4 images (en 500 / 500px), que je souhaite positionner de la sorte 2 images sur 2 images sans espace.
Et je souhaiterais qu'il n'y ai pas d'espace vertical entre les 2 rangées d'images, c'est la tout le problème ! ^^
Voila mon code html :
Mon code css :
J'ai toujours un espace vertical entre les 2 images du dessus et les deux images du dessous, que je souhaite supprimer... Ca fait quelques heures que je suis dessus mais rien ni fait, je n'arrive pas à trouver la solution :(
Débutant dans le monde de la programmation j'ai un problème pour le positionnement d'image.
J'ai 4 images (en 500 / 500px), que je souhaite positionner de la sorte 2 images sur 2 images sans espace.
Et je souhaiterais qu'il n'y ai pas d'espace vertical entre les 2 rangées d'images, c'est la tout le problème ! ^^
Voila mon code html :
<div class="suve1"><img src="image1" alt="Image 1" /><img src="image2" alt="Image 2" /></div>
<div class="suve2"><img src="image3" alt="Image 3" /><img src="image4" alt="Image 4" /></div>
Mon code css :
div.suve1 div.suve2 {
margin-top: 0px;
margin-bottom: 0em;
padding-top: 0px;
padding-bottom: 0px;
}
J'ai toujours un espace vertical entre les 2 images du dessus et les deux images du dessous, que je souhaite supprimer... Ca fait quelques heures que je suis dessus mais rien ni fait, je n'arrive pas à trouver la solution :(
A voir également:
- Problème positionnement vertical d'images
- Powerpoint vertical - Guide
- Des images - Guide
- Logiciel positionnement gratuit - Guide
- Barre vertical mac ✓ - Forum MacOS
- Trait vertical clavier - Forum Clavier
2 réponses
bonjour.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
img{
width: 500px;
height: 500px;
float:left;
}
</style>
</head>
<body>
<div class="suve1">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RkQzQ0FBRUQyNDk1MTFFNUFGRUZFNTVCOEFEODNDQTgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RkQzQ0FBRUUyNDk1MTFFNUFGRUZFNTVCOEFEODNDQTgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGRDNDQUFFQjI0OTUxMUU1QUZFRkU1NUI4QUQ4M0NBOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGRDNDQUFFQzI0OTUxMUU1QUZFRkU1NUI4QUQ4M0NBOCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Ps9yBu0AAAAOSURBVHjaYmCwfgoQYAABXwEhk0+NiAAAAABJRU5ErkJggg==" alt="Image 1" />
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RkQzQ0FBRUQyNDk1MTFFNUFGRUZFNTVCOEFEODNDQTgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RkQzQ0FBRUUyNDk1MTFFNUFGRUZFNTVCOEFEODNDQTgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGRDNDQUFFQjI0OTUxMUU1QUZFRkU1NUI4QUQ4M0NBOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGRDNDQUFFQzI0OTUxMUU1QUZFRkU1NUI4QUQ4M0NBOCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Ps9yBu0AAAAOSURBVHjaYmCwfgoQYAABXwEhk0+NiAAAAABJRU5ErkJggg==" alt="Image 2" />
</div>
<div class="suve2">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RkQzQ0FBRUQyNDk1MTFFNUFGRUZFNTVCOEFEODNDQTgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RkQzQ0FBRUUyNDk1MTFFNUFGRUZFNTVCOEFEODNDQTgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGRDNDQUFFQjI0OTUxMUU1QUZFRkU1NUI4QUQ4M0NBOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGRDNDQUFFQzI0OTUxMUU1QUZFRkU1NUI4QUQ4M0NBOCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Ps9yBu0AAAAOSURBVHjaYmCwfgoQYAABXwEhk0+NiAAAAABJRU5ErkJggg==" alt="Image 3" />
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RkQzQ0FBRUQyNDk1MTFFNUFGRUZFNTVCOEFEODNDQTgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RkQzQ0FBRUUyNDk1MTFFNUFGRUZFNTVCOEFEODNDQTgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGRDNDQUFFQjI0OTUxMUU1QUZFRkU1NUI4QUQ4M0NBOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGRDNDQUFFQzI0OTUxMUU1QUZFRkU1NUI4QUQ4M0NBOCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Ps9yBu0AAAAOSURBVHjaYmCwfgoQYAABXwEhk0+NiAAAAABJRU5ErkJggg==" alt="Image 4" />
</div>
</body>
</html>
