Foros del Web » Creando para Internet » HTML »

ajuste automático de pantalla

Estas en el tema de ajuste automático de pantalla en el foro de HTML en Foros del Web. Hola Estoy haciendo una web con Dreamweaver en resolución de mi monito 1280 x 720. Cuando visualizo el diseño en otro monitor, de otra resolución ...
  #1 (permalink)  
Antiguo 17/03/2009, 09:11
 
Fecha de Ingreso: marzo-2009
Mensajes: 4
Antigüedad: 8 años, 8 meses
Puntos: 0
De acuerdo ajuste automático de pantalla

Hola
Estoy haciendo una web con Dreamweaver en resolución de mi monito 1280 x 720. Cuando visualizo el diseño en otro monitor, de otra resolución y pulgadas, se ve todo grande... claro, es como "que no entra".

Lo que necesito yo es como eso que tienen las plantillas CSS que se ajusta automáticamente para cualquier resolución (se achica todo, manteniendo ajustes de centrado)

Por favor respondan claro, si ponen códigos expliquen bien porque en programación no entiendo mucho.

Muchas gracias!!!!!
  #2 (permalink)  
Antiguo 17/03/2009, 09:22
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: ajuste automático de pantalla

deberías tener las medidas de tus tables o divs en porcentajes y no en pixels.

por ejemplo en lugar de tener una tablas de 1200px deberías tener una tabla al 90%

  #3 (permalink)  
Antiguo 17/03/2009, 10:23
 
Fecha de Ingreso: marzo-2009
Mensajes: 4
Antigüedad: 8 años, 8 meses
Puntos: 0
Respuesta: ajuste automático de pantalla

DragonX

Gracias por tu respuesta. Mirá lo que hice:

Hice una tabla del tamaño para una resolución 800x600 como mìnimo, o sea, cuando la pantalla es de 800x600, la tabla está completa en la pantalla.

Cuando la resolución es de 1280x720, la tabla queda .. bueno, queda a un costado. Entonces ahora necesito algo para que quede centrada, me explico??

graciassssss
  #4 (permalink)  
Antiguo 17/03/2009, 10:41
 
Fecha de Ingreso: marzo-2009
Mensajes: 4
Antigüedad: 8 años, 8 meses
Puntos: 0
Respuesta: ajuste automático de pantalla

DragonX

Gracias por tu respuesta. Mirá lo que hice:

Hice una tabla del tamaño para una resolución 800x600 como mìnimo, o sea, cuando la pantalla es de 800x600, la tabla está completa en la pantalla.

Cuando la resolución es de 1280x720, la tabla queda .. bueno, queda a un costado. Entonces ahora necesito algo para que quede centrada, me explico??

graciassssss
  #5 (permalink)  
Antiguo 17/03/2009, 10:48
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: ajuste automático de pantalla

para centrar tu pagina pone esto entre los tag´s <head>...</head>

<style>
body{margin:0 auto; text-align:center;}
</style>

y listo el pollo
  #6 (permalink)  
Antiguo 17/03/2009, 12:21
 
Fecha de Ingreso: marzo-2009
Mensajes: 4
Antigüedad: 8 años, 8 meses
Puntos: 0
Respuesta: ajuste automático de pantalla

Mirá, disculpame, yo te vuelvo a plantear el caso y vos me decís que puedo hacer o dónde puepo leer claramente la solución

estoy con Dreamweaver, puse una capa de modo que en un monitor resolución 800x600 ocupa toda la ventana del explorador sin tener que usar scrrol lateral.

al cambiar a una resolución de 1280x700, esa capa me queda hacia la izquierda.

lo que me dijiste antes, sólo me lo dejó sin bordes, como dice en el código margin 0.

me explico?? porque la idea es hacer el diseño dentro de una capa o tabla de medidas en % (como me aclaraste al principio) para resoluciónes menores a la que uso al diseñar, de modo que se pueda ver bien sin scroolles laterales en 800x600

gracias!!!
  #7 (permalink)  
Antiguo 17/03/2009, 17:05
 
Fecha de Ingreso: marzo-2009
Mensajes: 23
Antigüedad: 8 años, 8 meses
Puntos: 0
Respuesta: ajuste automático de pantalla

si usas tablas a la tabla principal le tendrias ke poner asi

<table align="center">
</table>

si usas css y maquetas con divs

seria asi el html primero

<body>
<div id="contenedor">
</div>
</body>

el css

<style>

body {
text-align:center; / * esto sirve para centrar el contenedor en IE */
}

#contenedor {
width:90%;
margin:0 auto;
text-align:left;
}

</style>

Saludos! :)
  #8 (permalink)  
Antiguo 23/08/2009, 19:41
 
Fecha de Ingreso: agosto-2009
Mensajes: 2
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: ajuste automático de pantalla

Adryi19

Lei todo el post de ajuste automatico

Estoy modificando un template llamado PARADISE

Necesito que la pantalla nunca cambie, de tal manera que el menu siempre quede en la parte inferios d ela pantalla

Inclui todos los cambios que usted recomendo, pero automaticamente me pasa atodos los modulos ede arriba hacia abajo consecutivos

body
{
padding: 0;
margin: 0;
background: #2E2E2E url('../images/background.jpg') repeat-x;
color: #FFF;
font-family: arial, verdana, helvetica, tahoma, sans-serif;
font-size: 80%;
}

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


<style>

body {
text-align:center; / * esto sirve para centrar el contenedor en IE */
}

#container {
width:90%;
margin:0 auto;
text-align:left;
}

</style>


a:hover
{
text-decoration: none;
color: #000;
}

#centrecontainer
{
position: absolute;
top: 50%;
left: 0px;
width: 100%;
}

#outercontainer
{
margin-left: -390px;
position: absolute;
top: -230px;
left: 50%;
}

#header
{
width: 90%;
height: 20%;
background-image: url('../images/header-background.jpg');
background-repeat: no-repeat;
}

#headertitle
{
float: left;
width: 150%;
height: 120%;
}

#header h1
{
margin: 0;
padding: 11px 0 0 10px;
color: #2E2E2E;
font-size: 200%;
letter-spacing: -2px;
font-weight: normal;
}

#header sup
{
color: #F06;
letter-spacing: -1px;
}

#headermenu
{
float: right;
width: 75%;
height: 20%;
}

#headermenu ul
{
margin: 20px 0 0 0;
padding: 0;
text-align: right;
font-size: 110%;
font-weight: bold;
letter-spacing: -1px;
}

#headermenu li
{
display: inline;
margin-left: 20px;
}

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

#headermenu li a:hover
{
text-decoration: none;
color: #F06;
}

#container
{
border: 10px solid #FFF;
width: 80%;
height: 100%;
background: #2E2E2E url('../images/container-background.jpg');
}

#containertext
{
float: right;
overflow: auto;
padding: 20px;
width: 80%;
height: 90%;
line-height: 120%;
}

#containertext p
{
margin: 0 0 10px 0;
padding: 0;
color: #CCC;
}

#containertext h1, #containertext h2, #containertext h3
{
margin: 10px 0;
padding: 0px;
color: #FFF;
font-size: 175%;
letter-spacing: -1px;
font-weight: normal;
}

#footer
{
width: 90%;
height: 20%;
background: #2E2E2E url('../images/footer-background.jpg');
}

#footer p
{
margin: 0;
padding: 10px 24px 0 0;
text-align: right;
color: #333;
letter-spacing: -1px;
}





/* JOOMLA STYLE
--------------------------------------------------------- */
table.blog {

}

<table align="center">
</table>
table.blog .article_seperator {
display: block;
height: 20px; }


table.contentpane {
border-collapse:collapse;
border-spacing:0px;
margin:0px;
padding:0px;
}

table.contentpaneopen, table.contentpane, table.blog {
width: 100%; }

* html table.contentpaneopen, table.contentpane, table.blog {
width: 98%; }

table.contentpaneopen {
border: none; }

table.contenttoc {
margin: 0 0 10px 10px;
padding: 0;
width: 35%; }

table.contenttoc a {
text-decoration: none; }

table.contenttoc td {
padding: 1px 5px 1px 25px; }

table.contenttoc th {
padding: 4px;
background: #2F2F2F;
color: #FFFFFF;
text-indent: 5px;
border: 1px solid #3F3F3F; }

table.poll {
padding: 0;
width: 100%;
border-collapse: collapse; }

table.pollstableborder {
padding: 0;
width: 100%;
border: none;
text-align: left; }

table.pollstableborder img {
vertical-align: baseline; }

table.pollstableborder td {
padding: 2px!important; }

table.searchintro {
padding: 10px 0;
width: 80%; }

table.searchintro td {
padding: 5px!important; }

table.adminform {
width: 400px!important; }

.blog_more {
margin: 10px 0; }

.blog_more strong {
margin: 0 0 5px;
padding-left: 13px;
display: block;
color: #606060;
text-transform: uppercase; }

td.buttonheading {
padding: 0 0 0 3px!important;
text-align: center; }

.category {
font-size: 13px;
font-weight: normal; }

.componentheading {
padding-bottom: 5px;
margin-bottom: 10px;
font-size: 1.3em;
line-height: normal;
font-weight: bold; }

.contentdescription {
padding-bottom: 30px; }

table.blog .contentheading {
font-size: 1.3em;
font-weight: bold;
line-height: normal;
font:bold 24px/34px Georgia, "Times New Roman", Times, serif; color:#ffffff;
}

table {
margin-left:auto;
margin-right:auto;
}

.contentheading {
font-size: 1.3em;
border-bottom:dashed 1px #Ffffff;
padding-bottom:10px;
font-weight: bold;
line-height: normal; }

a.contentpagetitle, .componentheading {
text-decoration: none!important; }

a.contentpagetitle:hover,
a.contentpagetitle:active,
a.contentpagetitle:focus {
text-decoration: none!important; }

.createdate, .small {
padding-bottom:5px;
padding-top:5px;
text-transform:uppercase;
font-size:0.85em;
font-weight: bold; }

.small{color:#BDDD09;}

.createdate {


/*border:solid 1px #DCFE8D;*/
color:#01A6D6;

}

.modifydate {
height: 15px; }

.moduletable {
padding: 0; }

.mosimage {
padding: 0;
border:1px solid #CCCCCC;
margin:6px; }

.mosimage img {
padding: 0;
margin: 0!important; }


/*pdf email etc */
img {
border: 0 none;
}


.mosimage_caption {
background:#EFEFEF none repeat scroll 0%;
border-top:1px solid #CCCCCC;
color:#666666;
font-size:10px;
margin-top:2px;
padding:1px 2px;}

tr.sectiontableentry1 td {
padding: 5px; }

tr.sectiontableentry2 td {
padding: 5px; }

.smalldark {
text-align: left; }

div.syndicate div {
text-align: center; }

.rowpadding {
padding-left: 18px;
padding-right: 18px; }

.pollstableborder {
margin-top:10px;
margin-bottom:10px;
}

table.pollstableborder td {
background:none;
}

.contentpaneopen tr td {
padding-top:7px;
padding-bottom:5px;
}

.clr {
clear: both;
}

.back_button {
height:35px;
font-weight:normal;
font-size:8pt;
text-decoration:none;
background:url(../images/s5_back.png) no-repeat top left;
padding-left:18px;
margin-top:15px;
padding-top:7px; }

a.readon {
height:35px;
font-weight:bold ;
font-size:10pt;
text-decoration:none;
padding-left:18px;
padding-right:18px;
padding-bottom:7px;
padding-top:8px; }

a.readon:hover {
text-decoration:underline;
color:#ffffff;
}

.show-linkmore, .show-comment, .show-hit, .jctools {
margin-top:19px;
margin-bottom:8px;
}

#commentTools {
padding:30px;
padding-right:0px;
margin-bottom:20px;
}

.comment-text {
line-height:200%;
}

.show-voteup, .show-votedown, .show-report {
margin-top:10px;
position:relative;
}

.jomentry2, .jomentry1 {
line-height:200%;
margin-bottom:12px;
}

.alldone_gsvb, .title_gsvb {
font-weight:bold;
}

.resultCell_gsvb {
width:78px;
}

.gsc-branding-text {
margin-top:17px;
}

.gsc-branding-img-noclear {
margin-right:10px;
}

.floatingPlayer_gsvb {
background:#F1F1F1;
}

.gsc-branding {
display:none;
}

#videoBar45 {
padding-bottom:15px;
padding-top:15px;
}


a:hover, a:focus {
color:#333333;
text-decoration:underline; }
  #9 (permalink)  
Antiguo 27/08/2009, 16:08
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: ajuste automático de pantalla

Hola:

Prueba con esto en tu hoja de estilos:

Código:
* {margin: 0 auto;}
Saludos.

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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 12:09.