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 :

Recentrer un ensemble de calques au départ "absolu"


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Inscrit en
    Mai 2007
    Messages
    183
    Détails du profil
    Informations forums :
    Inscription : Mai 2007
    Messages : 183
    Par défaut Recentrer un ensemble de calques au départ "absolu"
    Bonjour à tous,

    Contexte initial :
    Pour "design-er" un site web, et placer exactement les cadres "div" ici et pas ailleurs, j'ai utilisé des calques en absolu. Intérêt de l'absolu : si un pékos déboule dans votre bureau et souhaite ce calque un peu plus à droite, ou carrément en bas, on lui déplace en direct à la souris exactement la ou il veut, ça va vite.. et c'est normalement l'intérêt du CCS.

    Phase 2 :
    Tout le monde est content de la maquette du site web.. mais y a un pékos qui souhaite centrer l'ensemble des calques au milieu de son écran, car il trouve pénible d'avoir "tout à gauche"... (Il possède un écran 9000 pouces).

    .. et la on commence à rentrer dans l'obscurantisme du CCS : sans les grimoires et les formules magiques, point de salut...

    Bon, c'est pas grave, j'y vais quand même, je crée un calque qui se centre au milieu de la page.. dans le grimoire, on m'explique qu'il faut mettre un "margin-left: auto;" + "margin-right: auto;" avec un "width: ..;" sinon ça marche pas bien... (c'est vrai qu'une balise CSS avec 'center' aurait été trop simple).

    Question :
    Maintenant j'ai ma boite centrée, comment faire pour que les calques de la maquette (validée) se positionne maintenant par rapport au bord de mon cadre centré (et plus le bord du navigateur) ?

    Merci aux Elfes et Magiciens qui pourront me répondre.

  2. #2
    Membre Expert Avatar de HiRoN
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2007
    Messages
    2 035
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Août 2007
    Messages : 2 035
    Par défaut
    Salut,

    Sans le code (x)HTML & CSS difficile d'en dire plus.
    Je ne peux que te conseiller d'aller voir ici.

    Maintenant j'ai ma boite centrée, comment faire pour que les calques de la maquette (validée) se positionne maintenant par rapport au bord de mon cadre centré (et plus le bord du navigateur) ?
    Difficile à dire sans le code et si tu as passé tout tes div en position:absolute...
    Maquette compatible tous navigateurs ?
    Pensez à utiliser les ressources disponibles en Dev. Web :
    (x)HTML : Cours (X)HTML / FAQ (X)HTML
    CSS : Cours CSS / FAQ CSS / Galerie CSS
    Javascript : Cours / FAQ / Sources
    Mon site : Développeur Web Freelance

  3. #3
    Membre confirmé
    Inscrit en
    Mai 2007
    Messages
    183
    Détails du profil
    Informations forums :
    Inscription : Mai 2007
    Messages : 183
    Par défaut
    Merci de cette réponse rapide.

    Je suis allé voir le lien qui est interessant, mais qui ne répond pas à ma question.

    Je souhaite savoir si une série de calque avec position initiale "absolu" peut être déplacé "tel quel" dans un autre calque de manière à reproduire la position au pixel près.. mais à l'intérieur du nouveau cadre (qui est centré en l'occurence).

    Dans mon code, il y a beaucoup de calque et ça va être lourd. Mais si nécessaire, je peux créer un exemple plus léger.

  4. #4
    Membre Expert
    Profil pro
    Inscrit en
    Mars 2002
    Messages
    1 132
    Détails du profil
    Informations personnelles :
    Âge : 53
    Localisation : France

    Informations forums :
    Inscription : Mars 2002
    Messages : 1 132
    Par défaut
    Salut,

    Pour centrer un calque absolu il suffit normalement de le positionner au centre moins la moitié de sa largeur. Ca paraît logique mais c'est exactement ce qu'il faut faire

    Essaye ceci:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <div style="background:#CDE; position: absolute; 
    width: 250px; height: 400px; 
    top: 0; left: 50%; 
    margin-left: -125px;"></div>

  5. #5
    Membre confirmé
    Inscrit en
    Mai 2007
    Messages
    183
    Détails du profil
    Informations forums :
    Inscription : Mai 2007
    Messages : 183
    Par défaut
    Merci pour ta réponse devyan, mais ce n'est pas ma question (j'ai compris le truc "logique"), voici le code html simplifié dans lequel il y a un jeu de cadre en absolu sauf "main_center_calque" qui est un cadre centré ( qui fonctionne..devyan : ) ,et je veux placer tous les autres à l'intérieur de ce cadre centré, en conservant la disposition initiale des autres calques de la maquette créés en absolu :

    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
     
    <!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>
    <link title="css2" href="maquette.css" rel="stylesheet" type="text/css" media="screen" />
    </head>
    <body>
    <div id="main_center_calque">Calque centré : doit recevoir tous les autres calques ci-dessous</div>
    <div id="logo_cadre">logo</div>
    <div id="info"> info</div>
    <div id="valeur">valeur</div>
    <div id="menu0">menu0</div>
    <div id="zone_large">zone libre</div>
    <div id="pub">pub</div>
    </body>
    </html>
    Voici le CSS associé (j'ai essayé de réduire pour l'exemple.. désolé pour la taille) :

    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
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
     
    body {
    	background-color: #161531;
    	margin: 0px;
    }
    #main_center_calque{
    	margin-left: auto;
    	margin-right: auto;
    	width: 800px;
    	height:600px;
    	z-index:0;
    	color: #FFFFFF;
    	visibility: visible;
    	overflow: visible;
    	background-color: #00CC00;
    }
     
    #logo_cadre{
    	position:absolute;
    	height:87px;
    	z-index:1;
    	left: 2px;
    	top: 2px;
    	background-color: #31306B;
    	border-bottom-style: none;
    	border-right-style: none;
    	border-bottom-width: thin;
    	border-right-width: inherit;
    	color: #FFFFFF;
    	visibility: visible;
    	width: 403px;
    	overflow: visible;
    	vertical-align: middle;
    	text-align: center;
    }
    #info{
    	position:absolute;
    	height:71px;
    	z-index:1;
    	left: 305px;
    	top: 94px;
    	background-color: #31306B;
    	border-bottom-style: none;
    	border-right-style: none;
    	border-bottom-width: thin;
    	border-right-width: inherit;
    	color: #FFFFFF;
    	visibility: visible;
    	width: 99px;
    	overflow: visible;
    	vertical-align: middle;
    	text-align: center;
    }
    #valeur{
    	position:absolute;
    	z-index:1;
    	left: 305px;
    	top: 169px;
    	visibility: visible;
    	overflow: hidden;
    	width: 403px;
    	vertical-align: middle;
    	text-align: center;
    	height: 65px;
    	background-repeat: no-repeat;
    	background-color: #31306B;
    }
     
    #menu0{
    	position:absolute;
    	z-index:1;
    	left: 410px;
    	top: 132px;
    	background-color: #31306B;
    	color: #FFFFFF;
    	visibility: visible;
    	width: 297px;
    	overflow: visible;
    	vertical-align: middle;
    	text-align: left;
    	height: 33px;
    }
    #zone_large{
    	position:absolute;
    	z-index:1;
    	left: 3px;
    	top: 94px;
    	color: #FFFFFF;
    	visibility: visible;
    	overflow: visible;
    	width: 298px;
    	background-color: #31306B;
    	text-align: center;
    	vertical-align: middle;
    	height: 209px;
    }
    #pub{
    	position:absolute;
    	z-index:1;
    	color: #FFFFFF;
    	visibility: visible;
    	overflow: visible;
    	width: 296px;
    	vertical-align: middle;
    	text-align: center;
    	height: 126px;
    	left: 410px;
    	top: 2px;
    	background-color: #31306B;
    }
    Est-ce possible ?

    (Merci à HiRon et Dayan pour les précédentes réponses)

  6. #6
    Membre Expert
    Profil pro
    Inscrit en
    Mars 2002
    Messages
    1 132
    Détails du profil
    Informations personnelles :
    Âge : 53
    Localisation : France

    Informations forums :
    Inscription : Mars 2002
    Messages : 1 132
    Par défaut
    Pourquoi ne pas les mettre PHYSIQUEMENT dans main_center_calque ?

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

Discussions similaires

  1. [CS3] Déplacer un ensemble de calques
    Par l7008 dans le forum Dreamweaver
    Réponses: 8
    Dernier message: 03/02/2009, 22h25

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