28172 sujets

CSS et mise en forme, CSS3

Problème fin de repeat-y

Bonjour !

Voilà, j'ai un background en repeat-y, et bizarrement quand je met un contenu dans ma page, et que je descend rien qu'un millimètre, le background s'arrête.. 

#tab {
	background: url(tab.png) repeat-y center;
	position:absolute;
	width: 100%;
	height: 100%;
	top:0%;
	left:0%;
}


Merci d'avance..
Voilà l'xhtml: 



<body>

<div id="tab"></div>

<div id="barre"></div>

<div id="bh"></div>

<div id="logo">

</div>

</body>


et voilà le css..

body {
	background: #e1e1e1;
	margin: 0;
	text-align: center;
	font-size: 1em;
	color: #5e5e5e;
}

#tab {
	background: url(tab.png) repeat-y center;
	position:absolute;
	width: 100%;
	height: 100%;
	top:0%;
	left:0%;
}


#logo {
	background: url(logo.png) no-repeat;
	position:absolute;
	width: 100%;
	height: 100%;
	top:20px;
	left:0%;
}

#barre {
	position:absolute;
	width: 100%;
	height: 100%;  
	top:0;
	left:0;
	background : url(bg_haut.jpg) repeat-x;
}

#bh {
	background: url(barre_haut.jpg) no-repeat center top;
	position:absolute;
	width: 100%;
	height: 100%;
	top:0px;
	left:0px;


  
  
}


Si ça ne vous aide toujours pas je le mettrai en ligne
Je pense qu'avant de vouloir résoudre ton problème, tu devrais revoir les base de la mise en page avec CSS.

Le positionnement absolu n'est pas logique de base pour le web, il peux d'ailleurs causer plus de problèmes qu'apporter de solutions.

Est-ce que tu as un example en ligne pour voir ce que tu souhaite faire.
Je sais mais le problème, c'est que quand j'en met un autre, l'image disparait (?)
Donc finalement pour faire mes tests je n'ai pas eu le choix..

Edit: Et le voilà en ligne: http://docxellweb.be/dwessais/

(Les .<br> étant pour pour descendre aisément dans la page)
Modifié par Docxell (10 Mar 2009 - 13:02)
Bon, alors pour commencer, se débarraser du positionnement absolu et imbriquer ce qui doit l'être : 

<body>
<div id="tab">
   <div id="barre">
      <div id="bh"></div>
   </div>
   <div id="logo"></div>
</div>
</body>


body {
	background: #e1e1e1;
	margin: 0;
	text-align: center;
	font-size: 1em;
	color: #5e5e5e;
}

#tab {
	background: url(tab.png) repeat-y center;
	width: 100%;
}

#logo {
	background: url(logo.png) no-repeat;
	margin-top:20px;
}

#barre {
	width: 100%;
	background : url(bg_haut.jpg) repeat-x;
}

#bh {
	background: url(barre_haut.jpg) no-repeat center top;
	width: 100%;
}


à affiner en fonction du besoin réel.

Je te conseille tout de même de jeter un coup d'oeil au gabarits de Florent (dans la Section Apprendre > Outils du site)
S'il n'y a pas de contenu, c'est normal.

D'ailleurs le logo devrait être dans le HTML et non dans la CSS.

EDIT : 
#tab {
background: url(tab.png) repeat-y;
width: 100%;
}

#logo {
background: url(logo.png) no-repeat;
margin-top:20px;
height:77px;
}

#barre {
width: 100%;
background : url(bg_haut.jpg) repeat-x;
height:la hauteur de ton image;
}

#bh {
background: url(barre_haut.jpg) no-repeat center top;
width: 100%;
height:la hauteur de ton image;
}


L'image tab n'apparait pas lorsque quelle est positionnée
Modifié par Laurie-Anne (10 Mar 2009 - 15:16)
Et c'est pas le but ?

EDIT : Petit oubli, mais bon : .barre doit également comporter la hauteur de l'image comme hauteur de div.
Modifié par Laurie-Anne (10 Mar 2009 - 15:17)
Non c'est pas le but Smiley langue

Comme il est pour le moment (http://docxellweb.be/dwessais/), c'est parfait, à part que le repeat-y doit être réellement infini :s
Modérateur
bonjour,

logiquement je mettrai ce fond a repeter dans body , mais du au positionnement absolue , body n'a pas de hauteur ... alors je ferais usage de html.
html {
	background:  #e1e1e1 url(tab.png) repeat-y center;
}
body {

	background:;
	margin: 0;
	text-align: center;
	font-size: 1em;
	color: #5e5e5e;
}

#tab {

	position:absolute;
	width: 100%;
	height: 100%;
	top:0%;
	left:0%;
}

en reportant dessus couleur de fond et image ...

Ceci dit , le positionnement absolue est a fuir tant qu'il n'a pas de raison valable ... et la je dirai , que ce gabarit des plus classiques peut s'en passer avantageusement.

GC
Modérateur
bon , si l'on s'arrete a ton background , je n'ai pas d'autre solution , solution qui te dit :

a écrit :
... mais du au positionnement absolue , body n'a pas de hauteur ...


As tu essayer d'aller un peu plus loin , en mettant du texte , des images ... dans tes differents conteneurs ?

Il te faut comprendre que le positionnement absolue empêche toute interférence entre tes éléments , que des hauteurs en pourcentages ont aussi besoin d'une valeur de référence (dimensions exprimée pour le parent direct ) , et plein d'autre chose.

En t'informant et en lisant quelques tutoriels il faut environ 2 mois pour appréhender l'usage d'un squelette html valide , liée les styles a ce squelette et organisé la structures des contenus , le flux et la fluidité naturelle , et les bases CSS (font , bordure , background, marge , padding et les flottants , position , commentaires conditionnels) . A partir de la tu sauras deja mieux posé les bonnes questions et comprendre les réponses .
puis encore 4 mois pour approfondir tout ça et aller plus loin ( les feuilles de style destinée aux différents médias , specifité ou bugs des differents navigateur ) soit patient donc et prend le temps d'apprendre et de comprendre Smiley smile .

Maintenant tu peut acquerir ces notions en moins de 6 mois bien sur en t'y mettant tout les jours , mais bon vaut mieux laisser les choses venir tranquillement ... mais je n'ose même pas te proposer un gabarit au risque de te rendre les choses encore plus confuses Smiley smile

GC
Désolé de te dire ça mais ... c'est un travail de fin d'étude, et je dois l'avoir fini dans moins de deux mois, et là je suis vraiment qu'au début... si j'avais eu le temps de faire recherches, je les aurais faites Smiley lol

Là je ne comprends seulement pas pourquoi il n'y à que absolute qui fonctionne? Je me doute bien que le problème vient de là...

Enfin je vais pas m'énerver avec ça: je l'ai fait en html comme tu me l'ai conseillé au dessus, et ça fonctionne.
Modifié par Docxell (11 Mar 2009 - 13:40)
Sujet clos
Aller à