Foros del Web » Creando para Internet » CSS »

una imaen me da problemas

Estas en el tema de una imaen me da problemas en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 09/02/2010, 03:32
 
Fecha de Ingreso: mayo-2009
Mensajes: 59
Antigüedad: 14 años, 11 meses
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
  #2 (permalink)  
Antiguo 09/02/2010, 05:40
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 15 años, 8 meses
Puntos: 20
Respuesta: una imaen me da problemas

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¡¡
__________________
Revisa las FAQ's antes de disparar.
  #3 (permalink)  
Antiguo 09/02/2010, 07:32
 
Fecha de Ingreso: mayo-2009
Mensajes: 59
Antigüedad: 14 años, 11 meses
Puntos: 1
Respuesta: una imaen me da problemas

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.
  #4 (permalink)  
Antiguo 10/02/2010, 15:42
Avatar de loncho_rojas
Colaborador
 
Fecha de Ingreso: octubre-2008
Ubicación: En el mejor lugar del mundo
Mensajes: 2.704
Antigüedad: 15 años, 6 meses
Puntos: 175
Respuesta: una imaen me da problemas

es extremamente necesario usar

Código CSS:
Ver original
  1. #imgcap&#231;alera
??

porque mejor no usas una C en vez de la cedilla?
__________________
Ayudo con lo que puedo en el foro, y solo en el foro.. NO MENSAJES PRIVADOS.. NO EMAILS NI SKYPE u OTROS.

Antes de hacer un TOPICO piensa si puedes hallarlo en Google o en el Buscador del Foro...

Etiquetas: Ninguno
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 00:07.