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
y esta la hoja css
De antemano les agradesco mucho su ayuda
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