Borguas
-
Posts
2 -
Joined
-
Last visited
Borguas's Achievements
Newbie (1/7)
0
Reputation
-
Thanks. All the images are 798 width. I'm trying to fit dropdown-content into the table. If I change .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; width: 100%; left: 0; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; to width:1000; the dropdown fits to 1000 but it goes to the left. I need de dropdown-content just width=1000 and center in the menu.
-
Borguas joined the community
-
Hi, I'm trying to to create a mega menu as https://www.w3schools.com/howto/howto_css_mega_menu.asp with only images, but the dropdown goes full-width screen and I can't fit it to the menu. Thanks <!DOCTYPE html> <html> <head> <style> * { box-sizing: border-box; } body { margin: 0; } .navbar { overflow: hidden; background-color: #333; font-family: Arial, Helvetica, sans-serif; } .navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .dropdown { float: left; overflow: hidden; width: 1000; } .dropdown .dropbtn { font-size: 14px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; margin: 0; } .navbar a:hover, .dropdown:hover .dropbtn { background-color: red; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; width: 100%; left: 0; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content .header { width: 1000; color: black; text-decoration: none; display: block; } .dropdown:hover .dropdown-content { display: block; } /* Create three equal columns that floats next to each other */ .column { width: 1000; display: block; } .column a { float: none; color: black; padding: 16px; text-decoration: none; display: block; width: 1000; } .column a:hover { background-color: #ddd; width: 1000; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; width: 1000; } </style> </head> <body> <tr align="center"><td><table width=1000 align="center"><tr><td> <div class="navbar"> <div class="dropdown"> <button class="dropbtn">2005 <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <div class="row"> <div class="column"> <a href="http://www.e-minis.net/fantasia-warhammer-underworlds-c-735_6793.html">Comenzamos nuestra aventura con ilusión, nuestro primer pedido vino de Madrid. El segundo se hizo de rogar unos días pero se fue para Barcelona <br><img alt="Warhammer Underworlds Beastgarve" border="0" height="450" src="http://www.e-minis.net/images/correos/whu-Beastgrave-large.jpg" title="Warhammer Underworlds Beastgarve" width="798"></a> </div> </div> </div> </div> <div class="dropdown"> <button class="dropbtn">2006 <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <div class="row"> <div class="column"> <a href="http://www.e-minis.net/index.php?cPath=735_2447_7402"><img src="http://www.e-minis.net/images/correos/kow3-portada01.jpg" width="798" height="465" border="0" alt="Kings of War tercera edición" title="Kings of War tercera edición"></a> </div> </div> </div> </div> <div class="dropdown"> <button class="dropbtn">2007 <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <div class="row"> <div class="column"> <a href="http://www.e-minis.net/enanos/llameadores-p-106386.html"><img src="http://www.e-minis.net/images/correos/MOM-LLAMEADORES01-PORTADA.jpg" width="798" height="445" border="0" alt="MOM Minhiaturas" title="MOM Minhiaturas"></a> </div> </div> </div> </div> <div class="dropdown"> <button class="dropbtn">2008 <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <div class="row"> <div class="column"> <a href="http://www.e-minis.net/juegos-estrategia-cancion-hielo-fuego-juego-miniaturas-c-287_2905_7173.html"><img src="http://www.e-minis.net/images/correos/got-veteranswatch-large.jpg" width="798" height="416" border="0" alt="Canción de hielo y fuego" title="Canción de hielo y fuego"></a> </div> </div> </div> </div> <div class="dropdown"> <button class="dropbtn">2009 <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <div class="row"> <div class="column"> <a href="http://www.e-minis.net/juegos-estrategia-cancion-hielo-fuego-juego-miniaturas-c-287_2905_7173.html"><img src="http://www.e-minis.net/images/correos/got-veteranswatch-large.jpg" width="798" height="416" border="0" alt="Canción de hielo y fuego" title="Canción de hielo y fuego"></a> </div> </div> </div> </div> <div class="dropdown"> <button class="dropbtn">2010 <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <div class="row"> <div class="column"> <a href="http://www.e-minis.net/juegos-estrategia-cancion-hielo-fuego-juego-miniaturas-c-287_2905_7173.html"><img src="http://www.e-minis.net/images/correos/got-veteranswatch-large.jpg" width="798" height="416" border="0" alt="Canción de hielo y fuego" title="Canción de hielo y fuego"></a> </div> </div> </div> </div> <div class="dropdown"> <button class="dropbtn">2011 <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <div class="row"> <div class="column"> <a href="http://www.e-minis.net/juegos-estrategia-cancion-hielo-fuego-juego-miniaturas-c-287_2905_7173.html"><img src="http://www.e-minis.net/images/correos/got-veteranswatch-large.jpg" width="798" height="416" border="0" alt="Canción de hielo y fuego" title="Canción de hielo y fuego"></a> </div> </div> </div> </div> <div class="dropdown"> <button class="dropbtn">2012 <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <div class="row"> <div class="column"> <a href="http://www.e-minis.net/juegos-estrategia-cancion-hielo-fuego-juego-miniaturas-c-287_2905_7173.html"><img src="http://www.e-minis.net/images/correos/got-veteranswatch-large.jpg" width="798" height="416" border="0" alt="Canción de hielo y fuego" title="Canción de hielo y fuego"></a> </div> </div> </div> </div> <div class="dropdown"> <button class="dropbtn">2013 <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <div class="row"> <div class="column"> <a href="http://www.e-minis.net/juegos-estrategia-cancion-hielo-fuego-juego-miniaturas-c-287_2905_7173.html"><img src="http://www.e-minis.net/images/correos/got-veteranswatch-large.jpg" width="798" height="416" border="0" alt="Canción de hielo y fuego" title="Canción de hielo y fuego"></a> </div> </div> </div> </div> <div class="dropdown"> <button class="dropbtn">2014 <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <div class="row"> <div class="column"> <a href="http://www.e-minis.net/juegos-estrategia-cancion-hielo-fuego-juego-miniaturas-c-287_2905_7173.html"><img src="http://www.e-minis.net/images/correos/got-veteranswatch-large.jpg" width="798" height="416" border="0" alt="Canción de hielo y fuego" title="Canción de hielo y fuego"></a> </div> </div> </div> </div> <div class="dropdown"> <button class="dropbtn">2015 <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <div class="row"> <div class="column"> <a href="http://www.e-minis.net/juegos-estrategia-cancion-hielo-fuego-juego-miniaturas-c-287_2905_7173.html"><img src="http://www.e-minis.net/images/correos/got-veteranswatch-large.jpg" width="798" height="416" border="0" alt="Canción de hielo y fuego" title="Canción de hielo y fuego"></a> </div> </div> </div> </div> <div class="dropdown"> <button class="dropbtn">2016 <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <div class="row"> <div class="column"> <a href="http://www.e-minis.net/juegos-estrategia-cancion-hielo-fuego-juego-miniaturas-c-287_2905_7173.html"><img src="http://www.e-minis.net/images/correos/got-veteranswatch-large.jpg" width="798" height="416" border="0" alt="Canción de hielo y fuego" title="Canción de hielo y fuego"></a> </div> </div> </div> </div> <div class="dropdown"> <button class="dropbtn">2017 <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <div class="row"> <div class="column"> <a href="http://www.e-minis.net/juegos-estrategia-cancion-hielo-fuego-juego-miniaturas-c-287_2905_7173.html"><img src="http://www.e-minis.net/images/correos/got-veteranswatch-large.jpg" width="798" height="416" border="0" alt="Canción de hielo y fuego" title="Canción de hielo y fuego"></a> </div> </div> </div> </div> <div class="dropdown"> <button class="dropbtn">2018 <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <div class="row"> <div class="column"> <a href="http://www.e-minis.net/juegos-estrategia-cancion-hielo-fuego-juego-miniaturas-c-287_2905_7173.html"><img src="http://www.e-minis.net/images/correos/got-veteranswatch-large.jpg" width="798" height="416" border="0" alt="Canción de hielo y fuego" title="Canción de hielo y fuego"></a> </div> </div> </div> </div> <div class="dropdown"> <button class="dropbtn">2019 <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <div class="row"> <div class="column"> <a href="http://www.e-minis.net/juegos-estrategia-cancion-hielo-fuego-juego-miniaturas-c-287_2905_7173.html"><img src="http://www.e-minis.net/images/correos/got-veteranswatch-large.jpg" width="798" height="416" border="0" alt="Canción de hielo y fuego" title="Canción de hielo y fuego"></a> </div> </div> </div> </div> </div> </td></tr> </table></td> </body> </html>