Mi nueva web aparece toda movida

mjamjamja · #1 (**permalink**) 29/05/2012, 01:21

Hola,

Tengo una web en html y css. El unico php que tenemos esta en los formularios. La web siempre ha funcionado correctamente. Acabamos ser rediseñara a nivel estético. El html y css es similar. La unica novedad es que hemos añadido en el head código de adwords, javascript. Y tenemos una pagina nueva de agradecimiento por rellenar los formulario. En dreamweaber y navegador todo ser veia bien.
Se os ocurre que podemos mirar? O que ha podido pasar?

Saludos!

Ember · #2 (**permalink**) 29/05/2012, 02:26

tendrías que poner un enlace a tu página para poder saber qué es lo que ha podido pasar...

mjamjamja · #3 (**permalink**) 29/05/2012, 05:06

Hola,
no la he puesto ya que esta subida la antigua. Aqui teneis la dire: www.redcat.cat

pfranco · #4 (**permalink**) 29/05/2012, 07:53

Cita:

Iniciado por mjamjamja

Hola,
no la he puesto ya que esta subida la antigua. Aqui teneis la dire: www.redcat.cat

bueno de entrada a mi manera de verlo, la web esta mal estructurada.
veo numerosos div, malas practicas, etiquetas que están de mas, 0 uso de listas (que viene muy bien para los menú), la carencia de un contenedor para la pagina web (de ahí viene el problema que se te va a un lado).

Mi sugerencia es que la reestructures toda, ayúdate de algún framework css como blueprint o 960grid, que te hacen la vida bastante fácil y te proponen una estructura para ir colocando tus elementos.
Los div están bien usarlos, pero cuando corresponda, tu abusas de ellos.

También decir, que pruebes a usar algo de HTML5, no solo se vera mas estructurado el código si no que tendrás también algunas ventajas en el indexado de los buscadores.

Un saludo!

mjamjamja · #5 (**permalink**) 29/05/2012, 10:11

Hola pfranco,
Agradezco tus comentario y consejos. De todos todos, esa web que has visto, no es la que tiene el "problema" que os comentaba. Esta es la primera web que diseñe, sin conocimiento previo de html. He ido aprendiendo sgun iba haciendo.
Ahora mismo, el problema que más me urge es el de que la nueva web aparece todito descolocado. Ser que la web antigua no queda centrada, pero esque en la nueva es como si no leyese el css. A ver si luego os puedo poner el codigo de la nueva.
Pfranco esos programas de framework css que me recomiendas resolverian Lo del contenedor y los abundantes divs que me recomiendas? Que divs ser pueden quitar?
Gracias!!

mjamjamja · #6 (**permalink**) 29/05/2012, 10:21

Como la estructurariais mejor?

mjamjamja · #7 (**permalink**) 29/05/2012, 12:02

<head>
<link href="../web/redcat_diseny.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="http://www.redcat.cat/favicon.ico">
<style type="text/css">
body {
background-image: url(images/fondo_rayas-marrones.jpg);}

#botonpresupuesto_diseño_ {
position:absolute;
left:902px;
top:604px;
width:182px;
height:70px;
z-index: 66;
}

#pida_presupuesto_dis_ {
position:absolute;
left:573px;
top:617px;
width:232px;
height:55px;
z-index: 66;
}
</style>

<script type="text/javascript"></script>
</head>

<body>
<div id="web_entera_"></a></div> 
<div id="body_"></div>
<div id="redcat-logo-01_"><a href="../web/index.html" onmouseover="window.status='Descubre redcat'; return true;" onmouseout="window.status=''; return true;"><img id="redcat_logo_01" src="../web/images/redcat_logo_01.png" width="223" height="139" border="0" alt="redcat diseño+informática logotipo" name="redcat_logo_01" /></a></div>
<div id="menu-superior-quienes_"><img src="images/menu_superior_diseño.png" name="menu_superior_quienes" width="698" height="43" border="0" usemap="#menu_superior_quienesMap" id="menu_superior_quienes" />
<map name="menu_superior_quienesMap" id="menu_superior_quienesMap">
<area shape="rect" coords="1,0,65,36" href="index.html" alt="Inicio" />
<area shape="rect" coords="76,0,213,36" href="quienes.html" alt="Quienes somos" /><area shape="rect" coords="229,-3,333,36" ref="pagina_informatica.html" alt="Informática" /><area shape="rect" coords="346,1,472,35" href="pagina_diseño.html" alt="Diseño Gráfico" /><area shape="rect" coords="484,1,557,36" href="redcatnews.html" alt="Boletín de noticias" /><area shape="rect" coords="568,-9,650,37" href="contacto.html" alt="Contacto" /></map></div>
<div id="rayas_arriba_"></div>
<div id="texto_body_new_">
<h2 class="h2">Diseñamos los elementos gráficos que necesite:</h2>
<p>Calendarios personalizados, etiquetas, pegatinas, felicitaciones, elementos para hostelería (menús, manteles, blocks de notas, carteles, rotulación), regalos para eventos, entradas, notificaciones, diplomas, presentaciones, etc.</p>
<p> </p><p> </p></br></br></br> <p> </p> <p><span class="h2">¿Cómo conseguir unas invitaciones únicas?</span></p><p>Déjenos saber cuales son sus gustos, aficciones y estilo personal.</br> Con esta información le diseñaremos unas invitaciones a medida y únicas.</p>
</div>
<div id="iconos_diseño_"><img id="iconos_diseño" src="images/iconos_dise%C3%B1o.png" width="675" height="103" alt="Invitaciones, felicitaciones, comuniones, bautizos, pegatinas, hostelería, entradas, tiquets..." name="iconos_diseño" /></div>
<div id="menu_lateral_">
<div id="menu-lateral-disexf1o_"><a href="../web/pagina_diseño.html" onmouseover="window.status='Realizamos cualquier diseño que necesite: felicitaciones, menús de restaurante, pegatinas, etiquetas, entradas...'; return true;" onmouseout="window.status=''; return true;"><img id="menu_lateral_disexf1o" src="images/menu_lateral_diseñoSE.png" width="212" height="67" border="0" alt="Diseño Gráfico | Invitaciones" name="menu_lateral_disexf1o" /></a></div>
<div id="menu-lateral-identidad_"><a href="pagina_diseño_imprenta.html" onmouseover="window.status='Diseñamos su imagen y logotipo de empresa, además de toda la papelería que necesite.'; return true;" onmouseout="window.status=''; return true;"><img id="menu-lateral-identidad" src="images/menu_lateral_imprenta.png" width="212" height="67" border="0" alt="Imprenta Online Profesional" name="menu-lateral-identidad" /></a></div>
<div id="menu-lateral-publicidad_"><a href="pagina_diseño_editorial.html" onmouseover="window.status='La mejor manera de aumentar la ventas es publicitarse.'; return true;" onmouseout="window.status=''; return true;"><img id="menu_lateral_publicidad" src="images/menu_lateral_editorial.png" width="212" height="67" border="0" alt="Flyers | Folletos | Revistas | Catálogos" name="menu_lateral_publicidad" /></a></div>
<div id="menu-lateral-editorial_"><a href="pagina_diseño_identidad.html" onmouseover="window.status='Realizamos sus folletos, catálogos, revistas, periódicos...'; return true;" onmouseout="window.status=''; return true;"><img id="menu_lateral_editorial" src="images/menu_lateral_identidad.png" width="212" height="67" border="0" alt="Imagen de Empresa | Logotipos" name="menu_lateral_editorial" /></a></div>
<div id="menu_lateral_precios_"><a href="pagina_diseño_publicidad.html" onmouseover="window.status='Vea todos nuestros precios de un vistazo'; return true;" onmouseout="window.status=''; return true;"><img id="menu_lateral_precios" src="images/menu_lateral_publicidad.png" width="212" height="67" border="0" alt="Bolsas | Carteles | Publicidad" name="menu_lateral_precios" /></a></div>
<div id="menu_lateral_packs_"> <a href="pagina_diseño_eventos.html"><img src="images/menu_lateral_eventos.png" alt="Sus Eventos: Temporada verano" name="menu_lateral_packs" width="212" height="67" border="0" id="menu_lateral_packs" /></a></div>
</div>
<div id="sombras_"><div id="sombra_body_"></a></div><div id="sombra_body_2_"></a></div><div id="sombra_body_abajo_"></a></div><div id="sombra_body_arriba_"></a></div></div>
<div id="anuncios_">
<div id="ads-lineas-horizontales_"><img id="ads_lineas_horizontales" src="../web/images/ads_lineas_horizontales.png" width="12" height="5" alt="" name="ads_lineas_horizontales" /></div>
<div id="ads-lineas-horizontales2_"><img id="ads_lineas_horizontales" src="../web/images/ads_lineas_horizontales.png" width="12" height="5" alt="" name="ads_lineas_horizontales" /></div>
<div id="ad1-packs-disexf1o_"><a href="../web/pagina_diseño_packs.html" onmouseover="window.status='Elige tu Pack de Diseño ideal y ahorra!!'; return true;" onmouseout="window.status=''; return true;"><img id="ad1_packs_disexf1o" src="../web/images/ad1_packs_diseño.png" width="240" height="122" border="0" alt="Packs de Diseño. Ahorrarás más" name="ad1_packs_disexf1o" /></a></div>
<div id="ad2-redcatnews_"><a href="../web/redcatnews.html" onmouseover="window.status='Recibe gratis las últimas ofertas, promociones, consejos y concursos.'; return true;" onmouseout="window.status=''; return true;"><img id="ad2_redcatnews" src="../web/images/ad2_redcatnews.png" width="240" height="122" border="0" alt="Redcat News. Apuntate y recibe gratis las últimas ofertas y concursos" name="ad2_redcatnews" /></a></div>
</div>
<div id="logotipos_">
<div id="logotipos-cisco_"><img id="logotipos_cisco" src="../web/images/logotipos_cisco.png" width="97" height="57" border="0" alt="Cisco logo" name="logotipos_cisco" /></div>
<div id="logotipos-intel_"><img id="logotipos_intel" src="../web/images/logotipos_intel.png" width="79" height="57" border="0" alt="Intel logo" name="logotipos_intel" /></div>
<div id="logotipos-amd_"><img id="logotipos_amd" src="../web/images/logotipos_amd.png" width="71" height="57" border="0" alt="AMD logo" name="logotipos_amd" /></div>
<div id="logotipos-hp_"><img id="logotipos_hp" src="../web/images/logotipos_hp.png" width="83" height="57" border="0" alt="Hp logo" nam
</div>
<div id="pie-pagina_"><img src="images/pie_pagina.png" alt="Todos los derechos reservados. www.redcat.cat Informática: 690 019 165 Diseño: 691 726 749" name="pie_pagina" width="960" height="24" id="pie_pagina" /></div>
</div>
</div>
<div id="pida_presupuesto_dis_"><a href="pagina_diseño_presupuestos.html"><img src="images/frase_pida-presupuesto.png" alt="Presupuesto Gratuito" name="botonpresupuesto2" width="321" height="51" border="0" id="manuscrito" /></a></div>
<div class="h1" id="titulo-diseny_">Diseño Gráfico</div>
<div id="botonpresupuesto_diseño_"><a href="pagina_diseño_presupuestos.html"><img id="botonpresupuesto2" src="images/boton_presupuesto2.gif" width="186" height="69" border="0" alt="Presupuesto Gratuito" /></a></div>
</body>
</html>

mjamjamja · #8 (**permalink**) 29/05/2012, 16:53

Bien, acabo de hablar con la persona que sube la web, y me ha explicado mejor Lo que pasa. No es que aparezca todo movido. Lo que pasa es que hay imagenes que no aparecen. En los ordenadores se veia vien Y al subirla falla. Como es posible? Se han cambiado las rutas solas? La unica solucion pasa por reescribir a mano todas las rutas?

Saludos!

emprear · #9 (**permalink**) 29/05/2012, 16:59

Se ve bien y carga rápido(probada en IE, FF, Chrome)

Un par de detalles, agregale un Doctype válido, por ejemplo

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="es-es" xmlns="http://www.w3.org/1999/xhtml" lang="es-es">

Y tenés un id repetido
line 52 column 45 - Error: ID "ADS_LINEAS_HORIZONTALES" already defined

que no sé que pueda estar afectando, los ID deben de ser únicos.
Saludos

mjamjamja · #10 (**permalink**) 30/05/2012, 00:14

Gracias por la aportacion emprear. En ellos post de arriba no he incluido ellos doctype o los metas por tema de espacio.
Lo que me comentas que da problemas "rayas arriba" Lo mirare bien.
Aun no estoy segura, pero pero que el problema ( imagenes que no ser veian) es una tonteria como que tenemos que cambiar manualmente la ruta de algunos elementos.
No sé porqué habrá ocurrido esto. Si Lo soluciona os Lo postearé.
De todos todos, me gustaria seguir el consejo de arriba y estructurar mejor la web, no usar tanto dib si no es necesario, etc. Sugerencias?

emprear · #11 (**permalink**) 30/05/2012, 00:28

Te repito, se vé bien y carga bien, no creo que se justifique cambiar todo, a lo sumo alguna pequeña mejora, por ejemplo em inicio precargar las imágenes de los menus laterales de "Informática" y "diseño gráfico". Al iniciar el Body tenes un <p> </p> que genera espacio en blanco arriba, despues, remové todos tus onmouseover="windows.status..." Eso ya no funciona más
Saludos

sarumanice · #12 (**permalink**) 30/05/2012, 03:00

Hola, tengo una teoria.... estas seguro que tus imagenes estan dentro de la carpeta "web/images/*.*" ???? da la imprecion que el directorio web contiene en si todo tu sitio y que la direccion de tus imagenes seria simplemente "images/*.*"