PROBLEMAS AL COPIAR LA HOJA DE ESTILO/3a. LECCION/MÁS ESTILO

Daniela18 · 16 Oct 2007, 19:09 · Solicitar retirada

Ufffff....
En MÁS DE ESTILO de la LECCIÓN TERCERA, se muestra cómo iría quedando la Hoja de Estilo. Bien, la copié y pegué y se deshizo la Plantilla.
El Logotipo a la izquierda, y a su derecha y repetidos, los enlaces. Se fueron algunos colores, se despatarró todo, digamos.

Necesitaría saber, también, cómo queda la plantilla a esa altura para copiarla. Pues la Hoja de Estilo la copié, así que no tendría que haber problemas allí.

Puede alguien pasarme la Plantilla a esa altura de la Lección???
Estoy ya un poco desesperada.

Saludos y gracias.
Dani

Daniela18 · 16 Oct 2007, 19:35 · Solicitar retirada

Les dejo mi plantilla a ver si alguien ve errores. Desde ya, muchas gracias.

<!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>
<div id="global">
<div id="curva-superior"></div>
<div>
<div id="cabecera">Bienvenidos a mi Web</div>
<div>
<div id="cabecera">
<div id="logotipo">
<a href="index.html">
[contenido no disponible]
</div>
<div id="navegacion">
<ul>

Sección 1

Sección 2

Sección 3

Sección 4

</div>
<div id="contenido"><div id="menu">
<ul>
<h1>Título de Sección 1</h1>

Enlace 1

Enlace 2

Enlace 3

</div>

<ul>

Enlace 1

Enlace 2

Enlace 3

</div>

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

Bueno, este es el segundo párrafo</p>

Este es el tercero y nada más, espero no se descuelgue mucho</p>
</div>
<div id="pie">Este es el pié de página</div>
<div id="curva-inferior"></div>

</div>

</body>
</html>

Dani

Jugoncan · 16 Oct 2007, 19:48 · Solicitar retirada

dejanos tambien la hoja de estilos.
Saludos, Juanma

Yaneth · 16 Oct 2007, 19:48 · Solicitar retirada

como se llama tu hoja de estilos???

PROF3TA · 16 Oct 2007, 19:51 · Solicitar retirada

Daniela18 escribió:<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">

ai te respondo :D sino es esa alguien tiene in problema...

Daniela18 · 16 Oct 2007, 21:09 · Solicitar retirada

Ta, chicos, ya está.
En la Plantilla faltaba el div final al logotipo, eso me hizo subir el logo. Pero no logro ponerlo a la izquierda arriba por más que ponga left o right o center. Me lo pone al centro. Y en la hoja de Estilo dice perfectamente FLOAT:LEFT. Y este problema lo tengo desde que ingresé el logo.
Uffff,,, me da dolores de cabeza, pero al menos aprendo a los golpes.

Gracias, y si alguien sabe qué puede pasar con el logo que no logra ponerse en su lugar, les agradezco.

Ahora bien, el problema con el logo, estoy viendo ahora, es cuando le agrego lo que dice en la lección tres en la parte INSERTAR LOGOTIPO. Dice que pongamos esto:

<div id="logotipo">
<a href="index.html">
[contenido no disponible]
</a>
</div></p>

Y al ponerlo se descuelga todo bajando el logotipo y quedando el resto a su derecha y poco centrado. Aquí fue y está el problema.

Qué miércoles hago???

El logotipo vuelve a su lugar sólo cuando le pongo el cierre del div al lado.

Ufffff...

Dani

Daniela18 · 16 Oct 2007, 21:23 · Solicitar retirada

Juanma, sigo con problemas al insertar eso que puse antes. Te dejo mi hoja de estilos y Plantilla hasta el momento, es todo un despatarre !!!

* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
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}
body {text-align: center }
#global {width:800px ; margin:4px auto }
#curva-superior { background-image: url(objetos/curva-superior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
#cabecera {background-color: white ; border-left: black 1px solid ;
border-right: black 1px solid ; height:85px}
#logotipo {width:280px ; float:left }
#publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px }
#navegacion {background-color: gray ; border: black 1px solid ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
#navegacion ul { margin-left: 180px }
#contenido {background-color: orange ; border-left: black 1px solid ;
border-right: black 1px solid }
#contenido p {margin: 5px 10px 0px 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 }
#menu h1 {}
#pie { background-color: white ;
border-left: black 1px solid ;
border-right: black 1px solid;
border-top: black 1px solid }
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
a {color: brown ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}

<!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>
<div id="global">
<div id="curva-superior"></div>
<div>
<div id="cabecera">Bienvenidos a mi Web</div>
<div>
<div id="cabecera">
<div id="logotipo">
<a href="index.html">
[contenido no disponible]
</a>
</div></p>
<div id="navegacion">
<ul>

Sección 1

Sección 2

Sección 3

Sección 4

</div>
<div id="contenido"><div id="menu">
<ul>
<h1>Título de Sección 1</h1>

Enlace 1

Enlace 2

Enlace 3

</div>

<ul>

Enlace 1

Enlace 2

Enlace 3

</div>

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

Bueno, este es el segundo párrafo</p>

Este es el tercero y nada más, espero no se descuelgue muchoooo</p>
</div>
<div id="pie">Este es el pié de página</div>
<div id="curva-inferior"></div>

</div>

</body>
</html>

Yaneth, ufffff, gracias, pero no sabés qué trabajo que me da esto. Algunas veces quiero desistir, pero me revienta hacerlo. Entiendo casi todo, es más, les pregunto un problema de 6 que tengo, pues los demás los miro horas y los arreglo sola. Concurro aquí sólo cuando estoy súper desesperada y cansada. Aparte me encanta todo esto, pero vos sabés que cuánto más desafío más cansancio hay. :oops:

Bué... veremos si pueden con mis deberes :roll:

Gracias,
Dani :(

Daniela18 · 16 Oct 2007, 21:28 · Solicitar retirada

Como verán, los enlaces también se repiten !!!

Jugoncan · 16 Oct 2007, 21:30 · Solicitar retirada

Que lio tienes heho, y tienes muchos divs que empezaste (<div>) y no acabaste (</div>)

Daniela18 · 16 Oct 2007, 21:45 · Solicitar retirada

Me podés ayudar a arreglarlos, por ejemplo marcándome en rojo los que están mal y los que faltan??? :oops: O sea, explicándome qué hice mal?
:cry: :cry: :cry: :cry:

Daniela18 · 16 Oct 2007, 22:20 · Solicitar retirada

La única forma de que el logotipo me quede arriba y no entreverado con lo demás, es poniéndole al final de logotipo> el </div>
Luego sigo con el problema de que los enlaces se repiten al centro y con punto. Ufaaaaaa...

Saludos,
Dani

Yaneth · 17 Oct 2007, 00:41 · Solicitar retirada

ok

aqui te pongo tus codigos arreglados

<!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>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">[contenido no disponible]
</div>
<div id="publicidad">Bienbenidos a la página
</div>
</div>

<div id="navegacion">
<ul>

Sección 1

Sección 2

Sección 3

Sección 4

</div>
<div id="contenido">
<div id="menu">
<ul><h1>Título de Sección 1</h1>

Enlace 441

Enlace 2

Enlace 3
</div>

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

Bueno, este es el segundo párrafo</p>

Este es el tercero y nada más, espero no se descuelgue muchoooo</p>

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

Bueno, este es el segundo párrafo</p>

Este es el tercero y nada más, espero no se descuelgue muchoooo</p>

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

Bueno, este es el segundo párrafo</p>

Este es el tercero y nada más, espero no se descuelgue muchoooo</p>
</div>
<div id="pie">Este es el pié de página</div>
<div id="curva-inferior"></div>

</div>

</body>
</html>

estilo-general.css

* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
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}
body {text-align: center }
#global {width:800px ; margin:4px auto }
#curva-superior { background-image: url(objetos/curva-superior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
#cabecera {background-color: white ; border-left: black 1px solid ;
border-right: black 1px solid ; height:85px}
#logotipo {width:280px ; float:left }
#publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px }
#navegacion {background-color: gray ; border: black 1px solid ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
#navegacion ul { margin-left: 180px }
#contenido {background-color: orange ; border-left: black 1px solid ;
border-right: black 1px solid }
#contenido p {padding: 5px 10px 0px 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 }
#menu h1 {font-size:16px}
#pie { background-color: white ;
border-left: black 1px solid ;
border-right: black 1px solid;
border-top: black 1px solid }
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
a {color: brown ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}

checalo y nos avisas

saludos

JorGens · 17 Oct 2007, 00:49 · Solicitar retirada

Supera tu neurosis Daniela!! je je je

Ahi va:

plantilla.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="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">[contenido no disponible]</div>
<div id="publicidad">Bienvenidos a mi Web</div>
</div>
<div id="navegacion">
<ul>

Sección 1

Sección 2

Sección 3

Sección 4

</div>
<div id="contenido">
<div id="menu">
<ul>
<h1>Título de Sección 1</h1>
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>

estilo-general.css

* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
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}
body {text-align: center }
#global {width:800px ; margin:4px auto }
#curva-superior { background-image: url(objetos/curva-superior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
#cabecera {background-color: white ; border-left: black 1px solid ;
border-right: black 1px solid ; height:85px}
#logotipo {width:280px ; float:left }
#publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px }
#navegacion {background-color: gray ; border: black 1px solid ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
#navegacion ul { margin-left: 180px }
#contenido {background-color: orange ; border-left: black 1px solid ;
border-right: black 1px solid }
#contenido p {margin: 5px 10px 0px 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 }
#menu h1 {}
#pie { background-color: white ;
border-left: black 1px solid ;
border-right: black 1px solid;
border-top: black 1px solid }
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
a {color: brown ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}

Cuando puedas, empieza el curso de nuevo y presta mucha atención a ver cuando, porqué y donde empieza y termina cada div. Y a cómo se colocan varios divs dentro de otro y así te será más fácil comprender donde hay que cerrar esas etiquetas </div>

Sigue preguntando todo lo que necesites!

Yaneth · 17 Oct 2007, 00:51 · Solicitar retirada

por poquito y le atinamos

jejejejej

casi al mismo tiempo

saludos

JorGens · 17 Oct 2007, 01:09 · Solicitar retirada

ja ja ja :wink:

Daniela18 · 17 Oct 2007, 15:31 · Solicitar retirada

Gracias chicos, juassssssss, me había liado mismo, mismo !!!
Es que es difícil ir agregando y quitando permanentemente.
Pero sí, Jorgens tiene razón, tendré que ir empezando a chequear todo de nuevo. Que más o menos es lo que hago cada vez que me lío.

Pero, por ejemplo, en la págiina INSERTAR LOGOTIPO, está esto:

<div id="logotipo">
<a href="index.html">
[contenido no disponible]
</a>
</div></p>

Ven?, hay una </p> suelta que ha salido de la nada en la lección. Me rompía la cabeza y hasta ahora no la entiendo de dónde ha quedado colgada, y eso que está en la PÁGINA !!!

Bué, gracias nuevamente.

Y a Jorgens que me divierto mucho lección a lección con sus comentarios y errores propios.

Saludos,
Dani :wink: