No puedo cambiar el tamaño de las imagenes

AlbertoC · #1 (**permalink**) 31/12/2012, 09:05

Hola soy nuevo aquí, saludos a tod@s y feliz fin de año.
Estoy creando una web nueva para practicar y hay un error no se si esta en la estructura del código o en los estilos CSS. El caso es que dentro del div principal estoy poniendo imagenes con la etiqueta img y les aplico el tamaño con weigth y height pero a partir de la 4 imagen no se que pasa que no lo puedo aplicar y las imagenes se salen del div. Estoy empezando en esto, A ver si alguien me puede ayudar.

Código HTML:

<! doctype html>
<html lant="es">
	<head>
		<meta charset="utf-8" />
		<title>Infotutos</title>
		<link rel="stylesheet" href="Estilos.css" type="text/css" />
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	</head>
	<body>
		<div id="contenedor"> 
   			<div id="cabecera"> 
   				<img src="imagenes/cabecera.jpg" width="770" height="150">
    		        </div> 
    		<div id="cuerpo"> 
	       			<div id="lateral"> 
	          			<ul> 
		             		 <li><a href="#">Tutoriales</a> 
				             <li><a href="#">Videotutoriales</a> 
				             <li><a href="#">Noticias</a> 
				             <li><a href="#">Foro</a> 
				             <li><a href="#">Música</a> 
				             <li><a href="#">Vídeos</a> 
				              <li><a href="#">Webs</a> 
				             <li><a href="#">Foro</a> 
				             <li><a href="#">Humor</a> 
				             <li><a href="#">Deportes</a> 
				   
		         		</ul> 
	       			</div> 
	        		<div id="otrolado"> 
	          			<img src="imagenes/navidad.gif" width="120" height="180"> 
	      		 	</div> 
	       		<div id="principal"> 
                               <img src="imagenes/1.png" weigth="300" height="300"><br>
                                <img src="imagenes2.png" weigth="300" height="300"><br>
                                <img src="imagenes/3.png" weigth="300" height="300"><br>
                                (A PARTIR DE AQUI PARA ABAJO NO PUEDO MODIFICAR NINGUNA  
                                 IMAGEN SE QUEDA ELLA DEL TAMAÑO QUE LE DA LA GANA)
                         </div> 
    		</div> 
		    <div id="pie"> 
		       © 2012 Infotutos.com 
		    </div> 
	</div> 
   </body>
</html>

Código HTML:

BODY { 
    font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif; 
    margin: 10 0 10 0px; 
    text-align: center; 
    background-color:#000000; 
} 
#contenedor{ 
    text-align: left; 
    width: 770px; 
    margin: auto; 
} 
#cabecera{ 
    -moz-border-radius: px;
    -webkit-border-radius: px;

} 
#cuerpo{ 
    margin: 10 0 10 0px; 
} 
#lateral{ 
    width: 160px; 
    background-color: #999999; 
    float:left; 
} 
#lateral ul{ 
    margin : 0 0 0 0px; 
    padding: 0 0 0 0px; 
    list-style: none; 
} 
#lateral li{ 
    background-color: #ffffcc; 
    margin: 2px; 
    padding: 2px; 
    font-weight: bold; 
} 
#lateral a{ 
    color: #3333cc; 
    text-decoration: none; 
} 
#otrolado{ 
   	width: 120px; 
   	float: right;	
} 
#principal{ 
    margin-left: 170px; 
    background-color: #ffffff; 
    padding: 4 4 4 4px; 
    width: 460px; 
    text-align: center;
} 
p{
    text-align: justify;
}
#pie{ 
    background-color: #cccccc; 
    padding: 3 10 3 10px; 
    text-align:right; 
    clear: both; 
}

pzin · #2 (**permalink**) 31/12/2012, 09:51

weigth no existe en inglés. En todo caso sería weight, pero weight no es ancho sino peso. Tienes que usar width —que luego más arriba si lo usas bien.

Si tus imágenes miden 300x300 y te funciona con weigth es porque el navegador ignora ese atributo, y cuando en CSS o HTML especificas sólo una medida —ancho o alto— la otra se ajusta proporcionalmente. Entonces, tal como lo tienes, sólo estás indicando la altura con height y el ancho, width, se ajusta proporcionalmente; en tu caso como son los dos iguales no notas nada raro.

Usar editores de texto con autocompletado —la mayoría de buenos editores lo traen, como Sublime Text o Notepad++— normalmente evita errores de este tipo. Aparte vas más rápido con el código.

AlbertoC · #3 (**permalink**) 31/12/2012, 10:08

Cita:

Iniciado por Bonez

weigth no existe en inglés. En todo caso sería weight, pero weight no es ancho sino peso. Tienes que usar width —que luego más arriba si lo usas bien.

Si tus imágenes miden 300x300 y te funciona con weigth es porque el navegador ignora ese atributo, y cuando en CSS o HTML especificas sólo una medida —ancho o alto— la otra se ajusta proporcionalmente. Entonces, tal como lo tienes, sólo estás indicando la altura con height y el ancho, width, se ajusta proporcionalmente; en tu caso como son los dos iguales no notas nada raro.

Usar editores de texto con autocompletado —la mayoría de buenos editores lo traen, como Sublime Text o Notepad++— normalmente evita errores de este tipo. Aparte vas más rápido con el código.

Vaya cagada

que fallo mas tonto. Muchas gracias!!!!! Estoy utilizando el Sublime text y si que es verdad que avanzas mucho sobre todo yo que voy a paso de tortuga XD
Otra cosa, para pasar texto e imágenes de un pdf directamente a código, no hay algún programa que sea mas fácil? Porque sino me tiro horas para pasar solo 1 pdf.