CSS div unter divs
Ich bin nicht geschickt im Umgang mit CSS, das ist eines meiner ersten Projekte. Ich habe versucht, einen CSS-Stil für einen regler habe ich noch, ich möchte so etwas wie dies:
Ich habe erfolgreich die inneren divs und die Taste divs, aber was mich beunruhigt, ist die Reihenfolge der Indizes für die nächsten/vorherigen Tasten auf dem Schieberegler.
Hier ist der HTML:
<div class="slider">
<div><a href="#" id="rhandle">></a></div>
<div><a href="#" id="lhandle"><</a></div>
<div id="loadingBar"></div>
<div class="slide">
<div id="leftSlide">
<h1>WhiteFox Template</h1>
<p>Buy this theme today with all features, All fonts included in this theme are for personal use only. <br />Detailed documentation included.</p>
<a href="#" class="button">Read More</a>
</div>
<div id="rightSlide">
<img src="images/slides/slide-1.gif" width="259" height="184" alt="slide-1 Image" />
</div>
<div style="height:0;line-height:0;display:block;clear:both;"></div>
</div>
und hier ist die CSS für den slider:
.slider {
height: 329px;
width: 794px;
background: #313131;
margin: 50px auto 80px;
color: #FFF;
}
.slider a#lhandle {
font-size: 24px;
color: #FFF;
background: #4bacfd;
width: 50px;
float: left;
height: 23px;
padding-top: 150px;
padding-bottom: 150px;
margin-top: 6px;
}
.slider a#rhandle {
font-size: 24px;
color: #FFF;
background: #4bacfd;
width: 50px;
float: right;
height: 23px;
padding-top: 150px;
padding-bottom: 150px;
margin-top: 6px;
}
.slider a#lhandle:hover,
.slider a#rhandle:hover {
color: #4bacfd;
background: #FFF;
border: 1px solid #4bacfd;
width: 48px;
height: 21px;
}
.slider #loadingBar {
background: #a0a0a0;
height: 6px;
}
.slider .slide {
height: 328px;
width: 793px;
position: relative;
}
.slider .slide h1 {
text-transform: uppercase;
font-size: 24px;
font-weight: bold;
margin-top: 50px;
margin-bottom: 25px;
}
.slider .slide div#leftSlide {
float: left;
width: 400px;
height: 328px;
}
.slider .slide div#rightSlide {
float: right;
height: 328px;
width: 280px;
}
.slider .slide img {
border: 1px solid #FFF;
margin-top: 25%;
margin-bottom: 25%;
}
.slider .slide p {
display: block;
text-align: justify;
margin-bottom: 30px;
margin-right: 30px;
margin-left: 30px;
font-size: 18px;
line-height: 28px;
}
Diese Weise die nächsten/vorherigen Tasten sind unterhalb des eigentlichen Inhalts, wenn Sie den Mauszeiger über Sie, Sie nicht zu ändern ":hover" - Stil. Ich habe tryied hinzufügen ein "z-index: 5" - Eigenschaft, aber das hat nicht funktioniert, wie kann ich das erreichen (Wenn es eine einfachere Möglichkeit gibt, lass es mich wissen).
Du musst angemeldet sein, um einen Kommentar abzugeben.
z-index
arbeiten, Sie müssen nur legen Sie eineposition
andere alsstatic
(was auch der Standardwert ist).Fügen Sie diese, um Ihre Griffe auf beiden Seiten:
Demo: http://jsfiddle.net/QYnVc/
Seite Hinweis: Sie können trim down eine Menge redundante CSS, indem Sie entweder über Allgemeine Klasse Namen für ähnliche Elemente, oder durch die Verwendung von mehreren Selektoren, die für eine Gruppe von CSS-Eigenschaften. Zum Beispiel:
Laut W3schools, die z-index Eigenschaft funktioniert nur, wenn die betroffenen Positionen' position - Eigenschaft festgelegt ist, um entweder absolute, relative oder festen.
Mit den Eigenschaften, die Sie haben könnten, um Sie neu zu positionieren die Elemente mit Links/*rechts* und top/*unten* Eigenschaften.
Es funktioniert gut mit einem
z-index
jedoch der z-index ist nur wirksam, auf positionierte Elemente, so müssen Sie auch fügen Sie so etwas wieposition:relative
um die Griffe.jsFiddle-Beispiel
CSS:
Auf einer Seite Hinweis: möglicherweise möchten Sie zu überdenken, wie Sie schon gelegt, unsere Folien, wie es zu sein scheint ein überschuss an Elementen und CSS.