CSS Experts requis - problèmes avec la pile Z-Index dans ma conception de page

Question

Fondamentalement, j'ai quelques problèmes avec Z-Index. Bien que je ne sois pas génial chez CSS, je dirais que j'étais raisonnablement bon, mais je ne peux vraiment pas m'en sortir.

Vous verrez à l'adresse ...

http://howcode.com/code/

... que mon problème est que les liens dans les résultats retournés « populaires » ne sont pas cliquables ou quoi que ce soit. J'ai conclu que cela est dû à leur Z-Index étant foiré. J'ai dû bidouiller et modifier avec Z-Index pour obtenir les onglets - Popular, Top Rated, Featured etc. - pour montrer au-dessus de la div de codebg. Quand j'ai ajusté l'index Z de façon à ce que les résultats soient clairement au-dessus, ils ont agi comme d'habitude - du texte a pu être sélectionné, les images de classification ont plané, etc. Cependant, l'inconvénient était que mes populaires, Top Notés, les onglets en vedette ont tous été placés sous l'image de fond pour les résultats retournés.

Si quelqu'un peut poster une solution de contournement ou une modification à mon CSS qui serait très apprécié.

S'il vous plaît ne pas oublier c'est un site de test et de conception et d'autres URL ne fonctionnent probablement pas, je n'ai pas encore téléchargé de configs de base de données ou quoi que ce soit!

Attached sont quelques captures d'écran pour clarifier ce que je veux dire:

1. Voici ce que je veux arriver (pas que, en réalité, dans ce lien des captures d'écran ne sont pas cliquables, juste pour la démo mon point cependant): what i want http://i39.tinypic.com/20usq36.png

2. C'est ce qui arrive quand je régler les propriétés Z-Index (Je ne veux pas): oh noes! http://i39.tinypic.com/2z6hwsx.png

Merci à tous!

Answer 1

Vous devez supprimer ceci:

z-index: -1 !important; 

de votre classe .codebg, ce qui entraînera votre capture d'écran 2 ci-dessus. (En note, les enfants ne peuvent pas avoir un indice z plus élevé que leur parent, donc tout à l'intérieur .codbg est -1, derrière la page) Ensuite, vous devez corriger les images de l'onglet :) Le problème n'est pas qu'ils sont derrière le fond, c'est qu'ils sont transparents, et ont l'air plus sombre sur un fond plus sombre. Voici l'image (peut changer dans cette réponse une fois que vous mettez à jour, pointant directement à lui):

alt text http://howcode.com/images/tabs.png

Ils ont l'air bien ici à cause du fond blanc, mais si vous les ouvrez dans un éditeur, vous Je vais voir qu'ils sont transparents, il suffit de rendre les trois onglets complètement (ou au moins plus) opaques car cela semble être ce que vous recherchez.

Answer 2

pas la meilleure solution mais c'est parti.

1. à l'intérieur du div contenu déplacer les onglets div après codebg donc ce

<div id="content"> 
    <div id="tabs"> 
    </div> 
    <div id="codebg"> 
    </div> 
</div 

devient ce

<div id="content"> 
    <div id="codebg"> 
    </div> 
    <div id="tabs"> 
    </div> 
</div 

puis ajouter à #tabs

position: absolue; haut: 232px;

à #content

padding-top: 53px;

Ceci est une solution rapide et sale.sinon vous devez repenser votre mise en page tout

Answer 3

Vous pouvez également mettre votre background-image de code-bg sur content à la place, et d'ajuster la largeur du contenu et le rayon de la frontière