26988 sujets

CSS et mise en forme, CSS3

Bonjour à tou(te)s,

je commence un nouveau site internet et je recontre un problème d'alignement / marges dès le début sur un code tout simple :


<div class="logo">
	<img src="img/logo.svg">
	<h1 class="site-name">
		<a href="/">nom du site</a>
	</h1>
</div>

et le css

* {
margin: 0;
padding: 0;
}

a {
	text-decoration : none;
}

.logo { 
	background:#ccc;
	height: 60px;
	text-align:center;
}

.logo img {
	height: 60px;
}

.site-name {
	display:inline-block;
	height: 60px;
	font-size: 60px;
	background:#bbb;
}


donc voila je m'attends avec ce code a ce que tout soit bien aligné dans un bloc de 60px de hauteur, mais le résultat est loin de mes attentes :

upload/1581702549-78823-prob.png

comme vous le voyez, le h1 fait n'importe quoi, il sort du bloc conteneur, et contient des marges en haut et en bas sans que je puisse y faire quoi que ce soit. Comment régler ce problème de marges ?
Question alignement, j'aimerai que le nom du site soit centré verticalement par rapport au logo, alors j'ai essayé un vertical-align : middle sur le titre, mais cela ne centre pas le bloc par rapport a l'image ... désolé pour ces questions de débutant, mais j'en pouvais plus apres avoir passé des heures a retourner internet et ses conseils douteux ^^ merci d'acance pour votre aide et bonne soirée Smiley lol
Oui c'est presque ça,

<!DOCTYPE html>
<html class="no-js">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
* {
margin: 0;
padding: 0;
}

a {
	text-decoration : none;
}

.logo { 
	background:#ccc;
	text-align:center;
}

.logo img {
	height: 60px;
}

.site-name {
	display:inline-block;
	font-size: 60px;	
}
</style>
</head>

<body>
<div class="logo">
	<img src="logo.png">
	<h1 class="site-name"><a href="#">nom du site</a></h1>
</div>
    
</body>

Je le retirerais demain soir de mon site ...
http://www.fox-infographie.com/logo.htm
Modifié par Jean-Pierre-Bruneau (15 Feb 2020 - 01:33)
bonjour, merci pour vos réponses,
ta solution centre bien le nom du site dans le bloc, par contre on peut constater que cela augmente la taille du bloc conteneur au dela des 60px spécifiés a la base vu que le logo fait 60px et qu'il reste des marges Smiley smile on est sur la bonne voie mais il reste quelque chose a faire je pense ... ahh c'était bien quand j'avais arreté css, j'avais oublié toutes ces galeres ... en plus maintenant que je m'y remet je découvre le système de grid qui semble tout chambouler à nouveau Smiley smile
Whaoo ! je dormais quand j'ai écrit ça Smiley confused
ça ira mieux ainsi ..

<!DOCTYPE html>
<html class="no-js">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
    padding:0;
    margin:0;
}
div.Row{
  display:flex;
  align-items: center; 
  justify-content: center;  
  background:#cccccc;	
  margin:0;
  padding:0;
}

img.lelogo {
 height:60px;
 margin:0;
 padding:0;
}
h1.site-name {
    font-size: 60px;
    padding:0;
    margin:0;
}
</style>
</head>
<body>

<div class="Row">
 <img src="http://www.fox-infographie.com/logo.png"  class="lelogo" /> <h1 class="site-name" >Le nom du Site que je veux</h1>
</div>
</body>

même lien sur mon site
Modifié par Jean-Pierre-Bruneau (15 Feb 2020 - 13:47)
Meilleure solution
Bonjour, et merci pour ta réponse c'est éxactement l'éffet recherché Smiley smile J'avais pensé a utiliser une flexbox mais je trouvais ca dommage de devoir passer par la pour un truc aussi simple qu'une image avec un texte centré dans une box, je pensais qu'une solution plus simple était disponible a base de vertical align ^^
En tout cas je vais utiliser ca tant que je ne trouve pas d'autre solution, alors problème résolu Smiley cligne

Merci encore, a très vite pour de nouvelles galères css Smiley lol Smiley lol
Modifié par chessdev (15 Feb 2020 - 16:47)
Pour te montrer la difficulté de traiter ce type de problème voici ce qu'un de nos champion m'a posté !!
Copie/Colle dans un html UTF8
Tu va voir c'est durdur ! Smiley confused

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hauteur FONT et conteneur</title>
<meta name="Author" content="NoSmoking">
<style>
html, body {
  margin: 0;
  padding: 0;
  font-size: 1em;
}
p {
  margin: 0 1em;
}
.conteneur {
  position: relative;
  margin: 1em 1em 0;
  text-align: center;
  font-size: 60px;
  background: #EEE;
}
.conteneur:before, .conteneur:after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  box-sizing: border-box;
  height: 1em;
}
.conteneur:before {
  bottom: 0;
  border-top: 1px solid currentColor;
  border-left: 10px solid currentColor;
  color: #F06;
}
.conteneur:after {
  top: 0;
  border-right: 10px solid currentColor;
  border-bottom: 1px solid currentColor;
  color: #06F;
}
.font-1 {
  font-family: Verdana;
}
.font-2 {
  font-family: Times New Roman;
}
.font-3 {
  font-family: cursive;
}
.font-4 {
  font-family: monospace;
}
</style>
</head>
<body>
  <div class="conteneur font-1"> Çà et Être ou ne pas être ! </div>
  <div class="conteneur font-2"> Çà et Être ou ne pas être ! </div>
  <div class="conteneur font-3"> Çà et Être ou ne pas être ! </div>
  <div class="conteneur font-4"> Çà et Être ou ne pas être ! </div>
<script>
const elements = document.querySelectorAll(".conteneur");
elements.forEach((el) => {
  const elStyle = window.getComputedStyle(el, null);
  const height = elStyle.height;
  const font = elStyle.fontFamily;
  const fontSize = elStyle.fontSize;
  el.insertAdjacentHTML("afterend", `<p>font : ${font}, ${fontSize}<br>height : ${height}</p>`);
});
</script>  
</body>
</html>

A++ et merci à NoSmoking de developpez !!
C'est parce que la hauteur de ligne n'est pas égale à la taille des caractères.
Tu fixe la taille des caractères à 60px, cela correspond à une hauteur de ligne plus importante.
Une solution est de fixer pour h1 {line-height:60px;}
Bonjour Smiley smile

oui Alain j'avais essayé de changer le line-height, rien n'y fait, malgré l'application d'un reset css total la méthode simple va toujours rajouter de la hauteur, du moins sur mon navigateur (chrome). Il y a surement des tricks pour tricher et faire que ça s'affiche comme il faut, mais la solution de Jean-Pierre-Bruneau a base de flexbox est la meilleure que j'ai trouvé, elle règle non seulement le problème d'alignement comme je le voulais, mais du coup j'utilise la flexbox aussi pour aligner mon menu principal, ça fait d'une pierre deux coups, c'est standard et je me casse pas la tête pour régler un truc simple de cette manière Smiley smile