una imaen me da problemas

mims · #1 (**permalink**) 09/02/2010, 03:32

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 originalCopiar* {margin-left: 0%;
padding: 0%; outline: 0; 
}
a:link {
    color: gray;
}
a:visited {
    color: gray;
}
html, body {width: 100%; 
}
body {background: black;
font-family: Arial;
margin: auto;
}
 
#imglogo {position: relative; margin-left:-50;text-align: left;margin-top: 1% ;z-index:;}
#imgcap&#231;alera {position: relative; margin-left:18%;margin-top: -16% ; z-index:;}
 
#menu {text-align: center;
font-size: 0.7em;
width: 80%; float: left; padding-left:20%; margin-top:0%; z-index:11;}
 
#menu ul {list-style-type: none;z-index:12;}
 
#menu ul li {width: 13%; z-index:13;}
 
#menu ul li.nivel1 { float: left;
margin-right: -1%; z-index:14;}
 
#menu ul li a {display: block;
text-decoration: none;
color: red;
background-color: black;
border: solid 1px red;
padding: 10px;
position: relative; z-index:15;}
 
#menu ul li a.nivel2, #menu ul li a.nivel2ie {color: red; z-index:16;}
 
#menu ul li a.nivel1, #menu ul li a.nivel2 {display: block!important;display: none;
position: relative; z-index:17;}
#menu ul li:hover {position: relative; z-index:18;}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: yellow;
color: black;
position: relative; z-index:19;}
 
#menu ul li a:hover, #menu ul li:hover a.nivel2 {background-color: red;
color: black;
position: relative; z-index:20;}
 
#menu ul li ul {display: none; z-index:21;}
 
#menu ul li:hover ul.nivel2, 
#menu ul li a:hover ul.nivel2{display: block;
position: absolute;left: 0px; z-index:22;}
 
#menu ul li ul li a {width: 160px;
padding: 8px 0px;
border-top-color: red; z-index:23;}
 
#menu ul li ul li a:hover {border-top-color: red;
position: relative; z-index:24;} 
 
#menu ul li ul li ul li a.primera {border-top-color: red; z-index:25;}
 
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative; z-index:10;} 
#txt {position: relative; font-family:arial; color: white; margin-left:3%; margin-top:16%; z-index:;}
#rellotge{position:absolute; left:2%; margin-top:1%;z-index:;}
#facebook {margin-top:4%; margin-left:4%; z-index:;}
#meteocat {margin-top:1%; margin-left:4%; z-index:;}
#travelbike {margin-top:1%;margin-left:3%; z-index:;}
#peupag {font-family:arial; font-size:0.7em; color:gray; margin-left:35px; margin-top:1%; z-index:;}
#textcentral{font-family:arial ; font-size:0.8em; color:white; margin-left:22%; 
width: 75%; height:25%;margin-top:-35%; z-index:; position:relative;
background-color:transparent;}

Impostor · #2 (**permalink**) 09/02/2010, 05:40

Mmm, no tengo muy claro haberte entendido. De todas formas, tienes la imagen centrada con posiciones relativas, trata de centrarla con margin: 0 auto;

Saludos¡¡

mims · #3 (**permalink**) 09/02/2010, 07:32

No, no me has entendido creo yo. perdona es que no se muy bien como explicarme. En la cabecera hay dos imagenes, una es "imglogo" con la que no tengo problemas. Y la otra que es la que me da los problemas es "imgcapçalera". Las dos imágenes estan alineadas digamos, sin utilizar tablas.
Cuando abren la web con un pc que la pantalla sea más grande que la mía, la imagen queda alineada a un 18% de la izquierda. Pero claro, como todo se expande porque aumenta el tamaño de la pantalla, esta imagen no actúa igual que los otros elementos web y se me queda corta.
Ahora digamos que esta imagen me cubre todo el menu, con una pantalla mayor, la imagen esta se me queda como a la mitad.
Tengo la imagen centrada con posición relativa porque en absoluta me dijeron que daba problemas de compatibilidades entre navegadores. Primero lo tenía todo en absoluta y en px en vez de %.
Si hago lo que me dices, la imagen se me pone encima de la otra imagen que tengo alineada con esta.

loncho_rojas · #4 (**permalink**) 10/02/2010, 15:42

es extremamente necesario usar

Código CSS:

Ver originalCopiar#imgcap&#231;alera

??

porque mejor no usas una C en vez de la cedilla?