Foros del Web » Creando para Internet » Diseño web »

Problemas con un aside

Estas en el tema de Problemas con un aside en el foro de Diseño web en Foros del Web. Tengo un problema a la hora de realizar el diseño clásico de un blog. Quiero colocar un section a la izquierda que es donde irán ...
  #1 (permalink)  
Antiguo 24/04/2016, 12:54
 
Fecha de Ingreso: abril-2016
Mensajes: 1
Antigüedad: 4 años, 10 meses
Puntos: 0
Información Problemas con un aside

Tengo un problema a la hora de realizar el diseño clásico de un blog. Quiero colocar un section a la izquierda que es donde irán los articulo y un aside a la derecha para hacer un pequeño menú donde introducir otros temas de interés. Pero no se porque aside y la section no se coloca una a la izquierda y el otro a la derecha y no consigo saber porque. El código que tengo html es el siguiente:

Código HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Titulo de pa pagina</title>
<meta charset="UTF-8 sin BOM"/>
<meta name="description" content="Descripcion de la pagina"/>
<meta name="keywords" content="Palabras clave"/>
<link rel="stylesheet" href="css/misestilos.css">
</head>
<body>
<div id="agrupar">

<header id="cabecera">
<h1>Titulo principal de la web</h1>
</header>

<nav id="menu">
<ul>
	<li>Inicio</li>
	<li>fotos</li>
	<li>contacto</li>
</ul>
</nav>

<section id="seccion">
	<article>
		<header>
			<hgroup>
				<h1>Titulo del articulo</h1>
				<h2>Subtitulo del articulo</h2>
			</hgroup>
			<time datetime="10-12-2016" pubdate>publicado 10-11-2016</time>
		</header>
		Texto del primer articulo
		<figure>
			<img src="">
			<figcaption>
				Imagen primer articulo
			</figcaption>
		</figure>
		<footer>
		<p>Comentarios</p>
		</footer>
	</article>
		<header>
			<hgroup>
				<h1>Titulo del articulo</h1>
				<h2>Subtitulo del articulo</h2>
			</hgroup>
			<time datetime="10-12-2016" pubdate>publicado 10-11-2016</time>
		</header>
		Texto del segundo articulo
		<figure>
			<img src="">
			<figcaption>
				Imagen segundo articulo
			</figcaption>
		</figure>
		<footer>
		<p>Comentarios</p>
		</footer>
	<article>
		<header>
</section>

<aside id="columna">
<blockquote>Mensaje numero uno</blockquote>
<blockquote>Mensaje numero dos</blockquote>
</aside>

<footer id="pie">
Esto es el pie de pagina
</footer >

</div>
</body>
</html> 
y el css es el siguiente:


Código CSS:
Ver original
  1. /*Etiquetas generales*/
  2. * {
  3.     margin: 0pX;
  4.     padding: 0px;
  5. }
  6.  
  7. body{
  8.     test-align:center;
  9. }
  10.  
  11. header,section,footer,aside,nav,article,figure,figcaption,hgroup{
  12.     display: block; /* Hacemos que todas nuestras secciones se traten como bloques*/
  13. }
  14.  
  15. #agrupar {
  16.     width: 90%; /*Ancho del contenedor*/
  17.     margin:15px auto;/*auto=margen superior e inferior */
  18.     text-align: left;
  19. }
  20. h1{
  21.     font: bold 20px verdama, san-serif;
  22. }
  23. h2{
  24.     font: bold 14px verdana, sans-serif;
  25. }
  26.  
  27. /* ESTILO DE LA CABECERA */
  28. #cabecera {
  29.     background: #FFFBB9;
  30.     border: 1px solid #999999;
  31.    
  32. }
  33.  
  34. /* ESTILO DEL NAVEGADOR */
  35. #menu {
  36.     padding: 5px 15px;
  37. }
  38.  
  39. #menu li{
  40.     display: inline-block; /* Hace que coloquemos los elementos de la lista en linea*/
  41.     list-style: none;
  42.     padding: 5px;
  43.     border: 1px solid #999999;
  44.     font: bold 14px verdana, sans-serif;
  45.    
  46. }
  47.  
  48. /* ESTILO DE LA SECCION DE ARTICULOS */
  49. #seccion {
  50.     width:70%;
  51.     margin: 20%;
  52.     float: left;
  53.    
  54. }
  55.  
  56. /*ESTILO DEL ASIDE*/
  57. #columna{
  58.     width: 20%;
  59.     margin: 10px 0px;
  60.     float: left;
  61.     padding: 20px;
  62.     background: #CCCCCC;
  63. }
  64.  
  65.  
  66.  
  67. /*ESTILO DEL PIE DE PAGINA*/
  68. #pie{
  69.     clear: both;
  70.     background: #CCCCCC;
  71.     text-align: center;
  72.     padding: 20px;
  73.     border-top: 2px solid #999999;
  74. }
  75.  
  76.  
  77. /* ESTILO DE LOS ARTICULOS */
  78. article{
  79.     background: #FFFBC;
  80.     border: 1px solid #999999;
  81.     padding: 20px;
  82.     margin-bottom: 15px;
  83. }
  84.  
  85. article footer{
  86.     text-align:right;
  87. }
  88. time{
  89.     color:#999999;
  90. }
  91. figcaption{
  92.     font: italic 14px verdana, sans-serif;
  93. }
  #2 (permalink)  
Antiguo 25/04/2016, 08:53
 
Fecha de Ingreso: julio-2014
Mensajes: 179
Antigüedad: 6 años, 7 meses
Puntos: 26
Respuesta: Problemas con un aside

Son muy pequeños errores los que tienes:

Tu section tiene un 70% de ancho más un margin de 20% arriba, derecha, abajo y a la izquierda lo cual le da un bonito 110% de ancho rebasa incluso la medida de su contenedor.

Por otro lado el aside/#columna tiene un 20% lo cual esta bien pero ya no tiene espacio entonces de automático lo tira abajo, te recomiendo que le pongas float:right, te dejo el ejemplo de tu código ya trabajando:
https://jsfiddle.net/duj8b0oc/

Saludos!
__________________
Si haces las cosas como nadie las ha hecho, cobralas bien, si las vas a hacer como todos las han hecho, cobralas bien!!
MecanizandoWeb.com

Etiquetas: html
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 17:46.