Jump to content
jardeldint

Conflito no CSS

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By douglas79
      Boa tarde, pessoal!!!
       
      Estou com um pequeno problema com essa tag aí. O que acontece?? Fiz tudo certo no código e no css, porém ao atualizar a página, o vídeo aparece, mas não executa. 
      Eis o código:
       
      <div class="box-esquerdo">
                      <video class="institucional" src="https://youtu.be/90uPbUirZ3I" controls="controls" autoplay="autoplay"></video>
       </div>
       
      Procurei em diversos tutoriais e falam pra atualizar o browser, porém já está atualizado e mesmo assim o erro continua. E no Edge (uso o Windows 10 64 bits), diz que a fonte é inválida.
      O que pode estar havendo??
      Alguém pode me ajudar nessa???
      Aguardo respostas!!!
      []'s
    • By holasoycael
      Oi Pessoal!
      Eu estou ultilizando um slide desenvolvido com css3. Vim pedir ajudar aos universitarios. Precisso personaliar este slide removendo a target e mantendo o efeito.
       
      TARGET:



       
      É natural pelo codigo css ao selecionar a tela no menu ele busque a target. É possivel buscar a targert sem aparecer na barra URL?
       
      <!DOCTYPE html> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><!-- HTML 4 --> <meta charset="utf-8"/><!-- HTML5 --> <style type="text/css"> *{margin:0;outline:0;padding:0;text-align:left;list-style:none;border:none;vertical-align:baseline;outline:none;} /* *Styling */ html,body { width: 100%; height: 100%; position: relative; } body { overflow: hidden; } header { background: #fff; position: fixed; left: 0; top: 0; width:100%; height: 3.5rem; z-index: 10; } nav { width: 100%; padding-top: 0.5rem; } nav ul { list-style: none; width: inherit; margin: 0; } ul li:nth-child( 3n + 1), #main .panel:nth-child( 3n + 1) { background: rgb( 0, 180, 255 ); } ul li:nth-child( 3n + 2), #main .panel:nth-child( 3n + 2) { background: rgb( 255, 65, 180 ); } ul li:nth-child( 3n + 3), #main .panel:nth-child( 3n + 3) { background: rgb( 0, 255, 180 ); } ul li { display: inline-block; margin: 0 8px; margin: 0 0.5rem; padding: 5px 8px; padding: 0.3rem 0.5rem; border-radius: 2px; line-height: 1.5; } ul li a { color: #fff; text-decoration: none; } .panel { width: 100%; height: 500px; z-index:0; -webkit-transform: translateZ( 0 ); transform: translateZ( 0 ); -webkit-transition: -webkit-transform 0.6s ease-in-out; transition: transform 0.6s ease-in-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .panel h1 { font-family: sans-serif; font-size: 64px; font-size: 4rem; color: #fff; position:relative; line-height: 200px; top: 33%; text-align: center; margin: 0; } /* *Scrolling */ a[ id= "tela1" ]:target ~ #main article.panel { -webkit-transform: translateY( 0px); transform: translateY( 0px ); } a[ id= "tela2" ]:target ~ #main article.panel { -webkit-transform: translateY( -500px ); transform: translateY( -500px ); } a[ id= "tela3" ]:target ~ #main article.panel { -webkit-transform: translateY( -1000px ); transform: translateY( -1000px ); } </style> </head> <body> <a id="tela1"></a> <a id="tela2"></a> <a id="tela3"></a> <header class="nav"> <nav> <ul> <li><a href="#tela1">Tela 1</a></li> <li><a href="#tela2">Tela 2</a></li> <li><a href="#tela3">Tela 3</a></li> </ul> </nav> </header> <section id="main"> <article class="panel" id="tela1"> <h1> Conteúdo 1</h1> </article> <article class="panel" id="tela2"> <h1> Conteúdo 2</h1> </article> <article class="panel" id="tela3"> <h1> Conteúdo 3</h1> </article> </section> </body> </html>  
      DEMO:
      http://jsfiddle.net/ivanferrer/en0m7yk1/
    • By BelleFisio
      Olá! Bom dia!
       
      Tenho uma imagem que fica responsiva na maioria dos navegadores, porém no internet explore ela não fica responsiva. No iexplore ela tbm sai da posição correta, então fiz um codigo especifico para o iexplore (o posicionamento ficou correto, porém a imagem não esta responsiva)
       
      Teria alguma forma de corrigir isso?
       
      O codigo esta assim:
      <div class="conteudo"> <div id="cabeçalho"> <div class="logotipo"> <img src="arquivo/img/logotipo.png"> </div> </div> </div>  O CSS:
      .cabeçalho{width:90%;margin-left:auto;margin-right:auto;} .logotipo {width:100%;max-width:1000px;}} .logotipo img{width:100%!important;height:auto;max-width:180px;}  
      Obrigada
       
       
    • By teuzero
      esse é o link do meu site:https://xraros.000webhostapp.com/
       
      o problema é que no arquivo css test.css no bloco de código:
      eu escrevi esse código:
       
      @media screen and (min-width: 800px) and (max-width: 848px){ .busca { width:200px; } .barra { background:url(../img/barra.png)no-repeat; } } escrevi esse código:
      .barra { background:url(../img/barra.png)no-repeat; }  
      no index da pagina tem a div:
      <div class="barra"> </div>  
      mais no site não carrega essa imagem.
      como eu carrego essa imagem via css dentro de um div?
    • By DinhoPHP
      estou há horas tentando utilizar o Carousel do Bootstrap para exibir produtos. Fiz sozinho não funcionou, então encontrei este código https://codepen.io/kreigd/pen/ybYNoN coloquei em um arquivo sozinho, separado do site que estou desenvolvendo e nem assim funciona. Fica assim: http://equipenovainfo.com.br/_portifolio/amanda/31_07_2019/carousel_prod.php
       
      Segue o código:
      <!doctype html> <html lang="pt-br"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Hello, world!</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script> $(document).ready(function() { $("#myCarousel").on("slide.bs.carousel", function(e) { var $e = $(e.relatedTarget); var idx = $e.index(); var itemsPerSlide = 3; var totalItems = $(".carousel-item").length; if (idx >= totalItems - (itemsPerSlide - 1)) { var it = itemsPerSlide - (totalItems - idx); for (var i = 0; i < it; i++) { // append slides to end if (e.direction == "left") { $(".carousel-item") .eq(i) .appendTo(".carousel-inner"); } else { $(".carousel-item") .eq(0) .appendTo($(this).find(".carousel-inner")); } } } }); }); </script> </head> <body> <div class="container-fluid"> <h1 class="text-center mb-3">Bootstrap Multi-Card Carousel</h1> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <div class="carousel-inner row w-100 mx-auto"> <div class="carousel-item col-md-4 active"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/f44242/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 1</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/418cf4/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 2</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/3ed846/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 3</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/42ebf4/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 4</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/f49b41/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 5</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/f4f141/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 6</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/8e41f4/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 7</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> </div> <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> Preciso terminar esse trabalho, travei nisso. Me ajudará à pagar a faculdade e ganharei tempo para estudar. 
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.