ajuste automático de pantalla

nando_arg · #1 (**permalink**) 17/03/2009, 08:11

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!!!!!

DragonX · #2 (**permalink**) 17/03/2009, 08:22

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%

nando_arg · #3 (**permalink**) 17/03/2009, 09:23

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

nando_arg · #4 (**permalink**) 17/03/2009, 09:41

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

DragonX · #5 (**permalink**) 17/03/2009, 09:48

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

nando_arg · #6 (**permalink**) 17/03/2009, 11:21

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!!!

Adryi19 · #7 (**permalink**) 17/03/2009, 16:05

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! :)

mariac24 · #8 (**permalink**) 23/08/2009, 18:41

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

jomaruro · #9 (**permalink**) 27/08/2009, 15:08

Hola:

Prueba con esto en tu hoja de estilos:

Código:

* {margin: 0 auto;}

Saludos.