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 :

[css] optimisation de script ?


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Homme Profil pro
    Consultant en Business Intelligence
    Inscrit en
    Mai 2003
    Messages
    921
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 43
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Consultant en Business Intelligence

    Informations forums :
    Inscription : Mai 2003
    Messages : 921
    Par défaut [css] optimisation de script ?
    Bonjour à tous,

    voilà un extrait de mon css :
    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
    50
    51
    52
    .centre {
    	position: absolute;
    	width: 990px;
    	height: 720px;
    	padding: 5px;
    	background-color: #FFFFE6;
    	border: 2px solid #000000;
    }
    	.zone1 {
    		float: left;
    		width: 485px;
    		height: 350px;
    		padding: 2px;
    		background-color: orange;
    		border: 1px solid #000000;
    		text-align: center;
    		overflow: hidden;
    	}
    	.zone2 {
    		float: right;
    		width: 485px;
    		height: 350px;
    		padding: 2px;
    		background-color: orange;
    		border: 1px solid #000000;
    		text-align: center;
    		overflow: hidden;
    	}
    	.zone3 {
    		position: absolute;
    		left: 5px;
    		bottom: 5px;
    		width: 485px;
    		height: 350px;
    		padding: 2px;
    		background-color: orange;
    		border: 1px solid #000000;
    		text-align: center;
    		overflow: hidden;
    		}
    	.zone4 {
    		position: absolute;
    		right: 5px;
    		bottom: 5px;
    		width: 485px;
    		height: 350px;
    		padding: 2px;
    		background-color: orange;
    		border: 1px solid #000000;
    		text-align: center;
    		overflow: hidden;
    	}
    Extrait de mon XSLT :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <div class="centre">
    	<div class="zone1">
    		<xsl:apply-templates select="//zone[position()=1]"/>
    	</div>
    	<div class="zone2">
    		<xsl:apply-templates select="//zone[position()=2]"/>
    	</div>
    	<div class="zone3">
    		<xsl:apply-templates select="//zone[position()=3]"/>
    	</div>
    	<div class="zone4">
    		<xsl:apply-templates select="//zone[position()=4]"/>
    	</div>
    </div>
    "centre" est mon conteneur et contient 4 zones.

    Mon problème est que les paramètres suivants sont répétés QUATRE fois :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    width: 485px;
    height: 350px;
    padding: 2px;
    background-color: orange;
    border: 1px solid #000000;
    text-align: center;
    overflow: hidden;
    Comment faire pour qu'ils soient dans un élément que les QUATRE zones auraient en commun ?

    J'ai essayé ce qui suit mais c'est pas bon (je sais pas pourquoi d'ailleurs !)
    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
    .centre {
    	position: absolute;
    	width: 990px;
    	height: 720px;
    	padding: 5px;
    	background-color: #FFFFE6;
    	border: 2px solid #000000;
    }
    	.zone {
    		width: 485px;
    		height: 350px;
    		padding: 2px;
    		background-color: orange;
    		border: 1px solid #000000;
    		text-align: center;
    		overflow: hidden;
    	}
    	#1 {
    		float: left;
    	}
    	#2 {
    		float: right;
    	}
    	#3 {
    		position: absolute;
    		left: 5px;
    		bottom: 5px;
    		}
    	#4 {
    		position: absolute;
    		right: 5px;
    		bottom: 5px;
    	}
    Extrait de mon XSLT modifié :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <div class="centre">
    	<div class="zone" id="1">
    		<xsl:apply-templates select="//zone[position()=1]"/>
    	</div>
    	<div class="zone" id="2">
    		<xsl:apply-templates select="//zone[position()=2]"/>
    	</div>
    	<div class="zone" id="3">
    		<xsl:apply-templates select="//zone[position()=3]"/>
    	</div>
    	<div class="zone" id="4">
    		<xsl:apply-templates select="//zone[position()=4]"/>
    	</div>
    </div>

  2. #2
    Rédacteur
    Avatar de MasterOfChakhaL
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2004
    Messages
    2 147
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2004
    Messages : 2 147
    Par défaut
    tu n'as pas le droit de donner une valeur qui commence par un chiffre en ce qui concerne les id....

    je ne suis pas sur que ce soit ca, mais si tu veux placer tes zones comme ceci:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    +---+---+
    | 1 | 2 |
    +---+---+
    | 3 | 4 |
    +---+---+
    je te suggère cela:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
    #un, #trois {
      float: left;
      clear:left;
    }
     
    #deux, #quatre {
      float:right;
      clear:right;
    }
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    N'oubliez pas de cliquer sur quand votre question à trouvé une solution.

    Si vous n'avez pas encore lu les règles du club, mieux vaut tard que jamais!

  3. #3
    Membre éclairé
    Homme Profil pro
    Consultant en Business Intelligence
    Inscrit en
    Mai 2003
    Messages
    921
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 43
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Consultant en Business Intelligence

    Informations forums :
    Inscription : Mai 2003
    Messages : 921
    Par défaut
    Merci beaucoup MasterOfChakhaL, au final j'ai fait comme ça :

    Extrait de mon XSLT :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <div class="centre">
    	<div class="zone" id="un">
    		<xsl:apply-templates select="//zone[position()=1]"/>
    	</div>
    	<div class="zone" id="deux">
    		<xsl:apply-templates select="//zone[position()=2]"/>
    	</div>
    	<div class="zone" id="trois">
    		<xsl:apply-templates select="//zone[position()=3]"/>
    	</div>
    	<div class="zone" id="quatre">
    		<xsl:apply-templates select="//zone[position()=4]"/>
    	</div>
    </div>
    Extrait de mon CSS :
    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
    .centre {
    	position: absolute;
    	width: 990px;
    	height: 720px;
    	padding: 5px;
    	background-color: #FFFFE6;
    	border: 2px solid #000000;
    }
    	.zone {
    		width: 485px;
    		height: 350px;
    		padding: 2px;
    		background-color: orange;
    		border: 1px solid #000000;
    		text-align: center;
    		overflow: hidden;
    	}
    	#un, #trois {
    		float: left;
    		clear: left;
    	}
    	#deux, #quatre {
    		float: right;
    		clear: right;
    	}
    @+

  4. #4
    Membre éclairé
    Homme Profil pro
    Consultant en Business Intelligence
    Inscrit en
    Mai 2003
    Messages
    921
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 43
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Consultant en Business Intelligence

    Informations forums :
    Inscription : Mai 2003
    Messages : 921
    Par défaut
    En fait j'avais ça (marge entre les zones 1-2 et 3-4) :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    +---+---+
    | 1 | 2 |
    +---+---+
    +       +
    +---+---+
    | 3 | 4 |
    +---+---+
    j'ai essayé :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    #un, #deux {
      bottom: 15px;
    }
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    #trois, #quatre {
      top: 15px;
    }
    Impossible de faire réapparaître cette marge ... je suis sûr que c'est tout bête ... mais j'y arrive pas !

  5. #5
    Rédacteur
    Avatar de MasterOfChakhaL
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2004
    Messages
    2 147
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2004
    Messages : 2 147
    Par défaut
    t'étais pas loin...

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    #un, #deux {
      padding-bottom: 15px;
    }
    
    #trois, #quatre {
      padding-top: 15px;
    }
    ca devrait fonctionner...
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    N'oubliez pas de cliquer sur quand votre question à trouvé une solution.

    Si vous n'avez pas encore lu les règles du club, mieux vaut tard que jamais!

  6. #6
    Membre éclairé
    Homme Profil pro
    Consultant en Business Intelligence
    Inscrit en
    Mai 2003
    Messages
    921
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 43
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Consultant en Business Intelligence

    Informations forums :
    Inscription : Mai 2003
    Messages : 921
    Par défaut
    T'es sûrement pas loin... mais c'est pas ça !

    Tu peux m'aider encore ?!

  7. #7
    Rédacteur
    Avatar de MasterOfChakhaL
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2004
    Messages
    2 147
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2004
    Messages : 2 147
    Par défaut
    en effet, remplace padding par margin (je m'a trompé...)

    tu peux aussi mettre ca entre les zones un deux et trois quatres

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    <div class="spacer">&nbsp;</div>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    .spacer {
      clear:both;
      height:30px;
    }
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    N'oubliez pas de cliquer sur quand votre question à trouvé une solution.

    Si vous n'avez pas encore lu les règles du club, mieux vaut tard que jamais!

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [MySQL] Optimisation de scripts PHP/MySQL
    Par DgG dans le forum PHP & Base de données
    Réponses: 368
    Dernier message: 20/11/2013, 18h59
  2. Optimiser vos scripts
    Par djibril dans le forum Langage
    Réponses: 33
    Dernier message: 11/06/2009, 16h10
  3. [Débutant] Accélérer et optimiser ses scripts PHP
    Par Metallic-84s dans le forum Langage
    Réponses: 6
    Dernier message: 24/03/2006, 12h37
  4. Réponses: 9
    Dernier message: 21/02/2006, 14h14
  5. [MySQL] [Script]Optimisation de scripts Php/MySQL (2)
    Par copy dans le forum PHP & Base de données
    Réponses: 8
    Dernier message: 27/08/2004, 08h33

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