Hola!!
Tengo un fallo que no sé cómo resolver: las partes superior e inferior del menú (las imágenes curvas) se marcan como si tuvieran un enlace.
estilo-general.css
* {margin:0px ; padding:0px ; border:0px}
h1 {font-size: 1.2em; color:#363636 ; font-weight: comic-sans ; text-decoration: underline ; text-align: center}
h2 {font-size: 1.1em; color:#363636 ; font-weight: bradley ; text-decoration: none ; text-align: center}
body {text-align: center}
#global {width:800px ; margin: 4px auto }
#cabecera {background-color: white ; border-left: #9C9C9C 1px solid ; border-right: #9C9C9C 1px solid ; height: 116px ; overflow: hidden}
p {text-align: center}
#navegacion {background-color: #C1FFC1 ; border:#9C9C9C 1px solid ; height:20px}
#navegacion li {float:left ; list-style: none ; margin: 0px 20px 0px 20px}
#navegacion ul {margin-left: 25px}
#contenido {background-color: #E8E8E8 ; background-image: url(objetos/fondo1.jpg) ; background-repeat: no-repeat ; background-position: center center ; border-left:#9C9C9C 1px solid; border-right:#9C9C9C 1px solid}
#contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
#pie {background-color: white ; border-left: #9C9C9C 1px solid ; border-top: #9C9C9C 1px solid ; border-right: #9C9C9C 1px solid}
#menu {width: 150px ; float:right ; text-align:center ; margin: 10px 10px 40px 10px ; background-image: url(objetos/menu-parte-inferior.gif); background-position: bottom ; padding-bottom:5px}
#menu li {list-style:none ; margin: 4px 2px 4px 2px }
a {color: #1C1C1C ; font-size:1.2em ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:#E8E8E8 ; background-color: #8B0000 }
a:active {}
p {text-align: justify}
#menu h1 {text-decoration: none ; font-size: 1.1em ; background-image: url(objetos/menu-parte-superior.gif)}
#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 {width: 290px ; float: left}
#publicidad {background-color: white ; width: 505px ; float: right ; }
plantilla.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<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">
[contenido no disponible]
</a>
</div>
<div id="publicidad">
[contenido no disponible]</div>
</div>
<div id="navegacion">
<ul>
<a href="#">Inicio
<a href="#">Bienvenida
<a href="#">Quiénes somos
<a href="#">Terapia
<a href="#">Formación
<a href="#">Otros servicios
</div>
<div id="contenido">
<div id="menu">
<ul>
<h1>links</h1> Foro Galería de fotos Localización y Contacto Enlaces
</div>
<h1>Esta será la zona principal de la web</h1></p>
No entiendo muy bien cómo van luego a ponerse los diferentes enlaces. Imagino que se pondrán creando tantas plantillas como enlaces contenga la página.</p>
Para mí, en este momento, es todo un misterio.</p>
Aún me surge una pregunta más: ¿cómo hago para que el texto no se meta debajo del menú? Queda horroroso.</p>
Aunque creo que he encontrado la solución poniendo un margen para abajo enorme, de unos 400px creo que irá bien...</p>
<h2>Voy a comprobarlo...</h2></p>
Incluso podría ponerle un margen de alrededor de 600px de manera que la web tuviese un largo fijo...</p>
No sé, esto tendré que meditarlo...</p>
Me falta averiguar cómo cambiar los tipos de letra...</p>
</div>
<div id="pie">Este es el pie de página</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>
Tengo un fallo que no sé cómo resolver: las partes superior e inferior del menú (las imágenes curvas) se marcan como si tuvieran un enlace.
estilo-general.css
* {margin:0px ; padding:0px ; border:0px}
h1 {font-size: 1.2em; color:#363636 ; font-weight: comic-sans ; text-decoration: underline ; text-align: center}
h2 {font-size: 1.1em; color:#363636 ; font-weight: bradley ; text-decoration: none ; text-align: center}
body {text-align: center}
#global {width:800px ; margin: 4px auto }
#cabecera {background-color: white ; border-left: #9C9C9C 1px solid ; border-right: #9C9C9C 1px solid ; height: 116px ; overflow: hidden}
p {text-align: center}
#navegacion {background-color: #C1FFC1 ; border:#9C9C9C 1px solid ; height:20px}
#navegacion li {float:left ; list-style: none ; margin: 0px 20px 0px 20px}
#navegacion ul {margin-left: 25px}
#contenido {background-color: #E8E8E8 ; background-image: url(objetos/fondo1.jpg) ; background-repeat: no-repeat ; background-position: center center ; border-left:#9C9C9C 1px solid; border-right:#9C9C9C 1px solid}
#contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
#pie {background-color: white ; border-left: #9C9C9C 1px solid ; border-top: #9C9C9C 1px solid ; border-right: #9C9C9C 1px solid}
#menu {width: 150px ; float:right ; text-align:center ; margin: 10px 10px 40px 10px ; background-image: url(objetos/menu-parte-inferior.gif); background-position: bottom ; padding-bottom:5px}
#menu li {list-style:none ; margin: 4px 2px 4px 2px }
a {color: #1C1C1C ; font-size:1.2em ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:#E8E8E8 ; background-color: #8B0000 }
a:active {}
p {text-align: justify}
#menu h1 {text-decoration: none ; font-size: 1.1em ; background-image: url(objetos/menu-parte-superior.gif)}
#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 {width: 290px ; float: left}
#publicidad {background-color: white ; width: 505px ; float: right ; }
plantilla.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<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">
[contenido no disponible]
</a>
</div>
<div id="publicidad">
[contenido no disponible]</div>
</div>
<div id="navegacion">
<ul>
</div>
<div id="contenido">
<div id="menu">
<ul>
<h1>links</h1>
</div>
<h1>Esta será la zona principal de la web</h1></p>
No entiendo muy bien cómo van luego a ponerse los diferentes enlaces. Imagino que se pondrán creando tantas plantillas como enlaces contenga la página.</p>
Para mí, en este momento, es todo un misterio.</p>
Aún me surge una pregunta más: ¿cómo hago para que el texto no se meta debajo del menú? Queda horroroso.</p>
Aunque creo que he encontrado la solución poniendo un margen para abajo enorme, de unos 400px creo que irá bien...</p>
<h2>Voy a comprobarlo...</h2></p>
Incluso podría ponerle un margen de alrededor de 600px de manera que la web tuviese un largo fijo...</p>
No sé, esto tendré que meditarlo...</p>
Me falta averiguar cómo cambiar los tipos de letra...</p>
</div>
<div id="pie">Este es el pie de página</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>