Estoy tratando de crear una pequeña página web con cabecera, donde se encuentre el menú de navegación con tres objetos, uno de los cuales tiene desplegables, columna izquierda y columna derecha. ¿Como debo hacer para que los elementos de la barra de navegación se vean horizontalmente y no verticalmente.? Si añado las siguientes librerías funciona la barra de navegación, pero dejan de verse las columnas laterales en su totalidad:
<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>
¿Como puedo arreglar este problema y que mi pagina se vea bien? En el codigo la API de Bootstrap está comentada. Les muestro mi código para ver los errores. Imagino que tendré muchos, pero no sé como solucionarlos. Gracias.
/* Layout */
body {
min-width: 630px;
}
#container {
padding-left: 200px;
padding-right: 190px;
}
#container .column {
position: relative;
float: left;
}
#center {
padding: 10px 20px;
width: 100%;
}
#left {
width: 180px;
padding: 0 10px;
right: 240px;
margin-left: -100%;
}
#right {
width: 130px;
padding: 0 10px;
margin-right: -100%;
}
#footer {
clear: both;
}
/* IE hack */
* html #left {
left: 150px;
}
/*Haz que las columnas tengan la misma altura que las otras */
#container {
overflow: hidden;
}
#container .column {
padding-bottom: 1001em;
margin-bottom: -1000em;
}
/*Solución para el pie de página */
* html body {
overflow: hidden;
}
* html #footer-wrapper {
float: left;
position: relative;
width: 100%;
padding-bottom: 10010px;
margin-bottom: -10000px;
background: #fff;
}
/* Aesthetics */
body {
margin: 0;
padding: 0;
font-family:Sans-serif;
line-height: 1.5em;
}
p {
color: #555;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul a {
color: darkgreen;
text-decoration: none;
}
#header, #footer {
font-size: large;
padding: 0.3em;
background: #BCCE98;
}
#left {
background: #DAE9BC;
}
#right {
background: #F7FDEB;
}
#center {
background: #fff;
}
#container .column {
padding-top: 1em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<meta http-equiv="X-UA-Compatible" content="ie=edge">-->
<link rel="icon" href="imagenes/icon.ico" />
<!--<link href="css/bootstrap.min.css" rel="stylesheet">-->
<title>Principal</title>
</head>
<body>
<header id="header">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Logo and responsive toggle -->
<div class="navbar-header">
<a class="navbar-brand" href="#">
<span class="glyphicon glyphicon-fire"></span>
Logo
</a>
</div>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Products</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="about-us">
<li><a href="#">Engage</a></li>
<li><a href="#">Pontificate</a></li>
<li><a href="#">Synergize</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">Search</button>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</header>
<div id="container">
<main id="center" class="column">
<article>
<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>
<P></P>
<h2>CURRICULUM</h2>
<p>Aquí encontrareis los <a href="curriculum-1.html">trabajos </a>por los que me he movido, siendo el transporte por carretera lo que mas he desempeñado estos
últimos años. </p>
<h2></h2>
<h2>ESPEDIENTE ACADEMICO</h2>
<p>Mis estudios no son muchos, deje pronto la escuela para trabajar. Pero en los últimos años he retomado el tema académico,
formandome en el tema de la programación y aunque llevo poco tiempo ya he creado alguna <a href="proyectos-4.html">humilde aplicacion.</a></p>
<h2>EXPERIENCIA</h2>
<p>Como ya he dicho, mi carrera de desarrollador no a echo mas que empezar, y son pocos y pequeños los <a href="proyectos-4.html">proyectos </a>que he
creado, pero estoy dedicandome plenamente en sacar una aplicación que espero tenga una buena aceptación y porque no,
triunfar
</p>
<h2></h2>
<h2></h2>
<a href="pdf/html.pdf">Haz clic aquí para el PDF</a>
<object data="pdf/html.pdf"></object>
<iframe src="pdf/html.pdf"></iframe>
</article>
</main>
<nav id="left" class="column">
<h3>DATOS PERSONALES</h3>
<ul>
<li><a target="_blank" href="curriculum-1.html">Curriculum</a></li><br>
<li><a target="_blank" href="estudios-2.html">Estudios</a></li><br>
<li><a target="_blank" href="experiencia-3.html">Experiencia</a></li><br>
<li><a target="_blank" href="proyectos-4.html">Proyectos</a></li><br>
<li><a target="_blank" href="futuro-5.html">Futuro</a></li>
</ul>
<br>
<br>
<br>
<h3>Redes sociales</h3>
<ul>
<li><a href="https://www.facebook.com/profile.php?id=100009248037432">Facebook</a></li>
<li><a href="https://twitter.com/laparramiguel">Twitter</a></li>
<!--<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>-->
</ul>
</nav>
<div id="right" class="column">
<h3>FOTO DE PERFIL</h3>
<p><script>generateText(1)</script></p>
</div>
</div>
<!-- <div id="footer-wrapper">
<footer id="footer"><p>Footer...</p></footer>
</div>-->
</body>
</html>