Saludos


| |||
![]() 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 ![]() ![]() |
| |||
Respuesta: Problema con menu css 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 |
| |||
Respuesta: Problema con menu css 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:
El CSS<!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> </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"> </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>
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; } |
Etiquetas: |