alignement image header

dhondtnicolas · mai 2013

bonjour j'ai un problème avec mon header, j'aimerai mettre une image en fond mais comment faire pour qu'elle passe derrière ma div

dhondtnicolas · mai 2013

http://dbdatabase.free.fr/pluxml/

Stéphane · mai 2013

Bonjour
Peux-tu nous donner le code de ton header stp pour qu'on puisse répondre à ta question, car ça va dépendre de sa structure.

dhondtnicolas · mai 2013

[== html==]
	<header role="banner">
		
		<div class="content">
			<div class="logo">
				<img src="<?php $plxShow->template(); ?>/img/mvbl.png" />
			</div>
		
			<div id="header-title">
				<?php $plxShow->mainTitle('link'); ?>
			</div>
			<p>
				<?php $plxShow->subTitle(); ?>
			</p>
			
		</div>
		
	</header>

dhondtnicolas · mai 2013

[== CSS ==]
/* ---------- HEADER ---------- */

header {
	overflow: visible;
	height: 75px;
	padding: 10px 0 10px 0;
	background-color:#25398f;
	color: #ffc000;
	
}

header p {
	margin-bottom: 0;
}

#header-title a {
	font-size: 2.2em;
	font-weight: bold;
	color: #ffc000;
	z-index:1;
}

#logo
{
	margin-left:15px;
	height:60px;
	margin-top:auto;
	margin-bottom:auto;
}

danielsan · mai 2013

petits rappels :

*/ lorsque dans le HTML tu as

[== HTML ==]
<div class="mon-bloc">blabla</div>

en CSS tu as :

[== CSS ==]
.mon-bloc{color: red}

il a un point pour la class

*/ Lorsqu'en HTML tu as :

[== HTML ==]
<div id="mon-bloc">blabla</div>

en CSS ça donne :

[== CSS ==]
#mon-bloc{color:red}

il y a une dièse pour une id

*/ Une class peut-être présente plusieurs fois sur un page alors qu'un IDentifiant est unique.
Je dis ça pour ton logo qui côté HTML a une class alors qu'en CSS il est cherché via une ID(#)

*/ D'autre part,
Les blocs sont positionnés relativement par rapport aux autres.
C'est à dire qu'ils vont se mettre en fonction du précédent et de celui qui l'encadre.
Par défaut ils vont se mettre à la suite, les uns à côté des autres ou en dessous.

Pour ton affaire maintenant ...
1/ Tu as un bandeau de 75px de haut dans lequel tu souhaites mettre une image de 300px de haut (déjà ton image est mal formatée ... m'enfin on va faire comme si tu n'avais pas le choix ]:D ok ? )
2/ tu souhaites superposer 2 blocs

Primo : tu vas dire à tes blocs qu'ils se positionnent non-pas relativement à celui qui l'encadre (ici header), mais de manière absolue :

[== CSS ==]
#header-title, #logo{position: absolute}

Ensuite tu peux indiquer à quelle distance du coin haut-gauche du header tu souhaites les avoir.
Exemple :

[== CSS ==]
#logo{top:10px; left:10px}
#header-title{top: 65px;left: 120px}

Maintenant le problème de faire rentrer une image mal formatée ... et bien on va lui dire la même chose : se placer en position absolue à -120px du haut et -50px de la gauche.

Cordialement,
_____
D.San

ps : s'il y a d'autres pb, trouve un bon bouquin PAPIER sur le CSS/HTML ... seul moyen d'y arriver. ]:D

Francis · mai 2013

[pub] Si tu cherches un livre sur les CSS et le HTML, je te conseille celui-ci

[/pub]

Et en cliquant sur le lien "zoom verso" pour voir la 4ème de couverture, on peut voir qu'on y parle de PluXml !

Stéphane · mai 2013

Francis a écrit:

[pub] Si tu cherches un livre sur les CSS et le HTML, je te conseille celui-ci [/pub]

Et en cliquant sur le lien "zoom verso" pour voir la 4ème de couverture, on peut voir qu'on y parle de PluXml !

Hooo mais c'est bien ça !!!

alignement image header

Réponses