Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá pessoal, tudo bem?
To com um problemão doido... já to quase careca (não falta muito pra isso)!
Fiz uma estrutura simples de html5 e css3 nesse endereço: Estrutura Básica.
Ali funcionou perfeitamente... show de bola mesmo.
Porém eu precisei inserir essa estrutura dentro de uma página .JSP, que essa página é feita com o bootstrap. O código dela está abaixo:
<%@page import="java.util.ArrayList"%>
<%@page import="com.sun.javafx.binding.SelectBinding.AsObject"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1" import="br.com.tuter.modelo.Associado" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>BackOffice Tuter - Meus Dados</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/arvore.css" rel="stylesheet" type="text/css" media="screen">
<!-- Custom CSS -->
<link href="css/sb-admin.css" rel="stylesheet">
<!-- Morris Charts CSS -->
<link href="css/plugins/morris.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<%
Associado associado = (Associado) session.getAttribute("currentSessionUser");
session.setAttribute("loginAssociado", associado.getLogin()); //Grava a session com o Login
ArrayList<String> lst = (ArrayList<String>)session.getAttribute("listaOrdenada");
//out.println("session login " + session.getAttribute("loginAssociado"));
%>
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="images/logo-tuter-new-pb.png" /></a>
</div>
<!-- Top Menu Items -->
<ul class="nav navbar-right top-nav">
<li class="dropdown"><!-- BOTÃO DE PERFIL -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <% out.println(associado.getNome()); %> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="meusDados"><i class="fa fa-fw fa-user"></i> Meus Dados</a>
</li>
<li class="divider"></li>
<li>
<a href="logof"><i class="fa fa-fw fa-power-off"></i> Sair</a>
</li>
</ul>
</li>
</ul>
<!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
<li class="active">
<a href="dashBoard"><i class="fa fa-fw fa-dashboard"></i> Dashboard</a>
</li>
<li>
<a href="meusDados"><i class="fa fa-fw fa-bar-chart-o"></i> Meus Dados</a>
</li>
<li><a href="rede" ><i class="fa fa-spinner fa-spin fa-1x fa-fw"></i> Minha Rede</a>
</li>
<li><a href="backoffice/loginFinanceiro.html"><i class="fa fa-fw fa-money"></i> Financeiro</a>
</li>
<li><a href="backoffice/educacional.html"><i class="fa fa-fw fa-desktop"></i> Educacional</a>
</li>
<li><a href="backoffice/propaganda.html"><i class="fa fa-bullhorn"></i> Propaganda</a>
</li>
<li><a href="backoffice/suporte.html"><i class="fa fa-life-ring"></i> Suporte</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
<div id="page-wrapper">
<div class="container-fluid">
<!-- Page Heading -->
<div class="container">
<div class="row">
<h2>Passe o mouse para Buscar em sua Rede</h2>
<div class="search">
<input type="text" class="form-control input-sm" maxlength="64" placeholder="Search" size="40" />
<button type="submit" class="btn btn-primary btn-sm">Busque</button>
</div>
</div>
</div>
<% if (associado.getStatus() == '2'){ %>
<br><br><p><%= associado.getNome() %></p>
<p><%= associado.getLogin() %></p>
<p><%= associado.getPacote() %></p>
<p><%= associado.getStatus() %></p>
<p><h2>Seu Cadastro ainda está inativo.</h2><h3>Ative seu cadastro para receber pontos por sua Arvore de indicados!</h3>
<% } else { /*%>
<form id="AtualizaCadastro" action="atualizaAssociado" method="post">
<table border="0">
<tr><th colspan="5" ><h4>Lateral a Inserir Novos Associados</h4></th>
</tr>
<tr>
<td><input type="radio" name="lateral" id="esquerda"
value="E"> <label for="esquerda">Esquerda</label></td><td> </td>
<td><input type="radio" name="lateral" id="automatico"
value="A"> <label for="automatico">Automático</label></td><td> </td>
<td><input type="radio" name="lateral" id="direita"
value="D"> <label for="direita">Direita</label>
</tr>
</table>
</form>
<% */ %>
<p>
<br>
<br>
<br>
</p>
<!-- Inicio da tabela Arvore -->
<div class="quadTotal">
<div class="quadUm">
JARDEL
</div>
<div class="quadDoisG espacoBaixo">
<div class="quadDois">
GISLENE
</div>
</div>
<div class="quadTresG espacoBaixo">
<div class="quadTres">
DAVI
</div>
</div>
<div class="quadQuatroG espacoBaixoDois">
<div class="quadQuatro">
JORGE
</div>
<div class="quadCinco">
ANGELO
</div>
</div>
<div class="quadCincoG espacoBaixoDois">
<div class="quadSeis">
NEI
</div>
<div class="quadSete">
JAILSON
</div>
</div>
</div>
<!-- Fim da tabela Arvore -->
<% } %>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-bordered table-hover table-striped">
<thead>
<th>Plano</th>
<th>Equipe Esquerda</th>
<th>Equipe Direita</th>
</thead>
<tbody>
<tr>
<td>Bronze</td>
<td>100</td>
<td>120</td>
</tr>
<tr>
<td>Prata</td>
<td>100</td>
<td>120</td>
</tr>
<tr>
<td>Ouro</td>
<td>100</td>
<td>120</td>
</tr>
<tr>
<td>Diamante</td>
<td>100</td>
<td>120</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
O arquivo arvore.css está assim:
.quadTotal {
width: 90%;
height: 80%;
position: relative;
top: 5%;
background-color: #86C8CC;
text-align: center;
}
.quadUm {
position: absolute;
display: block;
width: 100%;
height: 33%;
top: 0;
text-align: center;
background-color: #E5D4BF;
}
.espacoBaixo {
display: inline-block;
position: absolute;
height: 33%;
top: 33%;
}
.espacoBaixoDois {
display: inline-block;
position: absolute;
height: 33%;
top: 66%;
}
.quadDoisG {
display: block;
position: absolute;
width: 50%;
left: 0;
float: left;
background-color: #E3E5BF;
text-align: center;
}
.quadTresG {
display: block;
position: absolute;
width: 50%;
right: 0;
float: right;
background-color: #BFE3E5 ;
text-align: center;
}
.quadQuatroG {
display: block;
position: absolute;
width: 50%;
left: 0;
float: left;
background-color: #EFD8EE ;
text-align: center;
}
.quadCincoG {
display: block;
position: absolute;
width: 50%;
right: 0;
float: right;
background-color: #CFC9CF ;
text-align: center;
}
.quadDois {}
.quadTres {}
.quadQuatro {
width: 50%;
display: inline-block;
background-color: white;
float: left;
}
.quadCinco {
width: 50%;
display: inline-block;
background-color: gray;
float: right;
}
.quadSeis {
width: 50%;
display: inline-block;
background-color: white;
float: left;
}
.quadSete {
width: 50%;
display: inline-block;
background-color: gray;
float: right;
}
Quando renderiza a página, só aparece na tela o conteúdo da ultima linha, que é esse trecho de código:
<div class="quadQuatroG espacoBaixoDois">
<div class="quadQuatro">
JORGE
</div>
<div class="quadCinco">
ANGELO
</div>
</div>
<div class="quadCincoG espacoBaixoDois">
<div class="quadSeis">
NEI
</div>
<div class="quadSete">
JAILSON
</div>
Teoricamente não deveria causar nenhum tipo de conflito, sabendo que o arquivo que criei não tem nenhum seletor repetido em nenhum outro arquivo externo de css.
Preciso da ajuda de vocês pra resolver esse mistério.
Fico no aguardo!
olá amigo... esse pedaço é só pra iniciar um bloco de radio, más que foi comentado.
Mesmo tirando o / / continuou com o erro...
Sinceramente... esse erro que está dando nunca tinha visto dar antes.
Agradeço sua ajuda.