Entrar

problema con las hojas de estilos

dagas16 · · Solicitar retirada
Necesito ayuda con la hoja de estilos.
Al crearla no aparecen los cambios y solo aparecen si lo coloco dentro del codigo de la pagina, como le hago???
Jugoncan · · Solicitar retirada
Puedes mostrarnos tu código html, tu código css y el nombre exacto de tu hoja de estilos?
Saludos :wink:
dagas16 · · Solicitar retirada
pues apenas empece con este tema de hacer paginas web
y estoy haciendo el ejemplo de la web

pero cuando empieza lo de las hojas de estilos al poner el fondo la imagen y eso, no quiere reconocer la hoja de estilos.css
y la unica forma de poder hacer eso es directamente de lo hoja, (como ya mencione
dagas16 · · Solicitar retirada
pero esto es lo que tengo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>ejemplo cctw</title>
<link rel="stylesheet" type="text/css" href="estilos.css"/>
</head>
<body>


Bienbenidos a mi pagina web. Muy pronto estará lista¡</p>


Pagina creada gracias a CCTW


</body>
</html>
Jugoncan · · Solicitar retirada
Lo que te puse en rojo debes de corregirlo (te lo pongo bien):
<html>
<head>
<title>ejemplo cctw</title>
<link rel="stylesheet" type="text/css" href="estilos.css"/>
</head>
<body>


Bienbenidos a mi pagina web. Muy pronto estará lista¡</p>


Pagina creada gracias a CCTW


</body>
</html>

Lo que te puse en azul debe ser el nombre exacto de la hoja de estilos, que debe estar guardada junto al index.html, es decir, se debe llamar estilos.css, y no estilo.css ni Estilos.css

Si está todo eso bien, cuál es el código que añades en la hoja de estilos y no te reconoce?
Saludos :wink:
dagas16 · · Solicitar retirada
no eso si esta bien ya lo cheque solo que cuando aplico la hoje de estilos no aplica los cambios al la pagina a propia
por ejemplo al agregar el fondo de color escribo tal y como esta en el ejemlo del curso y no cambia el color del fondo al igual que cuando inteto poner la imagen
Jugoncan · · Solicitar retirada
Pues si eso está bien algo debe estar mal en el código que introduces en la hoja de estilos. Ten en cuenta que en la hoja de estilos no se ponen etiquetas <html> ni nada de eso, sólo se pone lo de los estilos.
Saludos :wink:
dagas16 · · Solicitar retirada
Si ya, gracias por la ayuda el problema era en el head.
Pero tengo otra duda en firefox por que no se centra la imagen
dagas16 · · Solicitar retirada
estos son los css

body {background-color:#E6E6FA ; background-image: url(objetos/fondo.png) ;
background-position: center center; background-repeat:no-repeat ; heihgt:100%; }
.centrado{text-align:center}
img {border-style: none}

y estos los html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>ejemplo cctw</title>
<link rel="stylesheet" type="text/css" href="estilos.css"/>
</head>
<body>
<p class="centrado">Bienbenidos a mi pagina web. Muy pronto estará lista¡</p>


Pagina creada gracias a CCTW




[correo eliminado]</p>
</body>
</html>

Ah y gracias por toda tu ayuda y la pasiencia eh :wink:
Jugoncan · · Solicitar retirada
Yo sólo he visto un problema en el código css:
heihgt:100%

Lo correcto sería:
height:100%

Cuál es la imagen que no se centra? La de fondo?

Saludos :wink:
dagas16 · · Solicitar retirada
ya esta resuelto grax.
Pero surgio otro problema, pero ahora con las capas del ejemplo
en la ultima capa cuando le pones el color no lo acepta y se deja en blanco como le hago :?:
Jugoncan · · Solicitar retirada
Cómo le has puesto el color?
Puedes poner los códigos?
El color suele dar problema cuando lo pones escrito en vez de con los códigos html

Saludos :wink:
dagas16 · · Solicitar retirada
este es el html:

<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="cabecera">Bienbenidos a mi web</div>
<div id="navegacion">Barra de navegacion</div>
<div id="contenido">Este será la zona principal de tu web</div>
<div id="pie">Este es el pié de página</div>
</body>
</html>


y ete el css:

#cabecera {background-color: pink }
#navegacion {background-color: gray }
#contenido {background-color: orange }
#pie {backgorund-color: brown }
Jugoncan · · Solicitar retirada
Pues esto:
#pie {backgorund-color: brown }

Sería así:
#pie {background-color: brown }

Con eso se solucionará, pero te aconsejo que en vez de poner brown, pink, ... pongas los códigos html, puesto que algunos colores escritos así no son reconocidos por todos los exploradores.

Saludos :wink:
dagas16 · · Solicitar retirada
bien muchas gracias
por lo visto no se escribir jeje :lol:

pero gracias por tu paciencia para encontrar mis error
muchas muchas gracias
dagas16 · · Solicitar retirada
ahora nacasito ayuda con lo de los estilos en los menus

html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>

<div id="global">
<div id="cabecera">Bienbenidos a mi web</div>
<div id="navegacion">Barra de navegacion</div>
<div id="contenido"><div id="menu">
<ul>
  • <a ref="#">Elemento de lista, 1
  • <a ref="#">Elemento de lista, 2
  • <a ref="#">Elemento de lista, 3<li/>

    </div>Este será la zona principal de tu web</div>
    <div id="pie">Este es el pié de página</div>
    <div/>

    </body>
    </html>

    css:

    body {text-align: center}
    #global {width:800px ; margin: 4px auto }
    #cabecera {background-color: #FFC0CB }
    #navegacion {background-color: #BEBEBE }
    #contenido {background-color: orange ; width: 800px ; float:left}
    #menu {background-color: yellow; width: 150px ; float:left }
    #pie {background-color: #A52A2A }
    #menu li { list-style:none }


    Lo que pasa es que no quedan alineados a la izquierda y los numero quedan debajo de el enunciado

    COMO LE HAGO :?: :?:
    • dagas16 · · Solicitar retirada
    nececito ayuda el problema que tengo es al poner los enlaces de la lista del menu.
    No solo se cambia el color la que forma el menu sino que tambien donde dice
    Este será la zona principal de tu web y Este es el pié de página.
    No se como acomodarlo para que quede bien

    html:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>
    <head>
    <title>Page title</title>
    <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
    </head>
    <body>

    <div id="global">
    <div id="cabecera">Bienbenidos a mi web</div>
    <div id="navegacion">Barra de navegacion</div>
    <div id="contenido"><div id="menu">
    <ul>
  • <a ref="#">Elemento de lista, 1
  • <a ref="#">Elemento de lista, 2
  • <a ref="#">Elemento de lista, 3<li/>

    </div>Este será la zona principal de tu web</div>
    <div id="pie">Este es el pié de página</div>
    <div/>

    </body>
    </html>


    css:

    * {margin:0px ; padding:0px ; border: 0px}
    body {text-align: center}
    #global {width:800px ; margin: 4px auto }
    #cabecera {background-color: #FFC0CB }
    #navegacion {background-color: #BEBEBE }
    #contenido {background-color: orange ; width: 800px ; float:left}
    #menu {background-color: yellow; width: 150px ; float:left ; text-aling:left }
    #pie {background-color: #A52A2A }
    #menu li {list-style:none ; margin: 4px 0px 4px 6px}
    a {color: blue; font-size:1.3em ; text-decoration: none}
    a {color: brown ; text-decoration: none}
    a:link {}
    a:visited {}
    a:hover {color:red ; text-decoration:underline}


    help :!: :!: :!:
    • dagas16 · · Solicitar retirada
    y tambien solo se subraya en firefox y no en IE
    asea que cuando le pasas el mouse encima no se subraya ni cambia el color y en firefox si por que pasa eso?
    Raulyure · · Solicitar retirada
    dagas16 escribió:nececito ayuda el problema que tengo es al poner los enlaces de la lista del menu.
    No solo se cambia el color la que forma el menu sino que tambien donde dice
    Este será la zona principal de tu web y Este es el pié de página.
    No se como acomodarlo para que quede bien

    html:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>
    <head>
    <title>Page title</title>
    <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
    </head>
    <body>

    <div id="global">
    <div id="cabecera">Bienbenidos a mi web</div>
    <div id="navegacion">Barra de navegacion</div>
    <div id="contenido"><div id="menu">
    <ul>
  • <a ref="#">Elemento de lista, 1
  • <a ref="#">Elemento de lista, 2
  • <a ref="#">Elemento de lista, 3<li/>

    </div>Este será la zona principal de tu web</div>
    <div id="pie">Este es el pié de página</div>
    <div/>

    </body>
    </html>


    css:

    * {margin:0px ; padding:0px ; border: 0px}
    body {text-align: center}
    #global {width:800px ; margin: 4px auto }
    #cabecera {background-color: #FFC0CB }
    #navegacion {background-color: #BEBEBE }
    #contenido {background-color: orange ; width: 800px ; float:left}
    #menu {background-color: yellow; width: 150px ; float:left ; text-aling:left }
    #pie {background-color: #A52A2A }
    #menu li {list-style:none ; margin: 4px 0px 4px 6px}
    a {color: blue; font-size:1.3em ; text-decoration: none}
    a {color: brown ; text-decoration: none}
    a:link {}
    a:visited {}
    a:hover {color:red ; text-decoration:underline}


    help :!: :!: :!:
    • Hola:
    Le recomiendo que por ahora lo ponga así en su página



    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>
    <head>
    <title>Page title</title>
    <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
    </head>
    <body>

    <div id="global">
    <div id="cabecera">Bienvenidos a mi web</div>
    <div id="navegacion">Barra de navegacion</div>
    <div id="contenido">
    <div id="menu"><ul>
  • <a href="#">Elemento de lista 1
  • <a href="#">Elemento de lista 2
  • <a href="#">Elemento de lista 3

    </div>
    <h1>Este será la zona principal de tu web</h1>


    Bla ,bla bla. etc. etc. etc.</p>


    Ble, ble, ble, etc. etc. etc.</p>


    Bli, bli,bli, etc. etc. etc.</p>
    </div>
    <div id="pie">Este es el pié de página</div>
    </div>

    </body>
    </html>

    En el <div id=" menu ">ponga todos los enlaces en una sola línea, y le sugiero que los div los cierre así </div> no así <div/>
    Saludos
    • Agradecido de los que aprenden enseñando
    dagas16 · · Solicitar retirada
    no sigue igual y el link del ultimo se mezcla con el contenido y el pie de pagina
    le das a uno y aparecen todos
    Jugoncan · · Solicitar retirada
    Tú tienes esto:
  • <a ref="#">Elemento de lista, 1
  • <a ref="#">Elemento de lista, 2
  • <a ref="#">Elemento de lista, 3<li/>

    Y lo correcto es esto:
  • <a href="#">Elemento de lista, 1</a>
  • <a href="#">Elemento de lista, 2</a>
  • <a href="#">Elemento de lista, 3</a>

    Saludos :wink: