Web que mantenga las dimensiones

[ferola]

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.

[Triby]

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.

[ferola]

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.

[gree]

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

[chuekeron]

Iniciado por Triby

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

[ferola]

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.

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!

[chuekeron]

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

[chuekeron]

Iniciado por chuekeron

#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