2

Tengo mas problemas con la barra de navegacion. Me ayudaron @Camilo Vasquez, a reducir el tamaño de la fuente y de los botones. Pero cambie a mayúsculas y aumente el texto de estas, y las celdas se vuelven a superponer. Trato de cambiar el tamaño de la fuente en el selector ID #header pero no cambian, no se si tendrá que ver en algo bootstrap, para poner una fuente mas pequeña pero a su vez bien legible, con las letras mas unidas. Tampoco puedo reducir el tamaño del test-area de la busqueda. En definitiva, ¿ Como puedo cambiar el estilo de las letras para que estén mas unidas ? ¿Y hay forma de reducir el test-area de busqueda ? Gracias, no doy, hago pruebas y mas pruebas sin resultado. Sigo mostrando el código que trabajo.

/* LA VERDAD ES QUE FUNCIONA CASI TODO GRACIAS A LOS RETOQUES DE Camilo Vasquez, Alvaro Montoro*/
html, body {
    height:100%;
    margin:0px;
    color:#444444;
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%;
    font:400 16px/1.8 sans-serif;
    }
    
    .nav-navbar-nav{
        font-size: 5;
    
    }
    .bgimg-1, .bgimg-2, .bgimg-3 {
    position:relative;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
    background-size:cover;
    }
    .bgimg-1 {
    background-image:url("http://i64.tinypic.com/2jb5fs4.jpg");
    height:100%;
    }
    .bgimg-2 {
    background-image:url("http://i64.tinypic.com/2jb5fs4.jpg");
    height:100%;
    }
    .bgimg-3 {
    background-image:url("../imagenes/bg_03.jpg");
    height:100%;
    }
    .caption {
    position:absolute;
    left:10%;
    top:48%;
    width:80%;
    margin:auto;
    color:#FFFFFF;
    font-size:24px;
    text-align:center;
    letter-spacing:10px;
    background-color:#444444;
    }
    h2 {
    text-transform:uppercase;
    font:20px sans-serif;
    letter-spacing:4px;
    color:#444444;
    }
    a {
    text-decoration:none;
    letter-spacing:3px;
    }
    .navbar-nav{
      margin-left: 5% !important;
    }
    
    #header{
      position: fixed;
      width: 100%;
      z-index: 1000;
      font-size: 6
    }
    
    .navbar{
      margin-bottom: 0px !important;
    }
<!DOCTYPE html>
<html lang="es">

<head>
    <title>PRINCIPAL</title>
    <meta charset="utf-8">
    <meta name="robots" content="noindex, nofollow">
    <meta name="viewport" content="width=device-width">

    <!-- ESTOS ENLACES LES TENGO GRACIAS A Camilo Vasquez me sugirio para crear barra de navegacion-->
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="css/todo.css" type="text/css" rel="stylesheet">
</head>
<!-- AQUI TAMBIEN FORMO PARTE Camilo Vasquez AYUDANDO ME CON LOS BOTONES DE LA BARRA DE NAVEGACION-->
<body>
    <header id="header">
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="container">
                <!-- Logo and responsive toggle -->
                <div class="navbar-header">

                    <a class="navbar-brand" href="#">
                        <span class="glyphicon glyphicon-fire"></span>
                      MIGUEL ESPESO
                    </a>
                </div>
                <!-- Navbar links -->
                <div class="collapse navbar-collapse" id="navbar">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="#">PRINCIPALES</a>
                        </li>
                        <li>
                            <a href="#">CONTACTO</a>
                        </li>
                        <li>
                            <a href="#">APLICACIONES</a>
                        </li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">SOBRE MI
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a target="_blank" href="estudios.html">CURRICULUM</a>
                                </li>
                                <li>
                                    
                                    <a target="_blank" href="proyectos.html">LOGROS</a>
                                </li>
                                <li>
                                    <a href="#">Diseño</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <!-- Search -->
                    <form class="navbar-form navbar-right" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control">
                        </div>
                        <button type="submit" class="btn btn-default">Buscar</button>
                    </form>

                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container -->
        </nav>
    </header>
    <div class="bgimg-1">
        <div class="caption">
            <span>DALE AL SCROLL</span>
        </div>
    </div>

    <div style="color:#444444;background-color:#FFFFFF;text-align:center;padding:48px 80px;text-align:justify;">
        <h2 style="text-align:center;">CURRICULUM</h2>
        <h1>BIENVENIDOS A MI SITIO WEB...</h1>
        <p>Hola, me llamo Miguel y os voy a presentar mi sitio web, el cual estoy creando mientras realizo un curso de actívate. 
         En principio esta creado para mostrar mi perfil, experiencia laboral, formación académica y todos los conocimientos que 
         vaya adquiriendo en el curso. </p>
    </div>

    <div class="bgimg-2">
        <div class="caption">
            <span>100% HEIGHT</span>
        </div>
    </div>

    <div style="position:relative;">
        <div style="color:#FFFFFF;background-color:#444444;text-align:center;padding:48px 80px;text-align:justify;">
            <p>ESTO IRA MEJORANDOSE, SEGUN VAYA EXPERIMENTANDO</p>
        </div>
    </div>

    <div class="bgimg-3">
        <div class="caption">
            <span>MAS IMAGENES</span>
        </div>
    </div>

    <div style="position:relative;">
        <div style="color:#444444;background-color:#FFFFFF;text-align:center;padding:48px 80px;text-align:justify;">
            <p>AQUI PONDRE IMAGENES, CUANDO VAYA APRENDIENDO</p>
        </div>
    </div>

    <div class="bgimg-1">
        <div class="caption">
            <span>¡DIVERTIDO, EH!</span>
        </div>
    </div>
</body>

</html>

2 respuestas 2

3

Necesitas añadir las unidades 'px', 'em' o '%'.

#header{
      position: fixed;
      width: 100%;
      z-index: 1000;
      font-size: 6px; ## Aquí olvidaste las unidades
    }
1
  • Ya me ha dicho el compañero @Camilo Vasquez, podia probar y probar con diferentes cantidades. Me interesaba saber si hay forma de cambiar el estilo de la fuente, no si sera posible... Gracias Commented el 17 nov. 2017 a las 15:23
2

Lo único que te faltaba para que los estilos de tu cambio de tamaño de texto funcionaran era agregar la unidad de medida, tenias un font-size: 7 pero te falto agregar la unidad de medida que ibas a usar para ese tamaño como por ejemplo px.

Ahora como recomendación te digo que es mejor agregar ese font-size directamente a la etiqueta <a> que es la que contiene el texto ya que al hacerlo en el div#header sería muy genérico y podría afectar otros textos que tuvieras dentro del div.

/* LA VERDAD ES QUE FUNCIONA CASI TODO GRACIAS A LOS RETOQUES DE Camilo Vasquez, Alvaro Montoro*/
html, body {
    height:100%;
    margin:0px;
    color:#444444;
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%;
    font:400 16px/1.8 sans-serif;
    }
    
    .nav-navbar-nav{
        font-size: 5;
    
    }
    .bgimg-1, .bgimg-2, .bgimg-3 {
    position:relative;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
    background-size:cover;
    }
    .bgimg-1 {
    background-image:url("http://i64.tinypic.com/2jb5fs4.jpg");
    height:100%;
    }
    .bgimg-2 {
    background-image:url("http://i64.tinypic.com/2jb5fs4.jpg");
    height:100%;
    }
    .bgimg-3 {
    background-image:url("../imagenes/bg_03.jpg");
    height:100%;
    }
    .caption {
    position:absolute;
    left:10%;
    top:48%;
    width:80%;
    margin:auto;
    color:#FFFFFF;
    font-size:24px;
    text-align:center;
    letter-spacing:10px;
    background-color:#444444;
    }
    h2 {
    text-transform:uppercase;
    font:20px sans-serif;
    letter-spacing:4px;
    color:#444444;
    }
    a {
    text-decoration:none;
    letter-spacing:3px;
    }
    .navbar-nav{
      margin-left: 5% !important;
    }
    
    #header{
      position: fixed;
      width: 100%;
      z-index: 1000;
    }
    
    .navbar{
      margin-bottom: 0px !important;
    }
    
    .navbar ul li a{
      font-size: 12px
    }
<!DOCTYPE html>
<html lang="es">

<head>
    <title>PRINCIPAL</title>
    <meta charset="utf-8">
    <meta name="robots" content="noindex, nofollow">
    <meta name="viewport" content="width=device-width">

    <!-- ESTOS ENLACES LES TENGO GRACIAS A Camilo Vasquez me sugirio para crear barra de navegacion-->
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="css/todo.css" type="text/css" rel="stylesheet">
</head>
<!-- AQUI TAMBIEN FORMO PARTE Camilo Vasquez AYUDANDO ME CON LOS BOTONES DE LA BARRA DE NAVEGACION-->
<body>
    <header id="header">
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="container">
                <!-- Logo and responsive toggle -->
                <div class="navbar-header">

                    <a class="navbar-brand" href="#">
                        <span class="glyphicon glyphicon-fire"></span>
                      MIGUEL ESPESO
                    </a>
                </div>
                <!-- Navbar links -->
                <div class="collapse navbar-collapse" id="navbar">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="#">PRINCIPALES</a>
                        </li>
                        <li>
                            <a href="#">CONTACTO</a>
                        </li>
                        <li>
                            <a href="#">APLICACIONES</a>
                        </li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">SOBRE MI
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a target="_blank" href="estudios.html">CURRICULUM</a>
                                </li>
                                <li>
                                    
                                    <a target="_blank" href="proyectos.html">LOGROS</a>
                                </li>
                                <li>
                                    <a href="#">Diseño</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <!-- Search -->
                    <form class="navbar-form navbar-right" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control">
                        </div>
                        <button type="submit" class="btn btn-default">Buscar</button>
                    </form>

                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container -->
        </nav>
    </header>
    <div class="bgimg-1">
        <div class="caption">
            <span>DALE AL SCROLL</span>
        </div>
    </div>

    <div style="color:#444444;background-color:#FFFFFF;text-align:center;padding:48px 80px;text-align:justify;">
        <h2 style="text-align:center;">CURRICULUM</h2>
        <h1>BIENVENIDOS A MI SITIO WEB...</h1>
        <p>Hola, me llamo Miguel y os voy a presentar mi sitio web, el cual estoy creando mientras realizo un curso de actívate. 
         En principio esta creado para mostrar mi perfil, experiencia laboral, formación académica y todos los conocimientos que 
         vaya adquiriendo en el curso. </p>
    </div>

    <div class="bgimg-2">
        <div class="caption">
            <span>100% HEIGHT</span>
        </div>
    </div>

    <div style="position:relative;">
        <div style="color:#FFFFFF;background-color:#444444;text-align:center;padding:48px 80px;text-align:justify;">
            <p>ESTO IRA MEJORANDOSE, SEGUN VAYA EXPERIMENTANDO</p>
        </div>
    </div>

    <div class="bgimg-3">
        <div class="caption">
            <span>MAS IMAGENES</span>
        </div>
    </div>

    <div style="position:relative;">
        <div style="color:#444444;background-color:#FFFFFF;text-align:center;padding:48px 80px;text-align:justify;">
            <p>AQUI PONDRE IMAGENES, CUANDO VAYA APRENDIENDO</p>
        </div>
    </div>

    <div class="bgimg-1">
        <div class="caption">
            <span>¡DIVERTIDO, EH!</span>
        </div>
    </div>
</body>

</html>

4
  • Vaya tela, y yo quiero ser programador, con cosas como estas no llegare muy lejos. Que fallo mas estupido, y las vueltas que me ha echo dar. Gracias compañero. El estilo de la fuente se puede cambiar de algun modo, imagino que añadiendo al: .navbar ul li a{ font-size: 12px } Desde aqui podre cambiar. Gracias. Commented el 17 nov. 2017 a las 15:16
  • 1
    Claro puedes colocar el tamaño que desees, y tranquilo, de todos los errores se aprende te aseguro que este error no lo volverás a cometer en el futuro. Commented el 17 nov. 2017 a las 15:18
  • Ya me a pasado, una cosa, el estilo de la fuente se puede cambiar...?? Commented el 17 nov. 2017 a las 15:25
  • 1
    Te refieres al tipo de letra? Claro ! Puedes usar la propiedad font-family en el mismo selector .navbar ul li a Commented el 17 nov. 2017 a las 15:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.