Como cuadro esto en html5 y css3, novato al volante

pembe180 · #1 (**permalink**) 20/09/2012, 11:27

Bueno amigos le he estado dando duro a ello y he logrado hacer lo siguiente pero no muy bien:
boceto:

codigo html5

Código HTML:

 <!doctype html>
<html lang="es">
<head>

	<meta charset="utf-8">
	<meta name="#"/>
	<title>Nombre de la pagina</title>
	<link href="css/estilos.css" rel="stylesheet" type="text/css">
	
</head>

<body>

	<header>
    		
	<nav>
		<ul> 
				<li><a href="#">boton1</a> </li>
			        <li><a href="#">boton2</a> </li>
			       	<li><a href="#">boton3</a></li>
				<li><a href="#">boton4 </a></li>
        	 </ul>
	</nav>

	<div id="centrar">

	<IMG SRC="imagen.png" WIDTH=# HEIGHT=# ALT="Nombre de imagen">

    	</div>

	<h1>
	<a href="#" title="nombre"><img class="fade" title="Nombre" alt="Nombre" src="img/logo.png"/></a>
	</h1>	
        
	</header>
    
    
	<footer> 
    	<p><strong>Contacto</strong></p>
		<p>CLL 42 No. 14 - 33 Centro</p>
		<p>Tel y celular</p>
		<p>pais </p>
	</footer>
	
</body>
</html>

y el ccs

Código HTML:

@charset "utf-8";
/* CSS Document */


*{
	margin: 0;
	padding: 0;
}

a{
	color:#FFF;
	text-decoration: none;
}

a:hover{
	color: #EFEFEF;
}

body {
	background-color: #FFF;
	color: #000;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 1em;
}

nav ul{
	text-align: center;
	background: -webkit-linear-gradient(#004B75, #2A7CA0);
	background: -moz-linear-gradient(#004B75, #2A7CA0);
	background: -o-linear-gradient(#004B75, #2A7CA0);
	background: linear-gradient(#004B75, #2A7CA0);
	margin: 40px auto;
	padding: 2px;
	vertical-align: middle;
	
}

nav ul{
	list-style: none;
}

nav li{
	
	display:inline-block;
	padding:0.1em;
	vertical-align: top;
}

nav a {
	display:block;
	padding: 15px;
}


h1{
	text-align: left;
	font-size:12px;	
	margin: auto;
	padding: 280px 20px 20px 20px;
   	text-align: left;
	
}

footer{
	text-align: right;
	font-size:14px;	
	margin: auto;
	padding: 280px 20px 20px 20px;
   	 text-align: right;
	
}

#centrar{
	text-align: center;
	}

1) el primer problema que tengo es que la barra de la botonera me sale de lado a lado y no se como cuadrar para que tenga una medida como la del boceto.

2) el segundo problema es que el footer y el h1 no se me alinian como en el boceto...cuando cuadro el padding no me queda en la misma linea, sino el logo debajo de la imagen y el contacto debajo a mano derecha del logo, asi le deje en ceros el padding...que hago o como hago pa cuadrar eso?

soy novato!

muchas gracias

flashmax · #2 (**permalink**) 20/09/2012, 11:48

Hola estaría bueno que pongas una imagen pero como tu quieres que quede, así poder ver como tendría que quedar..saludos!

pembe180 · #3 (**permalink**) 20/09/2012, 16:14

aqui le dejo como queda

pero me queda de esta forma

gracias

flashmax · #4 (**permalink**) 20/09/2012, 17:14

Hola lo que se me ocurre es que utilices un div como contenedor :
css

Código HTML:

#contenedor {
width: 600px;
margin:0 auto;
background-color:#999;
}

html

Código HTML:

<!doctype html>
<html lang="es">
<head>

	<meta charset="utf-8">
	<meta name="#"/>
	<title>Nombre de la pagina</title>
	<link href="css/estilos.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="contenedor">
  <header>
    
    <nav>
      <ul> 
        <li><a href="#">boton1</a> </li>
        <li><a href="#">boton2</a> </li>
        <li><a href="#">boton3</a></li>
        <li><a href="#">boton4 </a></li>
      </ul>
    </nav>
    
    <div id="centrar">
      
      <IMG SRC="imagen.png" WIDTH=# HEIGHT=# ALT="Nombre de imagen">
      
    </div>
    
    <h1>
      <a href="#" title="nombre"><img class="fade" title="Nombre" alt="Nombre" src="img/logo.png"/></a>
    </h1>	
    
  </header>
  
  
  <footer> 
    <p><strong>Contacto</strong></p>
    <p>CLL 42 No. 14 - 33 Centro</p>
    <p>Tel y celular</p>
    <p>pais </p>
    </footer>
</div>
	
</body>
</html>

anewryzm · #5 (**permalink**) 23/09/2012, 23:40

Bueno.
Creo que para empezar. "#centrar" no debería ser selector de id sino de clase. O sea debería estar asi ".centrar".
Ya que solo le asignas una propiedad y quizás la necesites para otros bloques.
Ahora.
Te recomiendo que definas el ancho con la propiedad "width: ".
Ésta puede estar en porcentajes (ej: 100%, 50% ...) o en pixeles (ej: 400px, 500px, ...)

Eso ayudaría en algo.

Ahora. El "margin: auto " que le asignas al footer hace que se centre. (Al menos eso tengo en mente).
Lo más probable es que se coloque uno sobre el otro por que son bloques.
podrías establecerlos en linea con una propiedad llamada "display: inline", pero esto haría que se coloquen en la misma fila y pegados hacia la izquierda. Así que tendrías que asignarles la propiedad "display: inline-block".

Debería quedar así.

Código:

.centrar, footer 
// no confundir " .centrar footer" se utiliza 
//la coma para "seleccion multiple"
{
   display:inline-block;
}


footer
{ ...	
	width: 40%; //Luego tendrias que jugar con los valores...)
...}

.centrar //cambia el "#" por "."
{...
     width: 60%;  
...}

Realiza las modificaciones. Si deseas que quede mas estético tu código.
Encierra a las etiquetas "footer" y al "div" que dentro de otro <div> que podría llevar como id "pie" (osea id="pie")

Espero te sirva.