Foros del Web » Creando para Internet » HTML »

Compatibilidad de Navegadores

Estas en el tema de Compatibilidad de Navegadores en el foro de HTML en Foros del Web. He creado una página web muy simple ya que no se practicamente nada de diseño de páginas web, y el problema es que, solo he ...
  #1 (permalink)  
Antiguo 12/06/2013, 00:36
 
Fecha de Ingreso: junio-2013
Mensajes: 2
Antigüedad: 10 años, 10 meses
Puntos: 0
Compatibilidad de Navegadores

He creado una página web muy simple ya que no se practicamente nada de diseño de páginas web, y el problema es que, solo he sabido hacer la página colocando las
imágenes mediante DIV's. Tengo varias imágenes y al ser una página estática simplemente quería ordenarlas a mi gusto.

El problema a venido a la hora de cambiar de navegador, o sobretodo, al cambiar de
formato de pantalla, ya que los elementos en vez de verse centrados se ven muy a la derecha. Según he leído en varios foros, no debe haber una solución fácil al problema, y he leído que debería modificar todo quitando los divs para que no me pase este conflicto. No tengo ningún problema por cambiar todo, simplemente es que
no se que otras maneras existen para alinear una imagen a mi gusto, sin hacer que
al cambiar de pantalla todo se desordene.

Si tenéis alguna sugerencia os lo agradecería mucho. Os pongo un HTML:



<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" href="wp-content/themes/zenon-lite/style.css" type="text/css" media="screen" />
<link rel='stylesheet' id='customfont-css' href='wp-content/themes/zenon-lite/fonts/yanone_kaffeesatz9d52.css?ver=3.5.1' type='text/css' media='all' />

<div style="position:absolute; left:286px; top:100px; width:528px; height:200px "><img src="prueba1.png" ></div>
<div style="position:absolute; left:297px; top:595px; width:528px; height:200px "><img src="tablaweb.png" ></div>
<div style="position:absolute; left:610px; top:42px;"><img src="1.png" ></div>

<style type="text/css" id="custom-background-css">
body.custom-background { background-image: url('wp-content/uploads/2013/05/webpamplona.png') }
</style>

</head>

<body class="page page-id-36 page-template-default custom-background">

<!--HEADER START-->
<div id="header"> <!-- Aquí se crea el ID Header para después en la .CSS poder darle forma-->


<!--LOGO START-->
<div class="logo">
<div class="desc">Páginas Web Pamplona Navarra</div>
</div>
<!--LOGO END-->

<!--MENU STARTS-->
<div id="menu_wrap"><div class="center"><div id="topmenu"><div class="menu"><ul><li class="page_item page-item-36 current_page_item"><a href="index.html?page_id=36">Inicio</a></li><li class="page_item page-item-60"><a href="servicios.html?page_id=60">Servicios</a></li><li class="page_item page-item-39"><a href="contacto.html?page_id=39">Contacto</a></li></ul></div>
</div></div></div>
<!--MENU END-->

</div>

<!--HEADER END-->

<!--BOTÓNES DE REDES SOCIALES-->

<div style="position:absolute; left:1120px; top:65px;"><a href="https://www.twitter.com/Iz"><img src="twitter.png"></a>

<div style="position:absolute; left:40px; top:0px;"><a href="https://www.facebook.com/iz"><img src="facebook.png"></a>

<!--PAGE END-->


Muchísimas Gracias.
  #2 (permalink)  
Antiguo 12/06/2013, 03:49
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 9 meses
Puntos: 2114
Respuesta: Compatibilidad de Navegadores

Bienvenido al foro latcasa.

Cuando publicas código aquí es buena cosa usar el menú highlight o las etiquetas [code][/code] para tu código. Así sale en un formato más legible.

Tu problema no son los elementos div. Tu problema es que usas posiciones absolutas, lo cual es en general una mala práctica por muchas razones distintas, pero, si estás empezando y no sabes, es aún peor usar el posicionamiento absoluto porque el comportamiento de los elementos posicionados de esa forma tienen un comportamiento que si no sabes lo suficiente es difícil de entender.

No hay ninguna solución mágica para colocar los elementos como quieras de forma fácil. No quiero decir que sea complicado hacerlo, pero si lo es si lo intentas hacer sin tener conocimientos sobre CSS. Aprender el posicionamiento, el flotar elementos y el modelo de caja de CSS son más o menos los pilares de diseño, la maquetación y estructuración de una página.

Un sitio que suele recomendarse mucho en este sentido es librosweb.es, donde hay un buen manual sobre CSS.

Luego también tienes fallos en el HTML; unos elementos div que no cierras, otros div metidos dentro de <head>, la falta de un doctype, etc.

Última edición por pzin; 12/06/2013 a las 06:30 Razón: error dedográfico
  #3 (permalink)  
Antiguo 12/06/2013, 05:40
 
Fecha de Ingreso: junio-2013
Mensajes: 2
Antigüedad: 10 años, 10 meses
Puntos: 0
Respuesta: Compatibilidad de Navegadores

Muchas Gracias Pzin!

El simple hecho de nombrarme lo de la posición absoluta ya me ayuda mucho,
hoy me repasaré el html para corregir los errores además de centrarme en solucionar
el problema que he comentado.

te agradezco mucho tu respuesta ;)

pd. Ya siento el no colocar el código como se debe

Etiquetas: compatibilidad, css, link, navegadores, página
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 15:17.