Assemblage de 2 images pour une bannière

**zoullou** · 11/12/2004, 21h06

Bonjour,

J'ai modifier un theme que j'ai rendu compatible XHTML 1.1 et maintenant je voudrais faire la meme chose mais sans 50 table par page

J'ai réussi à part une chose. Je ne sais pas comment (ou meme si c'est possible) réaliser une banniere composée de 2 images, une à gauche, une à droite et au centre remplire avec une couleur afin de faire la jointure avec les 2 images comme ceci : http://zoullou.free.fr/.

Mon probleme est donc simple : Comment avoir 2 colonnes de largeur fixe de part est d'autre d'une colonne centrale reprenant tout l'espace entre les 2 colonnes.

Bon en fait je ne suis pas sur que j'ai été aussi claire que ça

.

Merci d'avance

**troumad** · 11/12/2004, 21h23

Je dirais de mettre un div sur toute la largeur et dans ce div tu mets une image à droite et l'autre à gauche. La couleur de ce calque sera celle que tu souhaite avoir entre les images.
Voici un exemple pour les images :

Code :

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

1
2
<a href="http://validator.w3.org/check/referer"><img style="border:0;width:88px;height:31px;float:right" src="http://www.w3.org/Icons/valid-xhtml10"          alt="Valid XHTML 1.0!" />       </a>
   <a href="http://jigsaw.w3.org/css-validator/">  <img style="border:0;width:88px;height:31px;float:left" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" />             </a>

**McPeter** · 12/12/2004, 02h21

Salut

tu peux peut-être t'inspirer de ça => http://aide.blinckers-groups.com/squelette/structure_2_full.php

ou de ça =>

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
41
42
43
44
45
46
47
48
49
<?='<?xml version="1.0"?>'."\n"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr_FR" lang="fr_FR">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="Author" lang="fr" content="McPeter" />
	<title>cadre</title>
</head>
<style type="text/css">
*{ margin:0; padding:0; }
body{ padding:10px; }
#header{
 
}
#header .left, #header .right{ 
	padding:5px; width:200px; 
	background-color:#fff; 
	border:1px solid #6699CC; 
	color:#6699CC;
}
#header .left{ float:left; }
#header .center{
	float:none;
	padding:5px;
	background-color:#6699CC;
	border-top:1px solid #6699CC;
	border-left:1px solid #fff;
	border-bottom:1px solid #6699CC;
	border-right:1px solid #fff;
	color:#fff;
	text-align:center;
}
#header .right{ float:right; }
#content{ margin:10px 0 0; border:1px solid #6699CC; }
</style>
</head>
 
<body>
<div id="header">
  <p class="left">colonne gauche</p>
  <p class="right">colonne droite</p>
  <p class="center">colonne centrale</p>
</div>
<div id="content">
  et le reste
</div>
</div>
</body>
</html>

@++

**zoullou** · 12/12/2004, 09h33

pour votre aide.

J'ai finalement réussi en fixant (position:absolute

la position de mes 2 images ainsi que du bloc entre et en mettant une marge superieur au reste pour le décaler versle bas afin que ça ne chevauche pas ma banniere.

Il ne reste plus qu'a fignoler.

A+

**McPeter** · 12/12/2004, 17h08

position absolute ?
..
eu pkoi ?

**zoullou** · 12/12/2004, 20h59

Je fixe la position d'une image en haut a gauche, la seconde en haut a droite, et un div de hauteur identique a celle des images au millieu et hop ma banniere est niquel sous IE et firefox.

Si tu veut jetter un coup d'oeil : http://zoullou.free.fr/test/test.htm

A+

**McPeter** · 13/12/2004, 02h38

Si tu testes mes codes tu verras que tu n'as pas besoin de position:absolute
de plsu tu as un "bug" au niveau affichage sous IE avec ton "cadre" du milieu

@++

Assemblage de 2 images pour une bannière

CSS

Vue hybride

Discussions similaires

Partager

Partager