Hola amigos:
Con respecto a este problemilla, encontré por internet otra forma de poner las separaciones de los enlaces en html y es abrir y cerrar los enlaces con : [ ]. Pero el problema persiste. Si veo la página sin estilos, estos símbolos separan los enlaces. Pero si uso los estilos los dichosos símbolos se ponen encima de la barra de navegación y me descuadra el diseño. El html es este:
--------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="es" lang="es" xmlns="
http://www.w3.org/1999/xhtml">
<head>
<title>GARBITEK Energías Renovables, S.L.</title>
<link rel="stylesheet" type="text/css" href="default.css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div>
<div class="top">
<div class="header">
<div class="left">GARBITEK Energías Renovables, S.L.</div>
<div class="right">
[contenido no disponible]</div>
</div>
<div class="container">
<div class="navigation">
[<a href="index.html" title="Ir a: Presentación
Acceso rápido. Pulsar Alt+I+Enter." accesskey="i">
Inicio</a>]
[Productos ]
[Tienda ]
[Condiciones ]
[Privacidad ]
[Descargas ]
[Enlaces ]
[Contacto]
<div class="clearer"></div>
</div>
<div class="main">
<div class="content">
<h1>Encabezado 1.</h1>
texto</p>
</p>
</p>
</p>
</div>
<div class="sidenav">
<h2>Contenidos</h2>
<ul>
<a href="#" title="Ir a: ENERGÍAS RENOVABLES.
Acceso rápido. Pulsar Alt+R+Enter." accesskey="r">
Energías Renovables</a>
<a href="#" title="Ir a: ENERGÍA SOLAR FOTOVOLTAICA.
Acceso rápido. Pulsar Alt+F+Enter." accesskey="f">
Energía Solar Fotovoltaica</a>
<a href="#" title="Ir a: ENERGÍA SOLAR TÉRMICA.
Acceso rápido. Pulsar Alt+T+Enter." accesskey="t">
Energía Solar Térmica</a>
<a href="#" title="Ir a: ENERGÍA EÓLICA.
Acceso rápido. Pulsar Alt+E+Enter." accesskey="e">
Energía Eólica </a>
<a href="#" title="Ir a: ENERGÍA HIDRÁULICA.
Acceso rápido. Pulsar Alt+H+Enter." accesskey="h">
Energía Hidráulica </a>
<a href="#" title="Ir a: ENERGÍA MAREMOTRIZ.
Acceso rápido. Pulsar Alt+M+Enter." accesskey="m">
Energía Maremotriz </a>
<a href="#" title="Ir a: ENERGÍA GEOTÉRMICA.
Acceso rápido. Pulsar Alt+G+Enter." accesskey="g">
Energía Geotérmica </a>
<a href="#" title="Ir a: BIOMASA
Acceso rápido. Pulsar Alt+B+Enter." accesskey="b">
Biomasa</a>
<a href="#" title="Ir a: EL CICLO DEL AGUA.
Acceso rápido. Pulsar Alt+C+Enter." accesskey="c">
El Ciclo del Agua</a>
<a href="#" title="Ir a: AHORRO Y EFICIENCIA ENERGÉTICA.
Acceso rápido. Pulsar Alt+A+Enter." accesskey="a">
Ahorro y Eficiencia Energética</a>
<h2>Noticias de Interés</h2>
</div>
<div class="clearer"></div>
</div>
<div class="footer">Garbitek Energías
Renovables, S.L.</div>
</div>
</div>
</div>
</body>
</html>
-------------------------------------------------
La hoja de estilos es la siguiente:
/* standard elements */
html {
min-height: 100%;
height:auto !important;
}
* {
margin: 0;
padding: 0;
}
a {
background: #F3F4F0;
color: #333300;
}
a:hover {
background: #F3F4F0;
color: #6A3600;
}
body {
background: #7E984D url(img/bg.jpg) repeat-x left bottom;
color: #000000;
font: normal 62.5% Tahoma,sans-serif;
}
p,code,ul {padding-bottom: 1em;}
h1 {
font: normal bold 1.2em Tahoma,sans-serif;
margin-bottom: 1em;
padding-top: 6px;
}
h2 {
font: normal bold 1.2em Tahoma,sans-serif;
margin-bottom: 8px;
padding-top: 6px;
}
p,code,ul {padding-bottom: 1.2em;}
/* misc */
.clearer {clear: both;}
.left {float: left;}
.right {float: right;}
/* structure */
.container {
background: #FFF;
color: #444;
font-size: 1.2em;
margin: 0 auto;
padding: 0 10px 10px;
width: 780px;
}
/* header */
.top {
padding: 10px 10px 0;
}
/* title */
.header {
background: #FFFFFF;
color: #000000;
font-size: 1.2em;
height: 105px;
margin: 0 auto;
padding: 10px 10px 5px;
width: 780px;
display: block;
text-align: center;
}
.header .left {
background: #4C5E27;
color: #FFFFFF;
font: normal 2.6em "Trebuchet MS",sans-serif;
line-height: 105px;
width: 564px;
}
.header .right {
background: #333333 url(img/logotipo.jpg);
color: #FFFFFF;
height: 105px;
width: 212px;
}
.header .right p,.header .right h2 {
padding: 0 16px;
}
.header .right h2 {
padding-top: 16px;
font: normal 1.6em "Trebuchet MS",sans-serif;
}
/* navigation */
.navigation {
background: #D9E1E5 url(img/nav.jpg);
color:#444;
border: 1px solid #D8EBD8;
height: 41px;
}
.navigation a {
background: #D9E1E5 url(img/nav.jpg) left top repeat-x;
color: #333300;
border-right: 1px solid #D8EBD8;
display: block;
float: left;
font: bold 1.1em sans-serif;
line-height: 41px;
padding: 0 15px;
text-decoration: none;
}
.navigation a:hover {
background: #D9E1E5 url(img/nav.jpg) left bottom;
color: #333300;
}
/* main */
.main {
border-top: 4px solid #FFF;
background: url(img/bgmain.gif) repeat-y;
}
/* sub navigation */
.sidenav {
float: right;
width: 210px;
}
.sidenav h2 {
background: #F3F4F0;
color: #333300;
font-size: 1em;
line-height: 25px;
margin: 0;
padding-left: 12px;
}
.sidenav ul {
padding: 0;
border-top: 1px solid #D8EBD8;
}
.sidenav li {border-bottom: 1px solid #D8EBD8;list-style-type: none;}
.sidenav li a {
background: #F3F4F0;
color: #333300;
display: block;
font-size: 1.1em;
padding: 4px 0 4px 10px;
text-decoration: none;
width: 95%;
}
.sidenav li a:hover {
background: #474E33;
color: #ffffff;
text-decoration: none;
}
/* content */
.content {
float: left;
margin: 10px 0;
padding: 0 16px;
width: 531px;
}
.content .descr {
background: #F3F4F0;
color: #4A4A31;
font-size: 0.9em;
margin-bottom: 1em;
}
.content li {
background: #F3F4F0;
color:#333300;
list-style: url(none) none;
margin-left: 18px;
}
.content .imgright {
padding: 5px;
border: 1px solid #D8EBD8;
margin-left: 4px;
float: right;
}
.content p{
background: #F3F4F0;
color: #333300;
}
/* footer */
.footer {
background: #333300 url(img/bgfooter.gif) repeat-x;
color: #F4F4F4;
text-align: center;
font: bold 1em sans-serif;
line-height: 39px;
}
-------------------------------------------
Como podrás ver soy un poco novata en estas lides, estoy utlizando un template de los gratuitos al que quiero añadir la dichosa caja de búsquedas etc..., no sabía que esto era tan complicado, aunque estoy aprendiendo un montón.
Bueno muchas gracias por vuestro interés y colaboración. Un saludo.
terracota. :wink: