Antivirus offre spéciale - jusqu'à 60 % de réduction avec openElement !
Accueil Forum Accueil Forum >

openElement

> Web Café > Code (JS, PHP, CSS etc.), techniques etc.
  Nouveaux messages Nouveaux messages Fil RSS  - Panneaux d'éléments "améliorés"
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

Panneaux d'éléments "améliorés"

 Répondre Répondre Page  12>
Auteur
Message
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: Aug 14 2009
Pays: France
Status: Inactif
Points: 9880
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Sujet: Panneaux d'éléments "améliorés"
    Envoyé : Apr 22 2015 à 6:29pm
Bonjour

PB n°1:
je continue à travailler sur la base d'une procédure (1 seule page avec des blocs d'éléments qui chacun s'adapte à la taille du navigateur avec l'aimable participation de Larsène Clap) pour essayer d'améliorer au mieux...Big smile

Petit rappel :

1 panneau d'éléments appelé "bigpanel" et en relative
plusieurs panneaux d'éléments appelé "panel" et eux aussi en relative
1 code source JS/Endbody :

//redéfinition de la hauteur des sections
//changer la couleur en rouge par le nombre de bloc d'éléments
function larsene(){
    var hauteur = $(window).height();
    $('.panel').height(hauteur);
    $('.bigpanel').height(hauteur*7
}

//resize sur modif taille navigateur
$( window ).resize(function() {
larsene()
});

//resize au démarrage
$( document ).ready(function() {
larsene()
});

Jusque la, tout va très bien...mais juste je galère sur une chose, si je mets dans mes blocs d'éléments d'autres blocs d'éléments, impossible que ceux ci restent "centrés" dans le panneau d'élément appelé "panel".

Est ce normal? Larsène? Dmit?

Je finalise ma page (vous l'avez eu en MP d'ailleurs) pour la poster içi.

PB n°2 :
Sinon, autre "bug"...dans mon panneau d'éléments qui à une largeur de 100% et une hauteur de 750px (le tout en relative), si je mets un bloc d'éléments dedans et que j'y rajoute n'importe quoi (pour l'exemple), et que je passe sa largeur en 100%, aucun souci, mais si je mets sa hauteur à 100%, celui-ci se réduit à 15px.
Est ce normal?

PB n°3 :
Sur un des panneaux d'éléments "panel", j'ai besoin d'y insérer un bloc d'éléments qui reste automatiquement en bas, mais uniquement un, et non, sur toute la page "bigpanel".
Une idée?


Edité par brolysan - Apr 22 2015 à 6:47pm
Haut de la page
Dmit OE allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: May 31 2012
Status: Inactif
Points: 13998
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Dmit OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Apr 22 2015 à 6:46pm
P1:
S'il s'agut du centrage horisontale, iIl faut mettre les "panel"s en affichage relative et centrer les elements dedans avec des icones de centrage. Si c'est le centrage vertical, c'est plus complique, il faut mettre en "absolute" et ecrire du code CSS ou JS. Code CSS:

.element-inside-panel-v-centering {
top: 50% !important; left: 50% !important;
-ms-transform: translate(-50%,-50%); /* IE 9 */
-webkit-transform: translate(-50%,-50%); /* Safari */
transform: translate(-50%,-50%);
}


Haut de la page
Dmit OE allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: May 31 2012
Status: Inactif
Points: 13998
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Dmit OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Apr 22 2015 à 6:47pm
P2: un.. comment dire.. lien?
Haut de la page
Dmit OE allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: May 31 2012
Status: Inactif
Points: 13998
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Dmit OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Apr 22 2015 à 6:48pm
En fait pour Pb2 c'est plutot normal, a cause de mode relative..
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: Aug 14 2009
Pays: France
Status: Inactif
Points: 9880
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Apr 22 2015 à 7:03pm
Je te donne ca de suite Dmit.
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: Mar 05 2012
Pays: France
Status: Inactif
Points: 5392
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Apr 22 2015 à 8:11pm
Lo! ! tu veux, toi, qu'on t'aide sans liens ?

1- normal
2- mettre plutôt une hauteur en "auto" (c'est normal : il faut que la hauteur soit fixe pour ensuite mettre une autre div dedans en %)
3- le mieux c'est en jquery : tu check la position et la taille du container, tu soustraits ce que tu veux fixer en bas et tu appliques la valeur résultante au div que tu veux coller en bas.

Tu l'auras exploité, hein, mon modèle "OnePageResponsive" !




Edité par Larsene - Apr 22 2015 à 8:16pm
Haut de la page
Dmit OE allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: May 31 2012
Status: Inactif
Points: 13998
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Dmit OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Apr 22 2015 à 8:27pm
3 je dirais plutot mettre en positionnement absolute (par un bloc CSS s'il y a besoin) avec Haut en "auto" et Bas = 0.
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: Mar 05 2012
Pays: France
Status: Inactif
Points: 5392
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Apr 22 2015 à 8:38pm
3- c'est ce que je pensais, mais en absolute, le panneau ne participe plus au "page flow", et pour travailler sur un site responsive ....
Haut de la page
Dmit OE allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: May 31 2012
Status: Inactif
Points: 13998
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Dmit OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Apr 22 2015 à 8:47pm
Le panneau n'a pas besoin d'etre en absolute, juste l'element a caler.. on peut forcer sa position "absolute" par un script CSS. Ca depend de la situation.

Concernant la hauteur 100% dans un Panneau absolute: c'est pas tres evident, car il y a une "ligne" (<div class="OERelLine ....) qui a la hauteur "auto" pour adapter au contenu, et les elements se trouvent dedans et 100% de ca = 0. Donc il faut ajouter un Bloc de Code Source pour forcer la hauteur de ce tag a 100%:

.panel-100 .OERelLine { height: 100% !important; }


Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: Aug 14 2009
Pays: France
Status: Inactif
Points: 9880
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Apr 22 2015 à 9:39pm
je look toutes les réponses demain matin...Big smile
J'attends de finilaiser un peu plus avant de poster le lien ici.
Haut de la page
 Répondre Répondre Page  12>
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 10.18
Copyright ©2001-2014 Web Wiz Ltd.

Cette page a été affichée en 0,047 secondes.
Acheter votre vélo en ligne