Fórum Alinhamento de Informacoes dentro da Pagina e Menu de Opcoes #2690
10/02/2009
Bom Dia
Meu nome e Sidnei e eu estou desenvolvendo o meu primeiro projeto em ASP.NET.Logicamente encontrei e continuo encontrando varias dificuldades, uma vez que vendo do VB6 e pouco programei no ASP tradicional.
Um dos meus problemas esta em como alinhar as informacoes na tela.Eu criei uma MasterPage e nessa pagina criei uma tabela com Cabecalho, Lado e a coluna do meu.Na area referente ao Lado (Side) eu coloquei o "ContentPlaceHolder", referente a area em que eu irei colocar os varios objetos das diferentes paginas.
Nas minhas paginas eu estou criando tabelas, onde tento alinhar as informacoes e isso esta sendo um pesadelo, pois nada fica alinhado com nada.
Me disseram para usar o "DIV" e o "CSS", para resolver esse assunto. O "DIV", eu ate usei para alinhar alguns campos em posicoes especificas, porem so isso nao foi suficiente.
Tambem nao obtive sucesso com o menu.Criei o arquivo Web.sitemap, com as opcoes do Meu e depois os acessei atraves do TreeView, utilizando o SiteMap, porem as opcoes de Menu ali existentes sao muito fracas.
Enfim, gostaria de saber como resolver essa questao do Menu e do alinhamento dos dados dentro da pagina.
Muito Obrigado
Sidnei
Posts
10/02/2009
[devmedia .net]
Opa beleza Sidnei ?
Olha vejo que sua dificuldade é em HTML e não .Net,
mas vamos tentar lhe ajudar ok !?
Trabalhar com DIV´s é um pouco mais complicado,
lhe aconselho a trabalhar com tabelas e depois migrar para DIV´s se assim achar necessário.
Sobre seu alinhamento de tabela, não consegui entender ao certo,
sei que está com dificuldades no alinhamento,
eu preciso do seu html ou imagem do html para que eu possa avaliar seu problema,
poderia me enviar o código da MasterPage e da página que está sendo criada.
Outra coisa, o ContentPlaceHolder é o local onde vai aparecer a página que estiver chamando.
O próprio Visual Studio cria as tabelas para você,
acesse o menu Tables e ele vai desenhar o site inteiro para você,
depois é só arrastar o ContentPlaceHolder para onde quiser.
Não entendi seu problema com o Menu,
conseguiu colocar pra funcionar e falou que era fraco,
não entendi o que quis dizer...
No aguardo..
Abraços
Carlos Jr
Ola Carlos, obrigado por sua ajuda.
Na verdade eu estou com problemas em HTML e em ASP.NET tambem, uma vez que e o meu primeiro projeto.
Meu lay out ainda esta uma porcaria por enquanto mas na verdade eu ainda nao dei muita importancia para o design, pois tive problemas mais importantes para resolver, entretanto chegou a hora de cuidar desse assunto.
Eu ia lhe mandar todo o codigo mas a opcao de UPload embora esteja disponivel, nao permite esse tipo de envio.
Eu acho que so postar o codigo nao e o suficiente, eu gostaria que voce visse como esta realmente.
Estou enviando um PrintScreen de uma tela:
Na tela 01, o gridview esta muito abaixo de onde deveria ficar e eu nao consigo fazer com que apareca mais acima.Provavelmente se eu usar o DIV conseguirei isso.
Observe o Menu ao lado, foi isso que eu quis dizer com um Menu fraquinho.As opcoes do menu vem do arquivo Web.sitemap e eu gostaria de algo mais sofisticado.
Eu tambem nao estou conseguindo subir o menu que esta muito embaixo.
Como faco para lhe enviar o codigo?
Obrigado
Sidnei
10/02/2009
[devmedia .net]
Opa, blz ?
Sua imagem não veio..
Bom eu sugiro a você fazer um video e me enviar o que está precisando,
sem ver o código fica complicado..
Seu problema nesse caso é HTML, usar DIV ou Tabela vai resolver do mesmo jeito,
qualquer um vai te dar o resultado que deseja.
Como eu disse, é melhor me enviar os HTML´s da master page e a página que deseja exibir.
Ou fazer o vídeo que eu acho uma ótimo opção, pois assim pode me mostrar seu problema e o código,
além de poder explicar.
Se tiver dificuldades em enviar vídeos veja o link que ensina a fazê-los no início da página da consultoria,
quanto a enviar arquivos se tiver dificuldades envie um email para : daniella@devmedia.com.br
Você seguiu o que te falei na mensagem anterior ??
Criou as tabelas pelo menu do Visual Studio ??
No Aguardo
Carlos Jr
Bom Dia Carlos
Aqui esta a imagem que tentei enviar ontem, vou ver se consigo enviar tambem o codigo.
Um Abraco
Sidnei
11/02/2009
[devmedia .net]
Olá Sidnei, tudo tranquilo ?
Sem ver o código HTML fica complicado te ajudar..
mas vou dar uma dica:
utiliza a propriedade "v-align" da tabela e alinhe para "top".
Isso fará com que o conteúdo da celula (coluna) seja posicionado acima...
Isso pode resolver seu problema,
lembrando que você deve colcoar isso em todas as colunas da tabela para que alinhe o conteudo.
Aguardo o HTML da Master Page e da página ListaProjetosColab.aspx
Abaços
Carlos Jr
Ola novamente Carlos
Eu enviei um email para a Daniella e estou aguardando a resposta sobre como enviar o codigo fonte.
Por enquanto enviarei por aqui mesmo.
Codigo da MasterPage :
<%@ Master Language="VB" CodeFile="MasterPages.master.vb" Inherits="MasterPages" %>
<!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 runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 100%">
<tr>
<td colspan="2" style="height: 200px">
<table>
<tr>
<td style="width: 100px; height: 54px">
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/Logotipo_NEWCAD.jpg" /></td>
<td style="width: 100px; height: 54px">
</td>
<td style="width: 341px; height: 54px">
</td>
</tr>
<tr>
<td style="width: 100px">
</td>
<td style="width: 100px">
</td>
<td style="width: 341px">
<span style="font-size: 14pt">GPRO - Gestor de Projetos</span></td>
</tr>
</table>
<table>
<tr>
<td style="width: 188px">
Ola,
<asp:LoginName ID="LoginName1" runat="server" />
</td>
<td style="width: 100px">
</td>
<td style="width: 253px">
Status,
<asp:LoginStatus ID="LoginStatus1" runat="server" Width="77px" LogoutPageUrl="~/Login.aspx" />
</td>
<td style="width: 100px">
</td>
</tr>
</table>
<br />
<table>
<tr>
<td style="width: 100px">
</td>
<td style="width: 117px">
</td>
<td style="width: 100px">
</td>
</tr>
<tr>
<td style="width: 100px">
</td>
<td style="width: 117px">
</td>
<td style="width: 100px">
</td>
</tr>
<tr>
<td style="width: 100px">
<asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" ImageSet="Arrows"
LineImagesFolder="~/TreeLineImages">
<ParentNodeStyle Font-Bold="False" />
<HoverNodeStyle Font-Underline="True" ForeColor="#5555DD" />
<SelectedNodeStyle Font-Bold="True" Font-Underline="True" ForeColor="#5555DD" HorizontalPadding="0px"
VerticalPadding="0px" />
<NodeStyle Font-Names="Tahoma" Font-Size="10pt" ForeColor="Black" HorizontalPadding="5px"
NodeSpacing="0px" VerticalPadding="0px" />
</asp:TreeView>
</td>
<td style="width: 117px">
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
<strong>
</strong>
</asp:contentplaceholder>
</td>
<td style="width: 100px">
</td>
</tr>
</table>
<br />
<table>
<tr>
<td style="width: 238px">
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</td>
<td style="width: 358px">
Copyright © Datavision 2009</td>
<td style="width: 100px">
</td>
</tr>
<tr>
<td style="width: 238px">
</td>
<td style="width: 358px">
</td>
<td style="width: 100px">
</td>
</tr>
</table>
<br />
<br />
<span style="font-size: 14pt"></span>
</td>
</tr>
<tr>
<td style="width: 139px">
</td>
<td>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Codigo HTML ao arquivo : ListaProjetosColab.aspx
<%@ Page Language="VB" MasterPageFile="~/MasterPages.master" AutoEventWireup="false" CodeFile="ListaProjetosColab.aspx.vb" Inherits="ListaProjetosColab" title="Lista Projetos Por Colaborador" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<br >
Projetos Por Colaborador<br />
<script type="text/javascript">
</script>
<table>
<tr>
<td style="width: 100px">
</td>
<td style="width: 102px">
</td>
<td>
</td>
</tr>
<tr>
<td style="width: 100px; height: 346px;">
</td>
<td style="width: 102px; height: 346px;">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
CellPadding="4" DataSourceID="SqlDataSource1" ForeColor="#333333" AllowPaging="True" AllowSorting="True" Width="742px" DataKeyNames="USER_ID">
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#EFF3FB" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#2461BF" />
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:CommandField ButtonType="Image" SelectImageUrl="~/Images/seta.gif" ShowSelectButton="True" />
<asp:CommandField ShowSelectButton="True" />
<asp:BoundField DataField="USER_ID" HeaderText="USER_ID" InsertVisible="False" ReadOnly="True"
Visible="False" />
<asp:BoundField DataField="USER_NOME" HeaderText="Colaborador" SortExpression="USER_NOME" />
<asp:BoundField HeaderText="Horas" InsertVisible="False" Visible="False" />
</Columns>
</asp:GridView>
</td>
<td style="height: 346px">
</td>
</tr>
<tr>
<td style="width: 100px">
</td>
<td style="width: 102px">
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:timesheet %>"
SelectCommand="SELECT DISTINCT USERS.USER_ID, USERS.USER_NOME FROM USERS INNER JOIN REL_PROJETOS ON USERS.USER_ID = REL_PROJETOS.USER_ID ORDER BY USERS.USER_NOME">
</asp:SqlDataSource>
</td>
<td>
</td>
</tr>
<tr>
<td style="width: 100px">
</td>
<td style="width: 102px">
<asp:GridView ID="GridView2" runat="server" CellPadding="4" DataSourceID="SqlDataSource2"
ForeColor="#333333" AutoGenerateColumns="False" DataKeyNames="REL_ID" Width="803px" AllowPaging="True" AllowSorting="True">
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#999999" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Documentos" />
</ItemTemplate>
</asp:TemplateField>
<asp:HyperLinkField DataNavigateUrlFields="USER_ID" DataNavigateUrlFormatString="ProjetosColab.aspx?user_id="
DataTextField="USER_NOME" HeaderText="Colaborador" NavigateUrl="~/ProjetosColab.aspx" />
<asp:BoundField DataField="REL_ID" HeaderText="REL_ID" InsertVisible="False" SortExpression="REL_ID" Visible="False" />
<asp:BoundField DataField="USER_NOME" HeaderText="Colaborador" SortExpression="USER_NOME" Visible="False" />
<asp:BoundField HeaderText="Projeto" DataField="GESTOR_PROJETO" />
<asp:HyperLinkField DataNavigateUrlFields="REL_DOCUMENTO" DataNavigateUrlFormatString="Detalhes_T02.aspx?REL_DOCUMENTO="
DataTextField="REL_DOCUMENTO" HeaderText="Documento" NavigateUrl="~/DETALHES_T02.aspx" />
<asp:BoundField HeaderText="Ult.Modific." />
<asp:BoundField HeaderText="Formato" DataField="FORMATO_NOME" />
<asp:BoundField HeaderText="Horas Previstas" DataField="REL_HORASPREVISTAS" SortExpression="REL_HORASPREVISTAS" />
<asp:BoundField DataField="USER_ID" HeaderText="USER_ID" Visible="False" />
<asp:BoundField HeaderText="Gerente" DataField="RESPONSAVEL" SortExpression="RESPONSAVEL" />
<asp:BoundField HeaderText="Status" />
<asp:BoundField HeaderText="Prioridade" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:timesheet%>" SelectCommand="SELECT REL_PROJETOS.REL_ID, USERS.USER_NOME, REL_PROJETOS.REL_DOCUMENTO, REL_PROJETOS.USER_ID, REL_PROJETOS.REL_HORASCONSUMIDAS, PROJETOS.GESTOR_ID, FORMATOS.FORMATO_NOME, GESTOR.GESTOR_PROJETO, GESTOR.GESTOR_ID AS Expr1, REL_PROJETOS.FORMATO_ID, PROJETOS.PROJE_ID, REL_PROJETOS.REL_HORASPREVISTAS, PROJETOS.GERENTE_ID, USERS_1.USER_NOME AS RESPONSAVEL FROM REL_PROJETOS INNER JOIN PROJETOS ON REL_PROJETOS.PROJE_ID = PROJETOS.PROJE_ID INNER JOIN GESTOR ON PROJETOS.GESTOR_ID = GESTOR.GESTOR_ID INNER JOIN FORMATOS ON REL_PROJETOS.FORMATO_ID = FORMATOS.FORMATO_ID INNER JOIN USERS ON REL_PROJETOS.USER_ID = USERS.USER_ID INNER JOIN USERS AS USERS_1 ON PROJETOS.GERENTE_ID = USERS_1.USER_ID WHERE (REL_PROJETOS.USER_ID = @USER_ID)">
<SelectParameters>
<asp:ControlParameter ControlID="GridView1" Name="USER_ID" PropertyName="SelectedValue" />
</SelectParameters>
</asp:SqlDataSource>
</td>
<td>
</td>
</tr>
<tr>
<td style="width: 100px">
</td>
<td style="width: 102px">
<asp:Button ID="Button1" runat="server" Text="Detalhes" /></td>
<td>
</td>
</tr>
</table>
<br />
</asp:Content>
Ola novamente Carlos
Eu utilizei a propriedade Vallin da tabela para o Menu e para o GridView que aparecem na imagem e eles subiram um pouco.Mas o que eu quero mesmo e poder colocar qualquer informacao onde eu bem desejar.
Acho que o "DIV" deve me ajudar nisso.
Quanto ao menu, embora eu possa colocar uma cor nele, ainda vai ficar muito fraco, sem efeito interessante.
Para o Menu, estou utilizando o SiteMaph e o TreeView.
Design nao e o meu forte, logo eu irei copiar meu lay out final de algum lugar.Por acaso voce conhece algum site con lays outs para ASP.NET e de preferencias gratuitos?
Como disse esse e o meu primeiro projeto em ASP.NET e talvez por falta de conhecimento, eu esteja dizendo isso mas eu nao me sinto a vontade para desenvolver um lay out sofisticado nele.Voce sabe se existem outras ferramentas, simples e claro e tirando o Flash (Que e excelente mas eu acho complicado) pra desenvolver o design e interliga-lo ao Visual Studio.
No futuro eu pretendo estudar o Microsoft Blend e usar o SilverLight, pois ja esta na hora de me preocupar tambem com o Design, alem da programacao.
Um Abraco
11/02/2009
[devmedia .net]
Sidnei, é isso mesmo que te falei...
Vá no mode de Designer, clique na coluna que está o contentplaceholder na Master Page,
vá em propriedades e coloque na propriedade VAlign o valor top,
para todas as colunas, e veja que na coluna onde tem o contentplaceholder, você tem um espaço em branco,
isso impossibilita qualquer objeto a ficar na mesma linha..
Fiz as alterações segue abaixo o código da MasterPage, foi necessário alterar somente ela...
Estou enviando apenas o conteúdo do Body, portanto substitua apenas ele...
<body>
<form id="form1" runat="server">
<div>
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 100%">
<tr>
<td colspan="2" style="height: 200px">
<table>
<tr>
<td style="width: 100px; height: 54px">
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/Logotipo_NEWCAD.jpg" /></td>
<td style="width: 100px; height: 54px">
</td>
<td style="width: 341px; height: 54px">
</td>
</tr>
<tr>
<td style="width: 100px">
</td>
<td style="width: 100px">
</td>
<td style="width: 341px">
<span style="font-size: 14pt">GPRO - Gestor de Projetos</span></td>
</tr>
</table>
<br />
<table>
<tr>
<td style="width: 100px">
Ola, <asp:LoginName ID="LoginName1" runat="server" />
</td>
<td style="width: 117px">
</td>
<td style="width: 146px">
Status,
<asp:LoginStatus ID="LoginStatus1" runat="server" Width="77px" LogoutPageUrl="~/Login.aspx" />
</td>
</tr>
<tr>
<td style="width: 100px">
</td>
<td style="width: 117px">
</td>
<td style="width: 146px">
</td>
</tr>
<tr>
<td style="width: 100px" valign="top">
<asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" ImageSet="Arrows"
LineImagesFolder="~/TreeLineImages">
<ParentNodeStyle Font-Bold="False" />
<HoverNodeStyle Font-Underline="True" ForeColor="#5555DD" />
<SelectedNodeStyle Font-Bold="True" Font-Underline="True" ForeColor="#5555DD" HorizontalPadding="0px"
VerticalPadding="0px" />
<NodeStyle Font-Names="Tahoma" Font-Size="10pt" ForeColor="Black" HorizontalPadding="5px"
NodeSpacing="0px" VerticalPadding="0px" />
</asp:TreeView>
</td>
<td style="width: 117px" valign="top">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
<strong>
</strong>
</asp:ContentPlaceHolder>
</td>
<td style="width: 146px">
</td>
</tr>
</table>
<br />
<table>
<tr>
<td style="width: 238px">
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</td>
<td style="width: 358px">
Copyright © Datavision 2009</td>
<td style="width: 100px">
</td>
</tr>
<tr>
<td style="width: 238px">
</td>
<td style="width: 358px">
</td>
<td style="width: 100px">
</td>
</tr>
</table>
<br />
<br />
<span style="font-size: 14pt"></span>
</td>
</tr>
<tr>
<td style="width: 139px">
</td>
<td>
</td>
</tr>
</table>
</div>
</form>
</body>
No aguardo do retorno,
Abraços
Carlos Jr
Ola Carlos obrigado por sua ajuda.
Melhorou com relacao ao anterior.Na tela que eu mandei, voce pode ver a expressao Projetos Por Colaborador, cujo texto aparece em 2 linhas.
Um problema de alinhamento que eu tenho e esse, eu coloco o texto dentro de uma tabela e conforme vou excrevendo a largura da tabela vai aumentando,dando a impressao de que ela esta se ajustando ao tamanho do texto.No modo Design esse texto aparece em uma unica linha mas na execucao da pagina, como voce pode ver, o texto aparece em 2 linhas.
Esse problema de alinhamento, eu so resolvo com o DIV?
Obrigado
11/02/2009
[devmedia .net]
Oi Sidinei,
como eu disse outras vezes,
DIV e tabela são as mesmas coisas,
a única diferença é que DIV trabalha com posicionamento absoluto,
você dita onde ela quer ficar....
Olha, seu problema é HTML não .Net...
Sobre a tabela aumentar ou diminuir de acordo com o digita,
você tem que mecher no rowspan ou colspan que gerencia isso,
ele junta o número de colunas que você desejar.
Você deve definir bem as linhas e colunas da tabela,
para que não aconteça o rediment
O menu do .net é muito bom, não sei o que deseja fazer com ele que está chamando de menu pobre,
claro que ele não tem muitos recurso, mas atende em muitas coisas.
Essa video aula ensina a mexer no menu,
https://www.devmedia.com.br/articles/viewcomp.asp?comp=8668
caso não tenha acesso à video aula, me avise que lhe concedo o acesso GRATUITAMENTE.
Links de templates free
http://www.freecsstemplates.org/
http://www.free-css-templates.com/
http://www.free-css.com/
No aguardo do seu retorno.
Carlos Jr
Ola Carlos
Eu disse que acho que esse Menu e fraco devido a aparencia dele e tambem por nao ter conseguido uma boa aparencia de imediato.Claro que isso tambem esta ligado a minha falta de experiencia no assunto.
Vou dar mais uma olhada e entao retornarei para encerrar esse Post.
Obrigado e um Abraco
Sidnei
11/02/2009
[devmedia .net]
Claro, aguardo seu retorno...
Volto a dizer sobre a video aula
Essa video aula ensina a mexer no menu,
https://www.devmedia.com.br/articles/viewcomp.asp?comp=8668
caso não tenha acesso à video aula, me avise que lhe concedo o acesso GRATUITAMENTE.
Aguardo seu retorno,
Abraços
Carlos Jr
Ok, obrigado, eu ja dei uma olhada no video.
Um Abraco
Sidnei
12/02/2009
[devmedia .net]
Opa como vai Sidnei ?
Estou aguardando seu retorno para darmos continuidade ao atendimento ou encerrarmos o chamado.
Abraços
Carlos Jr