Tema: una imaen me da problemas
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 09/02/2010, 03:32
mims
 
Fecha de Ingreso: mayo-2009
Mensajes: 59
Antigüedad: 15 años
Puntos: 1
una imaen me da problemas
buenas,
estoy con mi primera web con html y css. he ido resolviendo algunas cosas que algunos de vosotros me habéis comentado para así poder mejorar un poco la web.
la cosa era que no podía ver bien la web en todos los naveadores. He modificado algunas cosas y me he instalado, explorer, mozila y opera y desde mi pc ya veo en los tres navegadores bien, pero en otros pc's, en algunos se ve bien, y en algunos no.
El problema de visualización es de la imagen que he puesto en la cabecera que digamos es estática. en mi ordenador se ve la imagen centrada en la barra de menus, pero en las otras webs, la barra de menus y todo, se adapta al tamaño de la pantalla pero la imagen queda pequeña y no se centra en la barra de menus.
¿Me estoy liando o me entendéis?
no se si es posible que la imagen se expanda al igual que hacen los otros elementos de la web.
Os adjunto los códigos y quizás me entendáis mejor.
Gracias

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>AEC CATALUNYA</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Keywords" content="club cicloturista catalunya" />
<meta name="Description" content="Pagina dedicada als aficionats al cicloturisme" />
<meta name="Author" content="mims" />
<meta name="Robots" content="index, follow" />
<link rel="alternate" href="http://www.index.html" title="AEC Catalunya" media="all" />
<link rel="stylesheet" href="aec_estils_horitzontal.css" type="text/css" />
<!--[if IE]><style>#menu ul li ul li a{margin-bottom:-1%;border-top-color:transparent;} #menu ul.nivel2{margin-top: -1%;}</style><![endif]-->
<!--[if IE 7]><style>#menu ul li ul li.nivel2:hover{margin-bottom:-2%;}</style><![endif]-->

<style type="text/css"> 
a:link {text-decoration:none} 
a:visited {text-decoration:none} 
a:hover{text-decoration:none} 
a:active{text-decoration:none} 
</style>  
</head>
<body>
<div id="imglogo">
<a href ="index.html"/><img src="LOGO CAT.gif" border=0 /> 
</div>
<div id="imgcapçalera">
<img src="cabecera.jpg"border=0/>
</div>
<div id="menu">
<ul>
  <li class="nivel1"><a href="index.html" class="nivel1">El Club</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
	<ul class="nivel2">
		<li><a href="junta.html">Junta directiva</a></li>
		<li><a href="historia.html">Història</a></li>
		<li><a href="museu.html">Museu</a></li>
		</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
  </li>
  <li class="nivel1"><a href="#" class="nivel1">Cicloturisme</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]-->
	<ul class="nivel2">
		<li><a href="llicencies.html">Llicències federatives</a></li>
		<li><a href="marxes.html">Marxes F.C.C.</a></li>
		<li><a href="brevets.html">Brevets</a></li>
		<li><a href="altres.html">Altres rutes</a></li>
		<li><a href="galeria.html">Gal·leria</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
  <li class="nivel1"><a href="#" class="nivel1">Catalunya a peu</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td><![endif]-->
	<ul class="nivel2">
		<li><a href="caminades.html">Caminades</a></li>
		<li><a href="excursions.html">Excursions</a></li>
		<li><a href="galeriacatapeu.html">Gal·leria</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
  <li class="nivel1"><a href="documents.html" class="nivel1">Documents</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 4<table class="falsa"><tr><td><![endif]-->
	
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
 
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
 <li class="nivel1"><a href="contacta.html" class="nivel1">Contacta'ns</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="links.html" class="nivel1">Links</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="http://aeccatalunya.blogspot.com" target="_blank"class="nivel1">Blog</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="http://aeccatalunya.mforos.com/1815118-subforo-principal/"target="_blank" class="nivel1">Forum</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
<div id="rellotge">
<!-- Codigo Relojes Gratis www.creatupropiaweb.com -->
<embed src="http://www.creatupropiaweb.com/recursos/relojes/coleccion_relojes-flash/clock152.swf" 
width="150" height="154" 
></embed>><!---- Final Código Reloj Flash www.Crea tu Propia Web.com ---->
</div>
<div id="txt">
<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("Diumenge","Dilluns","Dimarts","Dimecres","Dijous","Divendres","Dissabte")
var montharray=new Array("1","2","3","4","5","6","7","8","9","10","11","12")
document.write("<small><font color='white' face='Arial'>"+dayarray[day]+" "+daym+" / "+montharray[month]+" / "+year+"</font></small>")
</script>
</div>
<div id="facebook">
<a href="http://www.facebook.com/group.php?gid=72049838533"target="_blank"> <img src="facebook1.jpg" border=0/> 
</div>
<div id="meteocat">
<a href="http://www.meteo.cat"target="_blank"><img src="meteocat.jpg" border=0/> 
</div>
<div id="travelbike">
<a href="http://www.travelbike.es"target="_blank"><img src="travelbike.jpg" border=0/> 
</div>
<div id="peupag">
<a href="dadeslegals.html"target="_blank">dades legals | <a href="http://www.blancotopografia.com/SERVEIS%20CATALA.htm"target="_blank">mims dw
</div>
<div id="textcentral">
<br></br>
<table border="0">
<tr>
<td > Benvinguts a la nostre web, la de l'Associació Esportiva Cicloturista de Catalunya. <br></br>
Aquesta no pretén més que informar als nostres socis de l'actualitat del nostre esport, i donar a conèixer als amants del cicloturisme alguns aspectes que des de la Junta hem trobat interessants.
<br></br> És un projecte compartit amb els socis i com a tal, esperem que tots hi prengueu part fent aportacions i donant idees. 
<br></br>Entreu i gaudiu. 
</td>
<td>
<img src="foto_index.jpg" border=0/>
</td>
</tr>
</table>
</div>
</body>
</html>
CSS

Código CSS: 
Ver original
  1. * {margin-left: 0%;
  2. padding: 0%; outline: 0; 
  3. }
  4. a:link {
  5.     color: gray;
  6. }
  7. a:visited {
  8.     color: gray;
  9. }
  10. html, body {width: 100%; 
  11. }
  12. body {background: black;
  13. font-family: Arial;
  14. margin: auto;
  15. }
  16.  
  17. #imglogo {position: relative; margin-left:-50;text-align: left;margin-top: 1% ;z-index:;}
  18. #imgcap&#231;alera {position: relative; margin-left:18%;margin-top: -16% ; z-index:;}
  19.  
  20. #menu {text-align: center;
  21. font-size: 0.7em;
  22. width: 80%; float: left; padding-left:20%; margin-top:0%; z-index:11;}
  23.  
  24. #menu ul {list-style-type: none;z-index:12;}
  25.  
  26. #menu ul li {width: 13%; z-index:13;}
  27.  
  28. #menu ul li.nivel1 { float: left;
  29. margin-right: -1%; z-index:14;}
  30.  
  31. #menu ul li a {display: block;
  32. text-decoration: none;
  33. color: red;
  34. background-color: black;
  35. border: solid 1px red;
  36. padding: 10px;
  37. position: relative; z-index:15;}
  38.  
  39. #menu ul li a.nivel2, #menu ul li a.nivel2ie {color: red; z-index:16;}
  40.  
  41. #menu ul li a.nivel1, #menu ul li a.nivel2 {display: block!important;display: none;
  42. position: relative; z-index:17;}
  43. #menu ul li:hover {position: relative; z-index:18;}
  44. #menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: yellow;
  45. color: black;
  46. position: relative; z-index:19;}
  47.  
  48. #menu ul li a:hover, #menu ul li:hover a.nivel2 {background-color: red;
  49. color: black;
  50. position: relative; z-index:20;}
  51.  
  52. #menu ul li ul {display: none; z-index:21;}
  53.  
  54. #menu ul li:hover ul.nivel2, 
  55. #menu ul li a:hover ul.nivel2{display: block;
  56. position: absolute;left: 0px; z-index:22;}
  57.  
  58. #menu ul li ul li a {width: 160px;
  59. padding: 8px 0px;
  60. border-top-color: red; z-index:23;}
  61.  
  62. #menu ul li ul li a:hover {border-top-color: red;
  63. position: relative; z-index:24;} 
  64.  
  65. #menu ul li ul li ul li a.primera {border-top-color: red; z-index:25;}
  66.  
  67. table.falsa {border-collapse:collapse;
  68. border:0px;
  69. float: left;
  70. position: relative; z-index:10;} 
  71. #txt {position: relative; font-family:arial; color: white; margin-left:3%; margin-top:16%; z-index:;}
  72. #rellotge{position:absolute; left:2%; margin-top:1%;z-index:;}
  73. #facebook {margin-top:4%; margin-left:4%; z-index:;}
  74. #meteocat {margin-top:1%; margin-left:4%; z-index:;}
  75. #travelbike {margin-top:1%;margin-left:3%; z-index:;}
  76. #peupag {font-family:arial; font-size:0.7em; color:gray; margin-left:35px; margin-top:1%; z-index:;}
  77. #textcentral{font-family:arial ; font-size:0.8em; color:white; margin-left:22%; 
  78. width: 75%; height:25%;margin-top:-35%; z-index:; position:relative;
  79. background-color:transparent;}
Última edición por mims; 09/02/2010 a las 07:09