Ir para conteúdo

POWERED BY:

Arquivado

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

Juliano.net

Criação de guias de navegação

Por , em Desenvolvimento frontend

Recommended Posts

Juliano.net    2

Juliano.net
Postado

Galera, tenho o seguinte código:

 

<div>			<div>				<div>OBSERVAÇÕES</div>				<div>EXPERIÊNCIA</div>				<div>AGITADOR</div>			</div>			<div>				<div id="PanelObservacoes">					<asp:TextBox ID="txtObservacoes" runat="server" TextMode="MultiLine" Rows="5" Columns="40"></asp:TextBox>				</div>				<div id="PanelExperiencia">					<asp:GridView ID="grdExperiencia" CssClass="Grid" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None">						<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />						<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />						<EditRowStyle BackColor="#999999" />						<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />						<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />						<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />						<AlternatingRowStyle BackColor="White" ForeColor="#284775" />					</asp:GridView>					<asp:Button ID="btnNovo" runat="server" Text="Novo" />					<asp:Button ID="btnSalvar" runat="server" Text="Salvar" />					<asp:Button ID="btnApagar" runat="server" Text="Apagar" />				</div>				<div id="PanelAgitador">					<table width="100%">						<tr>							<td>								 							</td>							<td>								Agitador 1							</td>							<td>								Agitador 2							</td>						</tr>						<tr>							<td>								Corrente							</td>							<td>								<asp:TextBox ID="txtCorrenteAgit1" runat="server"></asp:TextBox>							</td>							<td>								<asp:TextBox ID="txtCorrenteAgit2" runat="server"></asp:TextBox>							</td>						</tr>						<tr>							<td>								Frequência							</td>							<td>								<asp:TextBox ID="txtFrequenciaAgit1" runat="server"></asp:TextBox>							</td>							<td>								<asp:TextBox ID="txtFrequenciaAgit2" runat="server"></asp:TextBox>							</td>						</tr>						<tr>							<td>								Sentido							</td>							<td>								<asp:TextBox ID="txtSentidoAgit1" runat="server"></asp:TextBox>							</td>							<td>								<asp:TextBox ID="txtSentidoAgit2" runat="server"></asp:TextBox>							</td>						</tr>						<tr>							<td>								Modo Alternância							</td>							<td>								<asp:TextBox ID="txtAlternanciaAgit1" runat="server"></asp:TextBox>							</td>							<td>								<asp:TextBox ID="txtAlternanciaAgit2" runat="server"></asp:TextBox>							</td>						</tr>					</table>				</div>			</div>		</div>
Gostaria que a primeira div interna (cabecalho) fosse as "orelhas", ou seja, os links das guias (tabs) e que elas controlem a exibição dos itens da segunda div interna (corpo).

 

 

Como posso fazer com que os itens do cabeçalho fiquem lado a lado e que os itens do corpo fiquem na mesma posição (porém só um ficará visível por vez)?

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Pois eh, mas akee eh area de webstandars, como você quer q te ajudemos com um código cheio de tables?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Juliano.net    2

Juliano.net
Postado

WebStandards diz que devemos utilizar as tags para que elas realmente foram feitas...e está assim.

 

Eu preciso de uma tabela pois é a forma como está o sistema atual (aplicação Windows). É uma grid. Se eu for criar isso com DIV, o processamento será bem pior do que com tabelas.

 

Não estou usando tabelas para design, somente para manter a formatação necessária de acordo com o sistema atual.

 

Ignorem o conteúdo das DIVs como: asp:GridView, asp:TextBox e a table. O problema não está neles. Lá pode haver somente uma imagem ou um simples texto.

 

Resuma meu problema neste pedaço de código:

 

<div>			<div>				<div>OBSERVAÇÕES</div>				<div>EXPERIÊNCIA</div>				<div>AGITADOR</div>			</div>			<div>				<div id="PanelObservacoes">				</div>				<div id="PanelExperiencia">				</div>				<div id="PanelAgitador">				</div>			</div>		</div>

Pronto, esta é a minha estrutura....e isto é o que quero fazer: http://www.linhadecodigo.com.br/artigos/im...bControls_7.jpg

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

Juliano.net, não olhei o seu código muito bem, só por cima, e já digo que está com muitas divs, procure por divmania aqui no fórum que você saberá o que é. Tb não vou ficar aqui discutindo o que é...o que não é WS, mas tabela são para dados tabulares....se esse for o caso, tudo bem...se não for, ai é outra história.

 

Menu com abas, tem esse link aqui do fórum mesmo, sem tabelas http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Espero ter ajudado!!!

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

WebStandards diz que devemos utilizar as tags para que elas realmente foram feitas...e está assim.Eu preciso de uma tabela pois é a forma como está o sistema atual (aplicação Windows). É uma grid. Se eu for criar isso com DIV, o processamento será bem pior do que com tabelas.Não estou usando tabelas para design, somente para manter a formatação necessária de acordo com o sistema atual.Ignorem o conteúdo das DIVs como: asp:GridView, asp:TextBox e a table. O problema não está neles. Lá pode haver somente uma imagem ou um simples texto.Resuma meu problema neste pedaço de código:

<div>			<div>				<div>OBSERVAÇÕES</div>				<div>EXPERIÊNCIA</div>				<div>AGITADOR</div>			</div>			<div>				<div id="PanelObservacoes">				</div>				<div id="PanelExperiencia">				</div>				<div id="PanelAgitador">				</div>			</div>		</div>
Pronto, esta é a minha estrutura....e isto é o que quero fazer: http://www.linhadecodigo.com.br/artigos/im...bControls_7.jpg
Poderia ter postado soh isso http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gifMe confundi por causa dessas tags asp.net aeh no meio ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

Eu acho interessante programadores procurarem os webstandards pra trabalhar.Se isso crescesse rapidamente seria bem mais fácil implantar sistemas e sites, etc...

Com certeza...por isso devemos, sempre que possível, explicar o bem que faz largar as tabelas! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

IsraelCosta    0

IsraelCosta
Postado

Não seria mais semântico nesse caso o uso de uma lista desordenada?

 

assim:

<ul>	<li>OBSERVAÇÕES</li>	<li>EXPERIÊNCIA</li>	<li>AGITADOR</li></ul>	<div>	<div id="PanelObservacoes">	</div>	<div id="PanelExperiencia">	</div>	<div id="PanelAgitador">	</div></div>

o posicionamento claro né "CSS".

Compartilhar este post

Link para o post
Compartilhar em outros sites

Juliano.net    2

Juliano.net
Postado

Pelo que vi a solução do Israel para o cabeçalho do TabStrip (esse container baseado em Tabs) é a correta. Mas o corpo, está correto? Ou cairia na ideia da tal "divmania"??? rsrsrsEu faria da forma que ele disse, até por organização do código.

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