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>