Problème d'ombre CSS/HTML

J'ai un problème avec mon site. Je veux que l'ombre s'arrête à la fin de ma zone de texte.Problème d'ombre CSS/HTML

ShadowProblem http://i39.tinypic.com/k37o6h.jpg

HTML

<body> 
<div id="shadow" class="floatfix"> 

<div id="shadowleft"></div> 
<div id="shadowtop"><img src="img/shadowcornerleft.png" alt="hoek" id="shadowcornerleft" /><img src="img/shadowcornerright.png" alt="hoek" id="shadowcornerright" /></div> 
<div id="shadowright"></div> 
<div id="content">

Ceci est mon code CSS:

#shadow 
{ 
margin-left: auto; 
margin-right: auto; 
margin-top: 75px; 
width: 974px; 
} 

#shadowleft 
{ 
position: absolute; 
height: 100%; 
width: 27px; 
margin-top: 42px; 
background-image: url("img/shadowleft.png"); 
background-position: top left; 
background-repeat: repeat-y; 
} 

#shadowright 
{ 
position: absolute; 
height: 100%; 
width: 27px; 
margin-top: 12px; 
margin-left: 947px; 
background-image: url("img/shadowright.png"); 
background-position: top right; 
background-repeat: repeat-y; 
} 

#shadowtop 
{ 
width: 892px; 
height: 30px; 
margin-left: auto; 
margin-right: auto; 
margin-top: 45px; 
background-image: url("img/shadowtop.png"); 
background-position: 0 0; 
background-repeat: repeat-x; 
} 

#shadowcornerleft 
{ 
position: relative; 
left: -42px; 
top: 0; 
} 

#shadowcornerright 
{ 
position: relative; 
left: 850px; 
top: 0; 
} 

#content 
{ 
width: 920px; 
margin-left: auto; 
margin-right: auto; 
background-color: white; 
border-bottom: 1px solid #cccccc; 
}

Je pense que j'ai ce problème en raison de la "hauteur: 100%". Mais je ne sais pas comment le réparer.

Merci à l'avance Vincent

Source

2009-05-05 Vinzcent

Il y a une façon beaucoup plus simple de le faire. Faire une nouvelle image de fond 960px de large par 10px de haut qui a votre ombre de chaque côté de celui-ci. (Vous devrez peut-être modifier la largeur pour obtenir 920px de blanc au milieu des ombres sur les côtés)

Utilisez votre #shadow div ajouter que fond autour #content par exemple:

#shadow 
{ 
width: 960px; 
margin-left: auto; 
margin-right: auto; 
background: url(shadow-sides.png) repeat-y left top; 
}

Sinon, vous pouvez probablement faire votre #content div extensible par l'ajout min-height: 100%; à lui et un IE6 bidouille:

* html #content { height: 100%; }

Source

2009-05-05 11:40:31 roborourke

que vous utilisez une ombre sur un gradient vertical de cette technique ne fonctionne pas dans iE6 (en raison de sa mauvaise .png support de transparence), vous devrez donc choisir entre l'ombre et le dégradé pour ie6. – wheresrhys

Je descendrais la route d'amélioration progressive avec IE6 personnellement, mais il y a toujours http://www.dillerdesign.com/experiment/DD_belatedPNG/ - trie les arrière-plans png, y compris la répétition et la position dans IE6 en utilisant VML – roborourke

100% de la hauteur de l'ombre n'a pas la hauteur de compter 100% de sorte qu'il utilise le mode automatique. Donc, jusqu'à présent, je vois 3 façons de résoudre problème et aucun d'entre eux sont gentils comme il devrait être:

Réglage hauteur fixe sur div parent (mauvais si le contenu s'étend)
Utilisez le tableau 3x3 (mais encore une fois, les gens disent de ne pas utiliser les tableaux pour la mise en page)
Utilisez l'image d'arrière-plan double face pour remplir la div. 1px hauteur 974px largeur image bg avec répétition-y; (pas très élégant si la largeur du site change)

Source

2009-05-05 10:29:21

id dire que votre code HTML est erroné. Sa mauvaise pratique d'avoir à fermeture automatique div de

les enrouler autour de votre contenu et utiliser les positions marges négatives pour et arrière-plan pour obtenir l'effet qui enjambe la hauteur du contenu fluide

c'est un peu sudo, comme il a déchiré d'un autre site de la mine, mais ti devrait vous donner la base de la façon dont il devrait être fait

<div id="header"> 
<div class="wrapper"> 
<div class="inner"> 
... 
</div> 
</div> 
</div> 


    #header { 
height:100%; 
background:transparent url(../img/left-gradient.png) repeat-y scroll left center; 
margin:0 auto; 
max-width:60em; 
min-width:40em; 
padding-left:7px; 
text-align:left; 
width:60em; 
} 

#header .wrapper { 
background:transparent url(../img/right-gradient.png) repeat-y scroll right center; 
padding-right:7px; 
} 

#header .inner { 
background-color:#FFFFFF; 
}

Source

2009-05-05 16:26:45 nickmorss

Problème d'ombre CSS/HTML

Répondre

Questions connexes