28172 sujets

CSS et mise en forme, CSS3

Ombres latérales sur page "semi-responsive"

Bonjour à tous,
J'ai quelques soucis à intégrer ma page : je souhaite faire une page avec une ombre à doite et à gauche (cf capture d'écran) http://img15.hostingpics.net/pics/772963ombreadroiteetagauche.jpg

J'aurais pu mettre un background-image avec mon ombre dans body, si ce n'est que j'ai eu la mauvaise idée de vouloir que mon site d'adapte avec différentes résolutions. (je n'ai pas mis ma rubrique dans Web Mobile et responsive web design car je n'utilise pas de media queries et autres techniques avancées)

J'ai essayé en utilisant un box shadow sur #page mais :
- Sous chrome et IE on aperçoit une ombre en bas (car box-shadow forme une box Smiley sweatdrop )
- j'ai un assenceur qui ne sert à rien si ce n'est à cacher l'ombre précédemment citée

Voila le lien vers la page problèmatique

Voila le html :
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
		<title>Test ombres laterales</title>

		<!--[if lt IE 9]>
  			<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
         <![endif]-->
        
		<link href="css/reset-yahoo.css" rel="stylesheet" type="text/css">
		<link href="css/test2.css" rel="stylesheet" type="text/css">

</head>


<body>

    <div id="page">&nbsp; 
    
    	<div id="main">
														
        	<div id="image">
        		<img src="img/hotel_prelude_home.jpg" alt="devanture d'hotel" width="570" height="325">
        	</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In diam neque, eleifend quis tincidunt sed, facilisis quis turpis. Sed neque justo, porttitor eu molestie ac, fermentum ut lorem. Donec et mattis ante. 
            </p>
            
        </div>    
   </div>	
														
         
	
</body>
</html>


Voila le CSS : 
#page {
    background-color: #FFFFFF;
    box-shadow: 0 0 15px #555;
				behavior: url(htc/PIE.htc);
	margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    max-width: 982px;
    height: 1000px;
    min-width: 589px;
    padding-bottom: 0;
    padding-top: 0;
}
#main {
    margin-top: 200px;
}
#image {
    background-color: #D17D3F;
    float: left;
    height: 335px;
    min-width: 300px;
    width: 60%;
}
#image img {
    float: left;
    height: auto;
    width: 100%;
}
#main p {
    background-color: #79002B;
    float: right;
    max-width: 34%;
    min-height: 275px;
    min-width: 200px;
    padding-bottom: 30px;
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 30px;
}



J'avais également essayé avec une background-image avant et après la #main en utilisant des div mais j'ai toujours un ascenseur et en plus les images réagissent mal lorsque je réduis ma fenêtre en largeur.

Je suis sûr ce problème depuis un moment et je ne sais pas si une solution est possible.
Pouvez-vous m'aidez ? Smiley smile
Modifié par JulienJolly (15 Jan 2012 - 14:09)
Administrateur
JulienJolly a écrit :
J'aurais pu mettre un background-image avec mon ombre dans body, si ce n'est que j'ai eu la mauvaise idée de vouloir que mon site d'adapte avec différentes résolutions.


Bonjour,

Et pourquoi ne pas mettre 2 background image à body ? Un à gauche et un à droite ?
Nouvel essai avec 2 background mais avec la largeur de la #page en pourcentage.

voila le CSS
body{
	background-image: url(../img/ombre1.jpg), url(../img/ombre2.jpg);
	background-position: 10%, 90%;
	background-repeat: repeat-y, repeat-y;
} 

#page {
	margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
	width: 77.4%;
    height: 1000px;
    min-width: 589px;
    padding-bottom: 0;
    padding-top: 0;

}
#main {
    margin-top: 200px;

}
#image {
    background-color: #D17D3F;
    float: left;
    height: 335px;
    min-width: 300px;
    width: 60%;
}
#image img {
    float: left;
    height: auto;
    width: 100%;
}
#main p {
    background-color: #79002B;
    float: right;
    max-width: 34%;
    min-height: 275px;
    min-width: 200px;
    padding-bottom: 30px;
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 30px;
}



C'est un peu mieux mais les ombres ne suivent pas tout à fait le #page et elles passent carrément en dessous au bout d'un moment à cause de la min-width de la #page.
Administrateur
Hello,

A quoi te sert #page exactement ?
Pourquoi appliques-tu les background sur body si #page est... ta page ?

Pourquoi ne pas utiliser exclusivement body comme corps de page (avec largeur et tout), puisque c'est son rôle ?
Tout à fait exacte tiens, je n'y avait pas pensé Smiley confused .
J'ai fait le changement mais le rendu est le même : décalage en fonction de la taille de la fenêtre et les background passent derrière la #main


<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
		<title>Test ombres avec 2 background</title>
		<!--[if lt IE 9]>
  			<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
         <![endif]-->
		<link href="css/reset-yahoo.css" rel="stylesheet" type="text/css">
		<link href="css/test5.css" rel="stylesheet" type="text/css">
</head>

<body>
      
    	<div id="main">
														
        	<div id="image">
        		<img src="img/hotel_prelude_home.jpg" alt="devanture d'hotel" width="570" height="325">
        	</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In diam neque, eleifend quis tincidunt sed, facilisis quis turpis. Sed neque justo, porttitor eu molestie ac, fermentum ut lorem. Donec et mattis ante. 
            </p>
            
        </div>    
	
</body>
</html>




@charset "utf-8";
/* CSS Document */

body {
    background-image: url("../img/ombre1.jpg"), url("../img/ombre2.jpg");
    background-repeat: repeat-y, repeat-y;
    margin-right: auto;
    margin-left: auto;
    min-width: 589px;
    width: 77.4%;
    background-position: 10% 50%, 90% 50%;
}
#main {
    margin-top: 200px;
}
#image {
    background-color: #D17D3F;
    float: left;
    height: 335px;
    min-width: 300px;
    width: 60%;
}
#image img {
    float: left;
    height: auto;
    width: 100%;
}
#main p {
    background-color: #79002B;
    float: right;
    max-width: 34%;
    min-height: 275px;
    min-width: 200px;
    padding-bottom: 30px;
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 30px;
}
bonjour,

peut-être que box-shadow cserait plus simple a mettre en oeuvre ?:
ex:
@charset "utf-8";

/* CSS Document */

html {height:100%;}

body {
min-height:100%;
padding:0;
margin:0 auto;
    min-width: 589px;
    width: 77.4%;
box-shadow: 0 0px 15px  gray;
}


Pour placer tes images de fond tu as un soucis avec min-width.<edit : sauf si tu appliques aussi un fond a html />

Cordialement,
GC
Modifié par gc-nomade (17 Jan 2012 - 11:51)
salut GC

min-height:100%;
ne marche pas. Je suis obligé d'appliqué une min-height en pixel ce qui donne plus ou moins le même résultat que ça (à l'époque j'avais mis le box shadow sur une div au lieu de body, mais ça ne change pas grand chose).
Il y a 2 chose que je n'aime pas : l’ascenseur sur le coté et l'ombre horizontal, en bas, qui apparaît sur Chrome.

Et je n'ai pas compris pour l'histoire des images de fond sur le html.

Du coup, temps qui passe oblige, je suis en train de faire le site en fixe. Smiley ohwell Pas de soucis dans ce cas.
bonsoir,

min-height:xx% ne fonctionne que si le parent direct a une hauteur déclaré dans les styles
(voir mon exemple : html = 100% + reset des marges => donc body fera au moins la hauteur de html , qui correspond a la hauteur de la fenêtre.

Dans ta page exemple , le min-height sur page n'a aucune reference => 100% de rien du tout = rien du tout Smiley smile

Pour les images de fonds.

Si tu met une image a 10% sur body + un min-width a body et aucune valeur a backgroun a html , le 10% se calera par défaut sur la largeur de la fenêtre et pas body.

Pour que tes fond declaré sur body suivent et colle a body, il faut mettre aussi un fond sur html . Dans ton cas un html{background:white;} suffira. Le navigateur calcul alors les zones d'affichage pour html et body séparément (probablement que cela ne sera plus un defaut dans les navigateurs futur).

je te suggere de virer #page , de te servir de body et d'appliquer le height:100% sur html avec un fond blanc puis le min-height:100% sur body avec tes images de fond ... ou un border-shadow . Smiley smile

J'opterais sur border-shadow, car pas de problème de calcul d'arrondis à +- 1pixel à attendre du navigateur.

Cordialement,
GC
re,

j'oubliais aussi de te rappeler les défauts des flottants. Sans precautions CSS de base , le parent dans le flux ne s'ajuste pas a l'espace qu'ils occuppent (voir clear, .clearfix, contexte de formatage, ...)

Cordialement,
GC
Bonjour GC,
Je n'avais pas réalisé la relation entre les min-height et les parents (débutant inside). De même, je ne maîtrise pas encore bien les conséquences de l'utilisation des float et comment palier à ces conséquences.
En tout cas, merci pour ces infos. Je vais essayer de mettre mon fichier à jour. Tout cela est très intéressant je trouve ^_^
Sujet clos
Aller à