Foros del Web » Creando para Internet » Diseño web »

Web que mantenga las dimensiones

Estas en el tema de Web que mantenga las dimensiones en el foro de Diseño web en Foros del Web. Hola a todos, estoy aprendiendo a realizar webs y me he descargado una CSS para ver como funcionan, el tema es q dependiendo del monitor ...
  #1 (permalink)  
Antiguo 11/02/2009, 10:03
 
Fecha de Ingreso: noviembre-2006
Mensajes: 199
Antigüedad: 11 años
Puntos: 2
Web que mantenga las dimensiones

Hola a todos, estoy aprendiendo a realizar webs y me he descargado una CSS para ver como funcionan, el tema es q dependiendo del monitor en el que lo visualizo aparecen las imágenes más o menos grandes, algunas distorsionadas, etc.

Asique quiero sabes cómo se hace para que el tamaño de las imágenes y las distancias entre éstas sea siempre el mismo o al menos proporcional.

Gracias, un saludo.
  #2 (permalink)  
Antiguo 11/02/2009, 14:18
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: Web que mantenga las dimensiones

No entiendo exactamente cual es tu pregunta, pero, si una imagen mide 300x200 pixeles, medira lo mismo en cualquier pantalla y podra verse mas grande o distorsionada de acuerdo a la resolucion de pantalla y profundidad de color en el equipo donde la veas.

Si creas una web con ancho fijo de 800 pixeles y la ves en un monitor con resolucion de 1024 x 768 se va a ver muy bien, pero si la ves en un monitor con resolucion de 1280 o superior, quedara mucho espacio en blanco y no se vera bien.
__________________
- León, Guanajuato
- GV-Foto
  #3 (permalink)  
Antiguo 11/02/2009, 17:25
 
Fecha de Ingreso: noviembre-2006
Mensajes: 199
Antigüedad: 11 años
Puntos: 2
Respuesta: Web que mantenga las dimensiones

Hola! Gracias por responderme.
Lo que me refiero es que quiero que la página web tenga un tamaño fijo y no tenga barras de desplazamiento ni verticales ni horizontales, y que si luego, alguien la visualiza en un monitor con más resolución, que la vea tal cuál se ve en un monitor de menor resolución, que amplie/minimice las imágenes, los fondos, etc. de manera proporcional. Es decir, que el ancho de la web y de lo que contiene dependa de la situación.
No sé si es posible. En mi caso concreto, tengo puesto un fondo negro, y en el centro una imagen, pero al verlo en un monitor de menos resolución, esa imagen del centro ocupa todo el ancho de la pantalla, y ésto es lo que no quiero que pase. Que el tamaño de ésa imagen sea proporcional a la ventana. No sé ni si es posible hacerlo, cualquier sugerencia es válida.
Gracias, saludos.
  #4 (permalink)  
Antiguo 11/02/2009, 17:40
Avatar de gree  
Fecha de Ingreso: febrero-2009
Mensajes: 37
Antigüedad: 8 años, 10 meses
Puntos: 0
Respuesta: Web que mantenga las dimensiones

Creo que es posible que entienda para eso tienes que ponerla en %

Así por ejemplo:

<img src="cual quier imagen" width="100%" height="100%" >

Así de cualquier tamaño que tengas la pantalla en el navegador

la imagen se vera siempre al 100% de la pantalla
  #5 (permalink)  
Antiguo 12/02/2009, 00:31
 
Fecha de Ingreso: octubre-2008
Ubicación: Bs. As., ARG
Mensajes: 203
Antigüedad: 9 años, 2 meses
Puntos: 6
Respuesta: Web que mantenga las dimensiones

Cita:
Iniciado por Triby Ver Mensaje
No entiendo exactamente cual es tu pregunta, pero, si una imagen mide 300x200 pixeles, medira lo mismo en cualquier pantalla y podra verse mas grande o distorsionada de acuerdo a la resolucion de pantalla y profundidad de color en el equipo donde la veas.

Si creas una web con ancho fijo de 800 pixeles y la ves en un monitor con resolucion de 1024 x 768 se va a ver muy bien, pero si la ves en un monitor con resolucion de 1280 o superior, quedara mucho espacio en blanco y no se vera bien.
Creo que Triby esta en lo cierto, una imagen de tamaño determinado se vera igual en todos los tamaños de pantalla. La diferencia es que a pantalla de mayor tamaño, los margenes tambien seran mayores...pero el tamaño de la imagen se conservara.
Creo que lo ideal es que busques el termino medio para que la imagen no sea exageradamente grande en una pantalla pequeña, pero tampoco muy chica en una pantalla grande. Lo importante es que siempre se aprecien los detalles.
De todas maneras no entiendo tampoco muy bien la pregunta, ya que si la imagen se encuentra dentro de un DIV, los margenes son totalmente manejables como para que sean fijos en cuanto a la proporcion. Lo unico que va a desvariar segun la pantalla son los margenes externos, fuera del DIV contenedor.

Espero haberte ayudado en algo, saludos...
  #6 (permalink)  
Antiguo 12/02/2009, 03:48
 
Fecha de Ingreso: noviembre-2006
Mensajes: 199
Antigüedad: 11 años
Puntos: 2
Respuesta: Web que mantenga las dimensiones

Hola,
Creo que el problema es que la CSS que uso no es la adecuada, tiene cosas que no me valen para nada y otras que echo en falta.
¿Cómo puedo hacer yo mi propia CSS? Quiero que la página tenga arriba de todo un menu en horizontal, todo el cuerpo en 2 colores (es decir, la mitad de arriba verde, y la inferior negro) y en el centro de la zona verde, debajo del menú, una imagen, y en la zona negra, es donde se escribe.
¿Me es más fácil hacer la CSS que usar ésto? ¿O cómo puedo modificarla? Creo que hay muchas cosas que pueden sobrarme.

Cita:
body {
margin: 0;
padding: 0;
background: #000000 url(images/img01.jpg) repeat left top;
font-size: 14px;
text-align: justify;
color: #ABABAB; /*letra*/
}

h1, h2, h3 {
margin: 0;
text-transform: lowercase;
font-weight: normal;
color: #33CC33;
}

h1 {
letter-spacing: -1px;
font-size: 32px;
}

h2 {
font-size: 23px;
}

p, ul, ol {
margin: 0 0 2em 0;
text-align: justify;
line-height: 26px;
}

a:link {
color: #33CC33;
}

a:hover, a:active {
text-decoration: none;
color: #33CC33;
}

a:visited {
color: #33CC33;
}

img {
border: none;
}

img.left {
float: left;
margin-right: 15px;
}

img.right {
float: right;
margin-left: 15px;
}

/* Form */

form {
margin: 0;
padding: 0;
}

fieldset {
margin: 0;
padding: 0;
border: none;
}

legend {
display: none;
}

input, textarea, select {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #333333;
}

#wrapper {
margin: 0;
padding: 0;
height: 350px;
background: url(images/img02.jpg) repeat-x left top;
}

/* Header */

#header {
width: 810px;
margin: 0 auto;
height: 75px;
}

/* Menu */

#menu {
float: left;
width: 810px;
height: 60px;
background: url(images/img03.jpg) no-repeat left top;
}

#menu ul {
margin: 0;
padding: 0px 0 0 20px;
list-style: none;
line-height: normal;
}

#menu li {
display: block;
float: left;
background: url(images/img06.jpg) no-repeat left 50%;
}

#menu a {
display: block;
float: left;
margin-right: 3px;
padding: 12px 30px 12px 20px;
letter-spacing: -.5px;
text-decoration: none;
text-transform: lowercase;
font-size: 20px;
color: #FFFFFF;
}

#menu a:hover {
text-decoration: none;
color: #33CC33;
}

#menu .current_page_item a {
color: #33CC33;
}

/** LOGO */

#logo {
width: 810px;
height: 260px;
margin: 0 auto;
background: url(images/img04.jpg) no-repeat left top;
}

#logo h1, #logo h2 {
margin: 0;
padding: 0 0 0 100px;
line-height: normal;
}

#logo h1 {
padding-top:125px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:40px;
}

#logo h1 a {
text-decoration: none;
color: #FFFFFF;
}

#logo h1 a:hover { text-decoration: underline; }

#logo h2 {
float: left;
padding: 0px 0 0 100px;
font: 18px Georgia, "Times New Roman", Times, serif;
color: #9B9B9B;
}

#logo p a {
text-decoration: none;
color: #B6ACA2;
}

#logo p a:hover { text-decoration: underline; }



/* Page */

#page {
width: 810px;
margin: 0 auto;
}

/* Content */

#content {
float: left;
width: 520px;
margin-top: 15px;
background: url(images/img10.jpg) no-repeat left top;

}

/* Post */

.post {
padding: 15px 0px;
}

.post .title {
margin-bottom: 20px;
padding-bottom: 5px;
}

.post h1 {
width: 520px;
height: 60px;
padding: 20px 0 0 15px;
background: url(images/img08.jpg) no-repeat left top;
font-size: 24px;
color: #DADADA;
}

.post h2 {
width: 520px;
height: 60px;
padding: 20px 0 0 15px;
background: url(images/img08.jpg) no-repeat left top;
font-size: 22px;
color: #DADADA;
}

.post .entry {
padding: 0 15px;
font-size: 14px;
border-bottom: 1px dotted #1F1F1F;
}

.post .meta {
padding: 15px 15px 30px 15px;
font-size: 13px;
}

.post .meta p {
margin: 0;
padding-top: 15px;
line-height: normal;
color: #999999;
}

.post .meta .byline {
float: left;
}

.post .meta .links {
float: right;
}

.post .meta .more {
padding: 0 20px 0 18px;
}

.post .meta .comments {
padding-left: 22px;
}

.post .meta b {
display: none;
}

/* Sidebar */

#sidebar {
float: right;
width: 250px;
margin: 0;
padding: 0;
margin-top: 30px;
}

#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}

#sidebar li {
margin-bottom: 40px;
}

#sidebar li ul {
}

#sidebar li li {
margin: 0;
padding-left: 25px;
}

#sidebar h2 {
width: 250px;
height: 60px;
padding: 8px 0 0 25px;
margin-bottom: 10px;
background: url(images/img07.jpg) no-repeat left top;
font-size: 20px;
color: #DADADA;
}

/* Search */

#search {

}

#search h2 {
margin-bottom: 20px;
}

#s {
width: 140px;
margin-left: 25px;
margin-right: 5px;
padding: 3px;
border: 1px solid #BED99C;
}

#x {
padding: 3px;
border: none;
background: #467805;
text-transform: lowercase;
font-size: 11px;
color: #FFFFFF;
}

/* Boxes */

.box1 {
padding: 20px;
}

.box2 {
color: #BABABA;
}

.box2 h2 {
margin-bottom: 15px;
font-size: 16px;
color: #FFFFFF;
}

.box2 ul {
margin: 0;
padding: 0;
list-style: none;
}

.box2 a:link, .box2 a:hover, .box2 a:active, .box2 a:visited {
color: #EDEDED;
}

/* Footer */
#footer-wrap {
width: 810px;
height: 60px;
margin: 0 auto;
background: url(images/img05.jpg) no-repeat left top;
}

#footer {
margin: 0 auto;
margin-bottom: 20px;
padding: 0;
}

html>body #footer {
height: auto;
}

#footer p {
font-size: 14px;
}

#legal {
clear: both;
padding-top: 17px;
text-align: center;
color: #999999;
}

#legal a {
color: #33CC33;
}

GRACIAS!
  #7 (permalink)  
Antiguo 12/02/2009, 07:20
 
Fecha de Ingreso: octubre-2008
Ubicación: Bs. As., ARG
Mensajes: 203
Antigüedad: 9 años, 2 meses
Puntos: 6
Respuesta: Web que mantenga las dimensiones

Mira, por lo que contas sobre la pagina q queres hacer, en las css que detallaste hay algunos elementos que sobran. Yo, en lo personal te aconsejaria utilizar algun editor html como Dreamweaver en el que puedas editar tus propias css. Creo que te va a resultar mas facil que editar el codigo css y los parametros que pusiste aqui.
De todas maneras seria ideal que tengas alguna idea de los elementos que componen una pagina; y que son a los cuales se les puede otorgar parametros bajo Cascading Style Sheets (CSS).
Yo en tu caso utilizaria cuatro divs, uno para la cabecera de la pagina donde estaria el menu, dos centrales donde estaria la imagen y el texto que decis, y un div final "contenedor".

*{
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
/*Anulas margenes predeterminados de los navegadores, tipo y tamaño de letra*/

body {
background-color: #1F1F1F
}
/*color de fondo*/

#contenedor {
width: 800px;
margin-right: auto;
margin-left: auto;
margin-top: 50px;
}
/*Ancho de div, color de fondo, con las propiedades auto en los margenes lo centras respecto a la ventana del navegador, y margen superior*/

#menu li {
display: inline;
}
/*Construyes en html un menu bajo la propiedad li, para alinearlo horizontalmente pones este parametro, recuerda poner los links en el html*/

divcentral1 {
background-color: #009900
}
/*color de fondo, verde. Aqui es donde pones la imagen*/

divcentral2 {
background-color: #000000
}
/*color de fondo, negro. Aqui es donde pones el texto de debajo de la imagen*/

#menu li {
display: inline;
}
/*Construyes en html un menu bajo la propiedad li, para alinearlo horizontalmente pones este parametro, recuerda poner los links en el html*/

#divcentral1 img {
margin-right: auto;
margin-left: auto;
}
/*Aqui centras la imagen respecto a los margenes laterales del div*/

Este codigo css es algo bastante basico, pero espero que te sea util para orientarte en lo que queres, de todas maneras te aconsejo leer los mas que puedas sobre css...
  #8 (permalink)  
Antiguo 12/02/2009, 07:23
 
Fecha de Ingreso: octubre-2008
Ubicación: Bs. As., ARG
Mensajes: 203
Antigüedad: 9 años, 2 meses
Puntos: 6
Respuesta: Web que mantenga las dimensiones

Cita:
Iniciado por chuekeron Ver Mensaje
#menu li {
display: inline;
}
/*Construyes en html un menu bajo la propiedad li, para alinearlo horizontalmente pones este parametro, recuerda poner los links en el html*/

divcentral1 {
background-color: #009900
}
/*color de fondo, verde. Aqui es donde pones la imagen*/

divcentral2 {
background-color: #000000
}
/*color de fondo, negro. Aqui es donde pones el texto de debajo de la imagen*/

#menu li {
display: inline;
}
/*Construyes en html un menu bajo la propiedad li, para alinearlo horizontalmente pones este parametro, recuerda poner los links en el html*/
Perdon, sin querer repeti el parametro para la propiedad li...sacale uno entonces
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 15:48.