Conflito no CSS

jardeldint · Abril 21, 2017

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>&nbsp;&nbsp;&nbsp;&nbsp;</td>
							<td><input type="radio" name="lateral" id="automatico"
								value="A"> <label for="automatico">Automático</label></td><td>&nbsp;&nbsp;&nbsp;&nbsp;</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!

jardeldint · Abril 22, 2017

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.

Entrar

Arquivado

Conflito no CSS

Recommended Posts

jardeldint 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

jardeldint 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Soma dos dias utilizados

Saber se todos os produtos de uma consulta estão cadastrados no banco de dados

Ler campos com caracteres especiais no xml

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante