Foros del Web » Creando para Internet » CSS »

Problema con menu css

Estas en el tema de Problema con menu css en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/12/2014, 14:34
 
Fecha de Ingreso: octubre-2014
Mensajes: 70
Antigüedad: 9 años, 4 meses
Puntos: 0
Pregunta Problema con menu css

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


  #2 (permalink)  
Antiguo 29/12/2014, 14:37
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Problema con menu css

Tienes un error en la linea #13 de tu CSS y otro en la linea #42 de tu HTML.
__________________
(:
  #3 (permalink)  
Antiguo 29/12/2014, 15:04
 
Fecha de Ingreso: octubre-2014
Mensajes: 70
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: Problema con menu css

Cita:
Iniciado por pzin Ver Mensaje
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
  #4 (permalink)  
Antiguo 29/12/2014, 15:13
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Problema con menu css

Cita:
Iniciado por eduuh17 Ver Mensaje
D:! Como sabes las lineas?
Pues no lo sé, porque no has publicado nada de código.
__________________
(:
  #5 (permalink)  
Antiguo 29/12/2014, 16:27
 
Fecha de Ingreso: octubre-2014
Mensajes: 70
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: Problema con menu css

Cita:
Iniciado por pzin Ver Mensaje
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;
}
  #6 (permalink)  
Antiguo 02/01/2015, 15:59
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 1 mes
Puntos: 306
Respuesta: Problema con menu css

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.
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--

Etiquetas: html
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:26.