18041 sujets

Questions générales et questions de débutants

Cacher un élément graphique à gauche du conteneur principal. [résolu]

Bonjour.

Mon conteneur principal fait 800px de large et est centré dans ma page. Je voudrais ajouter une effet d'ombre sur les côtés qui déborderait du conteneur mais qui n'affecterait pas le centrage du conteneur principal lorsque je redimensionne en 600x800

Pour être plus clair, je veux que cet ombre se cache à gauche de l'écran lorsqu'on est en 600x800, pour ne voir que le cadre principal.

Merci.

Voici mon code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Sahara by Free CSS Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>

<div id="conteneur">
	
	
		<div id="header">
			<h1>Titre</h1>
			<h2>slogan....</h2>
		</div>
	
		<div id="menu">
			<ul>
				<li><a href="#">Item 1</a></li>
				<li><a href="#">Item 2</a></li>
				<li><a href="#">Item 3</a></li>
				<li><a href="#">Item 4</a></li>
				<li><a href="#">Item 5</a></li>
			</ul>
		</div>
		
		<div id="content">
	
				<div id="colonne1">
				<h3>Lorem ipsum dolor</h3>					
				<p</p>
				
				<h3>Sit amet nullam</h3>
				<p></p>
			</div>
			
			<div id="colonne2">
				<h3>Lorem ipsum</h3>
				<ul>
					<li><a href="#">Lorem ipsum</a></li>
					<li><a href="#">Lorem ipsum</a></li>
					<li><a href="#">Lorem ipsum</a></li>
					<li><a href="#">Lorem ipsum</a></li>
					<li><a href="#">Lorem ipsum</a></li>
				</ul>
				<h3>Lorem ipsum</h3>
				<ul>
					<li><a href="#">Lorem ipsum</a></li>
					<li><a href="#">Lorem ipsum</a></li>
					<li><a href="#">Lorem ipsum</a></li>
					<li><a href="#">Lorem ipsum</a></li>
				</ul>
		  </div>
		</div>
		
		<div id="footer">
			<p>footer footer footer</a>.</p>
		</div>
		
</div>
</div>

</body>
</html>


Et voici la partie CSS:
*
{
	margin: 0;
	padding: 0;
}

a
{
	color: #8DA359;
	text-decoration: underline;
}

a:hover
{
	text-decoration: none;
}

body
{
	background-color: #F0E3A4;
	background-image: url('images/a4.gif');
	background-repeat: repeat-x;
	color: #37371E;
	font-family: georgia, serif;
	font-size: 12px;
}

#conteneur
{
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	background-color: #FEFEF2;	
	background-image: url('images/a3.gif');
	background-repeat: repeat-x;
	border-top: solid 1px #ffffff;
	margin-bottom: 20px;
}


<edit> Post édité selon les observations de Hermann. J'ai aussi changé mon 740px par 800px pour une meilleure compréhension de ce que je veux.
Modifié par largowin (16 Jan 2007 - 05:03)
Bonjour,
Comment veux tu cacher l'ombre gauche (si j'ai bien compris)
sur une largeur de 800 ou d'environ 780px (avec scrollbar) avec une largeur
de conteneur de 740px à laquelle s'ajoute 20pt (1em (padding) de 12pt x2)?
Tu devrais commencer par convertir les pt en pixels, les point ne sont pas
adaptés pour un affichage écran.
Modifié par Hermann (15 Jan 2007 - 14:28)
Tel qu'indiqué, j'ai changé quelques trucs à mon message original.

Bref, si je veux afficher un cadre pleine page de 800px (je ne me souviens pas exactement de la largeur maximale en 600x800) mais qu'à ce cadre, je veux ajouter une ombre qui apparaîtra seulement dans une plus grande résolution, comment puis-je positionner mon cadre principale pour faire en sorte que l'ombre de gauche (en particulier) demeure cachée en basse résolution?
Ok, personnellement j'utiliserais dans ce cas
le centrage via la position absolue:
JE ne suis pas certain que ça fonctionne mais essai quand même avec ça.
le code expliqué:

#conteneur
{
	position:absolute;
        width: 800px;
        left:50%; /*centrage du côté gauche du conteneur*/
	margin-left: -405px;  /*recentrage du conteneur : 800px/2 + 5px d'ombre portée*/ 
	top: 20px;
	background: #FEFEF2 url('images/a3.gif') repeat-x; /*propriété raccourci*/	
	border-top: solid 1px #fff;
	margin-bottom: 20px;
}


Attention cependant a la largeur de ton conteneur qui dépassera à droite
de la zone d'affichage si la scrollbar est présente, c-a-d si la hauteur de
ton conteneur dépasse environ 430px. Passer alors à 780 ou 775px.

J'ai rasseemblé tes déclarations de background dans une seule propriété raccourci.
voir http://pompage.net/pompe/raccourcisCSS
Modifié par Hermann (15 Jan 2007 - 18:49)
Bonjour,

Je dis peut être une bétise mais pourquoi ne pas donner une image à ton body en background-position: center horizontal; avec ta couleur de fond et ton ombre correctement placée et biensûr une largeur couvrant la résolution max pour 10 px de hauteur en repeat y.
Si la résolution augmente, elle devrait être toujours centrée et si tu atteinds la plus petite résolution, ton body "disparait".
Merci de votre aide!

Les deux méthodes semblent fonctionner toutes les deux.Je vais sans doute opter pour la méthode de Hermann, car j'ai une texture comme fond; il me faudrait à ce moment-là un fond répété à tout près de 2000px de large pour remplir tout mon écran.
Sujet clos
Aller à