Codecol escribió:Raulyure; creo que vas bien encaminado y yo también he pensado más o menos lo mismo, pero por mucho que he mirado no encuentro el fallo, bueno si, uno de esos que tu dices de final que estava alrevés (<a/>), per ya está solucionado y nada. Ya vale de rollo, pongo las hojas:
*{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 ; padding-top:25px ; padding-bottom: 12px}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center ; padding-top:12px ; padding-bottom: 12px}
body {background-color: #4F4F4F ;text-align: center}
#global {width:850px ; margin: 4px auto }
#curva-superior { background-image: url(objetos/curva-superior.gif) ; background-repeat: no-repeat ; width:850px ; height: 12px ; overflow: hidden}
#cabecera {background-color: white ; border-left: ; border-right: ; height:85px}
#logotipo {width:280px ; float:left}
#publicidad {width:518px ; float:right ; margin-top:25px}
#navegacion {background-color: #EEE685 ; border-top: black 1px solid ; border-bottom: black 1px solid ; black ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px}
#navegacion ul { margin-left: 100px}
#contenido {background-color: #E8E8E8 ; width: auto ; height: 500px ; margin: 0px 0px 0px 160px; border-left: ; border-right:}
#contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
#contenidoportada {background-color: #E8E8E8 ; width: auto ; height: 500px ; margin: 0px 0px 0px px; border-left: ; border-right:}
#contenidoportada p {margin: 5px 150px 5px 150px ; text-indent: 15px ; color: black}
#menu {float: left ; width: 150px ; text-align: left ; margin: 10px 5px 6px 3px ; background-image: url(objetos/menu-parte-inferior.gif) ; background-position: bottom ; padding-bottom:5px}
#menu h1 {text-decoration: none; font-size:15px ; padding-top:12px ; padding-bottom:12px ; background-image: url(objetos/menu-curva-superior.gif)}
#menu li {list-style: none ; margin: 6px 4px 4px 2px}
#pie {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid ; height: 17px ; font-size: 12px}
#pieuno {float:left ; width:150px}
#piedos {float:left ; width:548px}
#pietres {float:left ; width:150px}
#pie a {color: blue; text-decoration:none ; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:underline ; background-color: white }
#pie a:active {color:black}
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ; background-repeat: no-repeat ; width:850px ; height: 12px ; overflow: hidden}
a {color: red ;text-decoration: none ;display: block}
a: link{}
a: visited{}
a:hover {color: red ;text-decoration: none ; background-color: #FFEC8B}
a: active {}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}
Hola:
Bueno, ahora que tengo unos cinco minutitos más le comentaré algo.
Por ejemplo, todas las cosas que uno pone en la página es como si pusiera cajas .
Eso significa que una capa es una caja con ciertas medidas
También que un párrafo es una caja con ciertas medidas
También una imagen es una caja con ciertas medidas
Incluso cuando uno pone <html> bla bla bla </html>
eso también es una caja
El <body> bla bla bla </body> también es una caja
S tan solo usted pone un solo carácter en su página, (como si pone un punto), eso es una caja con unas medidas.
Las medidas normalmente ya están prefijadas por los mismos navegadores, ya que ellos utilizan una por decirlo de alguna manera ... Una hoja de estilo ...
La diferencia de cuando uno crea una hoja de estilo, no es que realmente esté creándo , sino que lo que está haciéndo es "modificando" los estilos que utilizan los navegadores por defecto (que ya están prefijados).
Y pensar que toda esta "lata" que le doy es para explicarle el porqué a lo mejor se le duplica la imagen del H1.
Pero acá vamos.
Si usted en una capa (a la que en principio no le ha dado ninguna medida, como puede ser la capa que está arriba de la capa menu,.
Esta capa se llama menu h1
Luego usted dentro de esa capa pone una imagen, esa imagen creo que se llama menu curva superior o menu parte superior, (no me acuerdo)
Pues esa imagen que usted pone allí en esa capa menu h1 mide 150px de ancho y mide 30px de alto.
por lo tanto la capa mide 150px de ancho por 30px de alto.
Luego por ejemplo usted pone dentro de esa capa y por lógica dentro de esa imagen una palabra, por ejemplo la palabra menu
Pues esa palabra tiene una altura por defecto, a menos que uno le ponga en la hoja de estilo el tamaño que quiere
¿Que tamaño le puso usted a esa fuente o palabra?
Por lo que puedo ver en sus códigos de su hoja de estilo, usted le ha puesto un tamaño de font-size:15px o sea, una altura de 15 píxeles
Por tanto si la capa mide de altura 30 píxeles, y le pone dentro una palabra que tiene de altura 15 píxeles.
si restamos, lo que vemos es que queda un espacio de 15 píxeles
Hasta allí todo bien.
Pero entonces ¿Qué problema puede haber?
Pues cuando hay que tener cuidado es cuando usted pone la siguiente "caja" dentro de esa capa menu h1.
¿Cómo se llama esa caja que pone usted ahora, pues se llama "padding"
El padding es una caja, tal como son las otras cajas como ese texto que puso o como cuando se pone una capa.
Todo son cajas.
Por tanto si la imagen mide de altura 30px y pone una palabra de una fuente y esta mide 15px
Y como sobra de espacio 15 px, entonces si uno le pone por ejemplo al padding, (que es una caja que rellena el espacio). Un "relleno" de 12px por arriba (padding-top:12px)
Entonces sería 30píxeles que mide la altura de esa caja menu h1, ocupamos 15px que mide la altura de las letras, y ahora le sumamos 12px de relleno
Todo eso nos daría 15 más 12 = 27px
O sea nos quedaría casi perfecta
Aunque habría sido más conveniente ponerle a las letras una altura de 12px, pero mientras no sobrepase la altura de esa capa no creo que haya problemas.
Pero ¿Si está así, porqué sigue deformada?
Porque seguramente a continuación de ese padding-top (relleno que le puso por arriba de las letras)
Usted le habrá puesto también un relleno por abajo de esas letras, o sea un padding-bottom:12px
Por tanto si ahora sumamos todos esos elementos que puso usted dentro de una caja que mide 30 píxeles de altura, vemos que
las letras o la fuente mide 15px de altura
el relleno de arriba (padding-top) mide 12px de altura
y el relleno de abajo (padding-bottom) mide 12px de altura
todo eso suma la cantidad de =39 píxeles de altura
Por tanto es muy difícil meter tres cajas que suman entre ellas 39px de alto , dentro de una caja que tiene de alto solo 30px.
Por tanto, resumiéndo
como que le sobra poner ese padding-bottom
Ya se que alguien podrá decir: ¿¡Y para qué tanta explicación! Cuando bastaba con decir que quitara ese padding-bottom?
Pero como yo soy un poco al revés, pues me gusta explicar las cosas así
(A veces ni yo me entiendo mis propias explicaciones, pero que le voy a hacer)
..........................
Pruebe quitándole el padding-bottom a la capa menu h1 y bájele un poco la medida de los píxeles del font-size
Eso por ahora
Ya nos dirá
Saludos
