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 :

Redimensionnement automatique d'un div


Sujet :

Dimensionnement en CSS

  1. #1
    Membre confirmé
    Homme Profil pro
    Étudiant
    Inscrit en
    Octobre 2011
    Messages
    56
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Octobre 2011
    Messages : 56
    Par défaut Redimensionnement automatique d'un div
    Bonjour, voici mon soucis,

    l'affichage est bon


    mais lorsque je redimensionne le navigateur ça me donne ça.


    Comment puis-je faire en CSS pour que tous mes div se redimensionnent comme il faut ?

  2. #2
    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
    Bonjour,

    Pourrais-tu donner le code correspondant à tes images ?
    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

  3. #3
    Membre confirmé
    Homme Profil pro
    Étudiant
    Inscrit en
    Octobre 2011
    Messages
    56
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Octobre 2011
    Messages : 56
    Par défaut
    index.php:
    Code html : 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
    <html>
    	<?php include('include/head.php'); ?>
    	<body>
    		<div id="corps">
     
    <div id="menu">
    	<a href="index.php">ACCUEIL</a> 
    	<a href="inscription.php">OUVRIR UN COMPTE</a>	
    	<a href="help.php">AIDE</a>
    	<a></a>
    </div>
    			<?php include('include/menu_gauche.php'); ?>
     
    			<div id="centre">
     
    					<div id="Item">
     
     
    					</div>
     
    			</div>
    			<div id="bottom" onmouseover="javascript: hide();" onmouseout="show();">
    	Shop-Soft &copy <img src="img/g36c_ico.gif" />
    </div>
    		</div>
     
     
     
    	</body>
     
    </html>

    style.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
    body
    {
    	background-color: #E6E6E6;
    	/*background-image: url('../img/g36c.gif');*/
    	background-repeat: no-repeat;
     
    	font-family: Arial Gras;
    	font-size: 12px;
     
    }
     
    #corps
    {
     
    	margin-left: 10%;
    	margin-right: 10%;
    	margin-top: 5%;
    	margin-bottom: 5%;
     
     
    	background-color: white;
    	border: 1px solid black;
     
    }
     
    #menu
    {
    	text-align: center;
    	padding-top: 2%;
    	padding-bottom: 2%;
    	border: 1px solid black;
    }
     
    #menu a 
    {
    	color: blue;
    	text-decoration: none;
     
    	padding-left: 2%;
    	padding-right: 2%;
    	border-left: 1px solid blue;
    }
     
    #menu_gauche
    {
    	float: left;
     
     
    	text-transform: uppercase;
    	margin-right: 2%;
    	padding: 2% 2% 2% 2%;
    	border: 1px solid black;
     
    }
     
    #menu_gauche a
    {
    	color: black;
    	text-decoration: none;
    }
     
    #bottom
    {
    	position: fixed;
    	bottom:0;
    	left:0;
    	right: 0;
     
    	float: bottom;
     
    	text-align: center;
    	visibility: visible;	
    	background-color: white;
    	border: 1px solid black;
    }
     
    #centre
    {
    	height: 60%;
     
    	resize: both;
    	margin-left: 18%;
    	padding-top: 2%;
    	border: 1px solid blue;
     
    }
     
    #Item
    {
    	padding-top: 2%;
    	padding-bottom: 2%;
     
    	border: 1px solid green;
    }
     
    .rotate_left
    {
    	position: absolute;
    	top: 0;
    	left: 0;
    	-webkit-transform: rotate(-9deg);
     
    }
     
    .clickable
    {
    	cursor:  pointer;
    }
     
    .clickable_tab
    {
    	padding-left: 20%;
    	visibility: hidden;
    	display: none;
    	cursor:  pointer;	
    }
    menu_gauche.php:

    Code html : 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
    <div id="menu_gauche">
     
    	<span class="clickable" onclick="clickObj('REPLIQUE')" >répliques</span><br/>
    	<span id="REPLIQUE" class="clickable_tab" >
    		<a href="index.php">AEG</a><br/>
    		spring<br/>
     
    	</span>
    	<span class="clickable">pièces et accessoires</span><br/>
    	<span class="clickable">équipements tactiques</span><br/>	
     
    </div>
     
    <script language="javascript">
     
    	var actuel="cache";
     
    	function clickObj(s)
    	{
    		var a= document.getElementById(s);
     
    		if(actuel=="cache"){
    			a.style.visibility="visible";
    			a.style.display="block";
    			actuel="visible";
     
    		}
    		else{
    			a.style.visibility="hidden";
    			a.style.display="none";
    			actuel="cache";
     
    		}
     
    	}
     
    </script>

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198

  5. #5
    Membre confirmé
    Homme Profil pro
    Étudiant
    Inscrit en
    Octobre 2011
    Messages
    56
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Octobre 2011
    Messages : 56
    Par défaut re
    j'ai bien lu le post mais je ne vois pas quel div utilise des px, moi je n'utilise que des %

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    La DIV de gauche utilise des px.

    Quant à n'utiliser que des % cela a ces limites lors du redimensionnement, il est donc préférable d'adjoindre une min-width pour éviter justement les chevauchements.

Discussions similaires

  1. Réponses: 5
    Dernier message: 21/03/2014, 12h13
  2. redimensionnement automatique excel
    Par Invité dans le forum Macros et VBA Excel
    Réponses: 4
    Dernier message: 05/04/2006, 16h35
  3. Redimensionnement automatique textarea
    Par nico-pyright(c) dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 01/04/2005, 11h48
  4. [C#] [WinForms] Redimensionnement automatique d'une ListView
    Par Phenomenium dans le forum Windows Forms
    Réponses: 2
    Dernier message: 18/02/2005, 11h43
  5. [VB6] [Interface] Redimensionnement automatique
    Par ychalan dans le forum VB 6 et antérieur
    Réponses: 7
    Dernier message: 30/09/2002, 18h32

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