Bonjour,
Voilà depuis deux jours je suis perdu avec une interface que je fais en css.
Je vais tenter d'expliquer le plus clairement possible.
Donc le background du body est une image de 1px de largeur sur 2500 de hauteur.
Cette image est un dégradé qui commence par du orange en haut et se termine par du jaune en bas mais le dégradé n'est que sur la partie haute de l'image.
Les bords de l'interface du site sont en dégradés dans la partie haute venant se fondre dans le site avec un lisseret de chaque côté.
Donc pour le header et le footer c'est ok.
Pour la partie centrale du site j'ai créé une image de 780px de largeur sur 1px de hauteur.
Le problème que je rencontre c'est qu'entre le header et la partie centrale du site il y a un espace ou l'interface ne colle pas correctement aux couleurs du fond du site.
J'ai donc créé une image qui vient se coller à cette espace afin que le dégradé colle bien avec le fond du site et qui devrait se superposer au niveau top de la partie centrale du site.
Le problème c'est au niveau du contenu lié à la partie centrale car il faut que je puisse placer du contenu mais que ce contenu ne soit pas uniquement lié dans le conteneur de cette image et qu'il continue sur la partie centrale avec l'image de 1px. Ou inversement que le contenu ne s'affiche pas uniquement dans la partie centrale sous l'image de raccord superposé.
Merci de me filer un coup de main
Modifié par jch (26 Apr 2006 - 14:36)
Voilà depuis deux jours je suis perdu avec une interface que je fais en css.
Je vais tenter d'expliquer le plus clairement possible.
Donc le background du body est une image de 1px de largeur sur 2500 de hauteur.
Cette image est un dégradé qui commence par du orange en haut et se termine par du jaune en bas mais le dégradé n'est que sur la partie haute de l'image.
Les bords de l'interface du site sont en dégradés dans la partie haute venant se fondre dans le site avec un lisseret de chaque côté.
Donc pour le header et le footer c'est ok.
Pour la partie centrale du site j'ai créé une image de 780px de largeur sur 1px de hauteur.
Le problème que je rencontre c'est qu'entre le header et la partie centrale du site il y a un espace ou l'interface ne colle pas correctement aux couleurs du fond du site.
J'ai donc créé une image qui vient se coller à cette espace afin que le dégradé colle bien avec le fond du site et qui devrait se superposer au niveau top de la partie centrale du site.
Le problème c'est au niveau du contenu lié à la partie centrale car il faut que je puisse placer du contenu mais que ce contenu ne soit pas uniquement lié dans le conteneur de cette image et qu'il continue sur la partie centrale avec l'image de 1px. Ou inversement que le contenu ne s'affiche pas uniquement dans la partie centrale sous l'image de raccord superposé.
Merci de me filer un coup de main
<!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" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
body {
/* margin: 0;*/
padding: 0;
/* margin-top: 2px;*/
background: url("images/background.gif") repeat;
}
#header {
position: relative;
width: 780px;
height: 136px;
background: url("images/header.jpg") left top no-repeat;
margin: 0 auto;
}
#header_menu {
position: relative;
width: 780px;
height: 104px;
background: url("images/header_menu.jpg") left top no-repeat;
margin: 0 auto;
}
#global {/*image par defaut de la partie centrale*/
width: 780px;
background: url("images/global2.gif") left top repeat-y;
margin: 0 auto;
z-index: 20;
}
#global1 {/* cadre pour relier le fond et la partie centrale*/
position: absolute;
top: 248px;
width: 780px;
height: 81px;
background: url("images/global1.jpg") left top no-repeat;
margin: 0 auto;
z-index: 10;
}
#footer {
width: 780px;
height: 122px;
background: url("images/footer3.jpg") left bottom no-repeat;
margin: 0 auto;
}
</style>
</head>
<body id="">
<div id="header"><br /></div>
<div id="header_menu"><br /></div>
<div id="global">
<div id="global1">contenu ?</div>
contenu
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div id="footer"><br />footer</div>
</body>
</html>
Modifié par jch (26 Apr 2006 - 14:36)