div width 100% de la page dans une autre div width 950px

Version imprimable

31/07/2013, 11h37
hotmykeul

div width 100% de la page dans une autre div width 950px

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.
31/07/2013, 12h40
rodolphebrd

Bonjour,

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

Sinon peut-être voir en JavaScript...
31/07/2013, 12h45
Invité
Bonjour,

Citation:

Envoyé par hotmykeul

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:

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

Merci jreaux62, je vais tester ça!

Citation:

Envoyé par rodolphebrd

Bonjour,

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

Sinon peut-être voir en JavaScript...

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

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>

31/07/2013, 13h12
hotmykeul
Citation:
Envoyé par jreaux62

Bonjour,

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

Code:

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.
31/07/2013, 13h14
rodolphebrd

Citation:

Envoyé par hotmykeul

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.^^

Supprimez la classe row si vous le pouvez dans:
Code:

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

31/07/2013, 13h39
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!
31/07/2013, 13h44
rodolphebrd

Citation:

Envoyé par hotmykeul

tout ceci sans toucher au code html

On peut donc intervenir dans le code HTML...;)
31/07/2013, 13h48
hotmykeul

Oui, mais en faite prestashop fonctionne avec des variables smarty, du coup, index.tpl est le seul fichier à être chargé en tant que theme, et il apelle tous les autres .tpl qui sont nécessaire, ce que j'essaye de faire, c'est vraiment du bidouillage, du coup si je modifie le code html, difficile de ne pas modifier l'affichage de toutes mes pages.

Citation:

Envoyé par jreaux62

Bonjour,

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

Code:

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:

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:

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:

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???

31/07/2013, 15h02
rodolphebrd

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

Il vous faut ouvrir une autre discussion dans le forum adéquat pour tout ce qui ne traite pas du sujet initial.
31/07/2013, 15h40
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
31/07/2013, 15h58
Invité

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

code du header.TPL au complet:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!doctype html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>{$meta_title|escape:'htmlall':'UTF-8'}</title>
{if isset($meta_description) AND $meta_description}
        <meta name="description" content="{$meta_description|escape:html:'UTF-8'}" />
{/if}
{if isset($meta_keywords) AND $meta_keywords}
        <meta name="keywords" content="{$meta_keywords|escape:html:'UTF-8'}" />
{/if}
        <meta name="robots" content="{if isset($nobots)}no{/if}index,{if isset($nofollow) && $nofollow}no{/if}follow" />
        <link rel="icon" type="image/vnd.microsoft.icon" href="{$favicon_url}?{$img_update_time}" />
        <link rel="shortcut icon" type="image/x-icon" href="{$favicon_url}?{$img_update_time}" />
        <script type="text/javascript">
            var baseDir = '{$content_dir}';
            var baseUri = '{$base_uri}';
            var static_token = '{$static_token}';
            var token = '{$token}';
            var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};
            var priceDisplayMethod = {$priceDisplay};
            var roundMode = {$roundMode};
        </script>
 
    <link href="{$modules_dir}responsiveextension/stylesheets/foundation.min.css" rel="stylesheet" type="text/css" />
{if isset($css_files)}
    {foreach from=$css_files key=css_uri item=media}
    <link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />
    {/foreach}
{/if}
{if isset($js_files)}
    {foreach from=$js_files item=js_uri}
    <script type="text/javascript" src="{$js_uri}"></script>
    {/foreach}
{/if}
 
    <!--[if lt IE 9]>
        <script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 
    <!--[if lte IE 7]><link href="{$css_dir}ie6.css" rel="stylesheet" type="text/css"><![endif]-->
 
        {$HOOK_HEADER}
    </head>
 
    <body {if isset($page_name)}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} class="{if $hide_left_column}hide-left-column{/if} {if $hide_right_column}hide-right-column{/if}">
    {if !$content_only}
        {if isset($restricted_country_mode) && $restricted_country_mode}
        <div id="restricted-country">
            <p>{l s='You cannot place a new order from your country.'} <span class="bold">{$geolocation_country}</span></p>
        </div>
        {/if}
        <div id="page">
 
            {$HOOK_TOP}
 
			<!--Slider-->
			{*
			<div id="slider">
				{include file="./slider/slider.tpl"}
			</div>
			*}
            <div id="columns" class="row">
 
                <section id="center_column" role="main" class="twelve columns">
    {/if}

Désoler si j'ai oublier d'enlever des commentaires, j'ai effacé les plus gros pavé.

31/07/2013, 17h23
Invité
Je ne connais pas l'écriture Smarty (et je n'utilise pas de templates "tout faits"), mais ça devrait ressembler à ça :
Code:

1 2 3 4 5 {if strpos($_SERVER["PHP_SELF"],'/index.php')} <div id="slider"> {include file="./slider/slider.tpl"} </div> {/if}
31/07/2013, 17h44
hotmykeul
~~J'ai essayé ton code, mais il n'apparait pas une fois la page chargée dans chrome, il me reste juste mon commentaire . Moi pas comprendre... strpos ce n'est pas une fonction php?~~
Merci! Grâce a ton code et un peu de documentation:
Code:

1 2 3 4 {if $page_name == 'index'} <div id="#slider"> ... </div> {/if}
1 jour passé pour un aussi petit bout de code.
Merci beaucoup pour ton aide!
31/07/2013, 19h58
Candygirl

Citation:

Envoyé par rodolphebrd

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

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 ;)
31/07/2013, 20h09
rodolphebrd

Candygirl : ouch :ave:
31/07/2013, 21h43
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 ;)
01/08/2013, 09h26
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 ^^