bandeau 3 col cliquables et centrage vertical

**chrhovine** · 24/05/2011, 09h28

Je cherche désespérément à réaliser ce qui suit:

avoir un bandeau de 100px sur toute la largeur de la fenêtre
dans ce bandeau, 3 zones (gauche, centre, droite) dayant 100px de haut
la zone gauche, largeur 200px, positionnée à l'extrême gauche, contient une image cliquable
la zone groite, largeur 150px, positionnée à l'extrême droite, contient aussi une image cliquable
La zone centrale doit être liquide et contient du texte fourni par un cms (joomla); ce texte doit être centré horizontalement et verticalement dans la zone, et l'ensemble de la zone doit être cliquable. (pas seulement le texte)
Et pour finir, cela doit tourner aussi bien sous FF que IE...

J'ai déjà tout essayé, mais il me semble qu'il y a des incompatibilités, entre autre:

Le centrage vertical peut être réalisé par display-table, mais <a> ne peut pas contenir d'élément bloc.
La technique des float permet 3 colonnes dont une liquide, mais avec des éléments inline qui ne supportent pas "height" qui est indispensable pour le centrage vertical.

Quelqu'un aurait-il des sugestions à me faire?

(je cherche depuis plusieurs jours, et je cale ! ! !)

Merci d'avance.
Christian.

**vaneck** · 31/05/2011, 19h21

Avec l'html ca serait plus clair.
Donc disons que t'as çà:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div id="bandeau"><a><img alt="" src="gauche.jpg"/></a><a><img alt="" src="droite.jpg"/></a>
<a href="kekchose.com"><p>
"Lorem ipsum dolor sit amet"
</p></a></div>

alors , il te faut ce style

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
 
*
{
padding:0px;
margin:0px;
}
 
#bandeau
{
height:100px;
}
 
img[src="gauche.jpg"]
{
float:left;
width:200px;
height:100%;
background:blue;
}
 
img[src="droite.jpg"]
{
float:right;
width:150px;
height:100%;
background:red;
}
 
p
{
text-align:center;
height:100px;
line-height:100px;  /* Ne marche que si le texte se limite à une ligne */
}
 
a
{
color:black;
text-decoration:none;
}

**chrhovine** · 01/06/2011, 17h08

J'ai essayé le code que tu as mis dans ta réponse, et il fonctionne effectivement dous FF

, mais pas du tout sous IE.

D'autre part, mon titre risque fort d'être multiligne. D'ailleurs dans la version définitive, ce titre sera rempli par un CMS... Mais je voudrais d'abord arriver à obenir l'effet voulu sur un fichier simple. (donc sans CMS)
ci dessous le mieux que j'aie pu avoir, qui fonctionne de façon identique sous IE et FF; mais le titre n'est pas vraiment centré verticalement.
Voici le code 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
div.bando {
	width: 100%;
	border: thin solid Blue;
}
.ecolier {
	float: left;
	margin-right: 10px;
	height: 100px;
	width: 180px;
	background-color: Red;
}
.carte {
	float: right;
	margin-left: 10px;
	height: 100px;
	width: 100px;
	background-color: Green;
}
.contenu {
	text-decoration: none;
	display: block;
	vertical-align: middle;
	height: 100px;
	overflow: hidden;
}
.contenu span {
	display: block;
	vertical-align: middle;
	margin: 0px;
	padding: 0px;
	width: 100%;
	margin-top: 15px;
}
.contenu p {
	top: 50%;
	text-align: center;
	vertical-align: middle;

Et le HTML:

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
  <body>    
    <div class="bando">        
      <a  href="lien_gauche" name="gauche">        
        <span class="ecolier">        
        </span> </a>      
      <a  href="lien_droit" name="droit">        
        <span class="carte">        
        </span></a>        
      <a  class="contenu" href="lien_central" name="centre">        
        <span >          
          <p>Lorem ipsum dolor sit amet consectetuer sed Donec iaculis pellentesque et. Hendrerit risus sapien a at pede dolor pretium elit congue consequat.            
          </p>          
        </span> </a>    
    </div>       
  </body>

Je ne sais pas s'il y a moyen de faire mieux... Sans doute que oui ! ! !
Merci de t'être penché sur cette question.
Christian.

**vaneck** · 01/06/2011, 21h51

Oui, on peut mieux faire. Cependant , je ne sais développer que selon les standards et ne connaît rien dans les (innombrables) bugs d'IE. Cependant ce css étant assez basique , il ne devrait plus avoir de problème a partie d'IE8.
Sur mon code , sur quels version d'IE a tu des bugs?

**chrhovine** · 01/06/2011, 23h00

Ben, malheureusement, c'est déjà IE9...
J'espérais aussi qu'il n'y ait plus de différence.

Je crois pourtant qu'on ne peut pas se passer d'être compatible avec IE car trop de gens l'utilisent. (surtout les non informaticiens) Comme le site auquel je travaille est une petite association qui travaille sur un projet humanitaire, on utilise ce site pour être visible par un max de monde, et donc aussi le surfeur lambda qui utilise IE.

**NoSmoking** · 02/06/2011, 10h45

Bonjour,
une approche avec display:table-cell, mais pas compatible IE7...

Remarque : un P dans un SPAN c'est pas géant.
- SPAN -> élément inline
- P -> élément block

bandeau 3 col cliquables et centrage vertical

Centrer un élément en CSS

Vue hybride

Discussions similaires

Partager

Partager