Problema con la imagen de fondo del menu izquierdo

Bueno esta es mi segunda duda (en el mismo dia jejeje)

Llevo el curso paso a paso y a la par voy haciendo una web aparte y el problema es en la segunda, y es que he puesto una imagen de fondo para el menu lateral izquierdo para tener las orillas redondeadas, hasta ahi todo bien ya que puse dos imagenes al igual que en el ejemplo pero de creacion mia,

Hasta ahi todo bien, el problema me surge cuando quiero ponerle un padding-top:12px para separar el titulo de la parte de arriba, al igual que en el curso y al ponerlo el resultado es este:

[contenido no disponible]
[contenido no disponible]

Como que se repite la imagen de la parte superior y me gustaría saber que he puesto mal o que me falta para que se respete la parte superior del fondo y que solo se mueva el titulo del menu al igual que en el curso

porque si le quito ese padding-top:12px se ve todo bien.

esta es la hoja html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general-soca.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
		 <div id="logotipo">[url="index.html"][img]Objetos/logo-plantilla.jpg[/img][/url]</div>
		 <div id="publicidad">[img]Objetos/copia-clan-logo.gif[/img]</div>
</div>
<div id="navegacion">
		 <ul>
		   [*][url="#"]SoCa[/url]
			 [*][url="#"]AmCa[/url]
			 [*][url="#"]Hedeh[/url]
			 [*][url="#"]Temas generales[/url]
			 [*][url="#"]Ocio total[/url]
		 [/list]
</div>
<div id="contenido">
		 <div id="menu">
		 <ul>
		 <h1>Menú</h1>[*][url="#"]DarkOnline[/url][*][url="#"]Historia del clan[/url][*][url="#"]Nuestros Heroes[/url][*][url="#"]Noticias[/url][*][url="#"]Eventos[/url][*][url="#"]Normas[/url][*][url="#"]Aliados[/url]
		 [/list]
		 </div>
		 <h1>La Sombra Carmesí</h1>		 		 
		 

Bienvenidos sean a esta pagina creada especialmente para La Sombra Carmesí, uno de los clanes principales dentro del 
		 magnifico juego darkonline.net </p>
		 

En el lado izqierdo de la paguina tienes un menu en donde puedes acceder a distintas secciónes como son la historia del
		  clan dentro del mundo de Hedeh, información sobre nuestros heroes (historia, clase, habilidades, rangos, azañas, etc.),
			 Noticias referentes a las actividades del clan o aquellas de gran relevncia puestas en la taberna del juego por Kaos, 
			 Eventos organizados por el clan y que pudieran ser de interes para el resto de la comunidad, las normas que son necesarias
			 para poder solicitar tu ingreso a esta gran familia carmesí, y finalmente una sección en donde puedes conecer a nuestros 
			 aliados, así como los requicitos para ser uno de ellos.</p>
		 <h2>Titulo 2</h2>
		 <div id="DO">[url="http://www.darkonline.net"][img]Objetos/logogamedark.jpe[/img][/url]</div>		
		 

Así mismo en el menu superior tienes la opción de ver la informacion por secciones, ya sea que quieras solamente datos 
		 de La Sombra Carmesí - SoCa, Amanecer Carmesí - AmCa, información generál del mundo de Hedeh, y una parte en donde 
		 ocacionalmente se agregarán temas de interes general nada relacionado con DO, y la sección en donde podras encontrar 
		 diversos temas para pasar el rato si es que andas de ocioso.</p>
		  
		 

Es importante mencionar que este espacio aun se encuentra en construcción, por lo que el trabajo aun no termina, 
		 sin embargo poco a poco se irán agregando nuevas secciónes para que disfrutes al maximo de esta pagina, en donde podrás 
		 encontrar no solo informacion acerca de esta gran familia carmesí, sino tambien diversos temas de interes general, 
		 inclusive un espacio dedicado a aquellos momentos de ocio y que no sabemos que hacer para pasar el rato, y sobre todo que 
		 tengas en cuenta que uno de los objetivos de esta pagina es que sea un lugar que puedas visitar de manera constante, 
		 por lo que agradecería que expresaras tu opinion, quejas, sugerencias, críticas, etc... </p> 


</div>
		 
<div id="pie">Este es el pié de página</div>
<div id="curva-inferior"></div>
</div>

</body>
</html>

y esta la hoja css
* {margin:0px ; padding:0px ; border: 0px}
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: 9px; overflow : hidden  }
#cabecera {background-color: #990000; border-left: black 1px solid ; border-right: black 1px solid; height:109px  } 
#logotipo   {background-color: #990000; width: 485; float: left}
#publicidad {background-color: #990000; width:313; float: right;margin-top:5px}

#navegacion {background-color: gray; border: black 1px solid ; height:20px }
#navegacion li {float:left; list-style:none ;margin: 0px 30px 0px 10px }
#navegacion ul { margin-left: 180px }
#contenido {background-color: #990000; border-left: black 1px solid ; border-right: black 1px solid }
#contenido p {padding: 5px 10px 5px 10px; }
#menu {background-color: brown; width: 160px ; float:left; text-align:left; margin: 10px 10px 0px 10px; background-image: url(objetos/menu-curva-inferior.jpg); background-position: bottom;}
#menu li { list-style:none; margin: 4px 6px 4px 30px; text-align: justify; }
#menu h1 {text-decoration:none; font-size:15px; padding-top:7px; background-image: url(objetos/menu-curva-superior.jpg );padding-top:12px}
#DO {background-color: black; width: 160px; float:left ; margin: 0px 10px 10px 10px}
#pie {background-color: #990000; border-left: black 1px solid ; border-right: black 1px solid  }
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ;background-repeat: no-repeat ; width:800px ; height: 12px; overflow: hidden }

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}

a {color: black ; text-decoration: none; display: block}
a:link {}
a:visited {}
a:hover {color: brown; font-size:1.0em; text-decoration:none; background-color:#1C1C1C }
a:active {}
p {text-align: justify}

De antemano les agradesco mucho su ayuda
Xiuhcoatzin escribió:Bueno esta es mi segunda duda (en el mismo dia jejeje)

Hola:
Puede que sea que usted en la hoja de estilo general a la capa menu le ha puesto un width:160px, o sea le ha dicho a la capa que mida de ancho 160px cuando la imagen esa del menu <h1> mide realmente 150px de ancho.

Le sugiero que vaya a la hoja de estilo general y cambie en la capa #menu{etc. etc.}ese 160 por un 150.
Y siga también la sugerencia que le dió Luzbelitocreaciones ya que es mejor que vaya antes del ul
Saludos
Agradecido de los que aprenden enseñando
Saludos Raulyure, pues la imagen que tengo de fondo si mide 160px de ancho, por eso le puse ese ancho en la capa #menu.

ya tambien corregí lo que dice Luzbelitocreaciones y quedo asi:


<div id="contenido">	 
<div id="menu">
<h1>Menú</h1>
<ul>
[*][url="#"]DarkOnline[/url][*][url="#"]Historia del clan[/url][*][url="#"]Nuestros Heroes[/url][*][url="#"]Noticias[/url][*][url="#"]Eventos[/url][*][url="#"]Normas[/url][*][url="#"]Aliados[/url]
[/list]		 
</div>

pero aun sigue igual :cry:

gracias
Xiuhcoatzin escribió:Saludos Raulyure, pues la imagen que tengo de fondo si mide 160px de ancho, por eso le puse ese ancho en la capa #menu.

ya tambien corregí lo que dice Luzbelitocreaciones y quedo asi:


<div id="contenido">	 
<div id="menu">
<h1>Menú</h1>
<ul>
[*][url="#"]DarkOnline[/url][*][url="#"]Historia del clan[/url][*][url="#"]Nuestros Heroes[/url][*][url="#"]Noticias[/url][*][url="#"]Eventos[/url][*][url="#"]Normas[/url][*][url="#"]Aliados[/url]
[/list]		 
</div>

pero aun sigue igual :cry:

gracias

Hola:
Hagamos entonces un ejemplo.
La capa menu supuestamente mide 160px de ancho, por lo tanto, las dos imagenes que van en la capa menu deben medir 160px de ancho también, o sea la imagen que va en h1 y la imagen que va en #menu.
Las que se llaman creo menu-curva-inferior.jpg y la menu-curva-superior.jpg

Hasta allí, todo bien, la cuestión es que usted le tiene puesto en la hoja de estilo general a la imagen del h1, dos veces un padding-top, tiene un padding-top:7px y tiene al final un padding-top:12px, debiera de dejar puesto solo un padding, que en este caso sería el padding-top:12px.
O sea que le quede más o menos así

#menu {background-color: brown; width: 150px ; float:left; text-align:left; margin: 10px 10px 0px 10px; background-image: url(objetos/menu-curva-inferior.jpg); background-position: bottom;}
#menu li { list-style:none; margin: 4px 6px 4px 30px; text-align: justify; }
#menu h1 {text-decoration:none; font-size:15px;background-image: url(objetos/menu-curva-superior.jpg);padding-top:12px}

Luego que rectifique eso, nos lo dice, y si no se arregló, vuelva a poner los códigos pero ya modificados como le hemos dicho.
Saludos
Agradecido de los que aprenden enseñando
y si..mejor lo subes a la red,
asi es mas facil ayuda

recuerda subir los nuevos cambios

saludos
jejeje genial, no me había dado cuenta de que estaba repetido,

bueno corregi el codigo, pero seguia teniendo problemas, ya que solo podia ponerle hasta 7px si le ponia 8px comenzaba a desplazarce y por provar le puse 30px y resulta que se repito 3 veces la parte de arriba, al ver esto se me ocurrio ponerle que no se repitiera:

#menu h1 {text-decoration:none; font-size:15px; background-image: url(objetos/menu-curva-superior.jpg ); padding-top:12px; background-repeat: no-repeat}

y resultó, ahora ya le puedo poner el padding que sea y solo se mueve el titulo y no el fondo. :D

Muchas muchas gracias ..... vaya como estoy aprendiendo :wink:
Xiuhcoatzin escribió:jejeje genial, no me había dado cuenta de que estaba repetido,

bueno corregi el codigo, pero seguia teniendo problemas, ya que solo podia ponerle hasta 7px si le ponia 8px comenzaba a desplazarce y por provar le puse 30px y resulta que se repito 3 veces la parte de arriba, al ver esto se me ocurrio ponerle que no se repitiera:

#menu h1 {text-decoration:none; font-size:15px; background-image: url(objetos/menu-curva-superior.jpg ); padding-top:12px; background-repeat: no-repeat}

y resultó, ahora ya le puedo poner el padding que sea y solo se mueve el titulo y no el fondo. :D

Muchas muchas gracias ..... vaya como estoy aprendiendo :wink:

Hola:
Ciertamente le iba a comentar acerca de las repeticiones, porque la imagen del h1 creo que de alto solo mide 30px, entonces hay que llevar muy ajustadas las medidas.
Por ejemplo
Si se pone así (esto es solo un ejemplo)
#menu{background-color:#E6E6FA;width:160px;float:left;
text-align:left;margin:3px 10px 3px 3px;background-image:url(objetos/menu-curva-inferior.jpg);background-position:bottom;padding-bottom:5px}
#menu h1{text-decoration:none;font-size:12px;padding-top:12px;background-image:url(objetos/menu-curva-superior.jpg)}
#menu li{margin:4px 8px 4px 6px}

Quedaría bien, pero si se me ocurre ponerle al menu h1 un font-size:15px y no 12 como le tengo puesto ahora, lógicamente eso me obligaría a hacer ajustes en general.

Y para evitarme ese problema, pero suponiéndo que yo si deseo ponerle un font-size de 15px, entonces cogería esa imagen h1, la llevaría a por ejemplo el photoshop, y le modificaría la altura, y en vez de que tenga 30px de alto, le pondría ahora una altura de 35px de alto, y así me evitaría tener que poner un background-repeat:no-repeat.
Claro que esto es solo como ejemplo.
Saludos
Agradecido de los que aprenden enseñando
OK Raulyure gracias,
como dicen entre menos codigos tenga la pagina mas rapido se habre ciert?, vere si le cambio el tamaño para cuendo la tenga mas elaborada :wink: