Presentacion y ayudita

jose0071990 · #1 (**permalink**) 09/09/2009, 14:46

Bueno primero presentarme ya que este es mi primer post, me llamo jose manuel, soy de malaga y no es que sea un experto en html, pero algo me defiendo y tengo problemitas... haber si me pudierais ayudar a ceentrar las noticias entre lo de la foto del mes y las especies y subir la tabla a donde pone noticias para que ponga noticias y justo debajo la tabla, pegada.

Poner una imagen encima de la foto del mes para cambiarla facilmente cada mes.

Y lo ultimo seria poner debajo de las especies, una imagen a unos 20px de diferencia de altura (por debajo) de las especies... ah si, la web: jurjurperez.webcindario.com nose si se considerara como spam...

Gracias por adelantado =D

mayid · #2 (**permalink**) 09/09/2009, 20:00

Centrar el texto, con text-align: justify

Fijate donde tenes el estilo11, y agregale esa linea.

Estilo11 {
font-family: "Comic Sans MS";
font-size: 14px;
text-align: justify
}

En que navegador estas viendo la pagina? En Opera veo la columna central bien compuesta, pero despegada. En cambio en explorer (a 800 px de ancho de pantalla) veo titulo y columna pegados, pero muy anchos como para encajar.

Proba:

#cabecera-noticias {margin-botom: 0px; padding-bottom: 0px}

y si todavia no las uniese, sumale

table {margin-top: 0px; padding-top: 0px}

En cuanto al ancho que se desborda en explorer, yo sugiero identifiques la tabla en cuestion, busques el tag <th> y elimines el atributo height que tiene seteado, porque lo que esta pasando es que con el alto definido, intenta encajar el texto hacia lo ancho (me parece a mi).

mayid · #3 (**permalink**) 09/09/2009, 20:08

Cita:

Poner una imagen encima de la foto del mes para cambiarla facilmente cada mes.

A esto no lo entendi.

Cita:

Y lo ultimo seria poner debajo de las especies, una imagen a unos 20px de diferencia de altura (por debajo) de las especies...

Aqui tenes que envolver las etiquetas que tenes en algun contenedor (una tabla, o un div, como te sientas mas comodo. Pero para ponerte a tono con lo que estila hoy por hoy, usa divs).

Vos tenes:
<a href="especies.html etc> <img src=tal.jpg" alt=""> </a>

Esto, flotado a la derecha. Envolvelo, y flota el div contenedor a la derecha, en vez de la img.

<div style="float:right">
<a href="especies.html etc> <img src=tal.jpg" alt=""> </a>
<span style="margin-top:20px; padding:5px; height: 40px; width:170px">
</span>
</div>

Nota que las etiquetas span son lo que pedias. Es decir, un lugar a 10px de distancia de "especies".

jose0071990 · #4 (**permalink**) 10/09/2009, 09:24

Hola, gracias por las respuestas... pero aqui algo no anda bien... lo puse asi para lo de adecasub

Cita:

Y no me va, lo que hice fue quitar lo que tenia antes y poner eso, lo que hace es poner el logo de adecasub ENCIMA de las especies, asi:

Menu

Texto Pelicula

Fotomes Noticias ADECASUB
Especies

osease, que se pone lo de adecasub encima de las especies, pero no en right, se pone a la izquierda de especies...

En cuanto a lo de centrar las noticias yo lo visualizo con ie, aveces lo ago con firefox y me pasa lo mismo que ati con opera que sale despegada una cosa de la otra Y REALMENTE NO DEBO CENTRAR LAS NOTICIAS debo poner en left la imagen de la izquierda que no se alinea con la esquina izquierda de el menu, sin embargo en right si lo hace. en cuanto a lo de centrar el titulo noticias con lo de justify no sirvio

Lo de juntar las dos partes tampoco resulto.. o esque yo lo puse mal... podrian darme el codigo completo para simplemente sustituir? esque creo que lo pongo mal o nose...

El codigo de la pagina lo tienen en el index, intente ponerlo aqui pero no puedo porque tiene links despues de quitar mucho texto, despues intente poner un txt en el hosting pero lo reconoce como html y lo "ejecuta" asi que solo me queda otra que... jurjurperez.webcindario.com/index.html -> Ver -> Codigo fuente

Ah si, en lo de superponer imagenes me referia a poner 2 capas div, una la que dice foto del mes que seria como el recuadro, y otro donde va la foto que se cambia todos los meses con simplemente reemplazar un archivo en el hosting

PD: Perdon por el tocho

mayid · #5 (**permalink**) 10/09/2009, 10:19

Bueno, lo mejor para vos es usar una tabla, que tenga dos columnas laterales de ancho fijo. Algo asi:

#columna1, #columna3 {width:200px}

<table style="width:800px; text-align:center; padding:0; margin:0">
<tr>
<td id="columna1">
</td>
<td id="columna2">
</td>
<td id="columna3">
</td>
</tr>
</table>

Esto, para asegurarte de que las fotos laterales esten bien alineadas, etc. No usas un programa de edicion grafica sino solo html? Tenes muy buen resultado, entonces.

Pero siguiendo con lo que ya esta, te digo. Con lo del float me equivoque. Tendrias que usar la misma propiedad que estabas usando. Y ponerle un ancho fijo.

<div id="left-right" align="left" style="width:175px">
<div>
<a href="Especies.html" target="_self">
<img src="Imagenes/tallas-especies.jpg" width="170" height="212" vspace="149" align="right"></a>
</div>

<span style="margin-top:20px; padding:5px; height: 40px; width:170px">
</span>

</div>

mayid · #6 (**permalink**) 10/09/2009, 10:31

La foto del mes en que se diferencia de la de especies? Por lo que entiendo, ya tenes logrado en el recuadro "especies" lo que queres lograr con "foto del mes". Es lo mismo.

Ojala alguien pueda pasarte el texto tal cual necesitas, pero la verdad es que si le tomas la logica a las tablas o a los divs te va a ir mejor, con ayuda de tutoriales css.

jose0071990 · #7 (**permalink**) 10/09/2009, 11:50

Perfecto muchisimas gracias.

Vale ahora se me presentan algunas dudas, teniendo ya la tabla y todo como ago para subir la foto del mes y las especies mas hacia arriba ya que estan centradas de arriba a abajo de la tabla.

si, lo tengo logrado, no tengoq ue hacer cambios a esas fotos lo que tengo es que poner una imagen encima de la otra osea tengo la foto del mes RECUADRO y encima yo quiero poner la foto en si, la que seria la foto en si, vaya la del pescado que iria ahi. entonces quedaria el recuadro y encima la foto... nose si me entendistes

Uso dreamweaver pero utilizo muuchas veces el codigo para cambiar todo.

Muchisimas gracias por tu ayuda, use las tablas, lo mas sencillo aun no lo subi

mayid · #8 (**permalink**) 10/09/2009, 15:37

No habia entendido que el recuadro de foto del mes era una foto en sí.

Para tener una foto encima de otra, hay que darle position:absolute. Con esto, la liberas del sistema de coordenadas (x,y), con lo cual la podes mover "volando" encima de otros objetos sin mover a estos de lugar.

Si le pones ese cualidad css a tu img, lo que va a pasar es que aparecerá en el punto (0,0), es decir arriba a la izq de la pantalla. Esto, porque el contenedor de un elemento con "position:absolute" es el body.... a menos que se declare un elemento menor como contenedor (que es lo que vamos a hacer).

Una vez dada una "position" a un elemento, podes moverlo con estos atributos:
top: 30 px // es decir, 30pixeles de espaciado arriba hacen que baje tu elemento.
right: 60px // es decir, posicionate a 60pixeles de distancia del borde derecho de la pantalla.

o tambien:
bottom: 20px y left: 15px

Si la foto estuviera encuadrada dentro de un contenedor con position: relative o position: absolute, entonces las coordenadas (0,0) para tu foto no serían las del borde del monitor, sino las del borde del contenedor. Y desde ahi, podría contar con los comandos : top - left, etc para mover con numeros positivos y negativos tu elemento "desde le punto (0,0)".

Vos tenes un tema que solucionar, y es justamente cual es el contenedor para la foto a la que vas a darle position:absolute . Si tuvieses ese fragmento de codigo envuelto en un div, sencillamente le darías position:relative a ese div, que significa "sigue ocupando tu espacio"... "pero responde a los atributos left - top - right -bottom ( se convierte en elemento movil, pero tambien en un contenedor de otros elementos con position asignada, es decir que su esquina superior izquierda será el punto (0,0) de los elementos que tenga dentro)

El problema que tendrías que resolver, es el de envolver tu foto:

<p><a href="Lo-mejor.html" target="_blank"><img src="Imagenes/Foto-mes.gif" width="170" height="212" align="left" /></a></p>

Y luego sumarle otra foto, con position : absolute. Algo así:

<div style="position=relative">
<p><a href="Lo-mejor.html" target="_blank"><img src="Imagenes/Foto-mes.gif" width="170" height="212" align="left" /></a></p>

<span style="position:absolute; top:20px"><img src="Imagenes/verdadera_foto_del_mes.gif" alt="" /> </span>
</div>

Aca le doy la position y 20px de margen a un contenedor span, que va a tomar el tamaño de la foto que contenga. (los 20px son para no superponer el titulo. Podes darle un padding de 2px tambien para respetar los bordes laterales.

jose0071990 · #9 (**permalink**) 10/09/2009, 16:22

mayid si fueras gay te pediria... casate conmigoo!!!!!! jajaja muchisimas gracias de verdad lo de gay era broma y lo de casarte tambien jajaja MUCHAS GRACIAS DE VERDAD ahora solo queda subir las imagenes de la tabla hacia arriba, no en el medio de el vertical, entiendes?
DE VERDAD MIL GRACIAS

PD: No soy gay en jajaja

EDIT: QUE!!!! DIOS MIO lo he visualizado con el firefox y esta todo mal colocado porque?! :O:O

mayid · #10 (**permalink**) 10/09/2009, 18:42

A vos que te gustan los pecesitos, fijate en estos:

www.libasoles.com.ar/sol.html // Tu video tiene que ver con lo que yo hago en Argentina.

Cita:

Te queda esto por corregir. Tienes dos veces el width! Y lo mejor es usar el espacio de style para definir estas cosas.

Ademas no tiene que ser 800px si tu pantalla es de 1024 px.
Fijate lo que suman tus columnas: 382 + 18 + 473.

La del medio, de 18px!, contiene una tabla de 485px.

Es decir, quizas FF se hace lio con todo esto. Pero en Opera se ve bien.

Saludos, y mejora tus chistes, que no son como tirar una piedra al agua y decir que le distes al blanco.

jose0071990 · #11 (**permalink**) 11/09/2009, 05:38

pues creoo... que no salio

Cita:

<table style:"text-align:center; padding:0; margin:0">
<tr>
<td width="382" id="columna1"><p><div style="position:relative">
<p><a href="Lo-mejor.html" target="_blank"><img src="Imagenes/Foto-mes.gif" width="170" height="212" hspace="15" align="left" /><span style="position:absolute; top:44px; left: 4px; width: 161px; height: 165px;"><img src="Imagenes/Fotoparames.jpg" alt="" width="162" height="164" hspace="15" /></span></a></p>

</div></td>
<td width="485" id="columna2"><div id="noticias2">
<div id="cabecera-noticias">
<div align="center" class="Estilo17">Noticias</div>
</div>
<table width="485" height="669" border="1" align="center" cellspacing="5" bordercolor="#3366FF">
<tr align="center" valign="middle">
<th scope="col"><div align="left">
<pre class="Estilo11">Hoy nace una nueva web,una web titulada el rincón del pescasub,
dedicada a la pesca submarina donde habrá información para los que
quieran empezar en este apasionado y peligroso deporte y para los que
no son tan noveles.
La finalidad de esta web es sencillamente pasarlo bien y formar una gran
familia, esperamos que guste ya que en este proyecto se ha empleado
mucho tiempo con la ilusión de que todos disfrutemos de ella ya que sin
vosotros esto simplemente sería un puñado de letras...
Punto de atención que hay unas series de normas que deben respetar
que podéis ver aquí NORMAS.
Estas normas ayudaran a que la web este más ordenada y no haya problemas.
¡Muchísimas gracias a todos por estar ahí ya que si no nada habría sido posible!</pre>
<p align="right"> <span class="Estilo11"><img src="Imagenes/Rinconpescasubfoto.png" width="400" height="300" /></span> <span class="Estilo16">El equipo de El Rincón Del Pescasub © </span></p>
</div>
<div align="left"></div></th>
</tr>
<tr>
<th height="354" scope="col"> </th>
</tr>
</table>
</div></td>
<td width="473" id="columna3">
<p><a href="Especies.html" target="_blank"><img src="Imagenes/tallas-especies.jpg" width="170" height="212" hspace="20" vspace="149" align="right"></a></p></td>
</tr>
</table>

se sigue haciendo un lio o yo lo puse mal

Si tienes FF abrelo con el FF y veras de que ablo, toda la tabla que estan esas 3 cosas se suben arriba, a la altura del menu, y a la derecha como si tubiera propiedad absolute