Problemas al integrar el carousel de Bootstrap en mi página web

H

hamedm Seguir

Gamma
Programador
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
7 Ene 2013
Mensajes
193
Estoy tratando de integrar el carousel de bootstrap a mi pagina web, pero sale Mal, este es mi Codigo:
HTML: 
<!doctype>
<html>
<head>
<title>Nikan - Pagina Oficial</title>
<link rel="stylesheet" href="index.css" type="text/css">
<link href="carousel.css" rel="stylesheet">
<link href="bootstrap.css" rel="stylesheet">
</head>
<body>
<header>
	<div class="main">
        <img src="logo2.jpg">
    	<h1>
        Sabz Goltab
        </h1>
        	<nav>
            	<ul>
                	<li>
                    	<a href="index.php">
                        Inicio
                        </a>
                	</li>
                    <li>
                    	<a href="quienes.php">                        Quienes somos?
                        </a>
                 	</li>
                    <li>
                    	<a href="login.php">
                        Productos
                        </a>
                 	</li>
                     <li>
                    	<a href="contactenos.php">
                        Contactenos
                        </a>
                 	</li>
    		</nav>
   	</div>
</header>
<div id="myCarousel" class="carousel slide">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        <div class="item active">
          <img src="data:image/png;base64," data-src="holder.js/100%x500/auto/#777:#7a7a7a/text:First slide" alt="First slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>Example headline.</h1>
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <p><a class="btn btn-large btn-primary" href="#">Sign up today</a></p>
            </div>
          </div>
        </div>
        <div class="item">
          <img src="data:image/png;base64," data-src="holder.js/100%x500/auto/#777:#7a7a7a/text:Second slide" alt="Second slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>Another example headline.</h1>
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <p><a class="btn btn-large btn-primary" href="#">Learn more</a></p>
            </div>
          </div>
        </div>
        <div class="item">
          <img src="data:image/png;base64," data-src="holder.js/100%x500/auto/#777:#7a7a7a/text:Third slide" alt="Third slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>One more for good measure.</h1>
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <p><a class="btn btn-large btn-primary" href="#">Browse gallery</a></p>
            </div>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
    </div><!-- /.carousel -->
<section></section>
<footer><a href="index.html">Inicio</a> - <a href="contactanos.html">Contactanos</a></footer>

</body>
</html>
y este es el Codigo Css
HTML: 
body {
background-image:url(fondo-logo.jpg);
background-repeat:repeat;
padding:0;
margin:0;
font-family: Segoe UI;
}
a {
text-decoration:none;
color: #222;
}
header {
height: 90px;
width: 1345px;
background-color: #FFF;
margin: 5px 10px 5px 10px;;
position: absolute;
}
header a {
color:#000;
}
header .main {
width:980px;
height:80px;
margin:0 auto;
}
header .main img {
float: left;
height: 80px;
width: 80px;	
}
header .main h1 {
margin: 0;
padding: 0;
color: #1c95e6;
padding-top: 10px;
height: 70px;
width: 200px;
float: left;
font-family: Segoe UI;
text-align: center;
left: 100px;
}
header nav {
float:right;
width:700px;
height:80px;
}
header nav ul{
width:auto;
height:70px;
float:right;
padding:0;
margin:0;
list-style:none;
}
header nav ul:hover{
width:auto;
height:70px;
float:right;
padding:0;
margin:0;
list-style:none;
color: #fff;
}
header nav ul li {
float: left;
padding-bottom:5px;
padding-top:5px;
padding-left:5px;
padding-right:5px;
margin-top: 20px;
margin-left: 20px;
margin-right: 10px;
}
header nav ul li:hover{
float: left;
padding-bottom:5px;
padding-top:5px;
padding-left:5px;
padding-right:5px;
background-color: #1c95e6;
border-radius: 5px;
color: #FFF;
text-shadow:1px 1px rgba(204, 204, 204, 0.46);
}
header nav ul li:hover a{
color: #FFF;
}
section.cuadro {
width: 960px;
padding:10px;
height: auto!important;
margin:0 auto;
background: #F8F8F8;
border-bottom:1px solid rgba(217, 67, 67, 0.4);
}
section.cuadro tr td h2 {
padding:0;
margin:0;
margin-bottom:10px;
}
section {
width: 100%;
height: 420px;
background: #F8F8F8 url(imgs/bg.png);
border-bottom:1px solid rgba(217, 67, 67, 0.4);
}
section .ingresar {
padding: 20px;
background: red;
font-size: 24px;
color: white;
margin: 0 auto;
position: relative;
top: 170px;
width: 150px;
text-shadow: 1px 1px rgba(34, 34, 34, 0.31);
border-radius: 5px;
border: 5px solid rgba(0, 0, 0, 0.13);
}
section .ingresar a{
color:#fff;
}
section .login {
padding: 20px;
background: red;
font-size: 24px;
color: white;
margin: 0 auto;
position: relative;
top: 80px;
width: 300px;
height: 200px;
text-shadow: 1px 1px rgba(34, 34, 34, 0.31);
border-radius: 5px;
border: 5px solid rgba(0, 0, 0, 0.13);
}
section .login form input {
width: 300px;
padding: 10px;
border-radius:5px;
border:none;
}
section .login form input[type=submit] {
border-radius: 5px;
background: #FFE8E8;
font-size: 16px;
font-family: Segoe UI;
border: 1px solid #AFAFAF;
}
footer {
width:980px;
margin:0 auto;
overflow:hidden;
font-size:12px;
padding-top:10px;
}
footer a {
color: #CA3232;
}
footer a:hover {
text-decoration:underline;
}
.btnredlarge {
background: #FF5757;
padding: 5px;
text-align: center;
color: white;
border: 1px solid rgba(34, 34, 34, 0.19);
text-shadow: 1px 1px rgba(34, 34, 34, 0.21);
margin-top:5px;
}
.btnredlarge:hover {
background: #FF3838;
padding: 5px;
text-align: center;
color: white;
border: 1px solid rgba(34, 34, 34, 0.19);
text-shadow: 1px 1px rgba(34, 34, 34, 0.21);
cursor:pointer;
}
.ficha {
font-size:10pt;
}
.ficha h2 {
padding:0;
margin:0;
margin-bottom:10px;
}

#misnotas {
margin: 0 auto;
}
#misnotas tr:first-child {
font-size: 12px;
text-shadow: 1px 1px rgba(34, 34, 34, 0.09);
}
#misnotas tr {
text-align: center;
font-weight: bold;
font-size: 12px;
}
#misnotas tr td {
border:1px solid #222;
border-right:none;
padding:5px;
}
#misnotas tr td:last-child {
border-right:1px solid #222;
}
#btnregalm {
border-radius: 5px;
background: #FF9494;
padding: 5px;
border: 1px solid red;
color: white;
text-shadow: 1px 1px red;
}
#togregalm {
padding-left: 10px;
}
#btnregpro {
border-radius: 5px;
background: #94D4FF;
padding: 5px;
border: 1px solid #09F;
color: white;
text-shadow: 1px 1px #09F;
}
#togregpro {
padding-left: 10px;
}
#formcontacto {
font-family: Segoe UI;
font-weight: bold;
}
h1.quienes {
font-family: segoe ui;
font-weight: 100;
margin: 5px;
color: #FF4F4F;
}
el Codigo Css de Bootstrap carousel:
HTML: 
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  padding-bottom: 40px;
  color: #5a5a5a;
}



/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */

/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
  position: relative;
  z-index: 15;
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 60px;

  /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
  margin-top: -90px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 500px;
  background-color: #777;
}
.carousel-inner > .item > img {
	position: absolute;
	top: 0;
	left: 291px;
	min-width: 100%;
	height: 500px;
}



/* MARKETING CONTENT
-------------------------------------------------- */

/* Pad the edges of the mobile views a bit */
.marketing {
  padding-left: 15px;
  padding-right: 15px;
}

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  text-align: center;
  margin-bottom: 20px;
}
.marketing h2 {
  font-weight: normal;
}
.marketing .col-lg-4 p {
  margin-left: 10px;
  margin-right: 10px;
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 80px 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1px;
}



/* RESPONSIVE CSS
-------------------------------------------------- */

 [MENTION=16931]medi[/MENTION]a (min-width: 768px) {

  /* Remove the edge padding needed for mobile */
  .marketing {
    padding-left: 0;
    padding-right: 0;
  }

  /* Navbar positioning foo */
  .navbar-wrapper {
    margin-top: 20px;
  }
  /* The navbar becomes detached from the top, so we round the corners */
  .navbar-wrapper .navbar {
    border-radius: 4px;
  }

  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }

}

 [MENTION=16931]medi[/MENTION]a (min-width: 992px) {
  .featurette-heading {
    margin-top: 120px;
  }
}
y pues el codigo css del Bootrap no lo agrego, porque es muy largo, ademas tengo un menu, que aparece por debajo, y pues no lo quiero por debajo sino por delante, y pues no he podido, entonces nesecito su ayuda, si me pueden echar una mano. Gracias Hamed
 
C

cslbcn

Curioso
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
12 Oct 2013
Mensajes
5
hamedm dijo:
y pues el codigo css del Bootrap no lo agrego, porque es muy largo
Hacer clic para expandir...

menos mal... XD
Creo que te sería más sencillo conseguir un código funcionando por internet y a partir de ahí haces la modificaciones que quieras.
 
N

neburor

Dseda
Desde
1 Jul 2012
Mensajes
1.212
[MENTION=36834]hamedm[/MENTION] lo que noto que falta es que no estas poniendo jQuery, este es el que va a hacer todo el acomodo y movimiento
 
H

hamedm

Gamma
Programador
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
7 Ene 2013
Mensajes
193
Pero, entonces en que parte lo tendria que agregar?
 
Hay que estar conectado o registrado para responder aquí.
Arriba