Foros del Web » Creando para Internet » CSS »

ancho de monitor

Estas en el tema de ancho de monitor en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 10/08/2010, 22:47
Avatar de walterfcr  
Fecha de Ingreso: julio-2009
Ubicación: Costa Rica
Mensajes: 148
Antigüedad: 8 años, 5 meses
Puntos: 4
ancho de monitor

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?
  #2 (permalink)  
Antiguo 10/08/2010, 23:15
 
Fecha de Ingreso: enero-2009
Ubicación: Mexico
Mensajes: 99
Antigüedad: 8 años, 11 meses
Puntos: 2
Respuesta: ancho de monitor

Puedes usar algo así...

Código HTML:
Ver original
  1. <center>
  2.      <div id="menu">...</div>
  3. </center>

Donde:

Código CSS:
Ver original
  1. #menu
  2.      {
  3.       width: 980px;
  4.      }
__________________
Yo no desarrollo páginas de internet. Hago Códices Web...
  #3 (permalink)  
Antiguo 10/08/2010, 23:57
Avatar de walterfcr  
Fecha de Ingreso: julio-2009
Ubicación: Costa Rica
Mensajes: 148
Antigüedad: 8 años, 5 meses
Puntos: 4
Respuesta: ancho de monitor

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.
  #4 (permalink)  
Antiguo 11/08/2010, 00:30
 
Fecha de Ingreso: enero-2009
Ubicación: Mexico
Mensajes: 99
Antigüedad: 8 años, 11 meses
Puntos: 2
Respuesta: ancho de monitor

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:
Ver original
  1. #pageWidth
  2.     {
  3.     width: 980px;
  4.     }

CSS para resoluciones de 1024 x 768:

Código CSS:
Ver original
  1. #pageWidth
  2.     {
  3.     width: 775px;
  4.     }

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

Código HTML:
Ver original
  1. <center>
  2.     <div id="pageWidth">
  3.         ... Contenido de la página ...
  4.     </div>
  5. </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.
__________________
Yo no desarrollo páginas de internet. Hago Códices Web...
  #5 (permalink)  
Antiguo 11/08/2010, 10:25
Avatar de walterfcr  
Fecha de Ingreso: julio-2009
Ubicación: Costa Rica
Mensajes: 148
Antigüedad: 8 años, 5 meses
Puntos: 4
Respuesta: ancho de monitor

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


  #6 (permalink)  
Antiguo 12/08/2010, 00:19
 
Fecha de Ingreso: enero-2009
Ubicación: Mexico
Mensajes: 99
Antigüedad: 8 años, 11 meses
Puntos: 2
Respuesta: ancho de monitor

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.
__________________
Yo no desarrollo páginas de internet. Hago Códices Web...
  #7 (permalink)  
Antiguo 12/08/2010, 00:45
Avatar de walterfcr  
Fecha de Ingreso: julio-2009
Ubicación: Costa Rica
Mensajes: 148
Antigüedad: 8 años, 5 meses
Puntos: 4
Respuesta: ancho de monitor

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> 
  #8 (permalink)  
Antiguo 12/08/2010, 00:57
Avatar de walterfcr  
Fecha de Ingreso: julio-2009
Ubicación: Costa Rica
Mensajes: 148
Antigüedad: 8 años, 5 meses
Puntos: 4
Respuesta: ancho de monitor

asi se ve normal




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





  #9 (permalink)  
Antiguo 12/08/2010, 15:10
 
Fecha de Ingreso: enero-2009
Ubicación: Mexico
Mensajes: 99
Antigüedad: 8 años, 11 meses
Puntos: 2
Respuesta: ancho de monitor

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

Código CSS:
Ver original
  1. body
  2.     {
  3.     min-width: 980px;
  4.     }

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.
__________________
Yo no desarrollo páginas de internet. Hago Códices Web...
  #10 (permalink)  
Antiguo 12/08/2010, 20:15
Avatar de walterfcr  
Fecha de Ingreso: julio-2009
Ubicación: Costa Rica
Mensajes: 148
Antigüedad: 8 años, 5 meses
Puntos: 4
Respuesta: ancho de monitor

Cita:
Iniciado por codecweb98 Ver Mensaje
Haaa ya entendí. La solución es muy fácil, solo agrega lo siguiente a tu CSS...

Código CSS:
Ver original
  1. body
  2.     {
  3.     min-width: 980px;
  4.     }

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.

Etiquetas: ancho, monitor
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:56.