Foros del Web » Creando para Internet » CSS »

Fotos y texto

Estas en el tema de Fotos y texto en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/11/2008, 06:52
 
Fecha de Ingreso: mayo-2008
Mensajes: 18
Antigüedad: 9 años, 6 meses
Puntos: 0
Fotos y texto

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!
  #2 (permalink)  
Antiguo 05/11/2008, 07:56
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Fotos y texto

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
  #3 (permalink)  
Antiguo 05/11/2008, 08:57
Avatar de dacho  
Fecha de Ingreso: junio-2008
Ubicación: Argentina
Mensajes: 374
Antigüedad: 9 años, 6 meses
Puntos: 21
Respuesta: Fotos y texto

Hola willyfc,

Cita:
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
__________________
Curso de SEO y HTML.
Diprox.com.ar // Diseño Web.
Mi twitter: @soydacho

Última edición por dacho; 05/11/2008 a las 09:06 Razón: le pifie en el left :P
  #4 (permalink)  
Antiguo 05/11/2008, 09:19
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Fotos y texto

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
  #5 (permalink)  
Antiguo 05/11/2008, 10:01
 
Fecha de Ingreso: mayo-2008
Mensajes: 18
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: Fotos y texto

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.
  #6 (permalink)  
Antiguo 05/11/2008, 10:12
Avatar de dacho  
Fecha de Ingreso: junio-2008
Ubicación: Argentina
Mensajes: 374
Antigüedad: 9 años, 6 meses
Puntos: 21
Respuesta: Fotos y texto

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.
__________________
Curso de SEO y HTML.
Diprox.com.ar // Diseño Web.
Mi twitter: @soydacho
  #7 (permalink)  
Antiguo 05/11/2008, 10:52
 
Fecha de Ingreso: mayo-2008
Mensajes: 18
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: Fotos y texto

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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:27.