Barra blanca entre navegacion y carrusel con Bootstrap3

Hyemin · #1 (**permalink**) 22/12/2014, 10:00

HOla como estan?

Estoy probando Bootstrap3 e hice una pagina sencilla, el problema es que entre la barra de navegacion y el carrusel me aparece una linea blanca que quiero quitarle (supongo que es el margen)

Probe ponerle la propiedad padding-bottom a la barra de navegacion en 0px; y la de carrusel en 0px; para padding-top pero sigue ahi.

Tambien me surje el problema de que siempre me queda un scroll ala derecha sin importar el tama;o o resolucion de la pantalla

Alguna idea?

Código HTML:

!DOCTYPE html>
<html>
<head>    
        <title>Titulo</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="../css/bootstrap.min.css" rel="stylesheet">
        <link href="../fa/css/font-awesome.css" rel="stylesheet">
        <script src="../jquery.js"></script>
        <script src="../js/bootstrap.js"></script>  
</head>

<body>
    <!-- Barra de navegacion del sitio -->
        
    <div class="navbar navbar-inverse" style="padding-bottom: 0px;">
            <a class="navbar-brand" href="index.html">titulo</a>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="catalogo.php">opcion1</a></li>
                    <li><a href="contacto.php">opcion2</a></li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" href="#" data-toggle="dropdown" >opcion3 <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">3a</a></li>
                                <li><a href="#">3b</a></li>
                                <li class="divider"></li>
                                <li><a href="#">3c</a></li>
                            </ul>
                    </li>
                </ul>  
    <!-- Formulario de busqueda general en catalogo -->
        <div>               
            <form class ="navbar-form navbar-right" role ="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search catalog">
                </div>
            <button type = "submit" class ="btn btn-default">
            Search
            </button>
            </form>
        </div>
    </div> <!-- Div de fin de barra de navegacion -->
   
                   
<!-- Carrusel con fotos de PROMO -->

<center>
    <div id="myCarousel" class=" carousel"  style="background-color: #000000; padding-top: 0px;" >
        
<!-- Indicadores para el carrusel -->
    <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>
<!-- Items del carrusel -->
    <div class="carousel-inner">
        <div class="item active"> 
            <img src="http://www.forosdelweb.com/f53/img/promo/1.jpg" alt="" width="630" height="360">
                <div class="carousel-caption">
                    <h1>Titulo1s</h1>
                        <p>subtitulo1</p>
                </div>
        </div>
        
        <div class="item">
            <img src="http://www.forosdelweb.com/f53/img/promo/2.jpg" alt="" width="630" height="360">
                <div class="carousel-caption">
                    <h1>Titulo2 </h1>
                        <p>SUbtitulos2</p>
                </div>
        </div>
                                
        <div class="item">
            <img src="http://www.forosdelweb.com/f53/img/promo/3.jpg" alt="" width="630" height="360">
                <div class="carousel-caption">
                    <h1>Titulo3 </h1>
                        <p>Subtitulo3</p>
                </div>
        </div>
    </div><!-- Fin de lista de items del carrusel -->
<script>

moginn · #2 (**permalink**) 22/12/2014, 11:49

el tag <center> no está cerrado. Luego el tag <script> del final tampoco está cerrado

pzin · #3 (**permalink**) 22/12/2014, 14:00

Usar Bootstrap y center es como ir en un Seat 127 con radio bluetooth. El jueves hace exactamente 15 años que esa etiqueta está depreciada.

Hyemin · #4 (**permalink**) 23/12/2014, 05:35

Cita:

Iniciado por moginn

el tag <center> no está cerrado. Luego el tag <script> del final tampoco está cerrado

Esos tags estan cerrados mas abajo, no puse todo el codigo por que pense que era demasiado extenso.

Cita:

Iniciado por pzin

Usar Bootstrap y center es como ir en un Seat 127 con radio bluetooth. El jueves hace exactamente 15 años que esa etiqueta está depreciada.

Use el <center> por que tenia problemas con la visualizacion y "probando" me quedo bien asi :(

El codigo completo es

Código HTML:

!DOCTYPE html>
<html>
<head>    
        <title>Gothic Fashion Store</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="fa/css/font-awesome.css" rel="stylesheet">
        <script src="jquery.js"></script>
        <script src="js/bootstrap.js"></script>  
</head>

<body>
    <!-- Barra de navegacion del sitio -->
        
    <div class="navbar navbar-inverse" style="padding-bottom: 0px;">
            <a class="navbar-brand" href="index.html">MyStore</a>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="catalogo.php">Catalog</a></li>
                    <li><a href="contacto.php">Contact</a></li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" href="#" data-toggle="dropdown" >Catalog <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="listamujeres.php">Woman</a></li>
                                <li><a href="listahombres.php">Men</a></li>
                                <li class="divider"></li>
                                <li><a href="accesorios.php">Accessories</a></li>
                            </ul>
                    </li>
                </ul>  
    <!-- Formulario de busqueda general en catalogo -->
        <div>               
            <form class ="navbar-form navbar-right" role ="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search catalog">
                </div>
            <button type = "submit" class ="btn btn-default">
            Search
            </button>
            </form>
        </div>
    </div> <!-- Div de fin de barra de navegacion -->
   
                     
        
<!-- Carrusel con fotos de PROMO -->

<center>
    <div id="myCarousel" class=" carousel"  style="background-color: #000000; padding-top: 0px;" >
        
<!-- Indicadores para el carrusel -->
    <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>
<!-- Items del carrusel -->
    <div class="carousel-inner">
        <div class="item active"> 
            <img src="img/promo/1.jpg" alt="" width="630" height="360">
                <div class="carousel-caption">
                    <h1>Victorian dress</h1>
                        <p>Special offers on victorian dresses</p>
                </div>
        </div>
        
        <div class="item">
            <img src="img/promo/2.jpg" alt="" width="630" height="360">
                <div class="carousel-caption">
                    <h1>Corsets </h1>
                        <p>Great variety of leather and fabric corsets</p>
                </div>
        </div>
                                
        <div class="item">
            <img src="img/promo/3.jpg" alt="" width="630" height="360">
                <div class="carousel-caption">
                    <h1>Cosplay </h1>
                        <p>A complete catalog for any cosplay needs</p>
                </div>
        </div>
    </div><!-- Fin de lista de items del carrusel -->
<script>
$(function(){
// Initializes the carousel
$(".start-slide").click(function(){
$("#myCarousel").carousel('cycle');
});
// Stops the carousel
$(".pause-slide").click(function(){
$("#myCarousel").carousel('pause');
});
// Cycles to the previous item
$(".prev-slide").click(function(){
$("#myCarousel").carousel('prev');
});
// Cycles to the next item
$(".next-slide").click(function(){
$("#myCarousel").carousel('next');});
// Cycles the carousel to a particular frame
$(".slide-one").click(function(){
$("#myCarousel").carousel(0);
});
$(".slide-two").click(function(){
$("#myCarousel").carousel(1);
});
$(".slide-three").click(function(){
$("#myCarousel").carousel(2);
});
});
</script>   
<!-- Controles del carrusel -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev"><h1>&lsaquo;</h1></a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div> <!-- FIN CARRUSEL -->
</center>

<!-- Ofertas de la semana/mes -->
<div class="container">     
    <div class="row" style="padding-top: 20px;">
        <div class="col-lg-4">
          <img class="img-circle" src="img/acc/acc1.jpg" alt="description" style="width: 140px; height: 140px;">
          <h2>Leather shoes and boots</h2>
          <p>Special discount on women shoes and boots<br>Size 4 to 12</p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>      
        </div>

        <div class="col-lg-4">
          <img class="img-circle" src="img/acc/acc5.jpg" alt="description" style="width: 140px; height: 140px;">
          <h2>Gas masks at sale</h2>
          <p>We got a huge variety of Cyber Goth Gas Mask in several colors and sizes .</p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
          
        <div class="col-lg-4">
          <img class="img-circle" src="img/acc/acc4.jpeg" alt="description" style="width: 140px; height: 140px;">
          <h2>Mens Jackets</h2>
          <p>Black 100% cotton jacket for men, sizes SM, M, L and XL available .</p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>      
        </div>
        
    </div>
</div>

    
<!-- El footer -->
<footer style="padding-top: 35px;">
        <div class="row" style="background-color: #000000;">
            <div class="col-lg-4">
                <p class="text-muted" style="text-decoration-color: #ffffff">All images are intellectual property of their respective authors.<br>
                    
                Please read the <a href="legal/irights.html">disclosure </a>.</p>
            </div>
            
            <div class="col-lg-4">
                <p class="text-muted" style="text-decoration-color: #ffffff">
                This site is for showing only, is not a real online store<br>
                If you need to contact the author please <a href="legal/contact.html"> contact us </a>.</p>
            </div>
            
            <div class="col-lg-4">
                <p class="text-muted" style="text-decoration-color: #ffffff">Like us on .<br>
                    <a class="btn">
                    <i class="fa fa-twitter"></i>
                    </a>
                    <a class="btn">
                    <i class="fa fa-facebook"></i>
                    </a>
                    <a class="btn">
                    <i class="fa fa-google-plus"></i>
                </a></p>
                
            </div>
           
           
        </div>
 
</footer>

</body>
</html>