Entrar

Cómo colocar el logotipo con enlace en la web "Problema

8_Millas · · Solicitar retirada
Bueno segui todos los pasos, no se que hise mal, probe de varias formas pero siempre me queda mal, es mi primer problema ya qe segui todos los pasos.

Me quede en esta parte http://www.comocreartuweb.com/html-kit-tutorial/tutorial-html-kit-l…

Llegue hasta donde dice...

"Guardando la hoja de estilos y haciendo vista previa vemos que realmente estas dos capas están una encima de otra. Cómo se evitaba esto ? Venga, haz memoria... qué propiedad permite que podamos poner una a un lado y la otra al otro lado? A ver si te haces una chuleta! (en Mejico creo que se llama acordeón, je je).

Por si no te acuerdas te ayudo un poco. Vamos a ponerle float:left a logotipo para colocarlo a la izquierda y float:right a publicidad para mandarla a la derecha."

Cuando yo pongo este codigo...



#logotipo   {background-color: brown ; width:280px ; float:left }
#publicidad {background-color: pink  ; width:518px ; float:right }

A mi me queda asi

[contenido no disponible]

Y a ustedes les queda asi

[contenido no disponible]

Y dije bueno se abran equivocado en el codigo en donde dice " float:right " y float:left " Entonces cambie y deje asi...

#logotipo   {background-color: brown ; width:280px ; float:right }
#publicidad {background-color: pink  ; width:518px ; float:left }

Y me queda asi...

[contenido no disponible]

Y dije " uh entonces que pasa, boe voy a seguir los pasos como dice aca a ver si de repente se arregla solo xD "

Entonces lo volvi a dejar como dijieron ustedes y segui sabiendo que lo mio no estaba igual al de ustedes.

Luego aparece este codigo en la pag...

#cabecera {background-color: white ; border-left: black 1px solid ; 
           border-right: black 1px solid ; height:85px}

Lo copie y lo pegue y segui los pasos.

"Con esto la cosa se arregla bastante. Ahora solo queda bajar un poco el texto de Bienvenida y quizás hacer el tamaño de letra algo mayor (esto del tamaño de letra lo vemos luego). Modificamos en la hoja de estilos la capa publicidad para dejarla así "

#publicidad {background-color: pink; width:518px ; float:right ; margin-top:25px}

"Ahora, si guardas la hoja de estilo y haces vista previa sí que se ve realmente bien. Ya pudes eliminarle los background-color a las capas logotipo y publicidad, pues ya no necesitamos esos colores para saber dónde acaba cada una. Tras eliminar eso vuelve a guardar la hoja de estilo. Esto ya pinta mejor, no?"

Bueno hasta llegue y miren como quedo...

[contenido no disponible]

No se que hise mal, les dejo mi PLantilla, y Estilo-General.

Plantilla :oops: 

<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo"></div>
[img]objetos/logotipo.gif[/img]
<div id="publicidad">Bienvenidos a mi Web</div>
<div id="navegacion">Barra de Navegación</div>
<div id="contenido">
<div id="menu">
<ul>
[*][url="#"]Enlace 1[/url][*][url="#"]Enlace 2[/url][*][url="#"]Enlace 3[/url][/list]
</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 :oops: 

* {margin:0px ; padding:0px ; border: 0px}
body {text-align: center}
#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}
#navegacion {background-color: pink ; 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:margin:3px 10px 3px 3px}
#pie { background-color: white ; border-left: black 1px solid ; border-right: black 1px solid; border-top: black 1px solid }
#global {width:800px ; margin: 4px auto }
#menu li { list-style:none ; margin: 4px 0px 4px 6px }
a {color: blue; font-size:1.0em ; text-decoration: none}
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline}
a:active {}
a {color: brown ; text-decoration:none ; display: block }
a:hover {color:red ; text-decoration:underline ; background-color: silver}
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 }

Como puedo arreglarlo y que me quede asi...

[contenido no disponible]

Ah otra cosa y no los molesto mas, creo que esta media deforme en lo que es los bordes miren esta imagen y fijense abajo en los bordes, parece que sigue una linea negra, porque sigue de largo ? Arriba a la derecha esta como un poco torcido, y abajo en ambos extremos sigue de largo una linea, como lo soluciono ?

[contenido no disponible]

Bueno espero que me ayude pronto, necesito de su ayuda, saludos y muy buena pagina :D :D
Kamael · · Solicitar retirada
pues lo arreglas poniendo el logotipo dentro del id logotipo

<div id="logotipo"></div>
[contenido no disponible]

debe ir asi:
<div id="logotipo">
[contenido no disponible]</div>
8_Millas · · Solicitar retirada
Tengo otro error, llego hasta aca miren..

[contenido no disponible]

Supuestamente ustedes tambien..
.
http://www.comocreartuweb.com/html-kit-tutorial/ejemplos/plantilla-…

Bueno hasta acà mi plantilla y estilo-general esta asi.

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">
<div id="logotipo">
<a href="index.html">
[img]objetos/logotipo.gif[/img]
</div>
</a>
<div id="publicidad">Bienvenidos a mi Web</div>
<div id="navegacion">
  <ul>
    [*]Sección 1
    [*]Sección 2
    [*]Sección 3
    [*]Sección 4
  [/list]
<div id="contenido">
<div id="menu">
<ul>
[*][url="#"]Enlace 1[/url][*][url="#"]Enlace 2[/url][*][url="#"]Enlace 3[/url][/list]
</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

argin:0px ; padding:0px ; border: 0px}
body {text-align: center}
#cabecera {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; height:85px}
#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 ;}
#navegacion {background-color: gray ; border: black 1px solid ; height:25px}
#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:margin:3px 10px 3px 3px}
#pie { background-color: white ; border-left: black 1px solid ; border-right: black 1px solid; border-top: black 1px solid }
#global {width:800px ; margin: 4px auto }
#menu li { list-style:none ; margin: 4px 0px 4px 6px }
a {color: blue; font-size:1.0em ; text-decoration: none}
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline}
a:active {}
a {color: brown ; text-decoration:none ; display: block }
a:hover {color:red ; text-decoration:underline ; background-color: silver}
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 }

Ahora cuando hago el siguiente paso que es este.

Al querer ponerle float:left a todos los elementos de la lista, parece lógico pensar que en la hoja de estilo hay que ponérselo a los li que haya dentro de la capa navegacion (hay que evitar que los li de la otra capa del menú lateral tomen esa propiedad), así que añadiriamos esta otra línea en la hoja estilo-general.css:

#navegacion li {float:left}

A mi me queda asi...

[contenido no disponible]


Y a ustedes asi...

http://www.comocreartuweb.com/html-kit-tutorial/ejemplos/plantilla-…

Entonces sigo este paso.

#navegacion {background-color: gray ; border: black 1px solid ; height:20px}

Y me queda asi.

[contenido no disponible]

Puede ser alguna llave de la plantilla.

Me fije en esta parte.


Plantilla

<div id="publicidad">Bienvenidos a mi Web</div>
<div id="navegacion">
  <ul>
    [*]Sección 1
    [*]Sección 2
    [*]Sección 3
    [*]Sección 4
  [/list]

Y la cambie asi.

<div id="publicidad">Bienvenidos a mi Web</div>
<div id="navegacion">
  <ul>
    [*]Sección 1
    [*]Sección 2
    [*]Sección 3
    [*]Sección 4
  [/list]
	</div>

Y me queda asi...

[contenido no disponible]

Miren bien la plantilla y diganme si tengo que cambiar algun codigo, o si me falta cerrar / algun codigo. Creo que ahi esta el problema, pero no lo puedo solucionar, el anterior problema lo solucione asi.

Antes tenia asi.

<div id="publicidad">Bienvenidos a mi Web</div>
<div id="navegacion"></div>

Y de tanto probar, se me ocurre borar esto </div> y me queda asi.


<div id="publicidad">Bienvenidos a mi Web</div>
<div id="navegacion">

Y ahi se arreglo, pero se ve que segui y me volvio aparecer otro problema, ayuda gente. Quiero seguir con el tutorial porque me encanta y se que me va a servir mucho, hermosa pagina y muy bien explicada, pasa que llega gente como yo que no entiende mucho xD


PD: Siento que me confundi en algo, pero seguro ustedes se daran cuenta, ya estoy mareado perdonen, fijense si me pueden dar alguna ayuda xD
Saludos.
Kamael · · Solicitar retirada
ese </div> no se borra eso es cuando quieres cerrar un bloque, para ver si vas junto con jorgens y los codigos estan iguales pues simplemente te fijas en los ejemplos q el deja, pones ver codigo fuente y vas revisando los codigos