DUDAS LECCION 2 AQUI

ahora, a practicar y seguir practicando, yo lo que hago es navegar por la red, viendo pàginas a mi gusto, y checar estilos, para luego intentar hacerlos yo, si gustas, puedes definir un nuevo sitio de practicas, para que no muevas lo que ya te quedò bien, y empezar desde cero con otra cosa.

no es necesario que te vuelvas a registrar, solo son practicas jeejejje

saludos,
Gracias Yaneth...En eso estoy ahora, practicando y descubriendo nuevas cosas.
Saludos
Lo primero de todo saludos a todos. Soy nuevo por este sitio. Llevo dos días construyendo mi Web y la verdad es que todas las explicaciones son muy buenas. (Estoy usando el Dreamweaver 4.0).
Mi problema es con el fondo al subir la página al servidor, pues en la vista previa lo puedo ver, pero tras subirlo, en la Web se ve el fondo blanco. Os envio mi hoja de estilos y la index.html. Gracias.

/* Esto es mi hoja de estilo */

BODY { background: url("objetos/fondo1.jpg") ; }

A:link { font-weight: bold ; color: blue ; text-decoration: none; }

A:visited { font-weight: bold ; color: blue ; text-decoration: none; }

A:hover { font-weight: bold ; color: red ; }

A:active { font-weight: bold ; color: green ; }

p.centrado { text-indent:0px ; text-align:center ; }

P { font-family: Arial, Helvetica, sans-serif ; font-size: 17px ;

text-align:justify ; text-indent: 20px ; margin: 7px 8px 7px 8px ; }

/* Fin de mi hoja de estilo */




<!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=iso-8859-1" />
<title>miweb, Óscar</title>
<link rel="StyleSheet" href="estilo.css" media="screen" type="text/css">
</head>
<body>
<p class="centrado">Esta es mi p&aacute;gina principal </p>


Es una prueba para ver si funcionan bien los comandos. De momento funciona
casi todo.Espero que la cosa no se complique demasiado, y quede una web guapa.</p>


</p>
<p class="centrado">CreaTuWeb</p>


Miurabulls</p>


HomePilar</p>
<p class="centrado"></p>
<p class="centrado"></p>
<p class="centrado"></p>
<p class="centrado"></p>
<p class="centrado"></p>
<p class="centrado">Bienvenidos</p>
<p class="centrado">[correo eliminado]</p>
</body>
</html>
No hay como dejar descansar a la mente para que se te ocurran nuevas ideas. El problema estaba en que no había subido la imagen del fondo al servidor. Problema resuelto.
un saludo a todos
Hola soy nuevo, pero me gustaría saber cuando va a salir el tercer curso
Hola Saitam no se de que tercer curso nos hablas. A ver si los demas te entienden mejor.
Bueno lo primero daros las gracias por estas lecciones paso a paso q estan genial, y ahora preguntaros una duda q m ha surgido en el tema 2, es lo mismo q le pasaba a oscarveterinario pero q al contrario q el no e conseguido solucionar, en vista previa veo la imagen de fondo pero no asi en la web (http://perso.gratisweb.com/recredejuerga07/), os pongo la hoja d estilos y la index.html (e subido tambien las imagenes pero aun así no m va)

/* Esto es mi hoja de estilo */

BODY { background: url("objetos/fondo1.jpg") ; }

A:link { font-weight: bold ; color: blue ; text-decoration: none; }

A:visited { font-weight: bold ; color: blue ; text-decoration: none; }

A:hover { font-weight: bold ; color: red ; }

A:active { font-weight: bold ; color: green ; }

P { font-family: Arial, Helvetica, sans-serif ; font-size: 17px ;

text-align:justify ; text-indent: 20px ; margin: 7px 8px 7px 8px ; }


<html>
<head>
<title>Viva Recre!!!</title>
<meta>
<link>
</head>

<body>


Pagina Principal RECREATIVO DE JUERGA</p>


</p>


Bienvenidos a la página oficial del Recreativo de Juerga. Por el momento se
trara de un espacio provisional a la espera de que Juan Diego y yo (Cesc) nos
coordinemos con el fin de crear un lugar de encuentro, comunicación y demás
servicios para así poder llegar a todos con una mayor facilidad y poder transmitir
a todo aquel que se anime a entrar los logros que seguro alcanzará este joven
equipo, que ya quedo 7º en su primer año de liga con una excelente remontada
y semifinalista de la copa eliminado en los penaltis tras un igualado partido.
</p>


Hasta nuevas actualizaciones aqui dejo la foto de equipo Temporada 2006-07
</p>


<a>Pagina
temporal</a></p>
</body>
</html>


Muchas gracias
yo si que veo el fondo... pero como es clarito lo mismo si no tienes una pantalla con buen detalle a lo mejor no te has percatao... no se, yo te digo que veo el fondo, con firefox. con explorer supongo q tambien.
Hola

he visto tu página
http://perso.gratisweb.com/recredejuerga07/

esto veo en la hoja de estilos:

/* Esto es mi hoja de estilo */

BODY { background-color:Teal ; }

A:link { font-weight: bold ; color: blue ; text-decoration: none; }

A:visited { font-weight: bold ; color: blue ; text-decoration: none; }

A:hover { font-weight: bold ; color: red ; }

A:active { font-weight: bold ; color: green ; }

P { font-family: Arial, Helvetica, sans-serif ; font-size: 17px ;

text-align:justify ; text-indent: 20px ; margin: 7px 8px 7px 8px ; }

/* Fin de mi hoja de estilo */

como veras no hay nada que indique que has puesto una imagen de fondo
solo el color :Teal

si la modificaste, verifica que la subiste tambien
(cada que le hagas cambios hay que subirla de nuevo)

saludos
Muchas gracias por contestar tan rapido, pues ya sta solucionado, no se q hice mal al subir las nuevas actualizaciones y por eso seguia la primera q hice, asi q borre y subi d nuevo y solucionado, gracias d nuevo, salu2
Bueno tengo dos problemas, en la leccion dos e segudio paso a paso exactamente como me dise el manual T.T miren el menu a pesar de ke pusa la opcion de block = tengo ke pasar ensima de la palabra para que se active el link el preview >.>, ademas el cuerpo sale abajo del menu ??
PIDO DISCULPAS COMETI UN ERROR MAS ADELANTE ESTABA TODO ESCRITO COMO DEBIA ESTAR Y CORREJI MIS ERRORES ^^U...si no lo averigue es por ke keria a medida ke avansaba aprender ke pasaba y esperaba una respuesta para avansar de hoja pero dije leamos aver ke sigue y taba lo ke en realidad tenia ke ir =/ ... :oops: :oops: :oops: :oops: :oops:
miren ak lo ke e hecho =/

soy realmente un novato en toda la palabra

[contenido no disponible]

[contenido no disponible]

[contenido no disponible]


=/ bueno seguire avanso mientras me dan una respuesta como solucionar esos problemas...

Gracias
^^...
Mi problema es que al eliminar en la capa contenido el float:left para que la capa contenido no se deforme con el firefox o el opera (con ie se ve bien) automaticamente la capa de pie se me separa un poco de la de contenido. El codigo esta exactamente = que en el ejemplo, asi ke solo puedo dejarlo cn el espacio, o dejar puesto el float:left en la capa contenido, en cuyo caso se me ve bien cn el ie pero se deforma la capa contenido con los demas exploradores
Como no se insertar aqui imagenes, os dejo la direccion de la plantilla en el hosting gratuito que se recomendaba en el tutorial.

http://probando.onlinewebshop.net/plantilla.html

Muchas gracias! Saludos.
muchas gracias, era eso. Aunq la verdad es logico tenia que haberme dado cuenta...si le metes un margin de 5px por abajo..pos logico que se separe un minimo de 5px la capa del pie no? jeje
Muchas gracias
Por cierto!!

Es importante saber una cosa que nunca he comentado cuando se usan estilos css.

El navegador va a empezar a leer la hoja de estilos por el principio de arriba a abajo. Pues bien, si definimos algo dos veces (en dos lineas distintas) el navegador va a hacer caso de lo último que lea.

Me explico. Si en la primera linea de la hoja de estilos le decimos a un elemento que ha de ser de color rojo, y luego en la penultima o ultima (más abajo en la hoja de estilos) le decimos que tiene que ser verde, el navegador lo va a mostrar verde, pues machaca el color anterior. Se olvida de lo primero y toma como bueno lo ultimo que lee cuando hay repetición.

Queda claro? Pues bien,

Si os fijais, la linea aquella que empieza con un asterisco "*" en la hoja de estilo la puse la primera Y HA DE QUEDAR ALLI, COMO PRIMERA LINEA! siempre. Lo que hace esa linea es dejar a cero los margenes, los padding y los margenes y bordes para evitar que el navegador las coloque sin que se lo digamos. Si algun elemento queremos que tenga un borde, margen o lo que sea, distinto de cero, tenemos que definirlo después de esa linea.

Para algunos elementos hemos puesto unas cantidades distintas a cero para el margen o el borde, pero como tú has cambiado de lugar la linea del asterisco, lo que haces es dejar a cero todos los elementos con esas propiedades (margenes, bordes, etc). Para corregirlo solo tienes que volver a ponerla la primera.

Eso es al margen de lo que te comenta Yaneth, que es un error que he tenido al hacer las lecciones y que voy a reparar ahora mismo
:roll:

Un abrazo!
hola, tengo un problemilla, no consigo vincular la carpeta de estilos-general.css con la plantilla html, en que he fallado;?
<!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>Bienvenidos a mi Web</div>
</body>
</html>

hoja de estilos-general.css:
#cabecera {background-color:pink }

ayudadme por favor que me he quedao atascado en el tutorial!!!!!!
Disculpenme por mi ignorancia, pero me trave en una seccion de la segunda leccion al no presentar una visualizacion de lo realizado por mi persona similar al ejemplo publicado. a tal efecto anexo codigos desarrollados en hoja de estilo y plantilla html

Codigos de Hoja de estilo
* {margin:0px ; padding:0px ; border: 0px}
body {text-align: center}
#cabecera {background-color: pink }
#navegacion {background-color: gray }
#contenido {background-color: orange ; width: 800px ; float:left}
#menu {background-color: yellow ; width: 150px ; float:left ; text-align:left }
#menu li {list-style:none;margin: 4px 0px 4px 6px}
#pie {background-color: brown }
#global {width:800px ; margin: 4px auto }
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 ; background-color: silver}
a: active
a {color: brown ; text-decoration:none ; display: block }



codigo de plantilla:


<!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 Navegación</div>
<div id="contenido">
<div id="menu">menu</div><ul>
  • Enlace 1
  • Enlace 2
  • Enlace 3

    Esta será la zona principal de la web
    </div>

    <div id="pie">Este es el pié de página</div>
    </div>
    </body>
    </html>

    El error que presento se encuentra en la presentacion del menu ya que la imagen que me muestra es esta
  • Hola

    el fallo es que cerraste el div menu entes de tiempo

    lo tienes asi

    <div id="menu">menu</div><ul>
  • Enlace 1
  • Enlace 2
  • Enlace 3

    Esta será la zona principal de la web
    </div>

    y debe ser asi

    <div id="menu">menu<ul>
  • Enlace 1
  • Enlace 2
  • Enlace 3

    </div>
    Esta será la zona principal de la web
    </div>

    saludos
  • ante cualquier sugerencia sabria agradecer si fuera posible me la hicieran llegar a mi correo [correo eliminado]. por otra parte disculpen trate de subir la imagen y me volvi un rollo por esto la necesidad de este nuevo mensaje. favor agradeceria respuesta,
    Mi problema es el siguiente:

    Estoy atrancado en la segunda lección. Y es que después de definir las propiedades de los enlaces no me cambia el color de fondo a silver, ni me coje el enlace ni lo subraya ni nada como viene en el tutorial.

    Os dejo mi hoja de estilos a ver si averiguais algo:

    * {margin:0px ; padding:0px ; border: 0px}
    body {text-align: center}
    #cabecera {background-color: pink }
    #navegacion {background-color: gray }
    #contenido {background-color: orange ; width: 800px ; float:left}
    #menu {background-color: yellow; width: 150px ; float:left ; text:align:left}
    #menu li { list-style:none ; margin: 4px 0px 4px 6px}}
    #pie {background-color: brown}
    #global {width:800px ; margin: 4px auto }
    a {color:brown ; text-decoration:none ; display:block}
    a:link {}
    a:visited {}
    a:hover {color:red ; text-decoration:underline ; background-color:silver}
    a:active {}



    ¿Qué es lo que hago mal?

    Gracias por anticipado
    Ay... que largo camino queda aún...
    Supongo que ese es el objetivo final, sin embargo, Jørgensen es el creador del tutorial y será él quien mejor conoce a continuación, escriba su question.In respuesta a su pregunta, el objetivo será el de suponer que, aparte de saber cómo hacer un manual por el código, también sabemos cómo hacerlo en el menú de Dreamweaver.
    Bueno les escribo porque no logre hacer que me funcione el efecto del display: block (acercar la flechita al enlace y que se seleccione sin necesidad de llegar al texto).
    Copie la hoja de estilos y la plantilla exactamente igual a la que esta publicada en la segunda leccion pero no funciona. Quisiera saber si a alguien le paso lo mismo. Y si le paso, como lo soluciono. Desde ya gracias, y suerte!. :D
    ariel_mar escribió:Bueno les escribo porque no logre hacer que me funcione el efecto del display: block (acercar la flechita al enlace y que se seleccione sin necesidad de llegar al texto).
    Copie la hoja de estilos y la plantilla exactamente igual a la que esta publicada en la segunda leccion pero no funciona. Quisiera saber si a alguien le paso lo mismo. Y si le paso, como lo soluciono. Desde ya gracias, y suerte!. :D

    Hola:
    ¿Puede pegarnos los códigos de su plantilla y los de su hoja de estilo general?. Así veríamos con más propiedad lo que puede estar sucediéndo
    Saludos
    Agradecido de los que aprenden enseñando
    Aca va la hoja de estilos-general

    * {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
    body {text-align: center }
    #global {width:800px ; margin:4px auto }
    #cabecera { background-color: white ; border-left: black 1px solid ; border-right: black 1px solid}
    #navegacion {background-color: gray ; border: black 1px solid }
    #contenido {background-color: orange ; border-left: black 1px solid ; border-right: black 1px solid}
    #contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
    #menu {background-color: yellow ; width: 150px ; float:left ; text-align:left ; margin: 3px 10px 3px 3px }#menu li {list-style:none ; margin: 4px 0px 4px 6px }
    #pie { background-color: white ;
    border-left: black 1px solid ;
    border-right: black 1px solid;
    border-top: black 1px solid }
    a {color: brown ; text-decoration:none ; display: block }
    a:link {}
    a:visited {}
    a:hover {color:red ; text-decoration:underline ; background-color: silver}
    a:active {}
    p {text-align: justify}
    h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: center}
    h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center}
    #curva-superior { background-image: url(objetos/curva-superior.gif) ; background-repeat: no-repeat; width:800px ;
    height:12px; overflow : hidden}
    #curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
    background-repeat: no-repeat ;
    width:800px ;
    height: 12px; overflow: hidden }





    Y aca la plantilla




    <!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="curva-superior"></div>
    <div id="cabecera">Bienvenidos a mi Web</div>
    <div id="navegacion">Barra de Navegación</div>
    <div id="contenido">
    <div id="menu">
    <ul>
  • Enlace 1
  • Enlace 2
  • Enlace 3
    </div>
    <h1>Esta será la zona principal de la web</h1>


    Este es mi segundo párrafo. Acabo de poner un punto y en cambio sigue siendo un párrafo pues no le he colocado aún la etiqueta de cierre. Voy a ponersela justo aquí.</p>
    <h2>Y este es el tercer párrafo.</h2>

    En pocas lecciones aprenderé a darle margenes para separarlos unos de otros, e incluso hacerles sanguias por la izquierda a la primera línea, que queda mucho mejor.</p>


    Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens nos enseñe a ponerlos alineados a la izquierda, o justificados. Así esto parece una poesia! je je je.</p>
    </div>
    <div id="pie">Este es el pié de página</div>
    <div id="curva-inferior"></div>
    </div>
    </body>
    </html>