problemas con el logo

serrrot · 18 Mar 2009, 02:18 · Solicitar retirada

hola,
estoy teniendo algunos problemas con el logo, como por ejemplo, que se me ha quedado encima de publicidad, en vez de a la izquierda, no se me carga la imagen y además parece q se me han descuadrado los bordes en la derecha, menudo lioooooo!!!

esta es mi hoja de estilos:

body {text-align: center}
#global {width:800px ; margin: 4px auto }
#cabecera {background-color: white ; border-left:black 1px solid ; border-right:black 1px solid ; border-bottom: black 1px solid}
#navegacion {background-color: gray ; border:black 1px solid}
#contenido {background-color: orange; width: auto ; border-right: black 1px solid ; border-bottom: black 1px solid ; border-left: black 1px solid ; border-top: black 1px solid}
#contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
* {margin:0px ; padding:0px ; border: 0px}

#menu {background-color: yellow; width: 150px ; float:left ; margin-right: 10px}

}
#menu li { list-style:none ; margin: 4px 0px 4px 6px}
#pie {background-color: white ; border-top:black 1px solid ; border-left: black 1px solid ; border-right: black 1px solid}

a {color: brown ; text-decoration: none ; display: block}
a:link {}
a:visted {}
a:hover {color:red ; text-decoration:underline ; background: silver}
a:active {}
p {text-align: justify}
#menu {................... margin:3px 10px 3px 3px}
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}
#logotipo {background-color:brown ; width:800px ;}
#publicidad {background-color:pink ; width:518px ;}

esta es mi plantilla:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

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

<title>Page title</title>
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo"><a href="index.html">[contenido no disponible]
<div id="publicidad">Bienvenidos a mi Web</div>
</div>
<div id="navegacion">Barra de Navegación</div>
<div id="contenido">
<div id="menu">menu
<ul>

Enlace 1

Enlace 2

Enlace 3
</div>
<h1>Esta es la zona principal de la web.</h2>

párrafo uno, etc etc etc etc etc etc.</p>

párrafo dos etc etc etc etc etc etc etc.</p>
<h2>párrafo tres etc etc etc etc etc.</h2>

párrafo cuatro etc etc etc etc</p>
</div>
<div id="pie">Este es el pie de página</div>
<div id="curva-inferior"></div>
</div>

</body>

</html>

a ver si vosotros encontrais el error, porque yooooooo.... no soy capaz. :roll:
gracias.salu2

peugeot · 18 Mar 2009, 16:38 · Solicitar retirada

Hola,

sigue con el curso que allí, Jorgens explica muy bien cómo solucionar el problema sino, vuelve a repetir esa misma parte. En todo caso, copia lo siguiente en en css:

#logotipo {width:247px ; float:left}

saludos, :wink:

serrrot · 18 Mar 2009, 19:24 · Solicitar retirada

he copiado eso y se me ha descolocado aún más. de todas formas gracias

peugeot · 18 Mar 2009, 19:47 · Solicitar retirada

el problema es con el ancho que le estás dando al logotipo, dice:

#logotipo {background-color:brown ; width:800px ;}

y debe decir el ancho del logotipo y no de la capa cabecera:

#logotipo {... width:270px ...}

Acuérdate que el ancho de la cabecera es 800px (menos 518 para div publicidad, 2px para los bordes izq. y der., quedaría 270px para el logo).

Eso es todo, ya nos contarás.

serrrot · 18 Mar 2009, 20:08 · Solicitar retirada

claro, es bastante lógico, pero lo he cambiado y tampoco se coloca en su itio, yo sigo investigando a ver si doy con el error. gracias, saludos

manmanu · 18 Mar 2009, 22:31 · Solicitar retirada

Hola a los d@s,

sarrot, vale que me has conmovido je,je,je

Primero, tienes algunos problemillas, y entre otros el logo claro está.
Tienes alguna capa div sin cerrar, algún ancla <a> sin cerrar y algunas cosillas más que hacen que no te valla bien.

Segundo, te aconsejo por lo menos repases el curso, y donde te has perdido comenzar,y eso te ayudará te lo garantizo.

Pero en el caso contario, te voy a pegar algunos cambios a tu código escrito aquí;
copialo en un bloc de notas, renombralo html, asegurate que no le das el nombre parecido de algún archivo html que tengas al lado, y lo abres.
Si notas mejoría, abre el html y repasa el codigo, y comparalo con el que has escrito antes.

2 cambios que tengo que avisarte, a parte los arreglos;
1-he dado al pie 30px de medida de alto fijo.
2- tu famosa publicidad la he flotado a la derecha, lleva un rato mirar este problema y lo he solucionado aliniando a la derecha, y no a la izquierda, funciona, pero igual no es esa tu idea.
Por eso te comento que repases el curso, por que ese paso para mí ha quedado atrás y no me acuerdo como lo escribio Jorgens, y antes de meter la pata revisalo.
Por lo menos se ve bien en varios navegadores, si no cambias el 518px a publicidad., no me acuerdo cuanto era el máximo.

Bueno, suerte.

manmanu

<style >
body {text-align: center}
#global {width:800px ; margin: 4px auto }
#cabecera {background-color: white ; border-left:black 1px solid ; border-right:black 1px solid ; border-bottom: black 1px solid;}
#navegacion {background-color: gray ; border:black 1px solid}
#contenido {background-color: orange; width: auto ; border-right: black 1px solid ; border-bottom: black 1px solid ; border-left: black 1px solid ; border-top: black 1px solid}
#contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
* {margin:0px ; padding:0px ; border: 0px}

#menu {background-color: yellow; width: 150px ; float:left ; margin-right: 10px}


#menu li { list-style:none ; margin: 4px 0px 4px 6px}
#pie {background-color: white ; border-top:black 1px solid ; border-left: black 1px solid ; border-right: black 1px solid; height:30px }

a {color: brown ; text-decoration: none ; display: block}
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background: silver}
a:active {}
p {text-align: justify}
#menu {margin:3px 10px 3px 3px;}
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}
#logotipo {background-color:brown ; width:275px ; height:80px }
#publicidad {background-color:pink ; width:518px ;height:80px ; float:right} 
</style>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera"><div id="publicidad"></div>
<div id="logotipo">[url="index.html"][img]objetos/logotipo.gif[/img][/url]</div>

</div>
<div id="navegacion">Barra de Navegación</div>
<div id="contenido">
<div id="menu">menu
<ul>[*][url="#"]Enlace 1[/url][*][url="#"]Enlace 2[/url][*][url="#"]Enlace 3[/url][/list]
</div>
<h1>Esta es la zona principal de la web.</h1>


párrafo uno, etc etc etc etc etc etc.</p>


párrafo dos etc etc etc etc etc etc etc.</p>
<h2>párrafo tres etc etc etc etc etc.</h2>


párrafo cuatro etc etc etc etc</p>
</div>
<div id="pie">Este es el pie de página</div>
<div id="curva-inferior"></div>
</div> 

</body>

peugeot · 18 Mar 2009, 23:08 · Solicitar retirada

Hola don Manmanu,

tenías razón hombre, aquí a Serrat, digo Serrot le falta </a> y </div> Sí que 2 cabezas piensan mejor que 1.

Listo serrot, a copiar y a seguir:

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

Saludos a ambos :D

manmanu · 19 Mar 2009, 00:43 · Solicitar retirada

Hola amiga,
hasta que no lo has comentado no me hubiera dado cuenta;

serrrot :oops:
Lechess..!!! un descuido. je,je,

Peu, espero que te encuentres bien....

Saludos

manmanu

peugeot · 20 Mar 2009, 17:27 · Solicitar retirada

Hola Manmanu,

Vi por allí tu gif de los aplausos, me gustó, está muy bueno. Grandes saludos para ti también hombre!!! :D 8) :D

manmanu · 20 Mar 2009, 22:30 · Solicitar retirada

Hola peugeot,
hola serrrot.

Me alegro que te gusten, a mí también.
El que se sentirá orgulloso, sera posiblemente su creador.
Los gifs no es lo mio, aunque no es un tema complicado.
Puedes encontrar cientos de ellos en la Red, pero eso ya lo sabes.....

Saludos

manmanu

[contenido no disponible]

peugeot · 20 Mar 2009, 23:13 · Solicitar retirada

aja... te estás puliendo con los acentos, muy bien, muy bien!!! Pasión por la informática... y por la ortografía...jajaj :D

manmanu · 20 Mar 2009, 23:46 · Solicitar retirada

Hola de nuevo,

A ver.....
donde he metido la gamba..... je,je,je,

Ahora como que no...

manmanu

[contenido no disponible]

serrrot · 22 Mar 2009, 23:06 · Solicitar retirada

hola a todos!!!
siento no haber contestado antes, no he podido hacerlo. Ante todo muuuuuchas gracias por la colaboración y siento ser tan pesada y molestar tanto, ya se me ha solucionado.En cuanto a lo de repasar el tutorial, lo he hecho 1000 veces y no es que me haya perdido, sino que se me ha olvidado poner alguna cosilla...
espero poder continuar sin tener q molestar más, un saludito a todos y lo dicho, muuuuuuuuchas gracias.
ciao!!!!