Hola ya estoy de nuevo pidiendo ayuda, ya haora me surguen nuevas.
1.- Como puedo hacer la lista central "Noticias" para que en cada DIV pueda poner una fecha algo mas pequña y o bien arriba a la izquierda del div (sin escribir encima de la foto) o bien a la derecha del todo del div. podeis ver un ejemplo en esta pagina www.diocesisdevitoria.org
2.- Como queda mejor la pagina, haciendo una lista central como la que tengo realizada de Noticias o como los divs separados que tengo como Misas. lo digo porque he intentado sustituir las lista por div y todo se movia y nada me encajaba bien.
3.- Si utilizo la lista que parece mas facil, como puedo hacer para que el color del noticias h2 no me coja el color azul del h2 o el negro del menu h2.
De momento creo que si ayudais en este ya es mas que suficiente.
Dejo los codigos
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unidad Pastoral Santa Maria de Olarizu</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">[url="index.html"][img]IMAGENES/logotipoprueba.jpg[/img][/url]</div>
<div id="publicidad">[img]IMAGENES/banner.jpg[/img]</div>
</div>
<div id="navegacion">
<ul>
[*][url="quesomos.html"]Que somos[/url]
[*][url="dondeestamos.html"]Donde estamos[/url]
[*][url="contactos.html"]Contactos[/url]
[*][url="docinteres.html"]Documentos de interes[/url]
[*][url="foro.html"]Foro[/url]
[*][url="plantilla.html"]Inicio[/url]
[/list]
</div>
<div id="contenido">
<div id="menu">
<ul><h1>EDUCACION EN LA FE</h1>
[*] [url="catequesis.html"]Catequesis Familiar[/url]
[*] [url="pastoraljovenes.html"]Pastoral con Jovenes[/url]
[*] [url="pastoraladultos.html"]Pastoral con Adultos[/url]
[*] [url="pastoralfamiliar.html"]Pastoral Familiar[/url]
<h2>CELEBRACION DE LA FE Y LITURGIA </h2>
[*] [url="liturgia.html"]Comisión de Liturgia[/url]
[*] [url="oraciongrupal.html"]Experiencia de oración grupal[/url]
<h2>SOCIO CARITATIVA </h2>
[*] [url="caritas.html"]Caritas[/url]
[*] [url="social.html"]Comisión Social[/url]
[*] [url="mayores.html"]Comisión de Mayores y Enfermos[/url]
[*] [url="misiones.html"]Misiones y Solidaridad[/url]
[*] [url="penitenciaria.html"]Pastoral Penitenciaria[/url]
<h2>COORDINACION Y COMUNION</h2>
[*] [url="economica.html"]Comisión Economica[/url]
[*] [url="agentes.html"]Agentes de Pastoral[/url]
[*] [url="consejo.html"]Consejo Pastoral[/url]
<h2>SERVICIOS</h2>
[*] [url="limpieza.html"]Ornamentación y limpieza de las iglesias[/url]
[/list]
</div>
<div id="actualidad">
[img]IMAGENES/iconoticias.gif[/img] Actualidad </p>
</div>
<div id="noticias">
<ul>
[*]<a class="uno" href="oracion.html">[img]IMAGENES/oracion.jpg[/img]
</a>
[*]<a class="uno" > [img]IMAGENES/en construccion.jpg[/img]<h2> En Construcción</h2></a>
[*]<a class="uno" > [img]IMAGENES/en construccion.jpg[/img]<h2> En Construcción</h2></a>
[*]<a class="uno" > [img]IMAGENES/en construccion.jpg[/img]<h2> En Construcción</h2></a>
[*]<a class="uno" > [img]IMAGENES/en construccion.jpg[/img]<h2> En Construcción</h2></a>
[/list]
</div>
<div id="misa">[url="horariomisas.html"][img]IMAGENES/horariomisas.jpg[/img][/url]</div>
<div id="misa1"></div>
<div id="misa2"></div>
<div id="misa3"></div>
</div>
<div id="pie">
<div id="pieuno"><h2>Paginas
Webs
Amigas</h2> </div>
<div id="piedos">Ultima actualización - 16 de Enero de 2009 </div>
<div id="pietres">
<ul>
[*][url="#"]Directorio[/url][*][url="#"]Top Site[/url][*][url="#"]Mapa Web[/url]
[/list]
</div>
</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>
otra vez, nos encontramos!!! jaajja. Veo que ya has avanzado bastante y ya empieza a tomar otra forma tu trabajo. Si me permites, te puedo dar una mano. Ya casi terminas con la estructura de tu web, solo te faltan detalles que veo que te están haciendo zapatear, como a todos en algún momento. Pero son detalles pequeños.
te sugiero que sigas con la misma estructura del menú central. Ahora, tú quieres esa parte exactamente IGUALITITITO a la de dio.vito.?????? OK te mandaré los códigos, pero dentro de un ratito porque recién los voy a hacer. estamos???
Me estaba poniedo ha realizar el consejo y ayudad que me has dado, pero antes te queria preguntar.
La lista que me has escrito, no tiene puesto nigun enlace a nada, (me imagino que igual me lo has dejado para que lo ponga yo) pero pregunto por si acaso.
En la hoja CSS Veo que #libros{float:right; width:484px; height:350; margin:0px 8px 0px 8px} lo pones a la derecha (es asi o es para el ejemplo que me has dado?) y luego las medidas lo mismo pongo las tuyas o son un ejemplo y entoces tengo que poner las que yo crea conveniente?)
Por otro lado tengo un incoveniente que igual tu sabes, si por ejemplo pongo solo un cuadro de esos de la lista, los divs de la dereca en los que pongo misa se me descuadran todos, me imagino que es por el float y quizas para que no se muevan lo mejor seria ponerles unas medidas, pero no se que hacer, ¿ que harias tu? De todas formas eso podemos dejarlo para mas adelante.Demasiado me estas ayudando ya, tendre que incluirte en el apartado de colaboradores :wink:
1. cierto, no te he puesto ningún enlace, pero ya tú los pones. fue por falta de tiempo.
2. cierto, te puse float:right. Pero tú tienes que quitarlo y no poner ningún float. Quizás por eso se te descuadra, se me pasó!!! Lo que pasa es que en mi web tengo algo parecido a lo que estás haciendo y lo tome de allí para adaptarlo a tu web.
No le pongas ningún float. Si se te sigue descuadrando toda la estructa, avísame.
3. width:484px; height:350. Estás medidas también quítalas, son mías y se me pasaron. El height procura ponerlo al último en todo caso, de acuerdo a tu necesidad, conforme vayas avanzando en tu listado. El widht si lo estableces desde un comienzo. Al tuyo le puse width:355px, igual que la muestra de dio.vito.
mmm... avísame si sirvió lo que te mandé. Cualquier cosa, nos leemos!!!
<div id="noticias">
<ul>
[*]<a class="uno">[img]IMAGENES/oracion.jpg[/img]<h2>Del 18 al 25 de Enero</h2>
Semana de oracion por la UNIDAD DE LOS CRISTIANOS</p></a>
[*]<a class="uno" > [img]IMAGENES/en construccion.jpg[/img]<h2> En Construcción</h2></a>
[*]<a class="uno" > [img]IMAGENES/en construccion.jpg[/img]<h2> En Construcción</h2></a>
[*]<a class="uno" > [img]IMAGENES/en construccion.jpg[/img]<h2> En Construcción</h2></a>
[*]<a class="uno" > [img]IMAGENES/en construccion.jpg[/img]<h2> En Construcción</h2></a>
[/list]
</div>
1. veo que quedó bien el nuevo cambio. Ahora, la fresa sobre el chantilly: en html, cámbiale el height a las fotitos de 75 a70px y quedará todo bien bordeado.
2. puedes mejorar los 4 espacios, ponle las sgtes. medidas y si te gustan, quedan:
1. entre borde izq. y menu izq. : 9px 2. entre menu izq. y noticias: 13px 3. entre noticias y misas . 13px 4. entre misas y borde derecho: 13px
Pero, en el div contenido, debes poner width:800px. Ya saqué la cuenta, sumando los anchos de los 3 cuerpos + bordes + espacios, todo suma 800px. No se debe poner auto, es mejor darle un ancho definido.
3. que te parece si en la barra de navegación, mejor cambias el que somos por quienes somos.
4. supongo que encima de misa haz dejado ese hueco porque pondrás algo???
dime, ya no se te descuadra la estructura??? Bueno compañero, ya casi tiene todo estructurado, siga Ud. adelante. Cambio. :D
Menuda faena, ayer te envie un mensaje y por lo visto no entro, solo los codigos de lo ultimo. Bueno si tengo suerte me acordare de todo.
Antes de nada ya he corregido lo ultimo que me dijiste. La foto de momento no la he modificado porque es una prueba, pero tomo nota, no custa nada cambiar de 75 a 70.
Los bordes los he mejorado, pero no pude poner 13px ya que se me salia de la pagina y me descuadraba todo, asi que puse 11, pero al quitar auto y poner 800px no me quedaba bien y tuve que poner 798 me imagino que es por los 2px de las lineas. Creo que asi queda bien y si no ya me diras.
Lo de Que somos x Quienes somos, fue una discusion de casi una hora, asi que alguien esta escribiendo el texto que debe ir en la pagina de Que somos, eso no lo puedo cambiar, pero yo pienso como tu que queda mejor Quienes Somos.
Bueno y ahora todo lo de ayer
font:bold es igual que fuente en negrita?
El H2 de noticias, no me hace caso y ayer me cogia el color Azul que tenia en el H2 primero de la hoja CSS, hoy he quitado todo esa linea ya que no me hace falta el no tener H2, he tenidoq eu modificar el H2 de Menu para que me saliera centrado, (eso esta ok) pero.... ahora ya no sale azul sale negro y yo creo que ahora coge el H2 del menu. En resumidas cuentas que no sale gris como tu le has puesto.
Lo mismo me ocurre con el color de fondo, que me sale blanco y no gris, y si quito el color de fondo de Contenido todo el azul del body se mete ahi. (Ni idea de como corregirlo)
Y por ultimo creo :oops: la fecha me sale muy unida a la foto por la izquierda y el texto "Semana de oracion por la UNIDAD DE LOS CRISTIANOS" me hace como una sangria.
Me estoy volviendo loco, pero creo que a ti no se ni como te estare dejando.
MUCHISIMAS GRACIAS
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unidad Pastoral Santa Maria de Olarizu</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">[url="index.html"][img]IMAGENES/logotipoprueba.jpg[/img][/url]</div>
<div id="publicidad">[img]IMAGENES/banner.jpg[/img]</div>
</div>
<div id="navegacion">
<ul>
[*][url="quesomos.html"]Que somos[/url]
[*][url="dondeestamos.html"]Donde estamos[/url]
[*][url="contactos.html"]Contactos[/url]
[*][url="docinteres.html"]Documentos de interes[/url]
[*][url="foro.html"]Foro[/url]
[*][url="plantilla.html"]Inicio[/url]
[/list]
</div>
<div id="contenido">
<div id="menu">
<ul><h1>EDUCACION EN LA FE</h1>
[*] [url="catequesis.html"]Catequesis Familiar[/url]
[*] [url="pastoraljovenes.html"]Pastoral con Jovenes[/url]
[*] [url="pastoraladultos.html"]Pastoral con Adultos[/url]
[*] [url="pastoralfamiliar.html"]Pastoral Familiar[/url]
<h2>CELEBRACION DE LA FE Y LITURGIA </h2>
[*] [url="liturgia.html"]Comisión de Liturgia[/url]
[*] [url="oraciongrupal.html"]Experiencia de oración grupal[/url]
<h2>SOCIO CARITATIVA </h2>
[*] [url="caritas.html"]Caritas[/url]
[*] [url="social.html"]Comisión Social[/url]
[*] [url="mayores.html"]Comisión de Mayores y Enfermos[/url]
[*] [url="misiones.html"]Misiones y Solidaridad[/url]
[*] [url="penitenciaria.html"]Pastoral Penitenciaria[/url]
<h2>COORDINACION Y COMUNION</h2>
[*] [url="economica.html"]Comisión Economica[/url]
[*] [url="agentes.html"]Agentes de Pastoral[/url]
[*] [url="consejo.html"]Consejo Pastoral[/url]
<h2>SERVICIOS</h2>
[*] [url="limpieza.html"]Ornamentación y limpieza de las iglesias[/url]
[/list]
</div>
<div id="actualidad">
[img]IMAGENES/iconoticias.gif[/img] Actualidad </p>
</div>
<div id="noticias">
<ul>
[*]<a class="uno">[img]IMAGENES/oracion.jpg[/img]<h2>Del 18 al 25 de Enero</h2>
Semana de oracion por la UNIDAD DE LOS CRISTIANOS</p></a>
[*]<a class="uno" > [img]IMAGENES/en construccion.jpg[/img]<h2> En Construcción</h2></a>
[*]<a class="uno" > [img]IMAGENES/en construccion.jpg[/img]<h2> En Construcción</h2></a>
[*]<a class="uno" > [img]IMAGENES/en construccion.jpg[/img]<h2> En Construcción</h2></a>
[*]<a class="uno" > [img]IMAGENES/en construccion.jpg[/img]<h2> En Construcción</h2></a>
[/list]
</div>
<div id="misa">[url="horariomisas.html"][img]IMAGENES/horariomisas.jpg[/img][/url]</div>
<div id="misa1"></div>
<div id="misa2"></div>
<div id="misa3"></div>
</div>
<div id="pie">
<div id="pieuno"><h2>Paginas
Webs
Amigas</h2> </div>
<div id="piedos">Ultima actualización - 16 de Enero de 2009 </div>
<div id="pietres">
<ul>
[*][url="#"]Directorio[/url][*][url="#"]Top Site[/url][*][url="#"]Mapa Web[/url]
[/list]
</div>
</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>
he tratado de corregir algunas cosas y no responde!!!! he decidido rehacer TODO por mi cuenta porque algunos códigos desde el principio deben andar un poquito mal. A más tardar, mañana de mandaré todo rehecho, es qe toma su tiempo. Pero hay que hacerlo con buen humor!!!! :wink:
al fin terminé y solo espero que sirva. vamos por partes:
1. definitivamnte, no he podido dar más espacio al margen izq. de la fecha con la fotito. Sé que queda muy pegada, yo también lo tengo así. Quizás, alguien más pueda hacerlo, si es que se puede.
2. todos los márgenes ya quedaron bien arreglados, por favor, ni se te vaya ocurrir cambiar nada porque NO RESPONDO!!! en todo caso ya queda bajo tu responsabilidad.
3. el menu de la derecha ya está como debería. he puesto el verde para que te fijes en lo sgte:
Aparte de los 4 rectngulos, hay un quinto rectángulo que es ese verde y que contiene a los otros. Yo me he tomado la libertad de llamarlo misagrande y tiene 211px ancho, o sea 1px más grande que los demás. Este div misagrande (si quieres le cambias el nombre, pero mucho cuidado con lo que haces, 1px mal hecho y se descuadra todo y no quieres eso) tiene por el momento como misagrande{background-color:b2cc87}, prueba a cambiarle por dedede (fondo del contenido) para que pase inadvertido. Es así como debe de quedar finalmente.
Las imágenes que insertes en misagrande no debe medir más de 210px ancho, sino todo se descuadrará.
A pesar de lo sobria, se ve bien porque tiene bastante simetría, procura mantenerla. Ya con las imágenes se verá mas alegre. dimeuna cosa, no te animas a cambiar el menu izq.???
bueno, me iré a dormir. Creo que no me olvido de nada. Seguro pondras tu imagen de actualidad, porfa. que no supere los 358px ancho incluyendo sus bordes izq. y der. sino se nos descuadra todo. el alto es más manejable, cuida mucho los anchos.
subo ahorita todo a internet para que lo veas en mi web de prácticas. me dices que tal te parece. cambio.
Menudo curro te has pegado, todavia no he probado nada, pero..... no te asustes es una pregunta.
A que te refieres con cambiar el menu izquierdo? Quizas a dejarlo como el tuyo y quitarles las imagenes con las esquinas redondeadas? Si es asi no me importa nada hacer eso y si es otra cosa dimelo.
No se como darte mas la gracias, eres muy grande.
Al mediodia empiezo a probar y modificar todo, ahora tengo que ir a trabajar.
P.D. Solo he probado una cosa y en firefox 3.0.5 la pagina de practicas se descuadra todo, creo que puede ser por los margenes. bueno todo no practicamente los divs de la derecha los de misa.
vaya lío, ajjajaja. Ya le quité el div misainvisible y a quedado los 4misas independientes pero necesito saber que tal se ve firefox. Yo tengo que esperar como una hora, supongo, para ver otra vez en el browser porque recientemente he visto la versión descuadrada.
- no dejes de quitarle en tu hoja css por la parte superior, la propiedad text-indent, creo que estaba en p. eso era lo que daba sangría.
- sí, me refería a que le podías quitar las curvas al menu izq. pero, en realidad, también queda bien.
creo que no me olvido de nada, solo avísame cómo se ve en tu versión de firefox.
En Firefox 3.0.5 se ve el menu de misas abajo junto al pie y todo movido, en el IE6 le pasa lo mismo yo haciendo pruebas con los margenes los he puesto bien.
Estoy cogiendo todo mi codigo y mirando el tuyo paso a paso y viendo que sucede, asi lo voy depurando todo, me esta llevando un rato, pero conseguire que todo funcione a la perfeccion, gracias a tu gran ayuda.
Si ya me di cuenta de que generaba la sangria y he aprendido y si me equivoco me corriges que lo mejor es ponerle a cada DIV sus cosas independientes, asi no te vuelves tan loco, asi que cada DIV tenga su propia h1,h2,p,margenes etc....
Gracias de nuevo, voy a ir realizando cambios y mejoras.
Bueno ya la tengo, dime que te parece y que corregirias para que queda mejor.
Una vez dado el ok, como se suele decir, me pongo a diseñar otras partes de la web.
Muchas gracias de nuevo, nunca me canso de dartelas por que te las mereces.
P.d. Encima del primer div de misas no voy a poner de momento nada, quizas ponga el dia en el que estamos, pero como eso sera muy complicado lo dejare para mas adelante. Ahhh..... me he dado cuenta que es div esta mas alto que los otros, asi que ese margen lo mejorare, cuando ponga el div con el dia en curso.
Yo la veo bien en IE7 y firefox 3.0.5, esta tarde en el trabajo vere si se ve tambien bien en IE6.
vaya hombre, así que quieres poner la fecha??????? complicado??????? para nada!!! yo lo tengo en mi web. Dime las dimensiones y color de fondo que quieres ponerle y te lo hago al toque. bueno, casi casi al toque.
eso si, fecha si, hora no (Viernes, 23 de Enero del 2009).
Lo de la fecha, como veas que es mejor. Lo queria situar encima de las divs de misas.
Quizas tamaño 200 o algo parecido y color pues no se prueba en verde, parecido al de los enlaces de la capa navegacion la pasar por encima de las letras.
ya puedes entrar a mi web de practicas para que veas el resultado del script. Debes crear un div en html, lo nombraremos fecha y debes ponerlo exactamente encima del div misa1. Te mando todos los códigos aqui:
en html:
<div id="fecha">
<script languaje="JavaScript">
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("Domingo,","Lunes,","Martes,","Miércoles,","Jueves,","Viernes,","Sábado,")
var montharray=new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre")
document.write("[size="1"]<align='left'><font color='white' face='Arial'>"+dayarray[day]+" "+daym+" de "+montharray[month]+" del "+year+"</font>[/size]")
</script>
</div>
<div id="misa1">[url="horariomisas.html"][img]IMAGENES/horariomisas.jpg[/img][/url]</div>
<div id="misa2"></div>
<div id="misa3"></div>
<div id="misa4"></div>
mira, no trates de entender el script, solo copia y pega. El div fecha crealo JUSTO ENCIMA DEL DIV MISA1. Incluso, en los códigos que te mando, aparece los div. misa1 2 34, solo para recalcártelo, pero tú los borras.
Ya puedes ver la pagina en mi direccion, pero menos mal que no segui todos tus consejos :wink: (raro en mi)
Creo que al final esta quedando estupenda, ya salio bien lo de la fecha, yo diria que mejor que bien, gracias claro esta a ti, bueno y un poquito este viaje a mi.
El script lo no lo pude poner encima de misa, por que me descuadraba y quedaba muy bajo y me puse a pensar, por que se queda ese espacio en blanco siempre encima de misa y ahora encima de fecha, y di con la soluccion, teneia que poner el div fecha con el script entre actualidad y noticias y luego corregi un poco los margenes y el color de fondo, ya que tus codigos no los coge bien y utilizo otros parecidos y que paso........
TODO BIENNNNNNNNN!!!!!!!!!!!!!!!!!!!!!!!!!!!! YUPIIIII!!!!!!!!!!!!!!!
Yo creo que cerramos este post y abro otro en cuanto tenga mas preguntas, (estate atento que no tardare) 8)
P.D. Que te parece lo que me estoy currando en el pie de pagina?
Gracias a mas gente y sobre todo a ti, estoy aprendiendo y mejorando este diseño.
Ahora toca ponerme manos a la obra, con las otras paginas, empezare por Catequesis Familiar y hay gente que ya me ha enviado textos.
oye, que tal giro que le estás dando a tu p/pág.!!! y ya ves qué rápido resultó lo de la fecha!!! me alegra haberte podido ayudar con un grano de arena, y... NO ESTARÉ ATENTO A TU SGTE. POST!!!!
Estaré atenta, acaso a las mujeres no nos puede gustar los carros??? Bueno, compañero, cualquier cosa, por aquí andamos, saludos!!!! :)
Cookies
Usamos cookies necesarias y, si lo autorizas, Google Analytics. Puedes cambiar tu elección cuando quieras.
