Placer du texte par dessus un élément type "header slider"

**Dr.Wily** · 15/03/2012, 20h38

Bonjour,

Je suis en train de perdre tout mes cheveux à force de chercher un truc qui me semble pourtant simple et élémentaire.

J'aimerai une image de header en slideshow. Jusque là rien de bien original. J'en ai essayé 3 avec le CMS Wordpress.

Mon but est simplement de placer le titre et la description du site sur le slide qui est effectué par le plugin "header image slider". Or quand je les actives en plaçant le code PHP dans mon header.php cela décale le titre et la description vers le bas. Je n'arrive pas à les superposer au dessus du slide.

Voilà le code de la bannière :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div id="header">
<?php boom_header_image(); ?>
	
	<div id="headerimg">
		
		<?php if (G2::have_blog_title ()) : ?><h1><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1><?php endif; ?>
		<?php if (G2::have_blog_tagline ()) : ?><div class="description"><?php bloginfo('description'); ?></div><?php endif; ?>
	</div>
</div>

Juste après "header" le code ajouté pour obtenir le slide. Mais peu importe où je le place la description et le titre du site sont toujours décalés et jamais superposé dessus.

La class "header" du CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
#header
{
height: 8em;
font-size: 1.4em;
margin: 0 auto;
background: #8db8c3 url() no-repeat top left;
padding-top: 1em;
}

La class "headerimg" du CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
#headerimg
{
height: 8em;
font-family: Arial, Sans-serif;
text-align: center;
color: #ffffff;
padding-left: 1em;
padding-right: 1em;
background: transparent url(logo/ban-test1280px.jpg) no-repeat center top;
}

J'ai tenté d'insérer le code PHP dans l'url du background mais sans résultat. Le slide est de type jQuery, c'est peu être différent d'une simple image.

Une idée ? Merci

**Dr.Wily** · 23/03/2012, 11h08

Quelques précisions en + :

Toujours pas trouvé.

Voici ce que j'ai tenté :

- Ajout du tag "<?php boom_header_image(); ?>" dans mon fichier CSS dans la partie "Header"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
#header
{
height: 8em;
font-size: 1.4em;
margin: 0 auto;
background: white url(<?php boom_header_image(); ?>) repeat-x top left;
padding-top: 1em;
}

---> résultat aucun affichage (comme si j'avais supprimé l'image)

- Ajout du tag "<?php boom_header_image(); ?>" dans mon fichier CSS dans la partie "Headerimg" (qui sert pour la couleur de fond du header et le formatage du texte

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
#headerimg
{
height: 8em;
font-family: arial;
text-align: center;
padding-left: 1em;
padding-right: 1em;
background: transparent url(<?php boom_header_image(); ?>) no-repeat left top;
}

---> résultat aucun affichage (là aussi, comme si j'avais supprimé l'image)

Voici ce que donne le site sans le tag "<?php boom_header_image(); ?>". Et voici ce qu'il donne avec le placement du tag directement dans le header.php a cette section :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
</head>
<body>

<div id="header"><?php boom_header_image(); ?>
	<div id="headerimg">
		<?php if (G2::have_blog_title ()) : ?><h1><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1><?php endif; ?>
		<?php if (G2::have_blog_tagline ()) : ?><div class="description"><?php bloginfo('description'); ?></div><?php endif; ?>
	</div>
</div>

Même chose dans la section "headerimg". L’accès au site se fait par là pour ceux qui veulent jeter un œil. Le code généré sans le tag "<?php boom_header_image(); ?>" est le suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div id="header">
	<div id="headerimg">
		<h1><a href="http://wellby.dyndns.org/wp-fdj">Titre du site</a></h1>		<div class="description">Slogan du site</div>	</div>
</div>
puis suite de la page....

La je suis largué au niveau design... Merci de votre aide !

Placer du texte par dessus un élément type "header slider"

Webdesign & Ergonomie

Discussions similaires

Partager

Partager