18041 sujets

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

Logo récalcitrant

Bonjour à tous,

Tout d'abord je tiens à préciser que je débute, cela fait seulement 1 mois et demi que j'apprends à coder donc s'il vous plait soyez sympa avec moi :-P (la réponse est surement sous mes yeux mais je ne la trouve pas!).

Alors mon problème est le suivant:

J'ai inséré une image (mon logo) dans ma div "banniere" et j'avais réussi à l'aligner plus où moins bien via l'attribut "line-height".
J'ai ouvert le fichier dans mon navigateur, tout était nickel à ce moment là !
J'ai ensuite continué à travailler sur le design des autres div. Puis j'ai voulu voir le résultat et maintenant ce foutu logo n'a plus l'air de vouloir prendre en compte mon "line-height".

Une bone âme peut-elle m'aider s'il vous plaît ?
Merci d'avance.

Avant
upload/53808-avant.jpg

Après
upload/53808-Apres.jpg 



<html>
<head>
	<link type='text/css' rel='stylesheet' href='prototype.css'>
</head>
<body>
	<div id='global'>
		<div id='header'>
			<div id='banniere'>
				<img src="fonds/logo.png" alt="Logo">
			</div>
			<div id='menu'>
			</div>
		</div>
		<div id='contenu'>
			<div id='blocg'>
			</div>
			<div id='blocd'>
				<h1>COMING SOON</h1>
			</div>	
		</div>

		<div id='footer'>
			<div id='credits'>
			</div>
			<div id='sponsors'>
			</div>	
		</div>
	</div>
</doby>
</html>




body {
	background: url('fonds/body_bg2.png') repeat-x 0 0 #D7D7D7;
}

#global {
	height: auto;
	margin: 0px auto 0px auto;
	width: 1024px;
	background-color: transparent;
	border: solid transparent 1px;
}

#header {
	width:90%;
	height: auto;
	margin: 0px auto 0px auto;
	border: solid black 2px;
	margin-top: 20px;
	background-color: #EFECCA;
	border-radius:5px;
}

#banniere {
	width:auto;
	height:150px;
	background: url('fonds/BGbanniere2.jpg') repeat-x 0 0;
	margin: 6px 6px 0px;
	border: solid black 2px;
	text-align: center;
        line-height: 45px;
}

#menu {
	width:auto;
	height:45px;
	border-top: solid black 1px;
	background-color: white;
	margin: 0px 6px 6px;
	background: url('fonds/BGmenu.jpg') repeat-x 0 0;
	border-left: solid black 2px;
	border-right: solid black 2px;
	border-bottom: solid black 2px;
}

#contenu {
	width: 90%;
	height: auto;
	margin: 0px auto 0px auto;
	margin-top: 10px;
	margin-bottom: 10px;
}

#blocg, #blocd {
	display: inline-block;
	vertical-align: top;
	background-color: green;
	height:900px;
	border-radius:5px;
	background: url('fonds/BGblocs2.jpg') repeat-x 0 0 #e9eeff;
}

#blocg {
	width: 24%;
	border: solid black 1px;
}

#blocd {
	width:74%;
	border: solid black 1px;
	float: right;
}

#footer {
	width:90%;
	height: auto;
	margin: 0px auto 0px auto;
	border: solid black 1px;
	margin-bottom: 20px;
	background-color: #EFECCA;
	border-radius:5px;
}
#credits {
	width:auto;
	background: url('fonds/BGmenu.jpg') repeat-x 0 0;
	margin: 6px 6px 0px;
	height: 45px;
	border: solid black 2px;
}

#sponsors {
	width:auto;
	background: url('fonds/BGsponsors.jpg') repeat-x 0 0;
	margin: 0px 6px 6px;
	height: 75px;
	border-bottom: solid black 2px;
	border-left: solid black 2px;
	border-right: solid black 2px;
}

h1 {
	text-align: center;
}

Modifié par Alexidinho (05 Mar 2014 - 13:30)
salut,
il faut mettre un "vertical-align:middle" sur ton <img>.
Par contre ton HTML peut être grandement améliorer. D'une part, il manque cruellement de sémantique (penser à utiliser les balises <header> <footer> <nav> <section> <article>) et d'autre part, il contient certaines choses inutiles, comme ton <h1> dans une <div>. D'ailleurs, ton <h1> est trop loin dans le document s'il s'agit du titre principal de la page.
En CSS, ce n'est pas la peine de mettre

width: auto;
height: auto;
background-color: transparent;

et certaines autre propriétés peuvent être simplifiés

body {
	background: url('fonds/body_bg2.png') repeat-x 0 0 #D7D7D7;
}

#global {
	margin: auto;
	width: 1024px;
	border: solid transparent 1px;
}

#header {
	width:90%;
	margin: 20px auto 0;
	border: solid #000 2px;
	background-color: #EFECCA;
	border-radius:5px;
}

#banniere {
	height:150px;
	background: url('fonds/BGbanniere2.jpg') repeat-x;
	margin: 6px 6px 0px;
	border: solid #000 2px;
	text-align: center;
    line-height: 45px;
}

#menu {
	height:45px;
	border: solid #000 2px;
	border-top: solid #000 1px;
	background-color: #fff;
	margin: 0px 6px 6px;
	background: url('fonds/BGmenu.jpg') repeat-x;
}

#contenu {
	width: 90%;
	margin: 10px auto;
}

#blocg, #blocd {
	display: inline-block;
	vertical-align: top;
	background-color: green;
	height:900px;
	border-radius:5px;
	background: #e9eeff url('fonds/BGblocs2.jpg') repeat-x;
}

#blocg {
	width: 24%;
	border: solid #000 1px;
}

#blocd {
	width:74%;
	border: solid #000 1px;
	float: right;
}

#footer {
	width:90%;
	margin: 0 auto 20px;
	border: solid #000 1px;
	background-color: #EFECCA;
	border-radius:5px;
}
#credits {
	background: url('fonds/BGmenu.jpg') repeat-x;
	margin: 6px 6px 0px;
	height: 45px;
	border: solid #000 2px;
}

#sponsors {
	background: url('fonds/BGsponsors.jpg') repeat-x;
	margin: 0px 6px 6px;
	height: 75px;
	border: solid #000 2px;
	border-top:none;
}

h1 {
	text-align: center;
}

Pas besoin non plus de spécifier d'unités quand la valeur est égale à 0 (0px = 0% = 0em...)
Merci pour ta réponse et tes conseils.
Cependant cela ne fonctionne toujours pas :S
On dirait que mon logo reste figé verticalement ! Comme expliqué dans mon post j'avais réussi à l'aligner avec "line-height" et puis d'un coup mon logo ne semble plus prendre cela en compte pourtant je n'ai rien modifié dans mon id#banniere ??
J'ai testé de donner l'attribut "vertical-align:middle" à mon image et le problème est le même :s

D'où cela peut-il venir ?

Ps: Je sais que mon code est surement loin d'être parfait mais j'aimerais juste comprendre pourquoi mon logo ne veut pas s'aligner. J'aurai tout le temps d'améliorer le reste après. Smiley smile
Après quelques tentatives j'y suis enfin arrivé, vertical-align: middle ne fonctionnait pas, par contre vertical-align: -145px oui Smiley smile .

J'ai aussi changé la sémantique de mon html bien qu'elle ne soit pas encore parfaite à mon avis. Merci pour ton aide en tout cas Smiley cligne
"vertical-align" ne marchait pas car le "line-height" n'était pas assez conséquent pour que l'alignement vertical soit visible. Il faut que le "line-height" ait la même valeur ou presque que la hauteur de son conteneur. Si tu veux qu'il soit au centre d'un élément de "300px" de haut alors le "line-height" doit être d'environs "300px".
Une solution plus propre est de passer par un "display:table-cell".
Sujet clos
Aller à