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 :

Taille des div en fonction du contenu


Sujet :

CSS

  1. #1
    Membre habitué Avatar de frog43
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    342
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France

    Informations forums :
    Inscription : Mars 2006
    Messages : 342
    Points : 190
    Points
    190
    Par défaut Taille des div en fonction du contenu
    Bonjour,

    voila j'ai un div qui contient tout mon site et le contenu du site est dans une base de donée ...
    J'affiche le tout avec du php et la mise en page avec du css ...

    Mon problême est que je souhaite avoir la taille de mon dic qui s'agrandi avec le contenu ( de cette façon quand j'ajoute des truk dans ma base la taille du div s'agrandi) sa m'éviterait de la réglé à chaque fois et puis ce n'est pas la même sur toutes mas pages ...

    Alors une taille adaptable serait plus judicieus mais voilà je ne sais pas comment faire ....

    http://mine-auvergne.fr/ouvrage.php

    Par exemple pour ce site quand je rajoute un produit dans la base, il est bien afficher mais le div ne s'agrandi pas et il faut donc que je le fasse moi même ...
    Frog43

  2. #2
    Membre actif
    Inscrit en
    Novembre 2006
    Messages
    206
    Détails du profil
    Informations forums :
    Inscription : Novembre 2006
    Messages : 206
    Points : 231
    Points
    231
    Par défaut
    L'utilisation de position:absolute; est responsable de ce problème.
    Si on change la taille du texte, tout est à revoir.
    Si on réduit la taille de la fenêtre, il se passe des choses étranges.

    Il faut utiliser le flux soit avec la position par défaut, soit avec float (suivi d'un clear) pour que tout s'ajuste sans intervention...

    L'image en bas ne passe pas avec IE 6.

  3. #3
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    25
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Mai 2007
    Messages : 25
    Points : 28
    Points
    28
    Par défaut
    Copier le code aiderais a voir ou se situe le probleme.

    Ceci dit il ya de fortes chances que le probleme vienne simplement du fait que tu aie donné une valeur absolue a ton height (ex : 100, 200, 500, ex) ce qui fait que peu importe ce que tu ajoute, ca ne dépassera pas cette valeur la...

    essaye plutot de ne pas mettre de valeur pour ton height, ou si pour des raisons esthétiques tu veux que ton site utilise toute la longueur de ta page, ya toujours le min-height:100% que tu pourrais utiliser.


    Voila, peux difficilement en dire plus sans voir le code, meme possible que je sois dans le champ gauche...

  4. #4
    Membre habitué Avatar de frog43
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    342
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France

    Informations forums :
    Inscription : Mars 2006
    Messages : 342
    Points : 190
    Points
    190
    Par défaut
    Bon voilà,

    la page concernée est ici :

    http://www.designcreation.fr/ta/acceuil.php


    La précédente n'était qu'un exemple.

    Mon problême est comme vous pouvez le voir que lorsque le div qui contient les texte s'agrandi, le div qui contient tout s'agrandi aussi mais pas jusqu'au fond ...

    Si sa peut aider, voici le 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
    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
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    body{
    	background-color:#c2e9f4;
    }
     
    #site{
    	margin-left : auto;
    	margin-right : auto;
    	border : 0px;
    	width:975px;
    	z-index:1;
    }
     
    #contenu{
    	position:absolute;
    	top:0px;
    	width:975px;
    	min-height:100%;
    	background-color:#4771ab;
    	z-index: 2;
    	overflow: visible;
    }
     
    #banniere{
    	position:absolute;
    	background-image:url(../img/banniere.jpg);
    	background-repeat:no-repeat;
    	width:975px;
    	height:184px;
    	z-index: 4;
    }
     
    #drapeaufr{
    	position:absolute;
    	width:31px;
    	height:23px;
    	z-index: 6;
    	top:158px;
    	left:890px;
    }
     
    #drapeaugb{
    	position:absolute;
    	width:31px;
    	height:23px;
    	z-index: 7;
    	top:158px;
    	left:935px;
    }
     
    #logo{
    	position:absolute;
    	top:-8px;
    	left:0px;
    	z-index: 5;
    }
     
    .titre{
    	font-weight:bold;
    	color:#FFFFFF;
    	font-size:20px;
    }
    /*------MENU------*/
    #menu{
    	position:absolute;
    	background-color:#243188;
    	z-index:1;
    	top:0px;
    	width: 200px;
    }
     
    dl, dt, dd, ul, li {
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    }
     
    #menu dt {
    	cursor: pointer;
    	margin: 2px 0;
    	height: 20px;
    	line-height: 20px;
    	font-weight: bold;
    	color:#FFFFFF;
    	border-bottom: 1px solid white;
    	background:#243188;
    }
     
    #menu dd {
    	border-bottom: 1px solid white;
    	border-top:1px solid white;
    }
     
    #menu li {
    	text-align: center;
    }
     
    #menu li a, #menu dt a {
    	color: #ffffff;
    	text-decoration: none;
    	display: block;
    	border: 0 none;
    }
     
    #menu li a:hover, #menu dt a:hover {
    	background:#bf070e;
    }
     
    #fondmenu{
    	position:absolute;
    	top:0px;
    	left:0px;
    	min-height:100%;
    	background-color:#243188;
    	width:200px;
    	z-index: 3;
    }
     
    #conteneurmenu{
    	position:absolute;
    	top:186px;
    	width:200px;
    	z-index: 1;
    }
     
    #logodesign{
    	position:absolute;
    	z-index: 5;
    	top:400px;
    	left:71px;
    }
    Cordialement,
    Frog43.
    Frog43

  5. #5
    Rédacteur
    Avatar de marcha
    Homme Profil pro
    Développeur Web
    Inscrit en
    Décembre 2003
    Messages
    1 571
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Décembre 2003
    Messages : 1 571
    Points : 2 351
    Points
    2 351
    Par défaut
    c'est normal:
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <div style="position:relative; top:200px; left:220px; width:755px;">
    Tu demandes à ton contenu de se décaler de 200px vers le bas; c'est donc ce décalage que tu retrouves en bas.

    Autrement tu devrais suivre les consils donnés par Dan_A et revoir ton montage en supprimant les positions absolute. Tu dois aussi pouvoir supprimer le div #contenu qui fait double emploi avec le #site.
    Si ton code fait plus d'une ligne, c'est que tu as mal choisi ton langage !

  6. #6
    Membre habitué Avatar de frog43
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    342
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France

    Informations forums :
    Inscription : Mars 2006
    Messages : 342
    Points : 190
    Points
    190
    Par défaut
    Montage revu et corrigé mais pour un autre site ...

    Merci de votre aide.
    Frog43

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

Discussions similaires

  1. Changer l'aspect des dossiers en fonction du contenu
    Par black is beautiful dans le forum Windows XP
    Réponses: 8
    Dernier message: 05/07/2008, 22h04
  2. Cacher des div, disparition de leur contenu.
    Par guitou0 dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 25/03/2008, 11h53
  3. Sommer des cellules en fonction du contenu d'autres cellules
    Par jnmab dans le forum Macros et VBA Excel
    Réponses: 11
    Dernier message: 30/12/2007, 22h05
  4. problème pour fixer la taille des div dans template
    Par damien40 dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 24/05/2007, 11h05
  5. Réponses: 2
    Dernier message: 17/08/2005, 15h08

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