ancho de monitor

[walterfcr]

Buenass!!

tengo una pagina con un menu horizontal que se ve bien, pero lo vi en una laptop con un monitor como de 17" o menos y el menu no queda centrado.

como hago para que se vea centrado en cualquier monitor?

[codecweb98]

Puedes usar algo así...

Código HTML:

<center>
     <div id="menu">...</div>
</center>
 

Donde:

Código CSS:

#menu
     {
      width: 980px;
     }
 

[walterfcr]

ahora tengo otro problema

estoy usando esa herramienta de web developer que segun muestra la pagina en cualquier tamaño. la pongo a 800x600 y se descuadra toda la pagina.

[codecweb98]

La resolución de 800x600 en verdad ya está algo caduca y es poco usada; no obstante se sigue utilizando (sobre todo por gente mayor o que tienen problemas de la vista).

Una resolución mayor mente ocupada es la de 1024 x 768.

Lo que yo te recomendaría es usar un ancho de página acorde, dependiendo de la página que quieras hacer, usando algo parecido a esto:

CSS para resoluciones de 800 x 600:

Código CSS:

#pageWidth
    {
    width: 980px;
    }
 

CSS para resoluciones de 1024 x 768:

Código CSS:

#pageWidth
    {
    width: 775px;
    }
 

En cualquier caso su código HTML quedaría:

Código HTML:

<center>
    <div id="pageWidth">
        ... Contenido de la página ...
    </div>
</center>
 

Por ejemplo, tengo un cliente (que está bien "segatón", -jajajaja-) y me pidió que su sitio no se descuadrara con la resolución de 800x600; su sitio está perfectamente adaptado para no se muestre el scroll horizontal con la resolución: Impermeabilizantes.

Aunque ya la mayoría de los sitios nuevos que desarrollo están diseñados para resoluciones mínimas de 1024x768; por ejemplo: Abogados Laborales.

Si lo notas ambos sitios que te menciono tienen una composición gráfica muy similar; pero en este caso la de Impermeabilizantes no tendrá problemas en con resolución de 800x600, pero la de Abogados Laborales si se saldrá de cuadro.

En fin... con la bronca de las resoluciones no se les puede dar gusto a todos.

[walterfcr]

te pongo el css de la pagina a ver si le ves algo malo porque no me funciona

Código HTML:

#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;
}
#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;
}

#menu {
	float: left;
	width: 280px;
	margin-left: 50px;
}
.PAZUL {
	color: #FFFFFF;
	background-color: #052A70;
}
#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;
	background-position: center;
}
#menu h3 {
	color: #FFFFFF;
	margin-left: 23px;
	margin-top: 0px;
	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;
}


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

[codecweb98]

Pues para una resolucion de 800x600 esto se va a salir de pantalla (tendrá scroll horizontal) porque tu "#contenido" es de 980.

Ahora puede ser que las propiedades "margin-right: auto" y "margin-left: auto" no funcionen bien en IE6.

La verdad es dificil analizar solo un código CSS sin ver el código HTML en el que se está usando. Yo no encuentro problemas con tu CSS, por ello sigo sin entednder que es lo que no te funciona.

[walterfcr]

si disculpa

Código HTML:

<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</a> </span></h4><br />

  <a href="vip/especial.html">rererrreer
</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 align="justify">&nbsp;</p>
  </div>
</div>
<div id="pie"><p>Copyright &copy; 2010 pokersuburbano.com</p>
</div>
</div>

</body>
</html> 

[walterfcr]

asi se ve normal




asi se ven cuando minimizo, se corren los contenidos uno a la izquierda y otro a la derecha

[codecweb98]

Haaa ya entendí. La solución es muy fácil, solo agrega lo siguiente a tu CSS...

Código CSS:

body
    {
    min-width: 980px;
    }
 

El unico problema esque esto no jalará en IE 6. Pero si quieres algo mas compatible yo creo que lo ideal sera usar tablas.

Bueno espero fucione.

[walterfcr]

Iniciado por codecweb98

Haaa ya entendí. La solución es muy fácil, solo agrega lo siguiente a tu CSS...

Código CSS:

body
    {
    min-width: 980px;
    }
 

El unico problema esque esto no jalará en IE 6. Pero si quieres algo mas compatible yo creo que lo ideal sera usar tablas.

Bueno espero fucione.

Genial ahora si!

lo de IE6 ni modo ya que es una cagada casi que para todo.

Gracias por responder y revisar los codigos.