Remove From My Forums

MVC com layout Responsivo

Discussão Geral

Entrar para Votar

Bom dia pessoal, estou com a seguinte duvida eu sei que tem como colocar uma aplicação pronta feita em aspx MVC com layout responsivo, porem eu não gostaria de perder o que já foi feito, e a minha duvida maior é se os gridViews conseguem se adaptar a esse tipo de layout. Pensei em utilizar o Fluido mas no meu caso ele não vai resolver o problema.

Bem vou postar css e html da MasterPage para aquele que já tem experiencia nesse assunto possam me ajudar.

<%@ Master Language="C#" AutoEventWireup="true" ClientIDMode="Static" CodeBehind="Master.Master.cs" Inherits="web_projeto.Master" %>

<%@ Register assembly="Microsoft.ReportViewer.WebForms, Version=11.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" namespace="Microsoft.Reporting.WebForms" tagprefix="rsweb" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Demostração para Forum</title>
    <link href="css/style.css" rel="stylesheet" />
    <link href=" images/icone.ico"  rel="icon" type="image/x-icon" title="favicon" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
   
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script type="text/javascript">
          

       $(document).ready(function () {
           $('li.D0').click(function () {
               $(this).parent().find('ul#1').slideToggle("slow");
           });
       });

        $(document).ready(function () {
            $('li.D1').click(function () {
                $(this).parent().find('ul#2').slideToggle("slow");
            });
        });
     
        $(document).ready(function () {
            $('li.D2').click(function () {
                $(this).parent().find('ul#3').slideToggle("slow");
            });
        });
        $(document).ready(function () {
            $('li.D3').click(function () {
                $(this).parent().find('ul#4').slideToggle("slow");
            });
        });
        $(document).ready(function () {
            $('li.D4').click(function () {
                $(this).parent().find('ul#5').slideToggle("slow");
            });
        });
        $(document).ready(function () {
            $('li.D6').click(function () {
                $(this).parent().find('ul#7').slideToggle("slow");
            });
        });
        $(document).ready(function () {
            $('li.D7').click(function () {
                $(this).parent().find('ul#8').slideToggle("slow");
            });
        });
        $(document).ready(function () {
            $('li.D8').click(function () {
                $(this).parent().find('ul#9').slideToggle("slow");
            });
        });
        $(document).ready(function () {
            $('li.D9').click(function () {
                $(this).parent().find('ul#10').slideToggle("slow");
            });
        });
        $(document).ready(function () {
            $('li.D5').click(function () {
                $(this).parent().find('ul#6').slideToggle("slow");
            });
        });
        $(document).ready(function () {
            $('li.D10').click(function () {
                $(this).parent().find('ul#11').slideToggle("slow");
            });
        });

        $(document).ready(function () {
            $('li.D11').click(function () {
                $(this).parent().find('ul#12').slideToggle("slow");
            });
        });

        $(document).ready(function () {
            $('li.D12').click(function () {
                $(this).parent().find('ul#13').slideToggle("slow");
            });
        });

        $(document).ready(function () {
            $('li.D13').click(function () {
                $(this).parent().find('ul#14').slideToggle("slow");
            });
        });

        $(document).ready(function () {
            $('li.D14').click(function () {
                $(this).parent().find('ul#15').slideToggle("slow");
            });
        });

        $(document).ready(function () {
            $('li.D15').click(function () {
                $(this).parent().find('ul#16').slideToggle("slow");
            });
        });

        
    </script>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="frmMaster" runat="server">

        <div id="main">
            <div class="header">
                <div class="perfil">
                <asp:Image ID="ImagePerf" runat="server" />
                <asp:Label ID="LabelNome" runat="server" Text="Label"></asp:Label>
                </div>
                <div class ="fundo_logo">
                    <a href="Inicial.aspx" title="School System"></a>
                   <%-- <img src="images/logo_.jpg" alt="School System" /></a>--%>
                </div>
                     <asp:ImageButton ID="ImageButton3"  runat="server" ImageUrl="~/images/icon/logout-icon.png" title="Sair"  PostBackUrl="Default.aspx" />
                    <asp:ImageButton ID="ImageButton1"  runat="server" ImageUrl="~/images/icon/arrow-left-icon.png" title="Voltar" OnClientClick="JavaScript: window.history.back(1); return false;" />
                    <asp:ImageButton ID="ImageButton2"  runat="server" ImageUrl="~/images/icon/arrow-right-icon.png" title="Avançar" OnClientClick="JavaScript: window.history.forward(); return false;" />
             
                
             
               </div> 
            <!-- /header -->
            <div class="navSide radius">
                <ul>
                    <li><a href="Inicial.aspx" title="Ir para paginal Inicial">Inicial</a></li>
                    <li class="D0">Primeira Pagina
                        <ul class="itens" id="1">
                            <li><a href="Primeira.aspx" title="">Cadastro</a></li>
                            <li><a href="PrimeiraB.aspx" title="">Editar</a></li>
                            <li><a href="PrimeiraB.aspx" title="Contas a Pagar">Excluir</a></li>
                            <li><a href="Primeira_Pagina.aspx" title="Qualquer">Identificadores</a></li>
                        </ul>
                    </li>
                    <li class="D15">Segunda Pagina 
                        <ul class="itens" id="16">
                            <li><a href="Segunda.aspx" title="Qualquer">Cadastro</a></li>
                           
                        </ul>
                    </li>

                    <li class="D1">Terceira Pagina
                        <ul class="itens" id="2">
                            <li><a href="Terceira.aspx" title="">Cadastro</a></li>
                            <li><a href="Terceira.aspx" title="">Editar</a></li>
                            <li><a href="Terceira.aspx" title="">Excluir</a></li>
                        </ul>
                    </li>
                     <li class="D2">Quarta Pagina
                        <ul class="itens" id="3">
                            <li><a href="Quarta.aspx" title="">Qualquer(s)</a></li>
                            <li><a href="#" title="">Qualquer1</a></li>
                            <li><a href="#" title="">Qualquer2</a></li>
                        </ul>
                    </li>
                    <li class="D3">Quinta Pagina
                        <ul class="itens" id="4">
                            <li><a href="Quinta.aspx" title="">Cadastrar</a></li>
                            <li><a href="Quinta.aspx" title="">Editar</a></li>
                            <li><a href="Quinta.aspx" title="">Excluir</a></li>
                        </ul>
                    </li>
                    <li class="D4">Sexta Pagina
                        <ul class="itens" id="5">
                            <li><a href="SextaB.aspx" title="">Cadastrar</a></li>
                            <li><a href="SextaB.aspx" title="">Editar</a></li>
                            <li><a href="SextaB.aspx" title="">Excluir</a></li>
                        </ul>
                    </li>
                    <li class="D5">Setima Pagina
                        <ul class="itens" id="6">
                            <li><a href="Setima.aspx" title="">Cadastrar</a></li>
                            <li><a href="Setima.aspx" title="">Editar</a></li>
                            <li><a href="Setima.aspx" title="">Excluir</a></li>
                        </ul>
                    </li>
                    <li id="D6">Oitava 
                        <ul class="itens" id="7">
                            <li><a href="Oitava.aspx" title="">Consultar</a></li>
                           
                        </ul>
                    </li>
                    <li class="D8">Nona
                        <ul class="itens" id="9">
                            <li><a href="Nona.aspx" title="">Cadastrar</a></li>
                            <li><a href="Nona.aspx" title="">Alterar</a></li>
                            <li><a href="Nona.aspx" title="">Excluir</a></li>
                        </ul>
                    </li>
                     <li class="D9">Decima
                        <ul class="itens" id="10">
                            <li><a href="Decima.aspx" title="">Cadastrar</a></li>
                            <li><a href="DecimaB.aspx" title="">Alterar</a></li>
                            <li><a href="DecimaB.aspx" title="">Excluir</a></li>
                        </ul>
                    </li>
                     <li class="D10">Decima primeira
                        <ul class="itens" id="11">
                            <li><a href="Decima_primeira.aspx" title="">Cadastrar</a></li>
                            <li><a href="Decima_primeira.aspx" title="">Alterar</a></li>
                            <li><a href="Decima_primeira.aspx" title="">Excluir</a></li>
                        </ul>
                    </li>
                    <li class="D11">Decima segunda
                        <ul class="itens" id="12">
                            <li><a href="Decima_segunda.aspx" title="">Cadastrar</a></li>
                            <li><a href="Decima_segundaB.aspx" title="">Alterar</a></li>
                            <li><a href="Decima_segundaB.aspx" title="">Excluir</a></li>
                        </ul>
                    </li>
                     <li class="D12">Decima terceira
                        <ul class="itens" id="13">
                            <li><a href="Decima_terceira.aspx" title="">Log</a></li>
                            <li><a href="Decima_terceira.aspx" title="">Registrar</a></li>
                            <li><a href="Decima_terceiraB.aspx" title="">Informações</a></li>
                        </ul>
                    </li>
                     <li class="D13">Decima Quarta
                        <ul class="itens" id="14">
                            <li><a href="Decima_Quarta.aspx" title="">Cadastrar</a></li>
                            <li><a href="Decima_QuartaB.aspx" title="">Alterar</a></li>
                            <li><a href="Decima_QuartaB.aspx" title="">Excluir</a></li>
                        </ul>
                    </li>
                    <li class="D14">Decima Quinta
                        <ul class="itens" id="15">
                            <li><a href="Decima_quinta.aspx" title="">Cadastrar</a></li>
                            <li><a href="Decima_quintaB.aspx" title="">Alterar</a></li>
                            <li><a href="Decima_quintaB.aspx" title="">Excluir</a></li>
                        </ul>
                    </li>

                </ul>
            </div>
            <!-- /navSide -->
            <div id="content" class="radius">
                <asp:ContentPlaceHolder ID="cphContent" runat="server">
                </asp:ContentPlaceHolder>
            </div>
            <!-- /Content -->
            <div class="footer">
            </div>
            <!-- /footer -->
        </div>
        <!-- /Main -->
    </form>
</body>
</html>

Css

* {
    border-style: none;
    border-color: inherit;
    border-width: medium;
    padding: 0;
    outline: none;
    float: none;
    background: none;
    margin-left: 0px;
    margin-right: 0;
    }

body {
    background: #F5F5F5;
    font: 12px Arial, Tahoma, Verdana;
    color: #000;
}

#main {
    margin: 0 auto;
    width: 988px;
}

/*begin header*/
.header {
    width: 988px;
    height: 150px;
     background-color:#ffffff;
    border: 3px solid #5d7b9d;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    margin-bottom:5px;
   
}

   

.fundo_logo {
  

    background-image: url(../images/logo_cronofit.jpg);
    background-size: cover;
    width:400px;
    min-height:120px; 
    margin: 0 auto;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='../images/logo_cronofit.jpg',sizingMethod='scale');
   
}

    .header img {
        float: left;
        margin: 0px;
       
       
    }
/*end header*/
/*begin radius*/
.radius {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #ECECFB;
}

.radiusInput {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    background: #FBFBFB;
    border: 1px solid #dedede;
}

/*end radius*/
/*begin sidebar*/
.navSide {
    width: 150px;
    min-height: 300px;
    float: left;
    padding:15px 0;
    background-color:#5d7b9d;
}

.navSide ul {
    list-style:none;
}
.navSide ul li{
    display:block;
    margin:0 20px;
    padding:5px;
    color:#FFF;

}
.navSide ul li a{
    display:block;
    padding:0;
    color:#ffffff;
    text-decoration:none;
}
.navSide ul li a:hover{
    color:#000;
}

.navSide ul li ul.itens{
    list-style:circle;
}

.navSide ul li ul.itens li a{
    display:block;
    padding:0;
    color:#FFF;
    text-decoration:none;
}
.navSide ul li ul.itens li a:hover{
    color:#000;

}


/*end sidebar*/
/*begin content*/
#content {
    width: 820px;
    float: right;
    margin-bottom: 100px;
    min-height: 300px;
    border: 2px solid #5d7b9d;
}

    #content div {
        margin: 10px 10px 10px 11px;
        float: left;
       
        padding: 10px 0;
    }

         #content div h1 {
            margin: 8px 10px 8px 22px;
            font: 20px Arial, Verdana;
            width: 178px;
            height: 36px;
}

       

            #content div table thead {
                background: #729DDE;
                text-align: center;
                color: #F5F5F5;
             
                font-weight: 800;
            }

                #content div table thead tr th,
                table tbody tr td {
                    border: 1px solid #E6E6E6;
                    padding: 8px 0;
                }

            #content div table tbody tr td {
                padding-left: 8px;
            }


            #content div table tbody .odd {
                background: #C8D9F2;
            }

    #content ul {
        list-style: none;
    }

        #content ul li {
            display: inline-block;
            margin: 10px 5px 10px 45px;
            width: 355px;
            height: 52px;
}

            #content ul li span {
                display: block;
                margin-bottom: 5px;
                font: 20px;
                font-family:'Trebuchet MS';
               
            }

            #content ul li input[type="text"] {
                padding: 8px;
                margin: 0 3px 0 0px;
                color: #666;
            }


fieldset {

    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    width: 370px;
    background: #FBFBFB;
    border: 1px solid #dedede;
    margin: 20px 20px 10px 20px;
    font: 13px Arial,Verdana,Tahoma;
    font-weight: 800;
    color: #000;
    padding-left: 10px;
}

#rlbTypeSearch {
    float: left;
    margin: 10px;
}

fieldset #rlbTypeSearch li {
    float: left;
    width: 85px;
    margin: 10px;
}

    fieldset #rlbTypeSearch li input[type="radio"] {
        margin-right: 10px;
    }


.disable {
    font-weight: 800;
    background: #fff;
    cursor:no-drop;
}
/*end content*/
/*begin buttons*/
.btn {
    width: 210px;
    height: 50px;
    line-height: 50px;
    border: 1px solid #ddd;
    color: #000;
    cursor: pointer;
    font-weight: 800;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.btnAdd {
    background: #F5F5F5 url(../images/save.png) no-repeat left 2px;
}

.btnEdit {
    background: #F5F5F5 url(../images/file_edit.png) no-repeat left;
}

.btnSearch {
    background: #F5F5F5 url(../images/search.png) no-repeat left 1px;
}

#Label2 {
margin-left:21px;
float:left;

}

#Label1{
margin-left:30px;
float:left;
margin-top:2px;

}


li.D0,li.D1,li.D2,li.D3,li.D4,li.D14,
li.D5,li.D6,li.D7,li.D8,li.D9,
li.D10,li.D11,li.D12,li.D13,li.D15{ cursor: pointer; }
.itens{ display: none; }


#Visitante {
   cursor: pointer; 
}
/*end buttons*/


#LinkSair {
    margin-left:200px;
    margin-top:150px;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size:15px;
    float:left;
    color:#808080;
    z-index:1000;
}

#ImageButton1 {

   float:left;
   margin-left:100px;
   margin-top:-70px;
}

#ImageButton2 {

   float:left;
   margin-left:170px;
   margin-top:-70px;
}

#ImageButton3 {

   float:left;
   margin-left:40px;
   margin-top:-70px;
}

.perfil {
    float:right;
    margin-top:40px;
    margin-right:60px;

}

#ImagePerf {
     border: 1px solid #ddd;
    -webkit-border-radius:50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    cursor: pointer;
    width:50px;
    height:50px;
}
#LabelNome {
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size:11px;
    margin-top:20px;
    color:#666;
    float:right;
    margin-left:15px;
    max-width:120px;

}

Desde já Agradeço

quinta-feira, 16 de junho de 2016 12:11

Todas as Respostas

0

Entrar para Votar

Bootstrap com MVC

Integrando o BootStrap com Asp.Net MVC e C#

Se a resposta contribuiu com seu aprendizado por favor marque como Útil
Se solucionou seu problema por favor marque como Resposta
Atenção, se seu problema foi resolvido não deixe o post aberto

Visite : www.codigoexpresso.com.br

quinta-feira, 28 de julho de 2016 05:06

Responder

|

Citação
0

Entrar para Votar

Conseguiu resolver ?

Se a resposta contribuiu com seu aprendizado por favor marque como Útil
Se solucionou seu problema por favor marque como Resposta
Atenção, se seu problema foi resolvido não deixe o post aberto

Visite : www.codigoexpresso.com.br

sexta-feira, 29 de julho de 2016 22:18

Responder

|

Citação
0

Entrar para Votar

Uma dúvida se vc está fazendo em mvc pq não utiliza o razor?? te ajuda a usar outros elementos e economizar tempo.

Da uma olhada no link que o Codigo Expresso deixou para ver se te ajuda.

Qualquer coisa só chamar

segunda-feira, 1 de agosto de 2016 13:18

Responder

|

Citação

Inquiridor

MVC com layout Responsivo

Discussão Geral

Todas as Respostas