rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-28 20:52:21 +01:00
Code Issues Actions Packages Releases Activity

Improve rendering of carousel example for IE10

Browse Source
This commit is contained in:
Mark Otto 2012-12-03 13:01:27 -08:00
parent d470fb72da
commit 06582edb2a
1 changed files with 55 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
docs/examples/carousel.html
View File

@ -28,11 +28,17 @@
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
position: relative;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
margin-top: 20px;
margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
}
.navbar-wrapper .navbar {
}
/* Remove border and change up box shadow for more contrast */
.navbar .navbar-inner {
@ -71,24 +77,26 @@
}
.carousel .container {
position: absolute;
right: 0;
bottom: 0;
left: 0;
position: relative;
z-index: 10;
}
.carousel-control {
height: 80px;
margin-top: 0;
font-size: 120px;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
background-color: transparent;
border: 0;
font-size: 120px;
margin-top: 0;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
}
.carousel .item {
height: 500px;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
@ -98,7 +106,7 @@
position: static;
max-width: 550px;
padding: 0 20px;
margin-bottom: 100px;
margin-top: 200px;
}
.carousel-caption h1,
.carousel-caption .lead {
@ -219,7 +227,7 @@
.carousel-caption {
width: 65%;
padding: 0 70px;
margin-bottom: 40px;
margin-top: 100px;
}
.carousel-caption h1 {
font-size: 30px;
@ -263,8 +271,9 @@
<!-- NAVBAR
================================================== -->
<!-- Wrap the .navbar in .container to center it on the page and provide easy way to target it with .navbar-wrapper. -->
<div class="container navbar-wrapper">
<div class="navbar-wrapper">
<!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
<div class="container">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
@ -300,6 +309,7 @@
</div><!-- /.navbar -->
</div> <!-- /.container -->
</div><!-- /.navbar-wrapper -->