Imagen no se ajusta a la tabla

Hola a todos. Primero me presento, soy Leo de Junin, Bs.As. y no me dedico a esto en realidad, pero quiero hacer mi propia pagina y tengo un problema. Yo soy programador de microprocesadores y la pagina es acerca de esto, asi que si alguien necesita ayuda con algo parecido sera un placer ayudarlos.

Hace mucho que no toco html, pero les cuento mi problema:
Diseñe una pagina de marcos, 3 marcos exactamente, titulo arriba, barra lateral izquierda y principal. Dentro del titulo coloque una tabla de ancho 100% con dos celdas. En la celda superior esta el logo y en la inferior hay un menu en css. La cosa funciona bien, pero el problema es que la imagen del logo no se ajusta al 100% de la celda, osea, si le pongo a la imagen width 100% y heigth 100% la imagen queda extremadamente grande (en ancho, no en largo que queda bien y si se ajusta a la celda), pero si le pongo width 70%, queda bien. El problema esta cuando cambio la resolucion de la pantalla, si la paso de 1024x768 a 1280x1024 la imagen queda corta con 70% y la llevo a 85% para que se ajuste, si la pongo en 100% vuelve a quedar grande. No he probado en resoluciones mas bajas, pero creo que pasara algo parecido.

Ustedes que estan con esto todos los dias, que opinan?
NO tengo el codigo aca, pero de ser necesario se los paso.
Les pido algo, opinen en gral, si mi idea de marcos les parece maso, tiren otra idea. Es lo que mejor se me ocurrio para que el logo y nombre este siempre presente.
En la barra lateral cargo una imagen que indica en que parte de la pagina estoy, es decir, Home, La empresa, Ingenieria, Contacto, etc.

Gracias a todos.

Buenas,
no te recomiendo el uso de frames, su uso está casi extinto y muy obsoleto, mi recomendación es el uso de DIVs y CSS para la maquetación, hay muchos manuales en la red acerca de esto.

Aunque no te entendi bien tu problema, no se el tamaño de la celda, y por lo que entiendo ese width y heigth a 100% se lo aplicas a la imagen y no me parece buena idea..

En cualquier caso, si dices que a ti te funciona no voy a indiscuirme más de lo necesarío en tu proyecto, como "arreglo" puedes usar javascript para redimensionar el ancho y alto de la imagen a cada resolución, no es aconsejable, pero debería funcionarte, maxime si lo que buscas es algo sencillito y no encuentras a nadie que te pueda ayudar mas.

Para orientarte..
screen.width -> devuelve el ancho de la resolución del que imprime la web.
screen.heigth -> el alto
En base a esto y con if's puedes detectar las diferentes resoluciones disponibles, y en cada caso, para redimensionar la imagen te paso este otro código.
getElementById("imagen").style.width="70%;
getElementById("imagen").style.heigth="70%;

Teniendo tu imagen id="imagen"

Saludos.

Bueno, gracias che!, lo voy a tener en cuenta. Imagino que es obsoleto porque como dije, hace años que no programo html y me quede en el tiempo, jajaja.
La idea es una imagen diseñada de fondo con el logo pegado, fija, sin flash ni nada, me interesa que vean la pagina, no que digan "¡Que lindo hizo el logo!" asi que por esta razon es sencilla. Luego mas abajo un menu en css horizontal, tambien comun con tonos de color como la imagen, y una imagen lado izquierdo escritura vertical que diga, Home, Ingenieria, etc, con el estilo de letra del logo; es decir, que esta imagen cambie al seleccionar otro item del menu y a su vez cambie la informacion y vista de la pagina en si, excepto el logo de arriba y el menu. Tampoco me interesa la instruccion "current" del menu, siempre esta todo disponible.

Bueno, gracias y lo voy a tener en cuenta. y cualquier duda te preguntare.

Hola neisserian89 te hice caso, estoy usando <div> y quiero hacer lo siguiente.
Una cabecera, una barra lateral a la izquierda, una parte de contenido y un pie de pagina; pero me surgen problemas:

1. EL menu no puedo pegarlo a la imagen en la cabecera.
2. Cuando achico la ventana del navegador, se me cambia la posicion de algunos DIVs, digamos, el de contenido se pone abajo de la barra.
3. Tengo cosas en el css y cosas en el html y se me esta complicando un poco.
4. Como hago para cambiar el contenido con el menu? Con los frames era mas facil creo.

Gracias a todos.

Hola leo,
un frame que pongas a la izquierda, con lo que usas seria algo tal que así:

<div id="menuizq"> Tu contenido </div>

css
#menuizquierda
{
position:absolute;
left:0px;
top:0px;
width:20%; // por ejemplo
height:100%;
}

Ahora para posicionar el header, lo mismo, solo que el left, seria de un 20%, si lo quieres estricamente pegado, o usar margin-left o un left de 21%+ para separarlo un poco de el menu izquierdo.
Sabiendo esto..
1. Como que no puedes pegarlo en la imagen de la cabecera?, a que te refieres?.
2. Es por que estas usando porcentajes como valor de ancho, prueba con pixeles.
3. Usa dreamweaver cs5, te mete los "includes" como ficheros nuevos en una barra por debajo de donde estan los ficheros realmente abiertos, o abre los 2. Estoy suponiendo que lo dices por que usas un link rel para separar el html del css, en caso contrario, hazlo, y no andaras de arriba a abajo viendo css y html, estará todo más limpio.
4. Eso si es un handicap, todas tus páginas deberían tener la misma estructura, al menos en los elementos que no quieres tocar, y la recarga de la página seria completa.
Para evitar esto está AJAX, carga contenidos de otras páginas en un elemento (div por ejemplo) de la principal. Se simplifica mucho con JQuery, con su funcion load, echale un vistazo que es muy facilito http://api.jquery.com/load/

Siempre puedes volver a los frames y explicarnos mejor el problema, y nos ayudaría mucho ver el código de la estructura de tu web para ver que está fallando.

Saludos y suerte.

Bueno, hice una imagen de como me gustaria la idea gral. y con los detalles que no me gustan, pero aun sigo intentado subirla.

[img]escritorio\dibujo.jpg[/img]

Aca les adjunto los archivos html y css:


<link href="css/style.css" type="text/css" rel="stylesheet">

</head>

<body>
<div id="Main" align="center">
<div id="Title">
<img margin="0 0 0 0" padding="0" src="Images/logo_web.jpg" border="0" height="130" width="1000">
<div id="menu1">
<ul>
<li><a href="#nogo"><b>Home</b></a></li>
<li><a href="#nogo"><b>La empresa</b></a></li>
<li><a href="#nogo"><b>Proyectos</b></a></li>
<li><a href="#nogo"><b>Contacto</b></a></li>
</ul>
</div>
</div>
<div id="Bar"> Tu contenido </div>
<div id="Contain"></div>
<div id="Pie"></div>
</div>
</body>

</html>


y el css:

body{
margin:0 0 0 0;
background: url(../Images/fondo.gif);

#Main {
width: 1000px;
height: 768px;
}

#Title {
}

#Bar {
position:absolute;
left:150px;
top:0px;
width:20%; // por ejemplo
height:100%;
}

#Contain {
}

#pie {
}



#menu1 {
padding:0 0 0 150px; margin:0 0 0 0; list-style:none; width:1000px; height:35px;
background:#fff url(Img/button1.gif); position:relative; border:1px solid #000;
border-width:0 1px; border-bottom:1px solid #444;
}
#menu1 li {
float:left;
}
#menu1 li a {
display:block; float:left; height:35px; line-height:35px; color:#aaa; text-decoration:none;
font-size:12px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center;
padding:0 0 0 16px; cursor:pointer;
}
#menu1 li a b {
float:left; display:block; padding:0 32px 0 16px;
}
#menu1 li.current a {
color:#fff; background:url(Img/button3.gif);
}
#menu1 li.current a b {
background:url(Img/button3.gif) no-repeat right top;
}
#menu1 li a:hover {
color:#fff; background:#000 url(Img/button2.gif);
}
#menu1 li a:hover b {
background:url(Img/button2.gif) no-repeat right top;
}
#menu1 li.current a:hover {
color:#fff; background:#000 url(Img/button3.gif); cursor:default;
}
#menu1 li.current a:hover b {
background:url(Img/button3.gif) no-repeat right top;
}


}

Como veran no necesito un empujoncito, necesito que me remolquen. Gracias a toos por su tiempo