IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Fixer un contenu en fonction d'un % et d'une taille en px


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé Avatar de sourivore
    Homme Profil pro
    Lead Tech Front-End
    Inscrit en
    Juin 2005
    Messages
    451
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Lead Tech Front-End

    Informations forums :
    Inscription : Juin 2005
    Messages : 451
    Par défaut Fixer un contenu en fonction d'un % et d'une taille en px
    Bonjour,

    Voici un exemple de ce que je voudrais obtenir.

    J'ai un bloc qui fait 100% de hauteur dans ma page.

    Ce bloc contient 5 blocs (disposés donc verticalement)

    Le 2e bloc fait 150px
    Le 5e bloc fait 200px
    Le 1e bloc fait 10% de la hauteur restante
    Le 3e fait 30% de la hauteur restante
    Le 4e enfin fait les 60% de hauteur restants.

    C'est la qu'est mon problème pour le 2e et le 5e je n'ai pas le choix que de mettre height : 150px; et height: 200px; mais si pour les autres je met height: 10%, height: 30% ou height: 60%, ce pourcentage s'effectue sur tout le bloc et non sur la hauteur restante une fois supprimés les blocs 2 et 5.

    Comment puis-je mixer les 2 ?

    Merci d'avance.

  2. #2
    Membre chevronné Avatar de Poulpynette
    Femme Profil pro
    Développeur informatique
    Inscrit en
    Juin 2006
    Messages
    349
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 48
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Juin 2006
    Messages : 349
    Par défaut
    Bonjour,

    Ce n'est pas très clair, un peu de code ou un schéma seraient bienvenus.

    Ceci dit, le mieux est je pense de définir la hauteur de la même manière partout : en px ou en %

    Sinon tu fais un bloc qui englobe les 3 restants et tu définis sa hauteur à 100%. Ainsi les 3 blocs que tu souhaites définir en % se baseront sur le bloc englobant.

    Je ne sais pas si je suis très claire

  3. #3
    Membre Expert
    Avatar de Candygirl
    Femme Profil pro
    Inscrit en
    Juillet 2006
    Messages
    1 912
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 53
    Localisation : Suisse

    Informations forums :
    Inscription : Juillet 2006
    Messages : 1 912
    Par défaut
    On pourrait imaginer qqch comme ça:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Document sans nom</title>
    <style type="text/css">
    * {margin:0;padding:0;}
     
    html,body {height:100%;}
     
    #main {
    	position:absolute;
    	top:0;bottom:350px;
    	width:100%;
    	background:black;
    }
     
    #bloc1 {
    	height:10%;background:red;
    }
     
    #bloc2 {
    	height:150px;background:yellow;
    }
     
    #bloc3 {
    	height:30%;background:green;
    }
     
    #bloc4 {
    	height:60%;background:blue;
    }
     
    #bloc5 {
    	height:200px;background:purple;
    }
    </style>
    </head>
     
    <body>
    <div id="main">
    	<div id="bloc1">10%</div>
    	<div id="bloc2">150px</div>
    	<div id="bloc3">30%</div>
    	<div id="bloc4">60%</div>			
    	<div id="bloc5">200px</div>
    </div>
    </body>
    </html>
    (ne fonctionnera pas sur IE6)
    Les bons réflexes:
    • avant de poser une question:
      règles | faq | tutoriels | recherche
    • clarté, politesse, vocabulaire et orthographe soignés = efficacité
    • remercier ceux qui ont pris le temps d'aider et :resolu: si c'est le cas

  4. #4
    Membre éclairé Avatar de sourivore
    Homme Profil pro
    Lead Tech Front-End
    Inscrit en
    Juin 2005
    Messages
    451
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Lead Tech Front-End

    Informations forums :
    Inscription : Juin 2005
    Messages : 451
    Par défaut
    Merci Poulpynette pour ta réponse.
    Si tu veux un exemple Candy en a fourni un très bon.

    Je rebondis justement sur cela car il y a deux choses qui me bloquent :
    - L'incompatibilité avec IE6 (dont je ne comprend pas l'origine) => IE6 fait également partie de ma cible (malheureusement)
    - La position en absolute qui fonctionne bien pour un DIV parent qui prend toute la page mais qui ne fonctionne pas pour des DIV qui sont dans d'autres DIV en position relative.

    Si comme je vois dans d'autres forums et comme tu dis Poulynette, il faut soit n'utiliser que des % soit utiliser uniquement des px ceci est très contraignant (j'ai une vision des CSS dans laquelle il est possible de tout faire)
    Sinon, je m'interroge sur la flexibilité des CSS.

    En effet, il n'est pas toujours possible d'effectuer cela.

    Je ne pense pas farfelue l'idée (pour faire un exemple plus simple), d'une image "bandeau" contenue dans un DIV en en-tête de page avec une hauteur définie en px (je vois mal comment on pourrait définir cela en %) et d'un découpage en 2 blocs à 50%/50% du reste de la hauteur de la page...

    EDIT : Je ne l'ai pas dit mais merci à toi aussi Candy

    EDIT 2 : Je marque le coup sur ce message qui est le 404ème, nombre au combien significatif pour un développeur tel que moi

  5. #5
    Membre chevronné Avatar de Poulpynette
    Femme Profil pro
    Développeur informatique
    Inscrit en
    Juin 2006
    Messages
    349
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 48
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Juin 2006
    Messages : 349
    Par défaut
    Citation Envoyé par sourivore Voir le message
    (j'ai une vision des CSS dans laquelle il est possible de tout faire)
    Sinon, je m'interroge sur la flexibilité des CSS.
    Dans ce cas arme-toi de patience !

    On peut, je le crois, arriver à faire énormément de choses en CSS.
    Cependant, certaines choses dont le concept est très simple peuvent devenir complètement pénibles à réaliser. Je sais de quoi je parle.

    Mais je t'encourage à persévérer

  6. #6
    Membre éclairé Avatar de sourivore
    Homme Profil pro
    Lead Tech Front-End
    Inscrit en
    Juin 2005
    Messages
    451
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Lead Tech Front-End

    Informations forums :
    Inscription : Juin 2005
    Messages : 451
    Par défaut
    Merci Poulpynette !

    Pour ta solution Candy, après recherche, il est fort probable que l'on puisse contourner le pb de IE grâce au mot-clé "expression" dans ta css qui permet d'inclure du JS dans ta CSS (mais uniquement sous IE)

    J'avoue que c'est assez crados mais j'ai pas mieux (et le second problème reste entier lui)...

  7. #7
    Membre Expert
    Avatar de Candygirl
    Femme Profil pro
    Inscrit en
    Juillet 2006
    Messages
    1 912
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 53
    Localisation : Suisse

    Informations forums :
    Inscription : Juillet 2006
    Messages : 1 912
    Par défaut
    Citation Envoyé par sourivore Voir le message
    - L'incompatibilité avec IE6 (dont je ne comprend pas l'origine) => IE6 fait également partie de ma cible (malheureusement)
    C'est parce que IE6 est incapable de déterminer la hauteur d'un élément lorsque les propriétés top et bottom sont spécifiées les deux, sans height de défini (ce qui nous permet justement ici de mixer pixels et % afin d'obtenir un élément de hauteur 100%-350px).

    On peut y palier par un css spécial IE6- avec javacript intégré du genre:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <!--[if lt IE 7]>
    	<style type="text/css">
    		#main {
    			height:expression(document.body.clientHeight-350+"px");
    		}
    	</style>
    <![endif]-->
    Ne fonctionnera bien sûr pas si javascript est désactivé, mais surfer aujourd'hui avec IE6 et javascript désactivé, ça doit être plutôt rare

    Citation Envoyé par sourivore Voir le message
    - La position en absolute qui fonctionne bien pour un DIV parent qui prend toute la page mais qui ne fonctionne pas pour des DIV qui sont dans d'autres DIV en position relative.
    J'ai pas trop compris la question... un exemple, peut-être ?

    (EDIT: j'avais pas vu les 2 derniers messages )
    Les bons réflexes:
    • avant de poser une question:
      règles | faq | tutoriels | recherche
    • clarté, politesse, vocabulaire et orthographe soignés = efficacité
    • remercier ceux qui ont pris le temps d'aider et :resolu: si c'est le cas

  8. #8
    Membre éclairé Avatar de sourivore
    Homme Profil pro
    Lead Tech Front-End
    Inscrit en
    Juin 2005
    Messages
    451
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Lead Tech Front-End

    Informations forums :
    Inscription : Juin 2005
    Messages : 451
    Par défaut
    Pour ta deuxième réponse, je voulais dire que dans ton cas le #main est l'ensemble de la page ce qui ne pose pas de pb pour les positions en absolute.

    Mais j'ai peur que quand ça n'est pas le cas les positions en absolute posent problème.

    Après ça ressemble plus à de la bidouille, je pense qu'il faudrait que je repense tout en pixel ou en % ce qui n'est pas simple en soi.

Discussions similaires

  1. Réponses: 1
    Dernier message: 29/07/2012, 12h22
  2. Afficher contenu en fonction du titre
    Par yohan0262 dans le forum PHP & Base de données
    Réponses: 4
    Dernier message: 15/01/2010, 19h11
  3. Réponses: 1
    Dernier message: 04/01/2010, 13h28
  4. Réponses: 4
    Dernier message: 10/06/2009, 12h12
  5. fixer navigateur avec la fonction ONMOVE
    Par francky356 dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 21/07/2008, 19h19

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo