problema grid 960

treick · #1 (**permalink**) 14/01/2013, 19:05

les explico hace poco empece a utilizar este framework, he maquetado una pagina y el problema esta en que el encabezado lo maqueta bien, pero el cuerpo no, sale rodado hacia la izquierda,he revisado el código(asta volverme loco) y no veo el error,pongo el código haber si alguno me puede echar una mano, no pido que me hagan nada,solo que me digan si ven el error porque ya estoy que echo humo.

Código HTML:

<?php
include('libre.php');
session_start();
?>
<!doctype html>


<head>
<meta  charset="utf-8"> 
	<script type="text/javascript" src="javascript/jquery.js"></script>
	<script type="text/javascript" src="javascript/codigo.js"></script>
	
	<title>titulo</title>
	<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/grid.css">
  <link rel="stylesheet" href="css/base.css">
</head>
<body >
<div id="header">
	<header>
	
		<div class="container_12">
				<div class="grid_12">
					imagen y span
				</div>
				<div class="clear"></div>
				<div class="grid_12">
				<nav>
					<ul class="nav">
						aqui va menu con ul y li
				</nav>
			</div>
				<div class="clear"></div>
		</div>
		<div class="clear"></div>
	</header></div>
	///aqui empieza el error en el cuerpo
	<div id="main" class="container_12">
		<div class="grid_3">
			<ul>
				aqui va menu lateral
			</ul>
		</div>
		

		 <div class="grid_9">
			aqui va noticias
		</div>
		<div class="clear"></div>
		
		<div class="grid_12"><hr></div>
			<div class="clear"></div>
			<div class="grid_4 prefix_5 sufix_3">Patrocinado por:</div>
			<div class="clear"></div>

			<div class="grid_6 prefix_2" id="palma"><a target="_blank" href="aaa">
			<img src="image/aaa.jpg" alt="a" title="a"></a>
			</div>
			
			<div class="grid_4" id="a">
			<a href="a">
			<img src="a"
			 title="a"></a>
			 </div>
			<div class="clear"></div>
		</div>



	<div class="clear"></div>
	

	

</body>
</html>

un saludo y gracias

moro666 · #2 (**permalink**) 17/01/2013, 04:23

2 cosas, te das cuenta de que no has puesto el css no?
la otra, para que sea mas facil de encontrar el problema podrias pasar un linkl directo a la web con el error o ponerlo en una web como esta http://jsfiddle.net/ siempre es mas facil modificar aquello que estas viendo!

treick · #3 (**permalink**) 17/01/2013, 06:43

esta es la [URL="http://www.luchacanarialapalma.org/"][/URL],sri pensaba que solo con la estructura del grid 960 bastaba, como se puede apreciar debajo de la cabecera el contenido se va hacia la izquierda,y si en la pantalla tienes resolucion grande, se ve bastante espacio en blanco a la derecha y ninguno a la izquierda(cosa que no deberia pasar.)

un saludo y gracias.

pzin · #4 (**permalink**) 17/01/2013, 06:56

Con la estructura 960.gs basta. Pero el problema viene cuando empiezas a cambiarle las cosas, como en la línea #233 de base.css:

Código CSS:

Ver original#main {
  position: absolute;
  margin-top: 50px;
  z-index: 1;
  padding: 0;
  margin-right: 0;
}

Estás indicando que se posicione de forma absoluta #main, pero también lo hará .container_12 en ese elemento, ya que las clases aplican estilos al elemento.
Una vez quitado el posicionamiento, te saldrá a la derecha, porque también sobreescribes el valor auto del margen derecho para centrarlo. Así que tienes que quitar eso también.

Y de todas formas, trabajar con posición absoluta no es buena cosa si no entiendes demasiado de CSS.

treick · #5 (**permalink**) 17/01/2013, 11:43

bueno, gracias solucionado,la verdad no se porque puse lo de posición absoluta,(aunque también es verdad que no lo manejo mucho.)bueno, pues eso solucionado.

un saludo y gracias