problemas con menu y contenido

walterfcr · #1 (**permalink**) 26/09/2010, 21:56

tengo una pagina y la he visto bien todo el tiempo hasta que la vi en un monitor mas ancho de lo normal y veo que el menu y el contenido se van hacia la derecha dejando un espacio a la izquierda y no me gusta.

aca los codigos a ver si alguine me puede ayudar porque ando en pañales en eso del css.

Código:

<body> 
 
 
 
 
 
 
<div id="contenedor"> 
<div id="cabecera"><div id="imgcabecera"> 
  <div align="center"><img src="images/cabecera.gif" width="526" height="180" /></div> 
</div> 
<ul style="list-style-type:none;"> 
   <li style="float:left;"><a href="index.html">Home</a></li> 
   <li style="float:left;"><a href="basico.html">Básico</a></li> 
   <li style="float:left;"><a href="variantes.html">Variantes</a></li> 
   <li style="float:left;"><a href="estrategia.html">Estrategia</a></li> 
   <li style="float:left;"> <a href="glosario.html">Glosario</a>   </li> 
</ul> 
</div> 
 
 
 
 
</div> 
<div id="menu"> 
<div id="imaglogo"><img src="images/logo-nuevo.gif" width="250" height="188" /></div> 
 
<h1>BASICO</h1> 
<h3><a href="combinaciones.html">COMBINACIONES</a></h3> 
<h3><a href="cuando jugar.html">CUANDO JUGAR</a></h3> 
<h3><a href="practica gratis.html">PRACTICAR GRATIS </a></h3> 
<h3><a href="tipos jugadores.html">TIPOS DE JUGADORES</a> </h3> 
<h3><a href="probabilidades.html">PROBABILIDADES</a></h3> 
<h3><a href="posicion.html">POSICION</a></h3> 
<h3><a href="tilt.html">TILT</a></h3> 
 
 
<h1>ESTRATEGIA</h1> 
<h3><a href="tells.html">LENGUAJE CORPORAL</a> </h3> 
<h3><a href="bluffear.html">BLUFFEAR</a></h3> 
 
<h1>VARIANTES</h1> 
<h3><a href="texas holdem.html">TEXAS HOLD'EM</a> </h3> 
<h3><a href="omaha.html">OMAHA</a></h3> 
<h3><a href="5 cards draw.html">FIVE CARDS DRAW</a> </h3> 
<h3><a href="seven card stud.html">SEVEN CARD STUD</a> </h3> 
<h3><a href="razz.html">RAZZ</a></h3> 
<br /> 
<br /> 
<div id="menu applet"> 
<applet code="Dgclock.class" CODEBASE="http://pokersuburbano.com/java-sys" width="100" height="30"> 
      <param name="TimeFormat" value="%I"> 
   <param name="ShowDate" value="no"> 
      <param name="ShowFrame" value="no"> 
      <param name="fg" value="white"> 
      <param name="bg" value="black"> 
    </applet></div> 
<h4><br /> 
  
  <span class="Estilo1"><a href="http://www.pokersuburbano.com:2095/horde/login.php?new_lang=es_ES">Revisar Correo electrónico<br /> 
  <br /> 
  </a></span></h4> 
<h4><span class="Estilo1"><a href="privado/privado.html?new_lang=es_ES">Zona restringida</a></span><br /> 
  <br /> 
</h4> 
<h4><span class="Estilo1"><a href="contactenos.html?new_lang=es_ES">Cont&aacute;ctenos</a></span><br /> 
  <br /> 
</h4> 
<h4><span class="Estilo1"><a href="docs/Insider_Secrets_of_Online_Poker_-_Theodore_Cage.zip?new_lang=es_ES"><br /> 
</a></span></h4> 
<br /> 
 
<a href="vip/especial.html"></a></div> 
 
<div id="contenido"> 
  <div id="flashp"> 
    <p> 
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="400" height="100"> 
        <param name="movie" value="images/principal 2.swf" /> 
        <param name="quality" value="high" /> 
        <embed src="images/principal 2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="400" height="100"></embed> 
      </object> 
    </p> 
    <p>Bienvenidos a Poker Suburbano, 
      el sitio para conocer y aprender acerca de este gran juego.</p> 
    <p align="justify">&nbsp;</p> 
    <p align="justify"><span class="PAZUL">BASICO</span></p> 
    <p align="justify">Para ser un ganador del poker
      Primero debes saber lo b&aacute;sico.</p> 
    <p align="justify">&nbsp;</p> 
    <p align="justify"><span class="PAZUL">ESTRATEGIA</span></p> 
    <p align="justify">Phil Hellmuth no gano sus 11 brazaletes por ser el mas suertudo del mundo. Poker es un juego de estrategia</p> 
    <p align="justify">&nbsp;</p> 
    <p align="justify"><span class="PAZUL">VARIANTES</span></p> 
    <p align="justify">Aprende las diferentes variantes de poker<br /> 
      y seras como los mejores del mundo.</p> 
      
    <p>&nbsp;</p> 
  </div> 
</div> 
<div id="pie"><p>Copyright &copy; 2010 pokersuburbano.com</p> 
</div> 
</div> 
 
</body> 
</html>

Código:

#contenedor {
	width: 980px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	
}
#imgcabecera {
}
ul {
	list-style-type: none;
	margin-top: 5px;
	margin-right: 1px;
	margin-bottom: 0px;
	margin-left: 5px;
	color: #FFFFFF;
	text-decoration: none;
}
li {
	margin-left: 60px;
	color: #999999;
	background-repeat: no-repeat;
	padding-top: 0px;
	padding-right: 20px;
	margin-top: 0px;
	font-size: 20px;
	text-decoration: none;
	list-style-image: none;
	list-style-type: none;
	list-style-position: inside;
}
a {
	color: #FFFFFF;
	font-style: normal;
	font-weight: bold;
	text-decoration: none;
	font-size: 26px;
	padding-right: 0px;
	background-color: #24211C;
}




#cabecera {
	background-color: 005AA6;
	height: 250px;
	background-repeat: no-repeat;
	background-position: center center;
	list-style-type: none;
	margin: auto;
}

body {
	background-color: #24211C;
	background-image: url(images/fondo-ciudad.gif);
	background-repeat: repeat-x;
	min-width: 980px;
}
#flashp {
	margin-top: 180px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
#imaglogo {
	margin-top: 180px;
	margin-right: 0px;
	margin-left: 30px;
}
#pie p {
	color: #FFFFFF;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
}

h1 {
	color: #0000CC;
	margin-top: 30px;
}



#menu {
	float: right;
	width: 280px;
	margin-right: 50px;
}
.PAZUL {
	color: #FFFFFF;
	background-color: #052A70;
	margin-top: 30px;
}
#menu a {
	font-size: 18px;
}


#contenido {
float: right;
width: 600px;
}
#pie {
	clear: both;
	background-image: url(images/img06.gif);
	background-repeat: no-repeat;
	background-position: center center;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin: 0px;
	background-attachment: scroll;
}
#menu  h1 {
	color: #FFFFFF;
	border: 0;
}
#menu h2 {
	list-style-image: none;
	list-style-type: none;
	background-color: #005AA6;
}
#menu li {
	left: 0px;
	right: 0px;
	margin-right: 10px;
	color: #FFFFFF;
	margin-left: 20px;
	margin-top: 0px;
	margin-bottom: 5px;
}
#menu ul {
	margin-right: 10px;
	margin-top: 0px;
}
#menu  h1 {
	border-top-style: 0;
	border-right-style: 0;
	border-bottom-style: 0;
	border-left-style: 0;
	background-color: #052A70;
	font-size: 24px;
	list-style-image: none;
	list-style-type: none;
	background-repeat: no-repeat;
	background-attachment: fixed;
	padding-right: 0px;
	margin-right: 30px;
	margin-left: 23px;
	margin-top: 40px;
	background-position: center;
}
#menu h3 {
	color: #FFFFFF;
	margin-left: 23px;
	margin-top: 10px;
	margin-bottom: 0px;
}
img {
	margin-left: 0px;
}
#contenido #flashp img {
	margin-right: 0px;
	padding-left: 100px;
}



#contenido #flashp h1 {
	color: #FFFFFF;
	margin-left: 100px;
	background-color: #052A70;
	margin-right: 159px;
}
p {
	margin-right: 100px;
	margin-left: 100px;
	color: #FFFFFF;
	font-size: 24px;
	margin-top: 30px;
}


marc {
	color: #009999;
}
#menu applet {
	padding-left: 20px;
}
#menu input {
	padding-left: 0px;
	margin-left: 20px;
}
#menu .Estilo1 a {
	margin-left: 20px;
}
menuh {
	width: 980px;
}


* {
padding:0;
margin:0 auto;

y aca un ejemplo de como se ve

igualacero · #2 (**permalink**) 27/09/2010, 05:27

Hola buenas, a mi me sucedió algo parecido y me funcionó el colocar en la capa contenedora solo

Cita:

margin: 0 auto;

Rubenqlc · #3 (**permalink**) 27/09/2010, 07:14

Buenas.

Amigo, tienes en "menu" y en "contenidos", float: right, es normal que se te vaya a la derecha.

Prueba a poner en el contenido a float: left, y juega con los márgenes.

Saludos,

walterfcr · #4 (**permalink**) 28/09/2010, 07:22

Cita:

Iniciado por Rubenqlc

Buenas.

Amigo, tienes en "menu" y en "contenidos", float: right, es normal que se te vaya a la derecha.

Prueba a poner en el contenido a float: left, y juega con los márgenes.

Saludos,

gracias por revisar los codigos!

el ejemplo que puse en la imagen es vista de un monitor de mas de 1078 de ancho

yo ya habia intentado eso y cuando lo veo en un monitor mas pequeño o normal se decuadra todo! como se puede hacer para que se vea igual en todas?

Rubenqlc · #5 (**permalink**) 28/09/2010, 07:26

Buenas de nuevo amigo.

Lo normal es que le des al body margin:0px auto; como te dice igualacero.

Luego ya dentro del body te creas los demás DIV.

Si tienes más dudas pregunta.

Saludos,

walterfcr · #6 (**permalink**) 28/09/2010, 08:00

se le pone eso al body o la capa contenedora? o a los 2?

Rubenqlc · #7 (**permalink**) 28/09/2010, 08:05

Al body, así la capa contenedor de más de afuera está siempre centrada. Y le pondría un ancho de 1002 píxeles, para la resolución de 1024, ya que la mayoría de los monitores de los usuarios tienen esta resolución.

Saludos,

walterfcr · #8 (**permalink**) 28/09/2010, 20:50

funciono perfecto! gracias masivas!

Rubenqlc · #9 (**permalink**) 29/09/2010, 07:25

Buenas amigo.

No hay de qué, para eso estamos.

Suerte con el proyecto.

Saludos,