28172 sujets

CSS et mise en forme, CSS3

Positionnement d'un slider

Bonjour,

En quelques mots,
j'ai conçu un menu au-dessus d'une bannière défilante..

Et, je rencontre 2 soucis :
- avec le positionnement de ma bannière défilante.(en format pc) : elle n'est pas exactement en haut de page. Il y a quelques 20 pxiels plus bas. Pourquoi ?
- De plus, elle disparait en formats tablettes et teléphone. Pourquoi ?
Modifié par jytest (12 Oct 2016 - 09:39)
Bonjour jytest,

jytest a écrit :

elle n'est pas exactement en haut de page. Il y a quelques 20 pxiels plus bas.


Ce n'est pas très compréhensible....

jytest a écrit :

De plus, elle disparait en formats tablettes et teléphone.


Parce que le code CSS demande que ça soit le cas. ^^
Il existe des règles de ce type dans le fichier menu.css :

@media screen and (max-width: 490px)
._width1498 {
    display: none;
}


Mais d'une manière générale, après avoir tenté de comprendre l'architecture de la partie menu/banner, le code de ce site semble être un gros bazar... Est-ce toi qui l'a réalisé ? Quelles sont tes bases en intégration HTML/CSS ?
Je ne dis pas ça pour te vexer hein, mais pour savoir dans quelle direction d'orienter au mieux. Smiley cligne
Merci pour ton aide.

Le slider devrait être exactement tout en haut, juste sous le menu, et pas rabaissé d'une vingtaine de pixels. De plus, ce menu ne devrait pas disparaître pour les supports de type tablettes et téléphones.

Par l'emploi des médiaqueries,
Les grands écrans ont un flag actif pour _widthFull
Les autres écrans de pc ont un flag actif pour _width1498.
Les tablettes ont un flag actif pour _width950
Les téléphones ont un flag actif pour _width450
D'où l'utilisation des classes (paramétrées en display inline, block ou none) suivant les media queries.

C'est dans cette optique que je viens de commenter le php du menu.

Dans ce priocessus, il est normal que _widthFull et _width1498 soient en display none pour les tablettes et téléphones. J'utilise ce subterfuge pour switcher la présentation de mon menu.
Un 1er menu existe donc pour les grands et normaux écrans.
Un 2e menu existe alors pour les tablettes et téléphones.
Modifié par jytest (11 Oct 2016 - 14:59)
Hello,
la marge en haut du <body> vient des marges appliquées à la classe .longueur,
en particulier la marge supériiure de 1.85%,
voir index00.css ligne 36 mais aussi ligne 191 :


.longueur {
    margin: 1.85% 10.0133% 0% 10.0133%;
}

@media screen and (max-width: 1498px)
.longueur {
    margin: 1.85% 10.0133% 0% 10.0133%;
}




Il suffit de remplacer 1.85% par 0 et tout rentre dans l'ordre.
Modifié par farang (11 Oct 2016 - 15:02)

[i]Farang dit :[/i]
Hello,
l de 31px


Je ne comprends pas...
Modifié par jytest (11 Oct 2016 - 14:58)
En fait longueur a besoin de 1.85% de margin-top, sous la bannière.
Mais la bannière n'a pas besoin de margin-top de 1.85%.
Le problème vient de là.
Il s'agit donc de soucis de position absolute et relative des div.
Je n'y arrive pas.

Mais comment le résoudre ?
Pouvez-vous m'aider svp ?
Modifié par jytest (11 Oct 2016 - 15:12)
ajouter margin-top: -1.85%; à .banner ?


#banner {
    margin: 0 auto;
    max-width: 1498px;
    height: 100%;
    width: 100%;
    background-color: #333333;
    margin-top: -1.85%;
}


la structure est un peu brouillonne, on a du mal à repérer l'imbrication des différents éléments ...
oui, parce que comme expliquer dans les postes précédents, ton slider n'est pas fait pour les tablettes et smartphones 

@media screen and (max-width: 950px)
._width1498 {
     display: none; 
}
@media screen and (max-width: 950px)
._widthFull {
    display: none; 
}


et si tu enlève ces display none ça fait du dégats !! Smiley bombe
Modifié par JENCAL (11 Oct 2016 - 16:05)
C'est normal !

Pour les tablettes et téléphones,
le menu n'est plus dans cette div (qui ne s'affiche donc pas pour les écrans de pc petits et grands),
mais il est dans la div du dessous. En voici le code :


<!--   Visible pour les écrans de tablettes et de téléphones   -->
<div class="_width950 _width450">
    <div id="banner">
        <?php include("communs/banner00.php"); ?>
    </div>
    <div id="menu">
        <div id="top02" style="">
            <div style="width:15%; float:left; height:100%;">
                <div class="curseur titre-h1-h2" onclick="document.location='accueil'" style="border:none;"><?php echo $balH1."\n".$balH2; ?></div>
            </div>
            <div style="width:85%; float:right; height:100%;">
                <ul class="topnav02">
                <li style="width:33.3334%;"><!--<a href="#"><img src="images/general/icone_compte.png" width="100%" alt=""/></a>--></li>
                <li style="width:33.3334%;"><a href="contact"><img src="images/general/icone_info.png" width="100%" alt=""/></a></li>
                <li style="width:33.3334%;"><a href="javascript:void(0)" onclick="switchNav();"><img id="imageMenu" src="images/general/icone_menu.png" width="100%" alt=""/></a></li>
                </ul>
            </div>
            <div class="stopfloat"></div>
        </div>
    </div>
    <div id="sous_menu" style="display:none;">
        <ul class="sous-topnav02">
        <li><a class="<?php echo ($pageUrl==1?"active":""); ?>"href="accueil">Accueil</a></li>
        <li><a class="<?php echo ($pageUrl==4?"active":""); ?>"href="creation-logo">Logo</a></li>
        <li><a class="<?php echo ($pageUrl==5?"active":""); ?>"href="creation-flyer-affiche">Flyer / Affiche</a></li>
        <li><a class="<?php echo ($pageUrl==6?"active":""); ?>"href="creation-packaging">Packaging</a></li>
        <li><a class="<?php echo ($pageUrl==7?"active":""); ?>"href="creation-catalogue-magazine">Catalogue / Magazine</a></li>
        <li><a class="<?php echo ($pageUrl==8?"active":""); ?>"href="creation-site-internet-newsletter">Site internet / Newsletter</a></li>
        <li><a class="<?php echo ($pageUrl==2?"active":""); ?>"href="contact">Nous contacter</a></li>
        </ul>
    </div>
</div>



Un tout grand merci à toi pour ton aide.
Modifié par jytest (12 Oct 2016 - 09:41)
Voici banner00.php

<?php
	session_start();
	
	$repBanner = "banners/all/";
	$repThumb = "banners/thumbs/";

	$banner[] = array(
		"on",
		$repBanner."banner01.png",
		$repThumb."banner01.png",
		"creation-site-internet-newsletter",
		"_self");
	$banner[] = array(
		"on",
		$repBanner."banner02.png",
		$repThumb."banner02.png",
		"creation-packaging",
		"_self");
	$banner[] = array(
		"on",
		$repBanner."banner03.png",
		$repThumb."banner03.png",
		"creation-logo",
		"_self");
	$banner[] = array(
		"on",
		$repBanner."banner04.png",
		$repThumb."banner04.png",
		"contact",
		"_self");

	$cptBanner=count($banner);
?>

<div class="fluid_container">
    <div class="camera_wrap camera_azure_skin" id="camera_presentation_01">
		<?php
        for ($iBanner=0; $iBanner<$cptBanner; $iBanner++) {
			if ($banner[$iBanner][0] == "on") {
		?>
            <div data-thumb="<?php echo $banner[$iBanner][2]; ?>" data-src="<?php echo $banner[$iBanner][1]; ?>" data-link="<?php echo $banner[$iBanner][3]; ?>" data-target="<?php echo $banner[$iBanner][4]; ?>" class="curseur">
            </div>
        <?php
			}
        }
        ?>
    </div>
</div>

Modifié par jytest (12 Oct 2016 - 09:42)
le slider semble parfaitement responsive,
voir le site du slider.

En revanche :

dans le code source on trouve deux sliders, le même slider est présent dans chaque grande div (PC et tablettes).
je pense que ce n'est pas du tout une bonne idée,
Le script et la css du slider ont certainement du mal à se repérer et à gérer le tout correctement puisque tous les éléments gérés par le script et la css sont en double dans le code, notamment des id d'éléments.

Sinon on trouve quantité de beaux sliders responsives un peu partout, mais je crains que le problème persiste...
Le souci est donc bien dans les positionnement des blocs.
A cet effet j'ai mis le code propre de la page, avec les instructions include, afin que mon code soit plus visuel.

Parce qu'il est vrai qu'un margin-top:-1.85% résout le problème...
mais le premier problème provient des positionnemen,t des blocs
Voici ma strucuture de page :
<header>
<slider>
Et, au-dessus, le menu
(sans oublier que le menu est différent pour les pc et tablettes/téléphones)
</header>
<contenu>
<longueur>
...
</contenu>
<footer>
...
</footer>
Modifié par jytest (11 Oct 2016 - 16:44)
En effet je pense qu'il faut abandonner l'idée des deux grandes div PC et Tablettes,
et gérer le menu et la bannière avec les media queries, en les laissant en position absolute comme dans la div "PC", il n'y a pas grand chose à faire en fait,

dans un premier temps j'effacerais du code de la page la partie "tablettes", et dans les css j'effacerais les media queries relatives aux deux grandes div, pour garder toujours affichée la première "PC".

Ensuite la bannière et les menus devraient se positionner comme maintenant

On aurait ainsi une structure plus propre et plus facilement maintenable et évolutive, une page plus légère.

Je n'ai pas réussi à récupérer tous les fichiers de la page, sinon j'aurai essayé de bricoler un peu, le problème est intéressant !
Sujet clos
Aller à