Site 2 colonnes display: inline-block -> KO

Résolu
rjl Messages postés 543 Date d'inscription   Statut Membre Dernière intervention   -  
rjl Messages postés 543 Date d'inscription   Statut Membre Dernière intervention   -
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;      
 }



A voir également:

1 réponse

Réponse 1 / 1
rjl Messages postés 543 Date d'inscription   Statut Membre Dernière intervention   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
0

Discussions similaires

C'est quoi le site qui remplace coco chat
TP3 -
bazfile -

2 réponses