Discussion :

[hotmykeul]

Bonjour,
alors voila, j'ai essayé de trouver comment faire (avec sans doute une règle css) pour avoir un slider qui fait 100% de la page, seul problème, ce slider est a l'intérieur d'une div de 950px. Je ne peux pas déplacer la div du slider à l'extérieur de la div de la page car il s'agit de prestashop. Etant novice, je n'ai pas encore les connaissances afin de faire un module pour prestashop.
Voici le template que j'ai choisi, le slider est différent mais le principe est le même:
http://demo.thomaspeigne.com/fr/
Donc pour reformuler convenablement, je voudrais que le slider à une largeur de 100% de la page, tout ceci sans toucher au code html, ni au paramètres prestashop.

J'ai réussi a faire ce que je veux en intégrant le slider dans le header de la page, simple de faire width: 100%, mais le problème est que le slider s'affiche sur toutes les pages, plutot gênant.

Si quelqu'un pourrait m'aider, je l'en remercie d'avance.

[rodolphebrd]

Bonjour,

Sans toucher au HTML, je ne vois pas de solution en CSS

Sinon peut-être voir en JavaScript...

[hotmykeul]

Merci jreaux62, je vais tester ça!

Bonjour,

Sans toucher au HTML, je ne vois pas de solution en CSS

Sinon peut-être voir en JavaScript...

J'avais trouvé ceci en css, le code fonctionne mais impossible de le faire dans ma page:

Code html :

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

1
2
3
4
5
6
7
<div id="container" style="width: 960px; border:1px solid #f00;">
    Text before<br>
   <div id="help_panel" style="width: 100%; position:absolute; margin: 0 auto; border:1px solid #0f0;">
     Content goes here.
   </div> 
   This is behind the help_penal
</div>

[rodolphebrd]

J'avais trouvé ceci en css, le code fonctionne mais impossible de le faire dans ma page:

J'avais déjà essayé ça sur votre page, c'était le première idée qui m'est venue.
Il faudrait voir ce qui bloque en veillant à ne pas tout casser.^^

[rodolphebrd]

Supprimez la classe row si vous le pouvez dans:

Code html :

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

1
2
<div class="row" id="columns"> 
<section class="twelve columns" id="center_column" role="main">

[hotmykeul]

Merci rodolphebrd, ça à l'air de fonctionner, je vais tester plus en profondeur et je reviens...
edit: Tout fonctionne bien sur la page d'accueil mais dans les catégories, la colonne simple s'affiche en width:100%, c'est assez beau mais il faut beaucoup scroller pour voir tous les articles sur un 16/9e. J'aurais préférer 950px pour la colonne du centre, je vais essayer de bidouiller un peu pour que les pages des catégories s'affichent sur 950px. En tout cas merci pour ta réponse!

[Candygirl]

Sans toucher au HTML, je ne vois pas de solution en CSS

Il y en avait une enfin, après, il faut voir l'implication d'une des modification sur le reste.

L'idée est de passer par un positionnement absolut en s’arrangeant que le référant soit un ancêtre qui couvre la totalité de la surface. Cela impliquait de supprimer un position:relatif du parent ou g-parent de 950px (à voir à quoi il servait?..). Après on attribue un position absolute, left 0 et width 100% au div qui doit prendre toute la largeur (surtout ne pas définir de top). Après il faut aussi gérer l'espacement de la hauteur du slider genre en appliquant un margin/padding à l'élément qui suit directement.

Un peu tordu mais possible

[rodolphebrd]

Candygirl : ouch

[Invité]

@candygirl
petit inconvénient néanmoins : la hauteur du slider varie ! (site + slider responsive !)
un peu de javascript s'avère alors nécessaire, car "hors flux".

le garder dans le flux semble donc une meilleure solution, non ?
surtout que ca ne prend que 3 lignes de code

[Candygirl]

Oui, évidement que c'est bien meilleure de la garder dans le flux (et clair que la variation de hauteur du slider est un problème).

C'était juste pour donner un exemple de comment faire prendre une largeur de 100% à un élément qui se trouve dans un autre de largeur fixe pour, l'excercice de style ^^

[Invité]

Bonjour,

J'ai réussi a faire ce que je veux en intégrant le slider dans le header de la page, simple de faire width: 100%, mais le problème est que le slider s'affiche sur toutes les pages, plutot gênant.

Il suffit de mettre une condition, en testant le nom de la page.

Code php :

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

1
2
3
4
5
<?php 	// DIAPORAMA : page index uniquement
if (strpos($_SERVER["PHP_SELF"],'/fr/index.php')) {
 	include('./index-diaporama.php');
}
?>

[hotmykeul]

Bonjour,

Il suffit de mettre une condition, en testant le nom de la page.

Code php :

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

1
2
3
4
5
<?php 	// DIAPORAMA : page index uniquement
if (strpos($_SERVER["PHP_SELF"],'/fr/index.php')) {
 	include('./index-diaporama.php');
}
?>

Ça ne fonctionne pas, car il s'affiche bien mais dans toutes les pages et catégories, car prestashop fonctionne en changeant de catégories toujours sur la page index.php, ex: acceuil= index.php, cat1=index.php?id_category=6&controller=category ect... edit: J'ai dit n'importe quoi, ca ne fonctionne pas du tout, il n'affiche rien, mais je vais essayer de modifier le code, ca semble être une bonne base.

[hotmykeul]

Bonjour,

Il suffit de mettre une condition, en testant le nom de la page.

Code php :

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

1
2
3
4
5
<?php 	// DIAPORAMA : page index uniquement
if (strpos($_SERVER["PHP_SELF"],'/fr/index.php')) {
 	include('./index-diaporama.php');
}
?>

J'ai mis ce code la ou je veux placer mon slider:

Code :

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

1
2
3
4
5
6
7
<div id="slider">
			<?php 	// DIAPORAMA : page index uniquement
			if (strpos($_SERVER["PHP_SELF"],'/index.php')) {
 				include('./slider/slider.php');
			}
			?>
			</div>

Chose étonnante, lorsque je charge ma page, le bloc apparait en commenté:

Code :

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

1
2
3
4
5
6
7
<div id="slider">
			<!--?php 	// DIAPORAMA : page index uniquement
			if (strpos($_SERVER["PHP_SELF"],'/index.php')) {
 				include('./slider/slider.php');
			}
			?-->
			</div>

pareil pour ce code:

Code :

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

1
2
3
4
5
6
7
8
9
<div id="slider">
			<!--?php 	// DIAPORAMA : page index uniquement
			$a = strpos($_SERVER["PHP_SELF"],'/index.php');
			echo $a;
			if (strpos($_SERVER["PHP_SELF"],'/index.php')) {
 				include('./slider/slider.php');
			}
			?-->
			</div>

apparemment on ne peut pas mettre de code php dans index.tpl???

[rodolphebrd]

hotmykeul : il y a deux sujets qui sont traités en même temps

Il vous faut ouvrir une autre discussion dans le forum adéquat pour tout ce qui ne traite pas du sujet initial.

[hotmykeul]

Non, il n'y a qu'un seul sujet? Celui de mettre le slider à 100% en horizontal mais sur 1 seule page prestashop qui est index.php (l'accueil). Pourquoi 2 sujets?
edit: oui c'est vrai je dérive vers du php alors que je voulais plûtot du css, je vais poster dans php

[Invité]

Quel est le code complet du fichier header.php ? (sans les commentaires)