Wie erzwingen Sie CSS-Rahmen, um auf einer mehrschichtigen Seite angezeigt zu werden?

Ich versuche Box und Whiskers Graphen in HTML zu kodieren. Das Problem ist, dass ich ein div umgebe (wie in der Box), aber diese Ränder verschwinden, wenn die vorherige Ebene überlagert wird, die ein farbiges Bandbild enthält. Ich bevorzuge hier kein Hintergrundbild (oder Farben), wenn ich es vermeiden kann.Wie erzwingen Sie CSS-Rahmen, um auf einer mehrschichtigen Seite angezeigt zu werden?

Die HTML ist:


<table cellspacing="0" cellpadding="0" id="BoxAndWhiskers" width="100%"> 
<tr class="graphArea"> 
<td><div class="graphColors"><img src="ReadingColorScale.png" width="100%" height="250" alt="" /></div> 

<div class="graphBoxes"><img src="black.gif" width="2" height="50" alt="" class="Whisker" /><div class="graphBox"><img src="black.gif" width="100%" height="2" alt="" style="padding-top: 10px; padding-bottom: 10px;" /></div><img src="black.gif" width="2" height="50" alt="" class="Whisker" /></div></td> 
</tr> 
</table>

und die CSS ist:



table#BoxAndWhiskers tr.graphArea td { 
    width: 33%; 
} 

table#BoxAndWhiskers tr.graphArea td div.graphBoxes { 
    z-index: 1; 
    margin-top: -250px; 
} 

table#BoxAndWhiskers tr.graphArea td div.graphBoxes img.Whisker { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
} 

table#BoxAndWhiskers tr.graphArea td div.graphBoxes div.graphBox { 
    margin: 0; 
    padding: 0; 
    margin-left: auto; 
    margin-right: auto; 
    width: 50%; 
    border: 2px solid black; 
}

Beachten Sie die margin-top von -250px im CSS für div.graphBoxes. Wenn dies verringert wird, werden die Ränder um die Box herum angezeigt, wenn sie aus der vorherigen Ebene herausschauen.

Ist es möglich, die Grenzen in diesem Fall anzuzeigen? Danke ...

Quelle

2009-05-07 mwiik

Sie können ein Element nicht schichten, ohne es zu positionieren.

.graphBoxes { 
    position: relative; 
    z-index: 1; 
    margin-top: -250px; 
}

Quelle

2009-05-07 22:46:59

BTW - es gibt andere Probleme mit diesem Markup/CSS, aber ich weiß nicht genug darüber, wie zurückhaltend Sie sind. –

re die 33% Zellbreite; Ich entfernte 2 andere identische Zellen aus dem HTML. In jedem Fall hat dies behoben! Interessant, dass die Bilder der schwarzen Linie korrekt geschichtet wurden, aber die Positionserklärung hat dazu geführt, dass die div-Grenzen und die Hintergrundfarbe erscheinen. Vielen Dank!!! – mwiik

-1

Es ist schwer zu sagen, was genau passiert, ohne ein Bild zu sehen, aber ich denke, wenn Sie den Z-Index der Ebene oben auf 9999 erhöhen und dann die Ebene unter dem Z-Index ändern bis -100 sollte es wie erwartet funktionieren.

Quelle

2009-05-07 19:07:39 jacobangel

Z-Index gilt nur für positionierte Elemente (auch bekannt als position-property in CSS). –

Sie müssen wahrscheinlich nur Ihre Ränder und Polsterungen anpassen, damit die Ränder Ihren Wünschen entsprechen. Mein Tipp ist es, alle padding und margin zu entfernen, und

* { margin: 0; padding: 0; }

an der Spitze Ihres Sheet hinzuzufügen. Dann passen Sie alle Polsterungen und Ränder, Breiten und Höhen an, damit es so aussieht, wie Sie sich fühlen.

Beachten Sie, dass der Z-Index nicht für Elemente gilt, die im Stylesheet keine position-Eigenschaft haben.

Eine bescheidene Vermutung ist, dass Ihre negative Marge die Probleme verursacht.

Quelle

2009-05-07 20:37:52

Wie erzwingen Sie CSS-Rahmen, um auf einer mehrschichtigen Seite angezeigt zu werden?

Antwort

Verwandte Themen