28173 sujets

CSS et mise en forme, CSS3

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 Smiley smile



<!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)
Je te l'ai envoyé en mp pour pas que le lien apparraisse sur le site.

Merci pour ton aide Smiley cligne
Salut,

@JCH, ici c'est une communauté, le problèmes des uns et les aides qui y sont apportées profitent à tous. Je ne trouve pas normale ta réponse :

a écrit :
Je te l'ai envoyé en mp pour pas que le lien apparraisse sur le site.


Si tu veux développer dans le secret, développe tout seul Smiley fache
Ah non ce n'est pas du tout pour cette raison que ne met pas le lien içi.

C'est juste que je voudrais éviter que le lien soit référencé sur google et apparraisse vu que c'est une url de test.
Si je voulais développer dans le secret je n'aurais pas mis mon code ci-dessus.

Enfin désolé d'avoir fait ça si c'est mal vu Smiley decu
Bonjour Smiley smile

En effet, les liens déposés sur le forum sont très vite référencés et j'ai un site qui reçoit des visiteurs alors qu'il n'est pas teminé Smiley confus

Il m'est donc arrivé de faire comme jch Smiley cligne

Toutefois, on pourrait essayer une autre solution, indiquer le nom du site sans mettre le lien Smiley lol exemple : monsite.com (ajoutez "www." pour accéder au site) et pour un sous-domaine, exemple : lesousdomaine.demonsite.com (ajoutez "http://" pour accéder au site).

Ainsi le lien ne devrait pas être pris en compte par les robots, qu'en pensez-vous ?

Tu as mangé du lion papyjo ? Smiley lol
Je n'ai pas bien compris, ton vide est vertical ou horizontal ?

Il provient de quoi ce vide, tes "div" ne se touchent pas ?
Avec le lien, ça me semble plus clair... mais on vérifie quand même Smiley lol

Sympa les graphismes...
Donc ton soucis est la jonction graphique entre l'entête et le corps de la page, la partie en jaune un peu plus claire, j'ai bon ?

Donc il y a une première image en fond en entête, puis une seconde image dessous (le damier). Pourquoi deux images si toutes cette zone est l'entête ?

C'est l'image du bas (le damier) qui devrait faire le lien au niveau du dégradé, non ?
donc en fait le problème n'est pas la couleur de l'image car je ne l'ai pas encore modifiée.
Le problème vient du fait qu'il faut que je la supperpose et que le contenu s'insère correctement. Donc c'est au niveau du css et du placement du div id= global1 que j'ai un problème.

N'hésites pas à me dire si tu comprends pas.

Merci
Tu veux superposer quoi sur quoi ? C'est vrai que j'ai du mal à te suivre Smiley confused désolé... On va bien finir par y arriver Smiley lol

Pour, par exemple superposer la div global1 sur la div global, as-tu essayé une marge négative ?
Je vais tenter ça demain matin, je te tiens au courant.
Sinon oui c bien la superposition de ces deux div que je souhaite mais que le contenu s'adapte bien en fait.
Bonjour Smiley smile

papyjo a écrit :
Non, je n'ai pas mangé du lion, je me mets au Tao Smiley lol


Smiley jap Le chemin est long et pavé d'embûches Smiley lol Smiley lol

jch a écrit :
Sinon oui c bien la superposition de ces deux div que je souhaite mais que le contenu s'adapte bien en fait.


Ok Smiley smile Je te l'avais dit qu'on avancerait Smiley cligne par contre, ce qui m'échappe encore, c'est le but, pourquoi vouloir ce chevauchement ? Tes graphismes devraient pouvoir s'accoler sans recourir à ça, non ?

Pour le contenu, de toute façon, je suppose que tu utiliseras des paragraphes "<p>" donc pour la mise en page, il suffit de mettre des marges. Eventuellement, si nécessaire, tu peux même définir une "class" pour le premier paragraphe qui pourrait ainsi avoir des marges différentes que les autres paragraphes...

Edité : J'oubliais, attention à la rédaction des messages sur le forum, il faut éviter le langage "sms" ; pour "c" on écrit "c'est" ici Smiley cligne
Modifié par dominique (27 Apr 2006 - 09:27)
En fait les graphismes ne peuvent pas s'accoler sans superposition tout simplement car le dégradé du fond du site se fait sur la partie haute du site.

Et comme j'ai besoin que la hauteur du site ne soit pas fixe j'ai donc recouru à cette image de 1 px de hauteur avec repeat-y mais le raccod entre les liserets et le fond n'était pas correct évidemment sur la partie où le degradé n'est pas terminé.
D'où la nécessité de superposer une image.

Je viens de mettre à jour le lien peux-tu jetter un coup d'oeil tu verras que le contenu ne se place pas où je le souhaite Smiley decu

Merci encore pour ton aide Smiley cligne
jch a écrit :
Ah non ce n'est pas du tout pour cette raison que ne met pas le lien içi.

C'est juste que je voudrais éviter que le lien soit référencé sur google et apparraisse vu que c'est une url de test.


utilise la balise meta <meta http-equiv="robots" content="none">

ou alors place un fichier robots.txt à la racine de ton site avec ce contenu

User-agent: *
Disallow: /
Disallow: index.html


ainsi aucun répertoire ne sera indexé