18041 sujets

Questions générales et questions de débutants

[Résolu] Positionnement de logo/autres

Bonjour à tous,

Je débute en développement. J'avais commencé par développer un premier site qui avait un beau visuel, mais étant en réalité adapté à aucun devices (tout était positionné en "position-absolute" au pixel près, et quand je l'ai ouvert avec un autre ordi (qui avait un écran plus grand) j'ai vite compris que ce n'était pas possible de créer un site comme ça.

Je continue donc mon apprentissage en passant par Bootstrap qui est très utile et tout nouveau pour moi. Je commence mon autre site et j'ai une question d'ordre général.

J'ai pensé à placer certains éléments à l'aide de bootstrap, je ne sais pas si c'est sain de procéder ainsi.

En gros, j'ai une image d'accueil plutôt responsive (du moins c'est bien pour ce que je veux pr le moment) grâce aux balises : 
body {
	    background-image: url(dechano.jpg);
	    background-size: cover;
	    background-repeat: no-repeat;
	    background-attachment: fixed;
	    background-position: center;
	}


J'ai ensuite placé un menu sur mon background.
Je veux maintenant placer mon logo, centré, sous le menu. Je refuse donc d'utiliser la position absolue, sachant que j'aurai le même problème que mon premier site.

Ma question :
- Quelle est la meilleur manière de placer mon logo centré ? sachant que je voudrais surement l'ajuster, et si possible qu'il reste responsive/placé sous le menu.
-Puis-je utiliser des margin/padding ? ==> Mais si je met par exemple un margin de 500px, ça ne sera pas responsive ?
- Donc, j'ai pensé à le placer dans une colonne bootstrap, genre 6eme colonnes Bootstrap afin que le logo s'adapte en changeant la taille de l'écran, qu'en pensez-vous ?

J'espère que j'ai été clair. Smiley smile Merci d'avance pour votre aide
Modérateur
Salut,

Pour t'aider au mieux il nous faudrait la structure HTML de ton header avec le logo.

Sinon tu peux centrer ton logo avec un 
text-align: center;
sur son parent ou avec un 
margin: 0 auto;
Bonjour, voici en entier

mon HTML : 

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="stylesheet.css">

	<title>fond responsive</title>

		

</head>
<body>

	<!-- Image de fond -->
<style>

	body {
	    background-image: url(dechano.jpg);
	    background-size: cover;
	    background-repeat: no-repeat;
	    background-attachment: fixed;
	    background-position: center;
	}
</style>
<!-- FIN d'Image de fond -->
<!--Menu-->
	<nav class="menu">
		<ul> 
			<li><a href="">Accueil</a></li>
			<li><a href="">Portfolio</a></li>
			<li><a href="">Contact</a></li>
		</ul>
	</nav>
<!--Fin Menu-->
<!--LOGO-->
	<div>
		<img class="logo" alt="logo" src="logosite.png" width="25%">
	</div>
<!--FIN LOGO-->

</body>
</html>


mon CSS :

@font-face  {
	font-family: Adam;
	src:url(Adam.ttf);

}   

nav.menu {
	text-align: center;
    font-size:22px;
    font-family:Adam;
    color:white;
}

nav.menu ul li {
	list-style: none; 
	display: inline-block;
	margin: 35px;

}

.logo {
	position: center;
}


Le code est certainement loin d'être parfait, je débute Smiley smile D'ailleurs j'ai pas réussi à mettre mon menu en blanc. Mais ca c'est moins grave je chercherai par moi même ca me fera pas de mal.
Modérateur
albanodev a écrit :
Le code est certainement loin d'être parfait, je débute

Pas de soucis, le forum est fait pour ça et c'est en codant qu'on devient codeur !



Alors normalement, tu peux partir sur :
<div class="logo-wrapper">
	<img class="logo" alt="logo" src="logosite.png" width="25%">
</div>

et
.logo-wrapper {
	text-align: center;
}

(position: center; ça n'existe pas : https://developer.mozilla.org/fr/docs/Web/CSS/position)
Modifié par _laurent (30 Jul 2020 - 17:05)
Meilleure solution
Ok, merci. Ca fonctionne Smiley smile

Mais du coup ton explication m'amène sur une autre question.

Pourquoi dans ce cas, il faut mettre une <div> et lui associer une classe pour gérer le logo ? Et pas simplement mettre une classe directement au logo et le gérer depuis le CSS ?
Modérateur
albanodev a écrit :
Pourquoi dans ce cas, il faut mettre une &lt;div&gt; et lui associer une classe pour gérer le logo ? Et pas simplement mettre une classe directement au logo et le gérer depuis le CSS ?

Il n'y a pas qu'une solution possible. Je t'en ai donné une en essayant de toucher le moins possible a ton DOM et en faisant en sorte que ca soit la plus simple / compréhensible pour toi.

On peut bien sur centrer l'image seulement avec sa classe avec un 
margin: 0 auto;
comme je te l'avais suggéré plus haut mais ça implique de changer le display en rajoutant un display:block; par exemple. Donc plus compliqué a expliquer et a comprendre.

On peut aussi se passer de ta div qui, en l'état, ne sert pas a grand chose. Mais j'ai choisi de la mettre a profit Smiley lol
Ok,

Mais du coup les <div> servent uniquement a regrouper des balises/elements pour pouvoir les gérer plus facilement dans le CSS ?
Sujet clos
Aller à