[SOLUCIONADO] [Ayuda] Poner un menu con css al lado de el contenido

Hircine · #1 (**permalink**) 13/02/2011, 14:44

Hola,yo queria poner un menu al lado izquierdo del contenido,vi en webs que se hacia,pero yo no he hecho muchos css,estos son mis codigos:

Css:

Código HTML:

body
{
background-image:url(../layout/fondo-admin-final.png);
background-repeat:repeat;
}
#page {
	margin:100px auto 0 auto;
	background:url(../layout/contenido.png);
	width:890px;
	height:635px;
}
#page #content {
	padding:25px 30px 0 30px;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
}
#menu {
	float:left;
	margin:10px auto 0 auto;
	background:url(../layout/menu.png);
	width:10px;
	height:200px;
	margin-left: 0px;
	margin-top: 500px;
}

Pagina:

Código HTML:

<link href="admin-css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page"> 
<div id="content">
  <div id="main">  
    <h1>¡Bienvenido! a Sitio</h1>
        <p>¡Bienvenido al nuevo panel de Sitio!Un nuevo diseño más acojedor y más funciones.Como podra obeservar la BETA de Sitio ya termino.Si encuentra algun fallo reportalo en la sección de Sitio &gt; Contaco en elmenu horizontal de arriba.</p>
<p>Sitio</p>
        <p><span class="left">
          
        
</span>
        </p>
<p></p>&nbsp;</p>
      </div>
  </div>
</div>  
</div><div id="menu" align="left">Menu</div>

Imagen de mi idea:
http://img651.imageshack.us/i/sinttulomej.png/

sanxuan · #2 (**permalink**) 13/02/2011, 15:32

Pues te faltó muy poco.
Te marco con comentarios los cambios.

Código CSS:

Ver originalbody
{
background-image:url(../layout/fondo-admin-final.png);
background-repeat:repeat;
}
#page {
    margin:100px auto 0 auto;
    background:url(../layout/contenido.png);
    width:890px;
    height:635px;
    float:left; /* Este es uno de los cambios */
}
#page #content {
    padding:25px 30px 0 30px;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
}
#menu {
    float:left;
    margin:10px auto 0 auto;
    background:url(../layout/menu.png);
    width:10px;
    height:200px;
    margin-left: 0px;
    margin-top: 500px;
}

Código HTML:

Ver original<link href="admin-css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- ESTE ES OTRO DE LOS CAMBIOS -->
<div id="menu" >Menu</div>[/B]
<!--    ................................  -->
<div id="page"> 
<div id="content">
  <div id="main">  
    <h1>¡Bienvenido! a Sitio</h1>
        <p>¡Bienvenido al nuevo panel de Sitio!Un nuevo diseño más acojedor y más funciones.Como podra obeservar la BETA de Sitio ya termino.Si encuentra algun fallo reportalo en la sección de Sitio &gt; Contaco en elmenu horizontal de arriba.</p>
<p>Sitio</p>
        <p><span class="left">
          
        
</span>
        </p>
<p></p>&nbsp;</p>
      </div>
  </div>
</div>  
</div>

No lo he probado, pero supongo que funcionará.

Hircine · #3 (**permalink**) 14/02/2011, 11:16

Gracias,me funciono...
Ahora una pregunta que no viene al tema:
¿Como centar el div?
Yo tengo un div creditos,quiero centrarlo en el centro de la pantalla,como seria?
(se que es una pregunta de novatos,pero esque no me sale)

Codigo:

Código HTML:

#creditos {
	float:left;
	background:url(../layout/creditos.png);
	width:615px;
	height:50px;
	background-position: center;
}

Gracias a todos,por ayudarme a terminar mi script :D

jomaruro · #4 (**permalink**) 14/02/2011, 11:42

Hola:

Para el centrado horizontal utiliza:

Código CSS:

Ver originalmargin:0 auto;

para el centrado vertical: centrado vertical css

Saludos.