Foros del Web » Creando para Internet » HTML »

Barra lateral luego de contenido

Estas en el tema de Barra lateral luego de contenido en el foro de HTML en Foros del Web. Hola, tengo un pequeño problema, tengo una página con una barra lateral a la derecha y el contenido, este es el código: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código ...
  #1 (permalink)  
Antiguo 05/01/2010, 14:56
 
Fecha de Ingreso: marzo-2009
Mensajes: 47
Antigüedad: 8 años, 8 meses
Puntos: 0
Barra lateral luego de contenido

Hola, tengo un pequeño problema, tengo una página con una barra lateral a la derecha y el contenido, este es el código:
Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3. <title>Documento sin título</title>
  4. <style type="text/css">
  5. body  {
  6.     font: 100% Verdana, Arial, Helvetica, sans-serif;
  7.     background: #666666;
  8.     margin: 0;
  9.     padding: 0;
  10.     text-align: center;
  11.     color: #000000;
  12. }
  13. #container {
  14.     width: 780px;
  15.     background: #FFFFFF;
  16.     margin: 0 auto;
  17.     border: 1px solid #000000;
  18.     text-align: left;
  19. }
  20. #sidebar {
  21.     float: right;
  22.     width: 200px;
  23.     background: #EBEBEB;
  24.     padding: 15px 10px;
  25. }
  26. #mainContent {
  27.     margin: 0 250px 0 0;
  28.     padding: 0 20px;
  29. }
  30. </head>
  31.  
  32.  
  33. <div id="container">
  34.     <div id="sidebar">
  35.         <h3>Contenido de Sidebar1</h3>
  36.         <p>El color de fondo de este div sólo se mostrará a lo largo del contenido. Si desea utilizar una línea divisoria en su lugar, coloque un borde en el lado derecho del div #mainContent si siempre va a incluir más contenido. </p>
  37.         <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend  sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
  38.     </div>
  39.     <div id="mainContent">
  40.         <h1> Contenido principal </h1>
  41.         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</p>
  42.         <h2>Encabezado de nivel H2 </h2>
  43.         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
  44.     </div>
  45. </div>
  46. </body>
  47. </html>

Mi problema es que quiero que el contenido "mainContent" cargue antes de la barra lateral "sidebar", por lo que pongo el contenido antes de la barra lateral:
Código HTML:
Ver original
  1. ...
  2. <div id="mainContent">
  3.     ...
  4. </div>
  5. <div id="sidebar">
  6.     ...
  7. </div>
  8. ...
pero al hacer esto, la barra lateral aparece a la derecha pero abajo del contenido en vez de a su lado.

No se me ocurre como podría solucionarlo, ¿alguien me podría ayudar?
Gracias
Un Saludo!
  #2 (permalink)  
Antiguo 05/01/2010, 15:00
Avatar de blogger  
Fecha de Ingreso: diciembre-2005
Ubicación: frente al monitor
Mensajes: 398
Antigüedad: 12 años
Puntos: 12
Respuesta: Barra lateral luego de contenido

#sidebar { float: right;

cambialo a

#sidebar { float: left;

para que aparezca a la izquierda
__________________
http://exegesis-biblica.com/
  #3 (permalink)  
Antiguo 05/01/2010, 15:11
 
Fecha de Ingreso: marzo-2009
Mensajes: 47
Antigüedad: 8 años, 8 meses
Puntos: 0
Respuesta: Barra lateral luego de contenido

Gracias por contestar.

Cita:
Iniciado por blogger Ver Mensaje
#sidebar { float: right;

cambialo a

#sidebar { float: left;

para que aparezca a la izquierda
Pero así la barra lateral queda en la izquierda, yo la quiero a la derecha, de todas formas, probé tu consejo y la barra sigue apareciendo debajo del contenido.

Un Saludo!
  #4 (permalink)  
Antiguo 05/01/2010, 15:15
Avatar de blogger  
Fecha de Ingreso: diciembre-2005
Ubicación: frente al monitor
Mensajes: 398
Antigüedad: 12 años
Puntos: 12
Respuesta: Barra lateral luego de contenido

Bueno, aquí te dejo un tutorial, donde muestran como manejar las alineaciones de los divs, espero te sirva

http://www.cristalab.com/tutoriales/...l-y-css-c131l/
__________________
http://exegesis-biblica.com/
  #5 (permalink)  
Antiguo 05/01/2010, 15:36
 
Fecha de Ingreso: marzo-2009
Mensajes: 47
Antigüedad: 8 años, 8 meses
Puntos: 0
Respuesta: Barra lateral luego de contenido

Cita:
Iniciado por blogger Ver Mensaje
Bueno, aquí te dejo un tutorial, donde muestran como manejar las alineaciones de los divs, espero te sirva

[url]http://www.cristalab.com/tutoriales/componer-un-diseno-de-3-columnas-en-xhtml-y-css-c131l/[/url]
Leí eso, está muy bien, pero no me sirve, tiene el mismo problema que yo y en su código también aparece el contenido después de los laterales.

Un Saludo!
  #6 (permalink)  
Antiguo 05/01/2010, 17:51
 
Fecha de Ingreso: enero-2008
Ubicación: #Callao {Lima:Perú;}
Mensajes: 144
Antigüedad: 9 años, 11 meses
Puntos: 7
Respuesta: Barra lateral luego de contenido

Prueba de está forma:

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head profile="http://gmpg.org/xfn/11">
	<title>Documento sin título</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css"> 
	body  {
		font: 100% Verdana, Arial, Helvetica, sans-serif;
		background: #666666;
		margin: 0; 
		padding: 0;
		text-align: center;
		color: #000000;
	}
	#container { 
		width: 780px;
		background: #FFFFFF;
		margin: 0 auto;
		border: 1px solid #000000;
		text-align: left;
		overflow : hidden;
		height : 100%;
	}
	#sidebar {
		float: right;
		width: 200px;
		background: #EBEBEB;
		padding: 15px 10px;
	}
	#mainContent { 
		float : left;
		width : 515px;
		padding: 0 20px;
	} 
	</style>
</head>
<body>

<div id="container">

    <div id="mainContent">
        <h1> Contenido principal </h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</p>
        <h2>Encabezado de nivel H2 </h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
    </div>
	
    <div id="sidebar">
        <h3>Contenido de Sidebar1</h3>
        <p>El color de fondo de este div sólo se mostrará a lo largo del contenido. Si desea utilizar una línea divisoria en su lugar, coloque un borde en el lado derecho del div #mainContent si siempre va a incluir más contenido. </p>
        <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend  sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
    </div>
	
</div>

</body>
</html>

Etiquetas: barra, contenido, lateral
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:26.