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

Voxbone ? qui est-ce ?
fanfan54 -
djakool4 -

Bonjour,

J'ai reçu plusieurs appels aujourd'hui d'un n° de téléphone qui m'était inconnu (des numéros commençant par 09 48 ou 01 62 en général), après avoir recherché sur le net j'ai su qu'il s'agissait de VoxBone à Brussels. Je ne comprend pas comment ils peuvent me téléphoner alors que je suis à France télécom et orange et que je paie pour le stop secret, donc la personne devait se présenter.

Je me demande qui ils sont car, je n'ai rien compris. Y a T-il quelqu'un qui connait ? car j'étais absente et comment ils arrivent à passer outre "stop secret"

Merci pour l'explication

A vous lire Configuration: Windows 7 / Internet Explorer 9.0

158 réponses
C'est quoi le site qui remplace coco chat
TP3 -
bazfile -

C'est quoi le nom du nouveau site pour reprendre coco chat

2 réponses