No hay mucho mas que explicar, aparte de esto;
Código
/*Essentials */ * { font-family: arial, verdana, sans-serif; font-size: 102.5%; } a, a:visited, a:link, a:hover, a:active { text-decoration: none; color: #000000; } /* Globales */ div#global_container { position: absolute; top:24%; bottom: 0%; } td.menug { vertical-align: top; } button.menu_btn { color: #FF0000; } /*Menu principal de opciones */ div#menu_container { background-color:#FF0000; height:100%; text-align: top; max-height:100%; } /* Menu global de acciones */ div#globalFirstScreen { background-color:#0000FF; position: absolute; left: 150%; top: 0%; height:100%; width:500%; text-align: top; max-height:100%; } table.globalFirstScreen { background-color:#50FFFF; position: absolute; top: 0%; height:100%; text-align: top; } table.globalFirstScreen2 { background-color:#50FFFF; position: absolute; height:100%; left: 21%; top: 0%; text-align: top; } table.globalFirstScreen3 { background-color:#50FFFF; position: absolute; left: 42%; top: 0%; height:100%; text-align: top; } table.globalFirstScreen4 { background-color:#50FFFF; position: absolute; left: 63%; top: 0%; height:100%; text-align: top; } /* Menu secundario derecho */ div#globalMenuDerecha { background-color:#0000FF; position: absolute; top: 0%; left: 690%; height:100%; width:100%; text-align: top; }
Código
<html> <head> <link rel='stylesheet' type='text/css' href='css/index.css' /> <title>CATH proyect</title> </head> <body> <div id='global_container'> <div id='menu_container'> <table class='menu_container'> <td class='menug'><button class='menu_btn'>Inicio</button></td><tr> <td class='menug'><button class='menu_btn'>Comprar</button></td><tr> <td class='menug'><button class='menu_btn'>Empresas</button></td><tr> <td class='menug'><button class='menu_btn'>Informacion</button></td><tr> <td class='menug'><button class='menu_btn'>Estadisticas</button></td><tr> </table> </div> <div id='globalFirstScreen'> <table class='globalFirstScreen'> <td class='menug'><button class='menu_btn'>Inicio</button></td><tr> <td class='menug'><button class='menu_btn'>Comprar</button></td><tr> <td class='menug'><button class='menu_btn'>Empresas</button></td><tr> <td class='menug'><button class='menu_btn'>Informacion</button></td><tr> <td class='menug'><button class='menu_btn'>Estadisticas</button></td><tr> </table> <table class='globalFirstScreen2'> <td class='menug'><button class='menu_btn'>Inicio</button></td><tr> <td class='menug'><button class='menu_btn'>Comprar</button></td><tr> <td class='menug'><button class='menu_btn'>Empresas</button></td><tr> <td class='menug'><button class='menu_btn'>Informacion</button></td><tr> <td class='menug'><button class='menu_btn'>Estadisticas</button></td><tr> </table> <table class='globalFirstScreen3'> <td class='menug'><button class='menu_btn'>Inicio</button></td><tr> <td class='menug'><button class='menu_btn'>Comprar</button></td><tr> <td class='menug'><button class='menu_btn'>Empresas</button></td><tr> <td class='menug'><button class='menu_btn'>Informacion</button></td><tr> <td class='menug'><button class='menu_btn'>Estadisticas</button></td><tr> </table> <table class='globalFirstScreen4'> <td class='menug'><button class='menu_btn'>Inicio</button></td><tr> <td class='menug'><button class='menu_btn'>Comprar</button></td><tr> <td class='menug'><button class='menu_btn'>Empresas</button></td><tr> <td class='menug'><button class='menu_btn'>Informacion</button></td><tr> <td class='menug'><button class='menu_btn'>Estadisticas</button></td><tr> </table> </div> <div id='globalMenuDerecha'> <table class='globalMenuDerecha'> <td class='menug'><button class='menu_btn'>Inicio</button></td><tr> <td class='menug'><button class='menu_btn'>Comprar</button></td><tr> <td class='menug'><button class='menu_btn'>Empresas</button></td><tr> <td class='menug'><button class='menu_btn'>Informacion</button></td><tr> <td class='menug'><button class='menu_btn'>Estadisticas</button></td><tr> </table> </div> </div> </body> </html>