Duda posicionamiento css

pasteles · #1 (**permalink**) 03/09/2011, 08:10

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&oacuten   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&eacute crear una p&aacutegina web?. Pues gracias a una p&aacutegina web dar&aacute 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 &uacuteltimas tecnolog&iacuteas web, teniendo su web a una velocidad superior,
 			accesible para cualquier persona con minusv&aacutelidas y tambi&eacute desde cualquier dispositivo m&oacutevil como smartphone,
 			tables y ebook.  
 			</p>
 			<p>
 			También sus web tendr&aacute un buen posicionamiento web y si lo desea, estar&aacute presentes en las redes sociales aumentando
 			aun m&aacute 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í:

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?.

cuervo699 · #2 (**permalink**) 08/09/2011, 22:59

No entiendo lo que quieres... :/ porque yo veo el menu al lado de la busqueda, si eso es lo que quieres hacer...

venommist · #3 (**permalink**) 09/09/2011, 08:15

Estimado, esto ocurre porque no tienes nada que le indique que eso ya no debe flotar...

Para esto, debes usar el atributo "clear", éste atributo le indica al HTML y CSS que parte del código debe saltar (ya sea: left, right o Both [ambos]).

Si no lo deseas a un costado, debes poner un div con style "clear:both". Por Ejemplo

Cita:

<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 style="clear:both;"></div>
<div id="search">
<p>Busqueda</p>
</div>
</nav>

Haciendo esto, al HTML/CSS le indicas "acá se acaba el Float", recuerda que los float son Campos FLOTANDO, indiferente del resto de info que posean, SIEMPRE ESTARÁN FLOTANDO HACIA DONDE LE INDIQUES, si es que no le pones un "clear:both".

Saludos! y espero que hayas comprendido de mejor forma.