Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Cintia_Ribeiro

Divs com tamanhos diferentes

Por , em Desenvolvimento frontend

Recommended Posts

William Bruno    1501

William Bruno
Postado

siga as instrucoes do post #2

http://forum.imasters.com.br/topic/212439-como-criar-um-topico-para-o-seu-problema/page__view__findpost__p__1613498

Compartilhar este post

Link para o post
Compartilhar em outros sites

Cintia_Ribeiro    0

Cintia_Ribeiro
Postado

o html

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!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 id="Head1" runat="server">
   <title>Untitled Page</title>
   <asp:ContentPlaceHolder id="head" runat="server">
   </asp:ContentPlaceHolder>
</head>
<body>
   <form id="form1" runat="server">
   <div id="principal">
       <div id="topo">
           <div id = "logo"></div>
           <div id = "busca">
               <asp:TextBox runat="server" ID = "buca" ontextchanged="buca_TextChanged"></asp:TextBox>
               <asp:Button runat = "server" class ="btn" Text = "Busca" onclick="btn_Click" />
           </div><!--fim da div busca-->
       </div><!--fim div topo-->
       <div id = "menu">
           <ul>
               <li><a href = "Default.aspx">Home</a></li>
               <li><a href ="filmes.aspx">Filmes</a></li>
               <li><a href = "noticia.aspx">Noticias</a></li>
               <li><a href = "quemsomos.aspx">Quem Somos</a></li>

           </ul>
       </div>
       <div id ="conteudo">
                 <div id="esquerdo">
                  <div id ="login">
                   <asp:Label ID="Label1" class ="lblLogin" runat ="server">Login:</asp:Label><asp:TextBox ID="TextBox1" class="txtLogin" runat = "server"></asp:TextBox>
                   <asp:Label ID="Label2" class="lblSenha" runat ="server">Senha:</asp:Label><asp:TextBox ID="TextBox2" class="txtLogin" runat = "server"></asp:TextBox>
                   <asp:Button ID="Button1" class="btnLogar" runat ="server" Text="logar" />
                   <a href="#">Esqueceu sua Senha?</a>
                   <a href="cadastro.aspx">Cadastrar</a>
                  </div>
                  <div id ="noticia">
                   <p>noticia</p>
                  </div>
                  <div id ="categoria">
                   <ul>
                       <li><a href ="">Ação</a></li>
                       <li><a href ="">Aventura</a></li>
                       <li><a href ="">Comédia</a></li>
                       <li><a href ="">Documentário</a></li>
                       <li><a href ="">Drama</a></li>
                       <li><a href ="">Faroeste</a></li>
                       <li><a href ="">Infanti</a></li>
                       <li><a href ="">Musical</a></li>
                       <li><a href ="">Nacional</a></li>
                       <li><a href ="">Relogioso</a></li>
                       <li><a href ="">Romance</a></li>
                       <li><a href ="">Suspense</a></li>
                   </ul>
                  </div>
               </div>
       <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
           <div id ="direito">
                   <div id="lancamento">
                       <p>Lancamento</p>
                   </div>
                   <div id ="buscacategoria">
                       <p>Busca por categoria</p>
                   </div>
               </div> 
       </asp:ContentPlaceHolder>
       </div><!--fim div conteudo-->
       <div id = "rodape">Rodape</div>
   </div>
   </form>
</body>
</html>

 

CSS

 


#esquerdo
{    
    width:220px; 
    height:590px; 
    /*border:#FF0000 1px solid; */
    float:left; 
    margin: 4px 4px 4px 4px; 
    text-align:center;
}

#login
{     
   border-style: double; 
   width:210px;
   height:0 auto;
   text-align:left;
}
.lblLogin
{
   /*border:1px solid red;*/
   margin:4px 4px 4px 4px;
   font-size:14px;
   width:60px;


}
.lblSenha
{
  /* border:1px solid red;*/
   margin:4px 4px 4px 1px;
   font-size:14px;
   width:60px;


}
.txtLogin
{
   display:inline;
   margin-top:4px;
   margin-bottom:4px;
}
.btnLogar
{
   display:block;
   margin:0 auto;
   margin-top:4px;
   margin-bottom:6px;
   background-image: url(../../img/bg_menu.png);
color: White;
border: 2px solid #333333;
font-family: AntsyPants;
cursor:pointer;
}
a
{

   font-size:12px;
   color:#3F6F6F;
   margin-top:4px;
   text-decoration:none;
}
#noticia
{
   border-style: double; 
   width:210px;
   height:140px;
   text-align:left;
   margin-top:4px;
}
#categoria
{
   border-style: double; 
   width:210px;
   height:310px;
   text-align:left;
   margin-top:4px;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Teteu Six    4

Teteu Six
Postado

Cintia eu recomendo você usar reset CSS, isso me ajuda muito, e quando uso é raro os hack's para o maldito(IE), com essas diferenças entre os browsers

vou colocar um aqui que eu uso:

 

/************** START RESET CSS **************/

html, body, div, span, applet, object, iframe, table, caption,
tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
   border: medium none;
   color: #000000;
   font-family: Tahoma;
   font-weight: inherit;
   font-style: inherit;
   font-size: 12px;
   list-style-type: none;
   margin: 0;
   outline: 0;
   padding: 0;
   vertical-align: baseline;
}
:focus {
   outline: 0;
}
ol, ul {
   list-style: none;
}
table {
   border-collapse: separate;
   border-spacing: 0;
}
caption, th, td {
   font-weight: normal;
   text-align: left;
}
blockquote:before, blockquote:after, q:before, q:after {
   content: "";
}
blockquote, q {
  quotes: "" "";
}
* {
   border: medium none;
   font-family: Tahoma;
   font-weight: inherit;
   font-style: inherit;
   font-size: 12px;
   margin: 0;
   padding: 0;
   vertical-align: baseline;
}
a:link {
   border: medium none;
   text-decoration:none;
}
a:visited {
   border: medium none;
   text-decoration: none;
}
a:hover {
   border: medium none;
   text-decoration: underline;
}
a:active {
   border: medium none;
   text-decoration: none;
}
/************** END RESET CSS **************/

 

 

 

 

Espero ter ajudado :D

 

@teteusix

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito