En la practica tengo un template prefabricado por jsf y esto al igual generar sus hojas de estilos asi que ahi es donde vamos a modificar solo en este caso dare el puro codigo y la muestra
El codigo css es el siguiente:
#top {
top: 0px;
left: 0px;
height: 100px;
position: fixed;
background-color: #036fab;
width:100%;
z-index: 1000;
box-shadow: 0px 2px 2px rgba(0,0,0,0.7);
}
.center_content {
box-shadow: 0px 0px 2px black;
position: relative;
background-color: white;
margin-top: 110px;
padding: 5px;
}
#label1{
color: #036fab;
float: right;
top: 10px;
text-decoration: none;
vertical-align: bottom;
position: absolute;
right: 30px;
cursor: pointer;
}
#logo{
position: fixed;//estara en posicion estatica
background:#646469;
width:100%;
max-height: 200em;
height: 100px;
top: 0px;
left: 0px;
z-index: 1000;
}
h3{
color: silver;
z-index: 1000;
}
#ineeimage{
position: absolute;
left: 30px;
float: left;
top: -10px;
vertical-align: bottom;
display: block;
}
label1{
position: absolute;
left: 30px;
}
output{
font-family: monospace;
}
En el template original agrego esto:
<div id="top" class="top">
<h3>Sistema de Banco de Imagenes INEE</h3>
<h:form>
<p:megaMenu>
<p:menuitem value="Inicio" outcome="/home" icon="ui-icon-check"/>
<p:submenu label="Usuario" icon="ui-icon-gear">
<p:column>
<p:submenu label="CRUD">
<p:menuitem value="Registrar" outcome="/User/RegisterUser" icon="ui-icon-pencil"/>
<p:menuitem value="Ver y Editar" url="#" icon="ui-icon-document"/>
</p:submenu>
</p:column>
</p:submenu>
</p:megaMenu>
</h:form>
<ui:insert name="top">Top</ui:insert>
</div>
Y al final el formulario es el siguiente:
No hay comentarios:
Publicar un comentario