Buenas chicos soy nuevo en esto y e echo una paginilla, el caso es que en html-kit al darle a preview me sale tal y como quiero que salga, pero al subirla al servidor y escribir la direccion..sale todo descolocado, supongo que sera cosa del css pero...alguna solucion?? Muchas gracias [:p]
Al subir la pagina me sale descolocado, pero en html-kit sale bien
olvidaste subir los estilos.css??? puede ser por eso...
Sisi lo e subido, tengo uno para los 4 HTML , g Sq salen los colores especificados en el css pero el menú y los márgenes desordenados, gracias por responder
He visto que con internet explorer si se ve bien...pero con firefox..el menu desordenado...los margenes a su bola...en fin...spero que me puedan ayudar:confused:
pffff tiene que ser por los estilos, estoy seguro, o porque tengas los html algo mal puesto, si quieres copia y pega y a ver si te puedo ayudar. Aunque todavía soy bastante amateur, pero bueno algo se...jaja
El problema viene no en subir la página, el problema viene que, irónicamente, en el navegador en el que se ve mal es en el Internet Explorer (sí, aunque se vea bien; se ve mal).
Lo que debes de hacer, como dijo nuestro compañero Alvaro20, es pegar aquí los códigos (tanto HTML como CSS) para que podamos ayudarte.
Lo que debes de hacer, como dijo nuestro compañero Alvaro20, es pegar aquí los códigos (tanto HTML como CSS) para que podamos ayudarte.
aki va el index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<title>xxxxxx xx, xxxxxxxxx x xxxxxxx</title>
<link rel="stylesheet" href="estilos-ie.css" media="all" />
</head>
<body>
<div id="global">
<div id="estructura">
<div id="cabecera">
<div id="entrada">
<img src="objetos/entrada.jpg" width="850">
</div>
<div id="logo"> <img src="objetos/logotipo.jpg" width="250" alt="Haz click para ir a inicio">
</div>
<div id="texto">
<h1>¿xx xxxxxx xxxxxxx?</h1>
<h1>¿xxxxx xx xxxxxx xxxx?</h1>
<h1>¿xx xx xxxxxxxx xx xxxxx?</h1> <h2>xxxxxxxxx, xxxxxxx xx xxxxxxxx</h2>
</div>
</div>
<div id="navegacion">
<ul>
<li><a href="index.html">Portada</a></li>
<li><a href="enlace2.html">Enlace 2</a></li> <li><a href="enalce3.html">Enlace 3</a><li>
<li><a href="enlace4.html">Enalce 4</a></li>
</ul>
</div>
<div id="cuerpo">xxxxxxxxxxxxxxxxxxxxxxxxx xx xxxx xxx xx xx xxxxxxxxx xxxxxxxx xxxx xx xxx xxxxxx xxxxx xxxxxxxxxxx xxx xxx xxxxxxx xx xxxxxxx xxx x xxx, xxxxxxx xxx xxxxxxxxx xxx xxxxx xx xx xxxxxxx xxxxxxx xxxxxx xxxxx xxxxx xxxxxxx xxxxx xxxxxx, xxxxxxxxxx xxx xxxxxxx, xxxxxxxxx xxxxxx.
<img alt="pc roto" src="objetos/pcroto.jpg" height="225" width="225" align="right" /><p> xxxxxxxxxxxxxxx, xxxxxxxxxx x xxxxxxx xx xxx xxxxxxxxxx xx xx xxxxxxxx xxxxxxxxxxxxxx xxxxx xxxx xx xxxx xxxxxxxxx xxxxxx xx xx xxxxx xxxxxxx. xxx xxx xxxx xxxxxxxxx xxxxxxxxxxxx x xxxxxx xxxxxxxxx xx xxxxxxxxx xx xxxxxxxx xxxxxxx x xx xxxxxxxxxxx xxxx xxxxxxxxxx, xxxxxxxxxxx x xxxxxxxxx xxxxxxx xx xxxxxxx xxxxxxxxxx xx xxxxxxxxx.</p>
<p> xxxxxxx x xx xxxxx xx xxxxxxx xxxxxxxxxxx xx xxxxxxxx xxxxxxx xxx xxxxxxxxxxx x xxxxxxxxxxxxxxx.</p> <p>xxxxx xxxxxxxxx x xxxx xxxx xx xxxxxxxxxxxx xxxxxxxx x xxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxxx xxxxx xx xxxxxxx xxxx xxxxxxxxxx x xxxxxxxxxxx.</p>
<p></p>xx xxxxxxxxx xxxxx xxxxxxxxx xx xxxxxx xxx xxxx xxx xxxxx xxxxxxxxx.</p>
<p>xxxxxxx xx xxxxxxxx xxx xxxxxxxx x xx xxxxxxxxxxx xxxxxxxxxxx, xxxxxxx xx xxxxxxxx xxx xxxxxxxx xxx xx xxxxxxxx xxxxxxxxxx xxxxxxxxxxxxx x xxx xxxxxxxxx.</p>
</div>
<div id="salida">
<div id="pie">xxxxxxxxxxx xxx xxxxxxxxxx.xx xxxxxxxxx xx xxxxx xxx xxxxx xxxxxx.
<a href="mailto:[correo eliminado]"><img alt="Consultanos ;)" src="objetos/buzon.gif" height="32" width="32" /></a>
<img src="objetos/salida.jpg" width="800">
</div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<title>xxxxxx xx, xxxxxxxxx x xxxxxxx</title>
<link rel="stylesheet" href="estilos-ie.css" media="all" />
</head>
<body>
<div id="global">
<div id="estructura">
<div id="cabecera">
<div id="entrada">
<img src="objetos/entrada.jpg" width="850">
</div>
<div id="logo"> <img src="objetos/logotipo.jpg" width="250" alt="Haz click para ir a inicio">
</div>
<div id="texto">
<h1>¿xx xxxxxx xxxxxxx?</h1>
<h1>¿xxxxx xx xxxxxx xxxx?</h1>
<h1>¿xx xx xxxxxxxx xx xxxxx?</h1> <h2>xxxxxxxxx, xxxxxxx xx xxxxxxxx</h2>
</div>
</div>
<div id="navegacion">
<ul>
<li><a href="index.html">Portada</a></li>
<li><a href="enlace2.html">Enlace 2</a></li> <li><a href="enalce3.html">Enlace 3</a><li>
<li><a href="enlace4.html">Enalce 4</a></li>
</ul>
</div>
<div id="cuerpo">xxxxxxxxxxxxxxxxxxxxxxxxx xx xxxx xxx xx xx xxxxxxxxx xxxxxxxx xxxx xx xxx xxxxxx xxxxx xxxxxxxxxxx xxx xxx xxxxxxx xx xxxxxxx xxx x xxx, xxxxxxx xxx xxxxxxxxx xxx xxxxx xx xx xxxxxxx xxxxxxx xxxxxx xxxxx xxxxx xxxxxxx xxxxx xxxxxx, xxxxxxxxxx xxx xxxxxxx, xxxxxxxxx xxxxxx.
<img alt="pc roto" src="objetos/pcroto.jpg" height="225" width="225" align="right" /><p> xxxxxxxxxxxxxxx, xxxxxxxxxx x xxxxxxx xx xxx xxxxxxxxxx xx xx xxxxxxxx xxxxxxxxxxxxxx xxxxx xxxx xx xxxx xxxxxxxxx xxxxxx xx xx xxxxx xxxxxxx. xxx xxx xxxx xxxxxxxxx xxxxxxxxxxxx x xxxxxx xxxxxxxxx xx xxxxxxxxx xx xxxxxxxx xxxxxxx x xx xxxxxxxxxxx xxxx xxxxxxxxxx, xxxxxxxxxxx x xxxxxxxxx xxxxxxx xx xxxxxxx xxxxxxxxxx xx xxxxxxxxx.</p>
<p> xxxxxxx x xx xxxxx xx xxxxxxx xxxxxxxxxxx xx xxxxxxxx xxxxxxx xxx xxxxxxxxxxx x xxxxxxxxxxxxxxx.</p> <p>xxxxx xxxxxxxxx x xxxx xxxx xx xxxxxxxxxxxx xxxxxxxx x xxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxxx xxxxx xx xxxxxxx xxxx xxxxxxxxxx x xxxxxxxxxxx.</p>
<p></p>xx xxxxxxxxx xxxxx xxxxxxxxx xx xxxxxx xxx xxxx xxx xxxxx xxxxxxxxx.</p>
<p>xxxxxxx xx xxxxxxxx xxx xxxxxxxx x xx xxxxxxxxxxx xxxxxxxxxxx, xxxxxxx xx xxxxxxxx xxx xxxxxxxx xxx xx xxxxxxxx xxxxxxxxxx xxxxxxxxxxxxx x xxx xxxxxxxxx.</p>
</div>
<div id="salida">
<div id="pie">xxxxxxxxxxx xxx xxxxxxxxxx.xx xxxxxxxxx xx xxxxx xxx xxxxx xxxxxx.
<a href="mailto:[correo eliminado]"><img alt="Consultanos ;)" src="objetos/buzon.gif" height="32" width="32" /></a>
<img src="objetos/salida.jpg" width="800">
</div>
</div>
</div>
</div>
</body>
</html>
y la hoja de estilos:
p {text-align:justify}
body {text-align:center;}
h1 {font-size:1.4em;}
h2 {font-size:1.6em;}
#global{background-color:#A7ACA7;width:1400px;}
#estructura{background-color:white;width:850px; margin:0px 4px 0px 0px;}
#entrada{width:800px; background-color:white;}
#cabecera{background-color:white;width:850px;}
#logo{float:left;width:198px;marging:black 0px 1px 0px 1px;}
#texto{background-image:url(objetos/desesperacion.jpg);background-repeat:no-repeat; background-position:right center ;background-color:white;float:right;width:562px;text-align:left;padding:20px 0px 0px 0px;}
#navegacion{background-color:#A7ACA7;width:850px;border: black 0px 1px 1px 1px solid;height:20px;}
#navegacion ul {margin-left:70px;}
#navegacion li{float:left;margin:0px 45px 0px 30px}
#cuerpo{text-indent:8px; margin:0px; padding:0px; border:0px;image-align:right;background-color:white;margin: 10px 25px 10px 25px;text-align:left;width:800px;}
#cuerpo ul{margin:15px 0px 0px 100px;}
#cuerpo li{margin:8px 0px 0px 10px;}
#pie{background-color:white;color:grey;margin: 10px 25px 10px 25px;text-align:right;}
#salida{width:800px; background-color:white;}
#gracias{text-align:center;height:25px;margin:15px 0px 0px 0px;}
a{color:black; text-decoration:none;}
a:link{}
a:visited{}
a:hover{color:white; text-decoration:none;background-color:silver}
a:active{}
p {text-align:justify}
body {text-align:center;}
h1 {font-size:1.4em;}
h2 {font-size:1.6em;}
#global{background-color:#A7ACA7;width:1400px;}
#estructura{background-color:white;width:850px; margin:0px 4px 0px 0px;}
#entrada{width:800px; background-color:white;}
#cabecera{background-color:white;width:850px;}
#logo{float:left;width:198px;marging:black 0px 1px 0px 1px;}
#texto{background-image:url(objetos/desesperacion.jpg);background-repeat:no-repeat; background-position:right center ;background-color:white;float:right;width:562px;text-align:left;padding:20px 0px 0px 0px;}
#navegacion{background-color:#A7ACA7;width:850px;border: black 0px 1px 1px 1px solid;height:20px;}
#navegacion ul {margin-left:70px;}
#navegacion li{float:left;margin:0px 45px 0px 30px}
#cuerpo{text-indent:8px; margin:0px; padding:0px; border:0px;image-align:right;background-color:white;margin: 10px 25px 10px 25px;text-align:left;width:800px;}
#cuerpo ul{margin:15px 0px 0px 100px;}
#cuerpo li{margin:8px 0px 0px 10px;}
#pie{background-color:white;color:grey;margin: 10px 25px 10px 25px;text-align:right;}
#salida{width:800px; background-color:white;}
#gracias{text-align:center;height:25px;margin:15px 0px 0px 0px;}
a{color:black; text-decoration:none;}
a:link{}
a:visited{}
a:hover{color:white; text-decoration:none;background-color:silver}
a:active{}
Ok, mira lo primero, la etiqueta title tiene que ir justo debajo de la etiqueta head, estas pequeñas cosas parecen tonterias pero son muy importantes. Y luego, el link rel del css ponlo tal que asi, <link rel="stylesheet" href="estilo.css" type="text/css" media="all"> cambia el nombre del archivo estilo-ie.css y pon solo estilo.css. Cuando lo cambies en tus carpetas del ordenador lo subes al servidor, tanto el index como los estilos, y si cambias el nombre de los estilos en el index no olvides cambiarselo tambien al archivo, si no entonces si que tenemos un problema jajaja y pruebas a ver si cambia algo.
Me he dado cuenta de que tienes un montón de etiquetas de cierra de divs abajo del todo que no llevan a ningún sitio, esas borralas porque son el resultado de problemas futuros, a mi también me ha pasado. O incluso estén afectando a tu problema actual. Siempre que modifiques el index o los estilos, acuerdate de borrarlo todo bien, no dejes por ahí etiquetas y estilos al libre albedrío porque también producen problemas.
Alvaro20 escribió:Me he dado cuenta de que tienes un montón de etiquetas de cierra de divs abajo del todo que no llevan a ningún sitio, esas borralas porque son el resultado de problemas futuros, a mi también me ha pasado. O incluso estén afectando a tu problema actual. Siempre que modifiques el index o los estilos, acuerdate de borrarlo todo bien, no dejes por ahí etiquetas y estilos al libre albedrío porque también producen problemas.
pero esos cierre de divs, es xq mas arriba los he abierto, son 4 cierres, q corresponden a los divs de pie, salida, estructura y global. Debo quitarlos??
no es que los tengas que borrar, es que los tienes mal colocados. Los cierre de divs van después de que se acabe el contenido que metas en cada div, si no tienes nada pues entonces tienes que ponerlo justamente debajo de la etiqueta de apertura del div, lo entiendes? mira asi:
<div id="pie">Este es el pié de página</div>
<div id="curva-inferior"></div>
puedes ponerlo seguido o debajo, asi:
<div id="pie">Este es el pié de página
</div>
<div id="curva-inferior">
</div>
asi si esta bien, así que corrige eso porque puede ser el problema o lo que te puesto antes y dime si se te ha solucionado
<div id="pie">Este es el pié de página</div>
<div id="curva-inferior"></div>
puedes ponerlo seguido o debajo, asi:
<div id="pie">Este es el pié de página
</div>
<div id="curva-inferior">
</div>
asi si esta bien, así que corrige eso porque puede ser el problema o lo que te puesto antes y dime si se te ha solucionado
De momento, corrige lo que te dice nuestro amigo Alvaro20 y borra la segunda etiqueta <meta>, ya que es la que está mal (tiene errores en las ").
La próxima vez pongan los códigos entre las etiquetas [ code] y [ /code]. Sin espacios. También ponlos en el mismo mensaje, ya que ahí si se verán bien separados.
Alvaro20, si se te olvida algo, edita el mensaje actual, no hagas uno nuevo.
La próxima vez pongan los códigos entre las etiquetas [ code] y [ /code]. Sin espacios. También ponlos en el mismo mensaje, ya que ahí si se verán bien separados.
Alvaro20, si se te olvida algo, edita el mensaje actual, no hagas uno nuevo.
bueno pues e borrao el segundo meta, y el title lo he puesto justo debajo del head, y e renombrado estilos-ie.css a estilos.css cambiando en todos los html el nombre tambien y sigue igual....se ve como quiero en ie, y descolocado...sobre todo el menu de navegacion en firefox...
el caso de los divs los e puesto al final xq contienen otros divs dentro que los engloban, por eso los cierro al final...estaria mal?? para que os agais una idea de la estructura y de las capas que tngo y quiero que me aparezcan os e echo un esquemilla, creo que esta claro..aver que me puede faltar, y muchas gracias.
el caso de los divs los e puesto al final xq contienen otros divs dentro que los engloban, por eso los cierro al final...estaria mal?? para que os agais una idea de la estructura y de las capas que tngo y quiero que me aparezcan os e echo un esquemilla, creo que esta claro..aver que me puede faltar, y muchas gracias.
Pega de nuevo los códigos, a ver cómo quedan y ya te seguiremos indicando. Vamos a ir paso a paso, ¿vale?
el index:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Repara Pc, portatiles y moviles</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="estilos.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="estructura">
<div id="cabecera">
<div id="entrada">
<img src="objetos/entrada.jpg" width="850">
</div>
<div id="logo">
<img src="objetos/logotipo.jpg" width="250" alt="Haz click para ir a inicio">
</div>
<div id="texto">
<h1>¿Su portatil falla?</h1>
<h1>¿Tiene su Tablet roto?</h1>
<h1>¿Se ha averiado su movil?</h1>
<h2>Tranquilo, tenemos la solucion</h2>
</div>
</div>
<div id="navegacion">
<ul>
<li><a href="index.html">Portada</a></li>
<li><a href="reparapc.html">Repara tu Pc</a></li>
<li><a href="movil.html">Repara tu Movil y Tablet</a></li>
<li><a href="contacto.html">Contacta con nosotros</a></li>
</ul>
</div>
<div id="cuerpo">¿Problemas con su portatil?¿ Su movil se ha averiado? ¿Su ordenador va muy lento? Estas situaciones son muy comunes en nuestro dia a dia, podemos ser afectados por virus o que nuestro aparato sufra algun golpe debido al uso diario, navegacion por paginas, descuidos y demas.
<img alt="pc roto" src="objetos/pcroto.jpg" height="225" width="225" align="right" /><p> Los ordenadores, portatiles y moviles se han convertido en un elemento imprescindible tanto para la vida cotidiana como para el mundo laboral. Por eso para cualquier contratiempo o averia nosotros le ofrecemos un servicio tecnico a su disposicion para portatiles, ordenadores y telefonos moviles en Granada totalmente de confianza.</p>
<p> Ponemos a su total y absoluta disposicion un servicio tecnico con experiencia y profesionalidad.</p> <p>Damos cobertura a todo tipo de reparaciones tecnicas e incidencias informaticas solucionando sus problemas tanto de moviles como portatiles y ordenadores.</p>
<p></p>Le ofrecemos estos servicios al precio mas bajo que pueda encontrar.</p>
<p>Pongase en contacto con nosotros y le atenderemos rapidamente, dandole la solucion que necesita con un servicio totalmente satisfactorio y muy economico.</p>
</div>
<p></p>
<div id="salida">
<div id="pie">Consultenos sin compromiso. Le recogemos su aparato sin coste alguno.
<p></p>
<a href="mailto:[correo eliminado]"><img alt="Consultanos ;)" src="objetos/buzon.gif" height="32" width="32" /></a>
<img src="objetos/salida.jpg" width="800">
</div>
</div>
</div>
</div>
</body>
</html>estilos.css
p {text-align:justify}
body {text-align:center;}
h1 {font-size:1.4em;}
h2 {font-size:1.6em;}
#global{background-color:#A7ACA7;width:1400px;}
#entrada{width:800px; background-color:white;}
#estructura{background-color:white;width:800px; margin:0px 4px 0px 0px;}
#cabecera{background-color:white;width:800px;}
#logo{float:left;width:198px;marging:black 0px 1px 0px 1px;}
#texto{background-image:url(objetos/desesperacion.jpg);background-repeat:no-repeat; background-position:right center ;background-color:white;float:right;width:462px;text-align:left;padding:20px 0px 0px 0px;}
#navegacion{background-color:#A7ACA7;width:850px;border: black 0px 1px 1px 1px solid;margin:0px 0px 0px 0px;height:20px;}
#navegacion ul {margin-left:70px;}
#navegacion li{float:left;margin:0px 45px 0px 30px}
#cuerpo{text-indent:8px; margin:0px; padding:0px; border:0px;image-align:right;background-color:white;margin: 10px 25px 10px 25px;text-align:left;width:800px;}
#cuerpo ul{margin:15px 0px 0px 100px;}
#cuerpo li{margin:8px 0px 0px 10px;}
#pie{background-color:white;color:grey;margin: 10px 25px 10px 25px;text-align:right;}
#salida{width:800px; background-color:white;}
#gracias{text-align:center;height:25px;margin:15px 0px 0px 0px;}
a{color:black; text-decoration:none;}
a:link{}
a:visited{}
a:hover{color:white; text-decoration:none;background-color:silver}
a:En el HTML el error que veo es que tienes esta línea:
Otra cosa que no causa errores pero es un código inútil es el de <p></p>. Tienes dos de esos y no sirven para nada.
Ahora pasamos al CSS.
Con esto ya no habría más errores, lo que pasa es que me he fijado que tienes muchos floats y eso, el problema podría ser debido a una mala estructuración desde un principio.
<p></p>Le ofrecemos estos servicios al precio mas bajo que pueda encontrar.</p>Otra cosa que no causa errores pero es un código inútil es el de <p></p>. Tienes dos de esos y no sirven para nada.
Ahora pasamos al CSS.
#logo{float:left;width:198px;marging:black 0px 1px 0px 1px;}#navegacion{background-color:#A7ACA7;width:850px;border: black 0px 1px 1px 1px solid;margin:0px 0px 0px 0px;height:20px;}#cuerpo{text-indent:8px; margin:0px; padding:0px; border:0px;image-align:right;background-color:white;margin: 10px 25px 10px 25px;text-align:left;width:800px;}a:Con esto ya no habría más errores, lo que pasa es que me he fijado que tienes muchos floats y eso, el problema podría ser debido a una mala estructuración desde un principio.
vale lo de a: sq me falto copiar lo ultimo era a:active{}, y tras corregir todo lo dicho me sigue saliendo tal cual... no si si hacerla de nuevo primero con capas y cuanto este todo en su sitio meter el contenido... porque no se que hacer y todo sigue igual. se os ocurre algo mas?
gracias por vuestra ayuda
gracias por vuestra ayuda
No hay más errores de sintaxis, que era lo que buscábamos. Esto significa en un primer momento que el error está en el mismo planteamiento del programa.