[Résolu] Positionnement div avec largeur automatique

Bonjour,

J'ai un problème pour placer un div contenant une image de 1px sur 75px de haut qui se repête dans un conteneur.

Cela se passe ici : http://forum.blackeyes.fr/ <- Login : Test / Pass : test


Voici la partie incriminée :

/* Header Image */
#header {
   width:100%;
   margin: auto;
   height: 235px; /* ie5win fudge begins */
   voice-family: "\"}\"";
   voice-family:inherit;
   border: 1px solid black;
}

html>body #header {
   height: 245px; /* ie5win fudge ends */
}

#top_header {
   height: 75px;
   border: 1px solid yellow;
}


#top_header1 {
   height: 75px;
   width: 999px;
   background: url(images/Azumanga_01.png) no-repeat left top;
   border: 1px solid blue;
}

#img_inter1
{
   position: relative;
   left: 1031px;
   display: block;
   height: 75px;
   background: url(images/Azumanga_04.png) repeat-x right;
   border: 1px solid red;
}

 Code PHP de ma template.
<div id="header" ', $context['browser']['needs_size_fix'] && !$context['browser']['is_ie6'] ? ' style="width: 100%;"' : '', '>
      <div id="top_header">
         <div id="top_header1"></div>
         <div id="img_inter1"></div>
      </div>
   </diV>

Donc img_inter1 doit se trouver après top_header1 et elle se répête jusqu'a la fin de top header.

Donc 2 problèmes :

1 - Le positionnement
2 - Elle déborde le top_header et le header

Je ne veux pas utiliser de table. Je sais que c'est possible en css mais il doit y avoir une chose qui m'échape.

Merci d'avance.
Modifié par Squall (27 Mar 2007 - 10:36)

Bonjour,

L'idéal pour obtenir de l'aide serait :
- d'avoir une page en ligne qui ne demande pas d'identification (enregistrer une page qui pose problème et la mettre en ligne comme page statique, par exemple) ;
- donner un exemple (image) du rendu voulu, parce que là c'est un peu vague, ou du moins difficile à visualiser.

Florent V. a écrit :
Bonjour,

L'idéal pour obtenir de l'aide serait :
- d'avoir une page en ligne qui ne demande pas d'identification (enregistrer une page qui pose problème et la mettre en ligne comme page statique, par exemple) ;

Ok je ferai ça.

Florent V. a écrit :


- donner un exemple (image) du rendu voulu, parce que là c'est un peu vague, ou du moins difficile à visualiser.

Le rendu voulu, j'aimerai que le cadre noir contienne le cadre jaune qui lui contient le cadre bleu aligné avec le rouge qui a un image qui se répète jusqu'au bord du cdre jaune et noir. Quelle ne déborde pas.

Je mettrai un visuel cette AM.
Modifié par Squall (23 Mar 2007 - 12:17)

Voilà, la page en statique :

http://www.blackeyes.fr/essai/

Voici un screenshot de ce qui me gêne. Pointer par la flèche verte. Le cadre rouge doit s'arrêter au cadre noir ou pointe la fleche.

Franchement, tu sais quoi ? Supprime complètement cet en-tête, et refais quelque chose de moins bordélique.

Pourquoi donc avoir découpé l'image de ton en-tête en quatre images distinctes (dont une de 1px de large à répéter en largeur) ? C'est vraiment se prendre la tête pour rien, non ?

Une image du rendu voulu (image de maquette avant découpage, par exemple), et on en reparle.

Alors pourquoi j'ai découpé mon image. Tout d'abord l'image créé fait 1000px*235px.

Etant donné que le forum est en largeur 100%. Je désire avoir le header qui fasse 100% quelle soit la taille de la fenetre jusqu'a 1000px minimun.

Je peux réunir l'image complète et juste rajouter une 2e image a droite pour faire le 100%.

Voici l'image entière :



Donc ce que je veux c'est qu'a droite de cette image il y est un prolongement de l'image si la fenetre du navigateur est plus grande que la taille de l'image. Alors je pense la mettre à droite, mais ça va faire bizarre une partie vide. Peut-être faire un prolongement au milieu entre les personnages ?
Modifié par Squall (23 Mar 2007 - 16:44)

Salut,

Ben tu coupes ton image en 2 (au milieu ),
tu fais une image correspondante à 10px de large de ton centre (entre les 2 personnages).
tu prépares un bloc de hauteur égal a ton entête et de width: 100% (pas nécessaire, c'est juste pour la compréhension), tu y places en background ton image de centre en repeat-y et dans le code html, à droite ta partie droite de ton image (float: right ou absolute) et à gauche la partie gauche (float: left ou absolute).

Si ton header se déploie, le width du bloc suivra , l'image de gauche restera à gauche et celle de droite à droite laissant apparaitre le background en fonction de l'écartement... Bon appétit

Merci host pour ton aide. ça marche.

Mais j'ai maintenant un autre problème. Le cadre gris déborde du header.

Et quand on redimensionne la fenetre, le cadre gris et rouge ne reste pas en position. Alors qu'il ne devrait pas.

Re,

Bon,

<style type="text/css">
*{margin: 0; padding: 0;}
#header{
height:235px;
border: 1px solid black;
margin-top: 50px;
background: url(header_centre.jpg);
}

#header_droite{
float: right;
}

</style>

</head>
<body>

<div id="header">
	<img src="header_droite.jpg" id="header_droite" alt="" />
	<img src="header_gauche.jpg" alt="" />
</div>
</body>

Là tu devrais être bon à partir de 800x600

Bon pour les images ont va dire que c'est pratiquement bon sous firefox. Le seul problème et le chevauchement de la droite sur la gauche.

Et le texte gris déborde toujours.

Et sous ie6, l'image gauche descend. sous ie7, je sais pas je ne l'ai pas.

En tout cas merci de ton aide ghost.

Squall a écrit :
Et le texte gris déborde toujours.

Le bloc jaune est positionné en absolu, donc non limité par son conteneur.
Il a pour enfant le texte encadré de gris, flottant à droite.
Un élément flottant à droite ira se placer le plus à droite possible dans son conteneur. Si ce conteneur a une largeur qui dépend de son contenu (comme c'est le cas pour un flottant ou un élément positionné en absolu), ça peut donner des choses étranges.

Sinon, le bloc flottant qui permet de placer l'image de droite passe à la ligne si on n'est pas au moins en 1280px de large... pas glop.
Solution : ne pas utiliser de flottant ici, ça n'est pas adapté.

Pour ma part, je ferais quelque chose de beaucoup plus simple.
On a besoin de trois images de fond pour un même bloc. Comme ça n'est pas possible en CSS 2.1, on va être obligé d'imbriquer trois blocs :

[b]HTML :[/b]
<div id="entete"><div id="entete-2"><div id="entete-3">
	...
</div></div></div><!-- fin de div#entete -->

[b]CSS :[/b]
div#entete {
	margin: 20px;
	height: 235px;
	border: solid 1px black;
	background: #99f url(entete-fond.png) repeat-x center top;
}
div#entete-2 {
	height: 235px;
	background: url(entete-gauche.png) no-repeat left top;
}
div#entete-3 {
	position: relative;
	height: 235px;
	background: url(entete-droite.png) no-repeat right top;
}

Le troisième bloc est positionné en relatif (sans rien changer à sa position dans la pratique) pour pouvoir servir de référent pour ses enfants positionnés en absolu.

Mais normalement on ne devrait pas avoir besoin de beaucoup utiliser le positionnement absolu. Même si ici ça pourrait être efficace pour placer les trois éléments de contenu de l'en-tête.

Merci à tous les deux pour votre aide.

En effet la soultion de Florent, est plus simple. Et là, j'arrive au bon résultat.

Seul hic, c'est quand on réduit complètement la largeur de la fenêtre, il y a chevaugement des images.

Comment y remédier ?