28173 sujets

CSS et mise en forme, CSS3

Problème avec le css

Bonjour, je suis nouveau sur ce forum.

Je suis en train d'essayer de me familiariser avec le CSS mais je rencontre un problème sur l'une de mes pages.

Sur ma page http://usemines.webou.net/Joomla, j'ai modifié l'arrière plan en incluant une image (lignes horizontales grises et blanches) mais cet arière plan ne se met pas comme il faut. Il se positionne très bien sur la gauche mais sur la droite il passe outre de ma bordure (je vous invite à aller voir...) Quelqu'un sait-il me dire pourquoi? Et que dois-je faire pour y remédier? Je suis débutant, si ça tombe mon erreur est énorme! Voilà mon code:

#container
      {
        width: 100%;
	text-align: left;
	height: 100%;
	background-image: url(../images/plan.JPG);
	background-repeat: repeat;
	background-color: #dddddd;
    }  

#container1 {
	background-image: url(../images/right_border.jpg);
        background-repeat: repeat-y;
        background-position: right;
	}

#container2 {
	background-image: url(../images/left_border.jpg);
        background-repeat: repeat-y;
        background-position: left;
	}

#header  {
	background: #000000;
	height: 24px;
	border-bottom: 2px solid #cccccc;
	padding: 8px 30px;
	line-height: 24px;
    }


L'image "plan.JPG" correspond à mon arrièe plan.

D'avance merci pour votre aide Smiley cligne
Bonjour,

À vue de nez, la structure de départ était comme suit:
[b]HTML:[/b]
<body>
	<div id="container">
		<div id="container2">
			...
		</div>
	</div>
</body>

[b]CSS:[/b]
div#container {
background: url(mon-image-de-fond-qui-dessine-le-bord-droit.png) repeat-y left top;
}
div#container2 {
background: url(mon-image-de-fond-qui-dessine-le-bord-gauche.png) repeat-y right top;
}

Et tu as supprimé la première image de fond (bord droit) pour placer ton image de fond à toi.
CQFD.

Moralité: ne pas modifier un code qu'on ne comprend pas. Smiley cligne

Pour information, avec la structure actuelle de cette page il n'y a pas d'élément dont tu puisse modifier directement l'image de fond pour obtenir le rendu que tu souhaites. Il faudrait intervenir assez précisément sur le positionnement de certains éléments, et peut-être rajouter un bloc conteneur quelque part.
Des opérations à priori incompatibles avec la déclaration «Je suis en train d'essayer de me familiariser avec le CSS».
Modifié par Florent V. (21 Dec 2007 - 14:44)
donc impossible que mon fond d'écran ne s'affiche comme je le souhaite?
Impossible "d'arrêter" le fond d'écran à la bordure?
usemines a écrit :
Impossible "d'arrêter" le fond d'écran à la bordure?

Le problème, c'est que la bordure est l'image de fond. Si tu changes l'image de fond, plus de bordure.

On pourrait travailler avec un bloc différent, et obtenir l'effet voulu, mais le gabarit de page que tu utilises ne facilite pas du tout une telle modification. Si je devais faire cette modification, ça pourrait me prendre plus d'une heure, peut-être deux si je tombe sur un os. Et je suis loin de débuter en intégration HTML/CSS. Smiley cligne

Il y a donc deux solutions:
- soit tu veux réaliser un design précis, et tu commences à partir de zéro, en te formant progressivement et de manière plutôt complète;
- soit tu n'as pas le temps (ou l'envie) de te former de la sorte, et tu utilises un gabarit existant sans le modifier (ou en ne modifiant que les parties prévues pour, s'il y en a).

L'intégration web est un sujet technique qui demande des compétences non négligeables. Quand on plonge tête baissée dedans, il arrive qu'on tombe sur un problème insurmontable sans ces compétences. C'est le cas ici. Smiley smile
Sujet clos
Aller à