Sujet Précédent Sujet Suivant

Site 2 colonnes display: inline-block -> KO

Résolu/Fermé
rjl Messages postés 543 Date d'inscription mardi 16 mars 2004 Statut Membre Dernière intervention 25 mai 2019 - Modifié par rjl le 17/08/2012 à 15:57
rjl Messages postés 543 Date d'inscription mardi 16 mars 2004 Statut Membre Dernière intervention 25 mai 2019 - 17 août 2012 à 16:31
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 mardi 16 mars 2004 Statut Membre Dernière intervention 25 mai 2019 49
17 août 2012 à 16:31
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

'Votre colis est dans le site de livraison qui dessert votre adresse' que faire
relakztek82 -
Unemeuf -

25 réponses
Colis en cours de transport vers votre site de livraison ?
Ninan_5568 -
senda -

8 réponses