El tuto me fue muy útil para aprender sobre el tema, pero en mi css no tuvo éxito...
Lo que supongo yo, es que puede tener algún conflicto con algún otro elemento de mi hoja de estilos, pero la verdad no lo encuentro y me tengo que ir.
Se las dejo a ver si algún "Illuminati" se da cuenta de cuál es el error...
508.css:
Código :
body {
background: #333333 url('../navegacion/fondo.png') repeat-x;
text-decoration: none;
font-family: 'Trebuchet MS', Tahoma, Verdana, sans-serif;
font-size: 14px;
text-align: center;
}
#contenedor{
width: 780px;
margin: auto;
background: #FFFFFF;
}
#cabeza{
padding: 0;
background: #FFFFFF;
}
#header{
background: url('../navegacion/header.png');
height: 80px;
}
#shadow{
background: url('../navegacion/sombra.png');
height: 20px;
vertical-align: top;
}
#cuerpo{
background: #FFFFFF;
}
#lateral{
background: #FFFFFF;
width: 160px;
float: right;
text-align: center;
}
/*INICIO-MENÚ*/
#menu_vertical{
width:150px;
height:100%;
}
ul.menu{
list-style:none;
margin:0;
padding:0;
}
li.menu{
height:20px;
background-image:url('../navegacion/menu.png');
padding: 0 5px;
}
ul,li:hover.menu{
background-position: bottom;
}
/*FIN-MENÚ*/
/*INICIO-MENÚ-HORIZONTAL*/
#menuh {
width:588px;
height: 50px;
padding:0;
margin:0 auto;
list-style-type:none;
clear: left;
text-align: center;
}
#menuh li {
float:left;
width:100px;
border:1px solid #fff;
}
#menuh a {
display:block;
width:100px;
color:#000;
background:#d4d4d4;
text-align:center;
padding:4px 0;
text-decoration:none;
float:left;
}
#menuh a:hover {
color:#fff;
background:#08c;
}
/*FIN-MENÚ-HORIZONTAL*/
#principal{
background-color: #FFFFFF;
padding: 4px 4px 4px 4px;
margin-right: 170px;
}
#pie{
clear:both;
}
#footer{
background: url('../navegacion/footer.png');
height: 20px;
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: none;
}
a:active {
color: #000000;
text-decoration: none;
}
.box_title{
width: 150px;
font-weight: bold;
background: url('../navegacion/tit.png') no-repeat;
height:20px;
}
.box_content {
width: 148px;
border: solid #d2d000;
border-width: 0 1px 1px 1px;
text-align: justify;
}
.separa_horiz {
height: 10px;
}
.separa_vert {
width: 10px;
}
#explicacion {list-style:none;display:block;margin:0;padding:0;width:100%;}
#explicacion li {border:1px solid #999;display:inline;}
h2 {border:1px solid #999;margin:0;height:65px;line-height:65px;}
#explicacion_contenedor {width:590px;margin-left: 10px;}
.con_texto, .sin_texto {width:293px;height:200px;float:left;text-align:justify;vertical-align: inherit;}
.sin_texto {text-align:center;}
img{border:none;}index2.php:
Código :
<?php include("start.html");?>
<title>Amarre Cuadrado - Cabuyería - Grupo Scout 508</title>
</head>
<body>
<div id="contenedor">
<div id="cabeza"><?php include("header.html");?></div>
<div id="cuerpo">
<div id="lateral"><?php include("menu.php");?></div>
<div id="principal">
<div id="explicacion_contenedor">
<h1>Cuadrado</h1>
<p><strong>Empleo</strong>: Amarre de dos troncos con una soguín en forma perpendicular. Sirve para realizar la gran mayoría de las construcciones scouts. </p>
<h2>Ejecucion</h2>
<ul id="explicacion">
<li class="con_texto"><p>Se realiza un nudo ballestrinque dejando un pequeño chicote libre, sobre el tronco que se encuentra afirmado (soporte).</p></li>
<li class="sin_texto"><a href="campismo/cabuyeria/amarres/imagenes/cuadra1.jpg" rel="lightbox" title="Paso 1 para hacer un amarre cuadrado"><img src="campismo/cabuyeria/amarres/imagenes/cuadrado1.jpg" alt="Cuadrado 1"/></a></li>
<li class="sin_texto"><a href="campismo/cabuyeria/amarres/imagenes/cuadra2.jpg" rel="lightbox" title="Paso 2 para hacer un amarre cuadrado"><img src="campismo/cabuyeria/amarres/imagenes/cuadrado2.jpg" alt="Cuadrado 2"/></a></li>
<li class="con_texto"><p>Se pasa el soguín por delante del tronco horizontal (soportado) y por detrás del soporte.</p></li>
<li class="con_texto"><p>Se vuelve a pasar el soguín por delante del tronco soportado y por detrás del vertical, repitiendo esta operación al menos tres veces.</p></li>
<li class="sin_texto"><a href="campismo/cabuyeria/amarres/imagenes/cuadra3.jpg" rel="lightbox" title="Paso 3 para hacer un amarre cuadrado"><img src="campismo/cabuyeria/amarres/imagenes/cuadrado3.jpg" alt="Cuadrado 3"/></a></li>
<li class="sin_texto"><a href="campismo/cabuyeria/amarres/imagenes/cuadra4.jpg" rel="lightbox" title="Paso 4 para hacer un amarre cuadrado"><img src="campismo/cabuyeria/amarres/imagenes/cuadrado4.jpg" alt="Cuadrado 4"/></a></li>
<li class="con_texto"><p>Luego se dan al menos tres vueltas entre el soporte y el soportado, esta operación se llama estrangulación y debe realizarse suficiente presión para que el nudo sea firme y resistente.</p></li>
<li class="con_texto"><p>Por último, con el extremo libre y el pequeño chicote que se dejó al inicio (paso 1) realizar un nudo llano.</p></li>
<li class="sin_texto"><a href="campismo/cabuyeria/amarres/imagenes/cuadra5.jpg" rel="lightbox" title="Paso 5 para hacer un amarre cuadrado"><img src="campismo/cabuyeria/amarres/imagenes/cuadrado5.jpg" alt="Cuadrado 5"/></a></li>
</ul>
</div>
</div>
<ul id="menuh" style="border: 1px solid #FF0000; text-align:center;">
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</div>
<div id="pie"><?php include("footer.html");?></div>
</div>
</body>
</html>Gracias!
PD: Si le pegan un vistazo al tutorial, van a notar que el código del mismo y de mi css es exactamente igual al del ejemplo nro 1 (cuado sabemos el width del ul) a excepción de los datos de altura y anchura que los cambié para colocar los míos y de un
clear:left que le di, para que no se me encimara al resto de la página (
tal vez el problema esté aquí...)
), me traería problemas igual porque hay otras secciones de la página que no tendrán listas. 
