Trabajando con Valores porcentuales

[juanpablosolari]

Estimados, esoty diseñando una web adaptable a todas las resoluciones y me surge la siguiente duda:

El header tiene como valores ancho 100% y alto 10%.
Ahora en el header quiero insertar una imagen sin fondo PNG que va ser el logo de la web. ¿Que tamaño tendria que tener la imagen? ya que segun que resolución que tenga el monitor el div se va achicar o agrandar ....


Saludos!
Gracias!

[cristian_cena]

Hola juan.
Si no malinterpreto te diría que el tamaño es subjetivo, según la estética que persigas o diseño que debas respetar.
Podes trabajar la imagen con porcentaje (width: ...%;) y/o con valores mínimos y máximos (min-widh, max-width / min-height, max-height)

Un ejemplo que hice una vez con una imágen dentro de un párrafo, pero que bueno, solo la quitas de ahi jaja: http://jsfiddle.net/cristian_cena/T2BRy/
Acá un artículo de ethan marcotte, uno de los padres (sino el) del responsive web design: http://www.alistapart.com/articles/r...ve-web-design/

Espero haberte ayudado, un saludo.

[juanpablosolari]

Paso a mostrarte : http://www.reggaelasplantas.com.ar/rlpweb/

La botonera y la imagen que use para el logo, se mueven segun la resolucion que tenga, hay alguna forma de estaquearlas para que no se muevan más?

El CSS es este:

Código:

*{
	margin: 0;
	padding: 0; 
}

body{
	background:url(img/bg1.jpg) no-repeat fixed;
}

#header{
	background:#26221E;
	width:100%;
	height:10%;
	position:fixed;
	top: 0px;
}

.datahd{
	background: #26221E;
	height:100%;
	width:50%;
	position:relative;
	left:25%
}

.logo{
	width: 100px;
	height:40px;
	position:relative;
	top:23%
}

.botonera{
	position:relative;
	top:-7%;
	left: 58%;
}

.botonera li{
	display:inline;
}

.botonera li img{
	float:left;
}

.botonera li a{
	color: #82734a;
	font-size:80%;
	font-family:Helvetica, Arial, sans-serif;
	text-decoration:none;
	float:left;
	padding: 5px;
}

.botonera li a:hover{
	color: #a17416;
	font-size:12px;
	font-family:Helvetica, Arial, sans-serif;
	text-decoration: underline;
	float:left;
	padding: 5px;
}

#footer{
	background:#26221E;
	width:100%;
	height:10%;
	position:fixed;
	bottom:0px;	
}

.dataft{
	background: #26221E;
	height:100%;
	width:50%;
	position:relative;
	left:25%
}

.creditos{
	position:relative;
	top:15%;
	
}

.creditos p{
	font-size:12px;
	font-family:Helvetica, Arial, sans-serif;
	color:#FFF;
	text-align:center
}

#content{
	background: #26221E;
	width:50%;
	height:76%;
	position:absolute;
	margin-top:1%;
	top: 140px;
	left: 25%;
	top: 10%;
}

Necesito que quede quieto lo que lleva contenido sino hay monitores que no van a poder ver nada... Alguna idea?

[emprear]

Css ya nos permite hacer esto con la propiedad background-size

http://foros.emprear.com/css/bg-size-css3/

Otras alternativas
http://css-tricks.com/perfect-full-p...kground-image/

saludos

[DanielRGB]

Yo limitaría en todo lo posible valores porcentuales.
Úsalo solo cuando no tengas más remedio.