Site 2 colonnes display: inline-block -> KO

[Résolu/Fermé]
Signaler
Messages postés
543
Date d'inscription
mardi 16 mars 2004
Statut
Membre
Dernière intervention
25 mai 2019
-
Messages postés
543
Date d'inscription
mardi 16 mars 2004
Statut
Membre
Dernière intervention
25 mai 2019
-
Bonjour,

Mon site fonctionnait (cahin-caha) avec 3 colonnes en float.
J'ai voulu l'améliorer particulièrement au niveau CSS.
Au passage, j'ai découvert le display:inline-block qui m'a séduit et j'ai donc fusillé mes float pour cette solution...

Sauf que, même en étant revenu au minimum (suppression des éclatements de colonne, d'une partie des menus, etc...) ma structure ne fonctionne pas du tout et ma colreg ne veut pas venir à droite du menu (colgauche) en venant systématiquement dessous !

Je pense avoir simplifié et malgré cela ne comprends pas mon erreur !
Merci de votre appui. RJL2818

Je joins ma page HTML puis, plus bas le CSS.
<!DOCTYPE html>     
<html lang="fr"><head>     
<title>Accueil UTL Sud-Goëlo</title>     
<meta charset="utf8">             <!-- MàJ DoctPagesUTL.php  RJL2715 -->      
<link rel="stylesheet" type="text/css" href="../index_fichiers/CSS-UTL3c.css">     
</head><body>     
<div id="bloc-page">     
 <div id="colgauche">     
  <div class="cadnav-acc">     
   <div class="logUTLinit"><img class="logo-utl-acc" alt="Logo UTL base" src="index_fichiers/LogoUTL2.png"/></div>     
   <h1 class="menu-acc">Menu</h1><!-- Fin Menu -->     
   <nav class="menucorps">     
   <!--Fin menucorps --></nav>    
    <img class="logo-22-acc cotarm" src="index_fichiers/100px-CA_22.gif" alt="Logo Côtes d'Armor"/>     
   <!-- Fin class basgch-acc2 --></div>      
  <!-- Fin class cadnav-acc  --></div>     
 <!-- Fin colgch --></div>     
 <div id="colreg">      
  <div id="logStQuay"><img alt="Image UTL StQuay" src="index_fichiers/ImageStQuay2.jpg" />     
  </div> <!-- <Fin "colreg" -->     
 </div>      
<!-- Fin Bloc-Page --></div>     
</body></html>


Page de CSS
/* éléments principaux de la page */     
#bloc-page {   /* Container global */     
 width : 100%;     
 height:100% ;     
 }      
p  {      
 font-size : medium;      
 }      
#colgauche {     
 display:inline-block;      
 width : 8%;    
 height : 90%;     
 margin:auto;     
 padding-right:1%;     
 }     
#colreg {     
 display: inline-block;     
 margin:auto;     
 padding-left:1%;    
 padding-right:1%;  
 width: 80%;     
 height:30%;     
 }     
#logStQuay {      
 display: inline-block;     
 margin:auto;   
 height:84%;     
 }      
.logUTLinit {     
 display:inline-block;     
 padding-left:4%;    
 max-width : 70%;   
 }      
.logo-utl-acc {     
 display:inline-block;     
 margin-top:10%;   
 padding-left:8%;     
 max-width:70%;    
 }      
.cadnav-acc {      
 display:inline-block;     
 max-width:100%;     
 margin:auto;     
 }      
.menu-acc {     
 padding-left:10%;  
 text-align : center;     
 color : rgb(153, 0, 0);      
 font-size : 160%;      
 line-height : 160%;     
 }      
.menucorps {               /* nav */     
 margin : auto;     
 color : brown;      
 padding-right: 6%;     
 font-size : 85%;      
 max-width : 80%;     
 line-height : 160%;      
 display : block;      
 }   



1 réponse

Messages postés
543
Date d'inscription
mardi 16 mars 2004
Statut
Membre
Dernière intervention
25 mai 2019
49
Re,

La solution m'est apparue lorsque je me suis rendu compte que l'alignement se faisait sur la base !

Ce n'était pas le cas nitialement car ces 2 inline-blocks venaient l'un sous l'autre ! J'avais modifié les largeurs en % pour obtenir cette première évolution.

J'ai ensuite ajouté un vertical-align:top; dans chacun des 2 inline-block et ce point s'est alors régularisé !
Merci de m'avoir lu RJL2817