[SOLUCIONADO] No encuentra CSS

albertcla_89 · #1 (**permalink**) 12/07/2013, 04:31

Buenas!! al subir a la web unos archivos html, parece que no me carga la página de estilo.

Aquí tenéis el código, a ver si le veis algo mal :S

Código HTML:

Ver original<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My Life Connection</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="img/iconalogo.ico" type="image/x-icon" />
<link rel="icon" href="img/iconalogo.ico" type="image/x-icon" />
<link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
</head>

pzin · #2 (**permalink**) 12/07/2013, 09:33

¿El archivo CSS lo tienes en una carpeta llamada css que se encuentra en el mismo lugar donde está el archivo .html?

Usa highlight cuando publiques código, y para poner enlaces necesitas llevar 30 días de registro además de 30 mensajes en el foro. Échale un vistazo a las polítcas del foro.

armando_psc · #3 (**permalink**) 12/07/2013, 18:29

Cita:

Iniciado por albertcla_89

Buenas!! al subir a la web unos archivos html, parece que no me carga la página de estilo.

Aquí tenéis el código, a ver si le veis algo mal :S

Código HTML:

Ver original<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My Life Connection</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="img/iconalogo.ico" type="image/x-icon" />
<link rel="icon" href="img/iconalogo.ico" type="image/x-icon" />
<link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
</head>

tendria que ser asi mas o menos, recuerda los "/"
<link rel="stylesheet" type="text/css" href="/css/estilo.css"/>

#4 (**permalink**) 12/07/2013, 19:01

El último link no está cerrado, falta el "/" antes del ">". Igualmente eso no debería afectar el funcionamiento. Lo más probable es que sea un error en el ruteo del css.
Lo que estás diciendo con este ruteo es que estás parado en la ubicación de tu index, y que dentro de esa ubicación hay una carpeta llamada css que contiene el archivo index.css es así?
Si no, es un error de ruteo de los archivos. No hace falta que inicies el pedido con "/".

albertcla_89 · #5 (**permalink**) 15/07/2013, 04:13

TEMA SOLUCIONADO! parece ser que era problema del ruteo con el servidor. Ahora me lo lee pero tengo problemas con la visualización. Tengo unas imagenes dentro de unos <div> que con Chrome y Firefox no se ven, en cambio con Safari no tengo problemas, sabéis que puede ser?

Las imágenes en concreto son estas:

Código HTML:

Ver original<div id="top">
...
</div>

Código CSS:

Ver original#top    {
    height:331px;
    position:relative;
    background-image:url(../img/backgroundtop.jpg);
    background-repeat:no-repeat;
}

Código HTML:

Ver original<a href="http://server2.mylifeconnection.com/location3/login.php" target="_blank"><div id="pro3">
</div></a>

Código CSS:

Ver original#pro3   {
    left: 460px;
    top: 315px;
    height: 253px;
    width: 253px;
    background-image: url(../img/rodonalocation.png);
    position: absolute;
}

pzin · #6 (**permalink**) 15/07/2013, 04:34

albertcla_89 no repitas mensajes —va en contra de las políticas del foro. E intenta usar highlight o code como te dije más arriba para cuando publiques código.

El código en si mismo no tiene ningún error, debería de funcionar.

Tal vez sigas con tu problema de rutas. Se supone que con ese código, tienes una estructura así:

Código:

index.html
css
 └─ index.css
img
 └─ backgroundtop.jpg
 └─ rodonalocation.png

Si esa es la estructura y no funciona con ese código, tendrás que pasarnos el código suficiente para reproducir el problema.

albertcla_89 · #7 (**permalink**) 15/07/2013, 05:04

Cita:

Iniciado por pzin

albertcla_89 no repitas mensajes —va en contra de las [URL="http://www.forosdelweb.com/f74/politicas-foros-del-web-101485/"]políticas del foro[/URL]. E intenta usar highlight o code como te dije más arriba para cuando publiques código.

El código en si mismo no tiene ningún error, debería de funcionar.

Tal vez sigas con tu problema de rutas. Se supone que con ese código, tienes una estructura así:

Código:

index.html
css
 └─ index.css
img
 └─ backgroundtop.jpg
 └─ rodonalocation.png

Si esa es la estructura y no funciona con ese código, tendrás que pasarnos el código suficiente para reproducir el problema.

Es correcto, está así. Os paso el código HTML y CSS.

Ahí va:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My Life Connection</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="img/iconalogo.ico" type="image/x-icon" />
<link rel="icon" href="img/iconalogo.ico" type="image/x-icon" />
<link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'/>
</head>
 
<body>
    
    <div id="contingut">
 
        <div id="top">
                <div id="menu">
                    <ul>
                            <li><a href="#quiensomos">QUIÉNES SOMOS</a></li>
                            <li><a href="#productos">PRODUCTOS</a></li>
                            <li><a href="#contacto">CONTACTO</a>
                      
                    </ul>
                </div>
                <div id="menuidiomes">
                    <ul>
                            <li><a href="index.html">ESP</a></li>
                            <li><a href="indexeng.html">ENG</a></li>
                            <li><a href="indexfra.html">FRA</a>
                      
                    </ul>
                </div>
                <div id="portada">
                    <p class="MyLife">MY LIFE CONNECTION TECHNOLOGIES, S.L.</p>
                    <p>&nbsp;</p>
                    <p>SISTEMAS DE LOCALIZACIÓN Y MOVILIDAD</p>
                    <p>&nbsp;</p>
                    <p>C/Rusiñol, 93 - Despacho 12B<br />
08397 - Pineda de Mar - Barcelona - España
                </div>
        </div>
        
        <div id="quiensomos">
            <div id="text1">
                <p class="titols">QUIÉNES SOMOS</p>
                <p>&nbsp;</p>
                <p>My Life Connection Technologies, S.L., ubicada en Pineda de Mar, Barcelona (España), tiene una base tecnológica dedicada al desarrollo y comercialización de productos y servicios asociados al geoposicionamiento y control de personas y bienes.</p>
<p>&nbsp;</p>
<p>In 2011 developed the first application; MyLifeLocation, covering the basics of the most needy people with psychological disabilities and kids; their location. My Life Connection Technologies, S.L. develops its products based on the needs of people and getting to them from their simplicity and price. All the technology used and developed is in the background to provide greater accessibility for people.</p>
          </div>
            
            <div id="text2">
                <p>Nuestros productos quedan abiertos a mejoras continuas propuestas por nuestros clientes a partir de sus experiencias y se actualizan de forma dinámica y gratuita mediante nuestra página web o red comercial.</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>El contacto directo con las personas nos permite conocer sus carestías y transformarlas en aplicaciones que resuelvan los problemas que surgen en sus vidas. Afrontamos nuestro reto tecnológico aportando la mejora de la calidad de vida y la tranquilidad de las personas.</p>
            </div>
        </div>
        
        <div id="productos">
            <div id="contproductes">
                <p class="titols">PRODUCTOS</p>
                <a href="http://5.135.190.8/web/webalarm/" target="_blank"><div id="pro1">
                </div></a>
                <a href="http://www.mylifeconnection.com/mylifehealth/" target="_blank"><div id="pro2"> 
                </div></a>
                <a href="http://server2.mylifeconnection.com/location3/login.php" target="_blank"><div id="pro3">
                </div></a>
                <a href="http://5.135.190.8/web/mylifetimechrono/" target="_blank"><div id="pro4"> 
                </div></a>
                <div id="pro5">
                </div>
            </div>
        </div>
        
        <div id="contacto">
            <div id="contacte">
            <p class="titols">CONTACTO</p>
                <div id="info">
                    <p>MY LIFE CONNECTION TECHNOLOGIES, S.L.</p>
                        <div id="infodades">
                            <p>Calle Rusiñol, 93 - Despacho 12B<br />                           Pineda de Mar (Barcelona) - SPAIN</p>
                            <p>&nbsp;</p>
                            <p>(+34) 937 622 586<br /> (+34) 689 753 148 </p>
                            <p>&nbsp;</p>
                            <a href="mailto:[email protected]" style="text-decoration:none; color:black;">[email protected]</a>
                        </div>
                </div>
            </div>
            
            <div id="mapa">
                <a href="http://maps.google.es/maps?q=rusi%C3%B1ol+93&hl=ca&ie=UTF8&sll=41.692248,1.745868&sspn=2.793197,5.526123&hnear=Carrer+Rusi%C3%B1ol,+93,+08397+Pineda+de+Mar,+Barcelona&t=m&z=16" target="_blank"><img src="img/mapa.jpg" width="308" height="286" /></a> 
            </div>
        </div>
    
    </div>
</body>
</html>

albertcla_89 · #8 (**permalink**) 15/07/2013, 05:04

Código CSS:

Ver original@charset "UTF-8";
/* CSS Document */
 
*   {
    padding:0px;
    margin:0 auto;
}
 
body    {
    background-image:url(../img/background1.jpg);
    background-repeat:repeat-x;
}
 
#contingut  {
    position:relative;
    width:1024px;
    height:auto;
    font-family:'Abel', sans-serif;
}
 
#top    {
    height:331px;
    position:relative;
    background-image:url(../img/backgroundtop.jpg);
    background-repeat:no-repeat;
}
 
#menu   {
    background-color:#BF2C39;
    font-size:18px;
    height:30px;
    width:350px;
    left:385px;
    position:absolute;
    float:left;
    padding-top:10px;
    padding-left:25px;
}
 
#menueng    {
    background-color:#BF2C39;
    font-size:18px;
    height:30px;
    width:350px;
    left:395px;
    position:absolute;
    float:left;
    padding-top:10px;
    padding-left:30px;
}
 
#menuidiomes    {
    background-color:#6271A0;
    font-size:18px;
    height:30px;
    width:160px;
    position:absolute;
    left:760px;
    float:left;
    padding-top:10px;
    padding-left:25px;
}
 
#menuidiomes li{
    margin-right:25px;
    float:left;
}
 
#menuidiomeseng li{
    margin-right:25px;
    float:left;
}
 
#menuidiomesfra li{
    margin-right:25px;
    float:left;
}
 
#menu li{
    margin-right:25px;
    float:left;
}
 
#menueng li{
    margin-right:35px;
    float:left;
}
 
#menufra li{
    margin-right:25px;
    float:left;
}
 
 
li  {
    list-style-type:none;
    float:left;
}
 
#idiomes li{
    margin-right:10px;
    
}
 
#top a  {
    color:white;
    text-decoration:none;
}
 
.titols {
    font-size:24px;
    padding-left:40px;
}
 
 
#quiensomos {
    height:438px;
    position:relative;
    width:1024px;
    text-align:justify;
}
 
#portada    {
    left:470px;
    top:115px;
    width:400px;
    height:150px;
    position:absolute;
    font-size:18px;
    color:#51638E;
    text-align:center;
}
 
.MyLife {
    font-size:24px;
}
 
#text1  {
    padding-top:40px;
    font-size:18px;
    color:white;
    width:415px;
    position: absolute;
    left:45px;
    float:left;
}
 
.espai  {
    font-size:8px;
}
 
#text1fra   {
    padding-top:40px;
    font-size:18px;
    color:white;
    width:415px;
    position: absolute;
    left:45px;
    float:left;
}
 
#text2  {
    margin-left:80px;
    padding-top:95px;
    font-size:18px;
    color:white;
    width:415px;
    position:absolute;
    right:70px; 
}
 
#productos  {
    height:600px;
    position:relative;
}
 
#contproductes  {
    padding-top:40px;
    font-size:16px;
    color:white;
    width:960px;
    position: absolute;
    left:45px;
    height:562px;
}
 
#pro1   {
    left: 265px;
    top: 50px;
    height: 253px;
    width: 253px;
    background-image: url(../img/rodonaalarm.png);
    position: absolute;
}
 
#pro1:hover  {
    background-image: url(../img/overalarm1.png);
    width:285px;
    height:285px;
    left:250px;
    top:35px;
}
 
#pro2   {
    left: 665px;
    top: 50px;
    height: 253px;
    width: 253px;
    background-image: url(../img/rodonahealth.png);
    position: absolute;
}
 
#pro2:hover  {
    background-image: url(../img/overhealth.png);
    width:285px;
    height:285px;
    left:650px;
    top:35px;
}
 
#pro3   {
    left: 460px;
    top: 315px;
    height: 253px;
    width: 253px;
    background-image: url(../img/rodonalocation.png);
    position: absolute;
}
 
#pro3:hover  {
    background-image: url(../img/overlocation.png);
    width:285px;
    height:285px;
    left:445px;
    top:300px;
}
 
#pro5   {
    left: 60px;
    top: 315px;
    height: 253px;
    width: 253px;
    background-image: url(../img/rodonafleet.png);
    position: absolute;
}
 
#pro5:hover  {
    background-image: url(../img/overfleet.png);
    width:285px;
    height:285px;
    left:45px;
    top:300px;
}
 
#pro1eng    {
    left: 265px;
    top: 50px;
    height: 253px;
    width: 253px;
    background-image: url(../img/rodonaalarm.png);
    position: absolute;
}
 
#pro1eng:hover  {
    background-image: url(../img/overalarmeng.png);
    width:285px;
    height:285px;
    left:250px;
    top:35px;
}
 
#pro2eng    {
    left: 665px;
    top: 50px;
    height: 253px;
    width: 253px;
    background-image: url(../img/rodonahealth.png);
    position: absolute;
}
 
#pro2eng:hover  {
    background-image: url(../img/overhealtheng.png);
    width:285px;
    height:285px;
    left:650px;
    top:35px;
}
 
#pro3eng    {
    left: 460px;
    top: 315px;
    height: 253px;
    width: 253px;
    background-image: url(../img/rodonalocation.png);
    position: absolute;
}
 
#pro3eng:hover  {
    background-image: url(../img/overlocationeng.png);
    width:285px;
    height:285px;
    left:445px;
    top:300px;
}
 
#pro5eng    {
    left: 60px;
    top: 315px;
    height: 253px;
    width: 253px;
    background-image: url(../img/rodonafleet.png);
    position: absolute;
}
 
#pro5eng:hover  {
    background-image: url(../img/overfleeteng.png);
    width:285px;
    height:285px;
    left:45px;
    top:300px;
}
 
#pro1fra    {
    left: 265px;
    top: 50px;
    height: 253px;
    width: 253px;
    background-image: url(../img/rodonaalarm.png);
    position: absolute;
}
 
#pro1fra:hover  {
    background-image: url(../img/overalarmfran.png);
    width:285px;
    height:285px;
    left:250px;
    top:35px;
}
 
#pro2fra    {
    left: 665px;
    top: 50px;
    height: 253px;
    width: 253px;
    background-image: url(../img/rodonahealth.png);
    position: absolute;
}
 
#pro2fra:hover  {
    background-image: url(../img/overhealthfra.png);
    width:285px;
    height:285px;
    left:650px;
    top:35px;
}
 
#pro3fra    {
    left: 460px;
    top: 315px;
    height: 253px;
    width: 253px;
    background-image: url(../img/rodonalocation.png);
    position: absolute;
}
 
#pro3fra:hover  {
    background-image: url(../img/overlocationfra.png);
    width:285px;
    height:285px;
    left:445px;
    top:300px;
}
 
 
#pro5fra    {
    left: 60px;
    top: 315px;
    height: 253px;
    width: 253px;
    background-image: url(../img/rodonafleet.png);
    position: absolute;
}
 
#pro5fra:hover  {
    background-image: url(../img/overfleetfran.png);
    width:285px;
    height:285px;
    left:45px;
    top:300px;
}
 
#contacto   {
    height:385px;
    position:relative;
    background-image:url(../img/backgroundcontacte.png);
    background-repeat:no-repeat;
}
 
 
#mapa   {
    right:20px;
    top:60px;
    width:308px;
    height:286px;
    position:absolute;
}
 
#contacte   {
    padding-top:40px;
    font-size:16px;
    color:white;
    width:650px;
    position: absolute;
    left:45px;
    float:left;
    height:340px;
    color:black;
}
 
#info   {
    left:290px;
    top:90px;
    font-size:20px;
    position:absolute;
    width:330px;
    height:240px;
    background-image:url(../img/icones.png);
    background-repeat:no-repeat;
}
 
#infodades  {
    left:60px;
    font-size:20px;
    position:absolute;
    width:265px;
    height:200px;
    padding-top:10px;
    #contingut #quiensomos #text1fra p {
    font-size: 9px;
}

pzin · #9 (**permalink**) 15/07/2013, 05:10

Pues será un problema de rutas, porque funciona perfectamente bien: http://jsfiddle.net/Y7nU6/

¿Cómo es tu árbol de archivos?

albertcla_89 · #10 (**permalink**) 15/07/2013, 05:25

index.html
indexfra.html
indexeng.html

y dos directorios:

/img

/css

pzin · #11 (**permalink**) 15/07/2013, 05:29

Pues el código según veo está bien, la estructura también. ¿Las imágenes están en ese directorio?

Sino, prueba a poner la ruta absoluta, a ver si es un problema de rutas o del fichero:

Código CSS:

Ver original#pro3   {
  background-image: url(http://www.dominio.com/img/rodonalocation.png);
}

albertcla_89 · #12 (**permalink**) 15/07/2013, 05:39

ya hemos encontrado el problema, parece ser que es de la extension de la imagen que no se guardó bién :S

albertcla_89 · #13 (**permalink**) 15/07/2013, 05:54

por cierto, gracias!!