BullGuard Antivirus Sale - 60% Off with 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: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
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é : 22 Avr 2015 à 19:29
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 - 22 Avr 2015 à 19:47
Haut de la page
Dmit OE allez vers le bas
Admin Group
Admin Group


Depuis le: 31 Mai 2012
Status: Inactif
Points: 13971
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Dmit OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 22 Avr 2015 à 19:46
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


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


Depuis le: 31 Mai 2012
Status: Inactif
Points: 13971
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Dmit OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 22 Avr 2015 à 19:48
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: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 22 Avr 2015 à 20:03
Je te donne ca de suite Dmit.
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group


Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5388
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 22 Avr 2015 à 21:11
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 - 22 Avr 2015 à 21:16
Haut de la page
Dmit OE allez vers le bas
Admin Group
Admin Group


Depuis le: 31 Mai 2012
Status: Inactif
Points: 13971
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Dmit OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 22 Avr 2015 à 21:27
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


Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5388
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 22 Avr 2015 à 21:38
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


Depuis le: 31 Mai 2012
Status: Inactif
Points: 13971
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Dmit OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 22 Avr 2015 à 21:47
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: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 22 Avr 2015 à 22:39
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 12.04
Copyright ©2001-2021 Web Wiz Ltd.

Cette page a été affichée en 0.063 secondes.