Problema con menu css

eduuh17 · #1 (**permalink**) 29/12/2014, 14:34

Hola les comento, tengo el siguiente problema, tengo un dock al estilo 'mac' y en la parte de arriba y un menu en forma vertical al costado izquierdo de la pagina ( dejare imagen ) pero resulta que estoy usando un menu bajado desde internet, (http://tutorialzine.com/2010/06/css3...vigation-menu/ este hice) no entiendo muy bien ingles pero bueno, el tema es que la imagen no la busca, y la tengo bien especificada porque estoy usando los mismos archivos del demo, solamente que copie la parte del html a mi pagina, y el del css a mi css y no busca la imagen, pero al momento de pasar por encima donde debería de estar la imagen del menu se abren las categorías no se si me explique muy bien, de todas formas dejare imagen, espero que alguien me pueda ayudar.

Saludos

pzin · #2 (**permalink**) 29/12/2014, 14:37

Tienes un error en la linea #13 de tu CSS y otro en la linea #42 de tu HTML.

eduuh17 · #3 (**permalink**) 29/12/2014, 15:04

Cita:

Iniciado por pzin

Tienes un error en la linea #13 de tu CSS y otro en la linea #42 de tu HTML.

D:! Como sabes las lineas? bueno en la linea 13 del css esta la parte del menu lateral, y si se que eso debo arreglarlo y juntarlos, y respecto a la linea 42 es donde tengo el contenedor del menu y ahi tengo es imagen que seguramente la sacare o la colocare mas al costado

pzin · #4 (**permalink**) 29/12/2014, 15:13

Cita:

Iniciado por eduuh17

D:! Como sabes las lineas?

Pues no lo sé, porque no has publicado nada de código.

eduuh17 · #5 (**permalink**) 29/12/2014, 16:27

Cita:

Iniciado por pzin

Pues no lo sé, porque no has publicado nada de código.

Ah, con razon, bueno, lo publico, gracias por tu tiempo!
Index.php ( lo hice php porque llamo el dock con un include para ahorrar codigo no se si esta bien o no pero me resulta mas comodo)

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css/estilos.css" />

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
<script scr"js/jquery-1.8.0.min"></script>
<script scr="http://masonry.desandro.com/masonry.pkgd.min.js" ></script>
<script type="text/javascript" src="layout/scripts/carousel/jquery.waterwheelCarousel.min.js"></script>
<script type="text/javascript" src="layout/scripts/carousel/jquery.waterwheelCarousel.setup.js"></script>
<style type= "text/css">

html {
background: url(images/fondo.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
<body>
<div id="contenedor">
<title>KroAnime</title>

<!-- / Cabecera -->
<div id="banner">
<p>&nbsp;</p>
</div>
<div id="cabecera">
                  <img src="images/banner.jpg" width="738" height="99" />
                  <div class="dock" id="dock">
<?php
include "dock.php";
?>
</div>
</div>

<!-- / Menu -->
<div id="menu"> 
<div id="main">

<ul id="navigationMenu">
    <li>
	    <a class="home" href="#">
            <span> Acción</span>
        </a>
    </li>
    
    <li>
    	<a class="about" href="#">
            <span>Comedia</span>
        </a>
    </li>
    
    <li>
	     <a class="services" href="#">
            <span>Deportes</span>
         </a>
    </li>
    
    <li>
    	<a class="portfolio" href="#">
            <span>Terror</span>
        </a>
    </li>
    
   </ul>
    
</div>
 <img src="images/lateral.png" width="125" height="500	" />
</div>

<!-- / Ccontenido -->
<div id="contenido">
<!-- / Ccontenido parte principal -->


<div id="principal">

<?php 
	include "conexion.php";
	$sql = sprintf("SELECT 
    nombre, 
    nom_gen, 
    sinopsis, 
    fecha, 
    imagen,
	direccion  
FROM video V
    INNER JOIN gen_video GV ON V.idvideo = GV.idvideo 
    INNER JOIN generos G ON GV.idgenero = G.idgeneros 
ORDER BY fecha DESC
LIMIT 9");
	
	$res = mysql_query($sql);	
	if (!$res) die('Invalid query: ' . mysql_error());
?>
  
 <p align="left">&nbsp;</p>
    
    <?php while ($post = mysql_fetch_array($res)) {
		 ?>
    <div class="item">	
        

    <table width="100" border="0" align=""  style="border:hidden;">
      <tr>
      <?php echo '<a href="'.$post['direccion'].'">';?>
        <p width="15%" rowspan="5"><img class="img" img src="<?php   echo  $post['imagen'] ; ?>" width="150" height="150" /></p>
      </a>
      </tr>
      <tr>
        <td></td>
       
      </tr>
    </table><div style="clear:both"></div> 
              </div>

    <?php } ?>
    <style type="text/css"> 
	$(document).ready(function(){
	$('#contenedor').masonry();
});
</style>

</div>
<!-- / Ccontenido parte secundaria-->

<div id="secundario">
  <img src="images/lateral.png" width="125" height="500	" />


    </div>
    <!-- / Pie-->

    <div id="pie">
  </div>
</div>
    </head>
  </body>
</html>

El CSS

Código:

#contenedor {
	}
#cabecera {
}
#banner{
	float:left;
	width:20%;
	
}
#menu {
  position: fixed; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/
	left: 10%; /* Establecemos la barra en la izquierda */
	top: 100px; /* Bajamos la barra 200px de arriba a abajo */
	width: 10%;

}
#contenido {
  float: left;
  width: 100%;

}
#contenido #principal {
  margin: 0 auto;
  width: 50%;
}
#contenido #secundario {
	
  position: fixed; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/
	right: 0; /* Establecemos la barra en la izquierda */
	top: 100px; /* Bajamos la barra 200px de arriba a abajo */
	width: 23%;
	
}
img {
	border: none;
}

/* dock - top */
.dock {
	
	height: 50px; 
	text-align: center;
	width: 93%;
}
.dock-container {
	position: absolute;
	height: 50px;
	padding-left: px;
}
a.dock-item {
	display: block;
	width: 40px;
	color: #FFC;
	position: absolute;
	top: 0px;
	text-align: center;
	text-decoration: none;
	font: bold 12px Arial, Helvetica, sans-serif;
}
.dock-item img {
	border: none; 
	margin: 20px 20px 20px; 
	width: 100%; 
}
.dock-item span {
	display: none; 
	padding-left: 20px;
}

/* dock2 - bottom */
#dock2 {
	width: 100%;
	bottom: 0px;
	position: absolute;
	left: 0px;
}
.dock-container2 {
	position: absolute;
	height: 50px;
	background: url(images/dock-bg.gif);
	padding-left: 20px;
}
a.dock-item2 {
	display: block; 
	font: bold 12px Arial, Helvetica, sans-serif;
	width: 40px; 
	color: #000; 
	bottom: 0px; 
	position: absolute;
	text-align: center;
	text-decoration: none;
}
.dock-item2 span {
	display: none;
	padding-left: 10px;
}
.dock-item2 img {
	border: none; 
	margin: 5px 10px 0px; 
	width: 100%; 
}
.contenedor{
	width:90%;
	margin:15px auto;
}

	.item {
  width: 200px;
  margin: 5px;
  float: left;
}

 li { 
 margin:0 auto;
float: left;

  padding: 0 4px; 
}
/* Menu Categorias */


#navigationMenu li{
	list-style:none;
	height:39px;
	padding:2px;
	width:40px;
}

#navigationMenu span{
	/* Container properties */
	width:0;
	left:38px;
	padding:0;
	position:absolute;
	overflow:hidden;

	/* Text properties */
	font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
	font-size:18px;
	font-weight:bold;
	letter-spacing:0.6px;
	white-space:nowrap;
	line-height:39px;
	
	/* CSS3 Transition: */
	-webkit-transition: 0.25s;
	
	/* Future proofing (these do not work yet): */
	-moz-transition: 0.25s;
	transition: 0.25s;
}

#navigationMenu a{
	background:url('images/navigation.jpg') no-repeat;
	height:39px;
	width:38px;
	display:block;
	position:relative;
}

/* General hover styles */

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
	text-decoration:none;
	
	/* CSS outer glow with the box-shadow property */
	-moz-box-shadow:0 0 5px #9ddff5;
	-webkit-box-shadow:0 0 5px #9ddff5;
	box-shadow:0 0 5px #9ddff5;
}

/* Green Button */

#navigationMenu .home {	background-position:0 0;}
#navigationMenu .home:hover {	background-position:0 -39px;}
#navigationMenu .home span{
	background-color:#7da315;
	color:#3d4f0c;
	text-shadow:1px 1px 0 #99bf31;
}

/* Blue Button */

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
	background-color:#1e8bb4;
	color:#223a44;
	text-shadow:1px 1px 0 #44a8d0;
}

/* Orange Button */

#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
	background-color:#c86c1f;
	color:#5a3517;
	text-shadow:1px 1px 0 #d28344;
}

/* Yellow Button */

#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
	background-color:#d0a525;
	color:#604e18;
	text-shadow:1px 1px 0 #d8b54b;
}

/* Purple Button */

#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
	background-color:#af1e83;
	color:#460f35;
	text-shadow:1px 1px 0 #d244a6;
}

/* The styles below are only needed for the demo page */

#main{
	margin:80px auto;
	position:relative;
	width:40px;
}


h1{
	color:#fff;
	font-size:30px;
	font-weight:normal;
	padding:60px 0 20px;
	text-align:center;
}

h2{
	font-weight:normal;
	text-align:center;
}

h1,h2{
	font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
}

a, a:visited,a:active {
	color:#0196e3;
	text-decoration:none;
	outline:none;
}

a:hover{
	text-decoration:underline;
}

a img{
	border:none;
}

p.note{
	color:#707070;
	font-size:10px;
	text-align:center;
	margin:50px;
}

#pie {
  clear: both;
}

C2am · #6 (**permalink**) 02/01/2015, 15:59

Una recomendación, no publiques el código que tenga php, sino el "código que te crea el php". Este lo obtienes desde el navegador ->ver codigo fuente.