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 :

Aligner des div


Sujet :

Positionnement en CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Profil pro
    Inscrit en
    Février 2008
    Messages
    293
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Février 2008
    Messages : 293
    Par défaut Aligner des div
    Bonjour à vous tous,


    Voilà 3 jours que j'essaie d'aligner 3 div les unes à côté des autres, mais la 3em(menu droit) se met bien à droite des 2 autres mais en-dessous alors que j'utilise le FLOAT
    ci-joint mes fichiers pour un coup d'oeil
    Fichier html:
    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
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>index4.html</title>
    <link rel="stylesheet" type="text/css" href="style_div4.css">
    </head>
     
    <body>
    <div id="bandeau"> Ceci est le bandeau </div>
    <div id="menu"> <div id="blocnews2">Bloc News2:<BR>Bonjour à tous </div>  menu gauche </div>
    <div id="contenu"><div id="blocnews"> Bloc News:<BR> portes ouvertes </div> Ceci est le contenu<p>Une pub gratos </div>
       <div id="menudroit"> <div id="blocnews3">Bloc News3:<BR>Bonsoir à tous </div> menu droit </div>
    </body>
    </html>

    Fichier 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
     
    /* CSS Document */
        div {
         text-align:center;
    	 }
    	 div#bandeau {
    	              width: 780px;
    		 height: 50px;
    		 background-color:#00ccff;
    		       }
    	 div#menu{
    	                float:left;
    		  width:150px;
    		  height: 600px;
    		  background-color:#FF6699;
    		  clear:both;
    		  }
     
    	      div#blocnews2{
    	      float:left;
    		  width:150px;
    		  height: 150px;
    		  background-color:#FF3300;
    		             }
     
    	 div#contenu{
     
    	              width: 620px;
    		 height: 600px;
    		 background-color: #FFCC00;
     
    		 }
     
    	      div#blocnews{
    	               float:right;
    		  width:150px;
    		  height: 150px;
    		  background-color:#FF3300;
    		              }	  	 	
    	div#menudroit{
    	                float:right;		   
    		  width:160px;
    		  height: 600px;
    		  background-color:#FF6699;
    		  		  		  }	 
    	      div#blocnews3{
    	                float:right;
    		  width:150px;
    		  height: 150px;
    		  background-color:#FF3300;
    		              }
     
    	</div>
    Mes plus vifs remerciements pour votre aide précieuse.

    Claudine

  2. #2
    Invité
    Invité(e)
    Par défaut
    Bonjour Claudine,
    je t'invite à lire cet article :




    La première chose à faire, en effet, est de BIEN STRUCTURER les éléments HTML de la page.
    Cela évite bien des déboires et complications par la suite !

    L'utilisation de balises sémantiques HTML5 (<header>,<section>,<article>,<nav>,...) est aujourd'hui incontournable pour avoir un site moderne, et surtout optimisé (référencement).

    N.B. INDENTER proprement son code en améliore la LISIBILITE (hiérarchie, imbrication des balises).

    Le CSS vient après.

  3. #3
    Membre chevronné
    Avatar de Jacques Beauregard
    Homme Profil pro
    Développeur Java
    Inscrit en
    Mai 2015
    Messages
    231
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Développeur Java
    Secteur : Conseil

    Informations forums :
    Inscription : Mai 2015
    Messages : 231
    Par défaut
    Bonjour,

    Voici un lien Jsfiddle : https://jsfiddle.net/2dtjjupe/
    Il met en relief un exemple d'alignement d'éléments "block".
    J'ignore si cet alignement est celui que tu souhaites.
    De plus es-tu fâché avec l'indentation de code^^?
    Il ne faut jamais prendre les gens pour des cons, mais il ne faut pas oublier qu'ils le sont...

    Le guide du débutant pour apprendre à programmer en Java - N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

  4. #4
    Membre éclairé
    Profil pro
    Inscrit en
    Février 2008
    Messages
    293
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Février 2008
    Messages : 293
    Par défaut
    bonjour Jreaux62
    Merci pour tous ces renseignements pratiques que j'ai examiné avec attention. Cependant, vu mon âge, il devient difficile d'assimiler un tel volume. Je préfère des doses homéopathiques quand le besoin s'en fait sentir. Bref, j'ai remis un peu d'ordre aux codes et vous prie d'être indulgent et si besoin d'apporter une petite correction (un exemple vaut mille textes).
    Ci-dessous ma correction:
    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
    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
    <!DOCTYPE html 
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>bandeau+ 3 div</title>
     
    <Style type="text/css">
    /* CSS Document */
     div {
         text-align:center;
    	 }
    	 div#bandeau {
    	     width: 780px;
    		 height: 40px;
    		 background-color:#00ccff;
    		 }
     
    	 div#menu{
    	      float:left;
    		  width:150px;
    		  height: 600px;
    		  background-color:#FF6699;
    		  clear:both;
    		  }
     
    	     div#blocnews2{
    	      float:left;
    		  width:150px;
    		  height: 150px;
    		  background-color:#FF3300;
    		  }
     
    	 div#contenu{
    		 width: 620px;
    		 height: 600px;
    		 background-color: #FFCC00;
     
    		 }
     
    	   div#blocnews{
    	      float:right;
    		  width:150px;
    		  height: 150px;
    		  background-color:#FF3300;
    		  }	
     
    	div#menudroit{
    	      float:right;		   
    		  width:160px;
    		  height: 600px;
    		  background-color:#FF6699;
    		  }	 
    	   div#blocnews3{
    	      float:left;
    		  width:150px;
    		  height: 150px;
    		  background-color:#FF3300;
    		  }
     
     </div>
    </Style>
    </head>
     
    <body>
       <div id="bandeau"> Ceci est le bandeau </div>
     
       <div id="menu"> 
             <div id="blocnews2">Bloc News2:<BR>Bonjour à tous 
    		 </div>  menu gauche        
       </div>
     
       <div id="contenu">
             <div id="blocnews"> Bloc News:<BR> portes ouvertes 
    		 </div> Ceci est le contenu<p>Une pub gratos 
       </div>
     
       <div id="menudroit"> 
             <div id="blocnews3">Bloc News3:<BR>Bonsoir à tous 
    		 </div> menu droit 
       </div>
     
     
    </body>
    </html>
    Je repose la même question: Pourquoi la 3em div (menu droit) se met bien à droite des 2 autres mais en-dessous alors que j'utilise le FLOAT.

    Claudine

  5. #5
    Membre chevronné
    Avatar de Jacques Beauregard
    Homme Profil pro
    Développeur Java
    Inscrit en
    Mai 2015
    Messages
    231
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Développeur Java
    Secteur : Conseil

    Informations forums :
    Inscription : Mai 2015
    Messages : 231
    Par défaut
    Bonjour,
    Tu n'as pas réagi sur le code que je t'ai fourni : j'en déduis que tu ne l'as pas vu. Et vu "ton jeune âge" comme tu dis : il est indispensable de prendre du temps à bien lire les articles qui te sont fournis.
    De plus :
    Citation Envoyé par Claudine Voir le message
    Rien ne te choque?
    Il ne faut jamais prendre les gens pour des cons, mais il ne faut pas oublier qu'ils le sont...

    Le guide du débutant pour apprendre à programmer en Java - N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

  6. #6
    Membre chevronné
    Homme Profil pro
    Formateur en informatique
    Inscrit en
    Septembre 2012
    Messages
    416
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Formateur en informatique
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Septembre 2012
    Messages : 416
    Par défaut
    Bonjour,

    Enlevez le </div> qui se trouve juste avant </Style>

    Enlevez le clear:both de div#menu

    Ajoutez float:left à div#contenu


    Après vous n'aurez plus qu'à ajuster les largeurs des différents blocs.

Discussions similaires

  1. Alignement des div et leurs contenu!
    Par redah75 dans le forum Mise en page CSS
    Réponses: 28
    Dernier message: 09/09/2009, 17h33
  2. alignement des div
    Par -Neo- dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 19/03/2008, 15h59
  3. Alignement des divs
    Par k-koo dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 15/01/2008, 19h56
  4. Aligner des div horizontalement
    Par abir84 dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 13/12/2007, 15h02
  5. Aligner des <div>
    Par Sourrisseau dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 10/12/2006, 19h44

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