Fotos y texto

[xafft]

Buenas,

Por fin he conseguido subir el boceto de página aunque me estoy encontrando con muchos problemas, a ver si podeis ayudarme.

1- Como vereis no se ven las fotos, en cambio en el pc si se veian. Estoy poniendo mal los enlaces? En los ejemplos pone que si no especifico ruta busca la foto en el directorio actual.

2- Formulario: Le he puesto max-height al div formulario. Si pongo mas texto del que cabe no deberia estar fuera de rango y por lo tanto no visible?

3- En IE6 hay un espacio entre la cabecera y el menu que no deberia existir. En cambio en FF esta pegado pero hay un espacio entre el menu y el texto del contenido que tampoco deberia existir.

4- Y por ultimo, es normal el hueco que se crea entre el texto y las fotos? Si os fijais en la foto de abajo, cada vez hay mas diferencia con el texto por la parte de arriba.


http://telefonica.net/web2/xpscat/index.html

El diseño de la página es un asco, no me lo tengais en cuenta que solo estoy practicando con el posicionamiento de los elementos de la página ;)

Gracias, un saludo!

[willyfc]

hola xafft:

mira los primeros errores que he visto en tu web son:
no puedes poner:

Código HTML:

        padding: 0;
	padding-left: 5px;
	padding-bottom: 5px;

los navegadores solo obedeceran a tu primera instrucción y además tienes que ahorrar lineas de código por ejemplo:

padding : top right botton left;

ese sería el orden y lo mismo con el margin, si quieres centrar algo como en el caso de tu menú tan solo tienes que poner margin: 0 auto;

tampoco puedes ponerle medida fija al contenedor si no sabes cuanto puede llegar tu contenido en cada pagina

mira modifique un poco tu código comparalo con el tuyo

Código:

body {
	margin:0;
	padding: 0;
	background: #FFFFFF;
}

#contenidor {
	width: 100%;
	height: auto;
	display:table;
	margin: 0;
	padding: 0;
	background-color: #FFFFFF;
	text-color: white;
	position: relative;
}

#capcalera {
	width: 100%;
	height: 124px;
	margin: 0;
	padding: 0;
}

#menu {
	width: 80%;
	height: 40px;
	background-color: #3399FF;
	margin: 0 auto;
	font-size: 20pt;
	text-align: center;
	position: relative;
	padding: 0;
}

#contingut {
	width: 80%;
	margin: 0 auto;
	background-color: #99CCFF;
	color: white;
	height:auto;
	display:table
}

#foto1 {
	background-color: #3399FF;
	margin-right: 10px;
	padding: 0;
	width: 200px;
	height: 200px;
	float: right;
	border: 1px solid black;
	position: relative;
	z-index: 2;
}

img {
	display: block;
}

#foto2 {
	background-color: #3399FF;
	margin-right: -30px;
	margin-top: 100px;
	padding: 0;
	width: 200px;
	height: 200px;
	float: right;
	border: 1px solid black;
	position: relative;
	z-index: 1;
}

#foto3 {
	background-color: #3399FF;
	margin-right: -100px;
	margin-top: 200px;
	padding: 0;
	width: 200px;
	height: 200px;
	float: right;
	border: 1px solid black;
	position: relative;
	z-index: 3;
}


#formulari {
	background-color: #CCFFFF;
	color: blue;
	padding:0 0 5px 5px;
	width: 150px;
	font-size: 10pt;
	z-index:100;
	position:absolute;
	top:0px;
	right:0px
}


.sombra img {
	display: block;
	position: relative;
	margin: -6px 6px 6px -6px;
}

.sombra {
	float:left;
	background-color: #A7A7A7;
	margin: 10px 0 0 5px;
}

Bueno saludos espero te sirva

[dacho]

Hola willyfc,

los navegadores solo obedeceran a tu primera instrucción y además tienes que ahorrar lineas de código por ejemplo:

Lo del final puede ser importante pero no tanto... con respecto a que los navegadores obedeceran a la primera instruccion es 100% erroneo... De hecho pasa lo contrario en ese caso el elemento que contenga:

Código HTML:

padding: 0;
padding-left: 5px;
padding-bottom: 5px;

Culminara teniendo

Código HTML:

padding: 0 0 5px 5px  ;

Y es totalmente valido en algunos casos.

En fin: Si se define dos veces una misma instruccion para un mismo elemento, el explorador utilizara la ultima que se definio

[willyfc]

dacho

pienso que es un buen punto lo que dices de los navegadores pero a lo que me referia es la forma en que lo puso, por que si pones solamente

Código:

padding: 0

esto abarcaría los cuatro lados de un div y si llega a leer la última instrucción solo tendría el padding abajo

bueno ese era mi punto pero ya que mencionas eso lo investigaré más

gracias por la correción

[xafft]

Buenas y gracias por responder,

A mi me sonaba que la ultima instruccion es la que vale aunque tienes razon en que mejor ponerlo en una sola linea. Ya he corregido lo que me has dicho.

Respecto a lo del formulario ya he averiguado como corregirlo para que no me salga de la cabecera. Le pondre un overflow.

Lo que me gustaria que me dijerais es porque no me sale ninguna foto al colgar la web. Lo he puesto tal como dice el libro y en mi pc salian perfectamente. Tengo puesto esto dentro de un div:

Código:

<img src="images/foto.jpg" alt="foto" width="200" height="200" />

Sabriais decirme tambien como hacer para que la foto de abajo no deje tanto margen arriba? Parece como si el texto respetase el margen izquierdo unas 10 linias por arriba de la foto.

[dacho]

Holas, Las fotos no te salen porque seguramente vos trabajas en windows y el servidor es linux.

Linux es case sensitive, por lo que la direccion "images/foto.jpg" es diferente a "Images/foto.jpg" ( la I mayustula es tu error)

llamalas como

Código HTML:

<img src="Images/foto.jpg" alt="foto" width="200" height="200" /> 

y solucionaras tu problema de llamar a la fotos.

Y no entiendo tu ultima pregunta.

Saludos.

[xafft]

Muchas gracias dacho no sabia eso del servidor linux. Realmente hay que saber mas cosas de las que pensaba :P

La ultima pregunta me referia a que si miras la foto que queda mas arriba el texto le pasa justo por arriba mientras que en las otras fotos cada vez deja mas espacio entre la foto y el texto por arriba.

La primera linia del segundo parrafo que empieza por "Rutrum in sunt dictum.." porque no sigue por la derecha hasta llegar a la foto de arriba? No se si me explico.