Bueno estoy empezando con esto del posicionamiento con css y he leído un poco pero tengo dudas con el display y float. Bueno os pongo la web que estoy haciendo de prueba.
Código HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta name="Keywords" lang="es" content="" >
<meta name="Description" content="" >
<meta http-equiv="Content-Type" content="text/html">
<meta name="Author" content="Ismael Rodriguez Moreno">
<meta charset="UTF-8">
<title>Mi web</title>
<!-- Our CSS stylesheet file -->
<link rel="stylesheet" href="./css/styles.css" />
<!-- Including the Lobster font from Google's Font Directory -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />
<!-- Enabling HTML5 support for Internet Explorer -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1>Mi sitio web personal.</h1>
<div id="social">
</div>
</header>
<nav>
<ul id="menu">
<li class="button"><a href="#home">Principal</a></li>
<li class="button"><a href="#news">Noticias</a></li>
<li class="button"><a href="#about">Sobre Nosotros</a></li>
<li class="button"><a href="#services">Servicios</a></li>
<li class="button"><a href="#contact">Contacto</a></li>
<li class="button"><a href="#contact">Blog</a></li>
</ul>
<div id="search">
<p>Busqueda</p>
</div>
</nav>
<article>
<header>
<h2>Aumente sus ingresos …</h2>
</header>
<section>
<p>Si buscas crear una web ya sea sencilla, con programación web a medida, tienda virtual,foros en internet,
blog,subasta o cualquier cosa que tenga relación con el mundo web, este es tu sitio.
</p>
<p>¿Por qué crear una página web?. Pues gracias a una página web dará a conocer su empresa a todo
el mundo, aumentando así su popularidad, prestigio e ingreso. Es la perfecta plataforma para dar a conocer su empresa
por todo el mundo y que se hable de ella.
</p>
<p>Los sitios web son realizados utilizando la últimas tecnologías web, teniendo su web a una velocidad superior,
accesible para cualquier persona con minusválidas y tambié desde cualquier dispositivo móvil como smartphone,
tables y ebook.
</p>
<p>
También sus web tendrá un buen posicionamiento web y si lo desea, estará presentes en las redes sociales aumentando
aun má la popularidad de su web
</p>
</section>
</article>
<aside>Barra lateral</aside>
<footer>Pie de pagina</footer>
</body>
</html> y tengo este archivo css:
Código:
header, footer,nav, section, article {
display:block;
}
body {
color: #5C5C5C;
background: url("../img/fondo.jpg") repeat-x scroll 0 0 transparent;
font-family: Arial,Helvetica,sans-serif;
margin: 0;
padding: 0;
}
#menu{
display: block;
}
.button{
list-style: none;
float: left;
}
section{
display: inline;
float: left;
width: 70%;
}
la web se ve tal que así:
%2016.04.57.png)
La cosa es que estoy posicionando e menú como quiero, pero no se porque la verdad.
Quiero que aparezca el menú junto a la búsqueda, para eso he metido un <ul> para el menú y <div > para el campo de busqueda y los elementos <ol> dentro del <ul> les he puesto un posicionamiento float:left. Pero para que el campo búsqueda aparezca al lado,¿no debería de poner display:inline?,para que el <ul> no ocupe todo el ancho de la pantalla?.