2
I created a Java Web project that is using JSF2 + Bootstrap, both CSS file and Bootstrap are correctly configured in my project, and in previous Web Java project was always responsible for the Back-End part, only now am I starting to learn the Frond-partEnd, and I’m having a hard time keeping up with myself for three weeks.
Every JSF tag that falls outside the Bootstrap tags usually works using the CSS file link, but when I put a JSF tag inside a Bootstrap tag it doesn’t work, JSF tags only work when I apply the CSS configuration directly to the XHTML page, and this is not good Frond-End development practice as shown below;
Model that is working:
<h:graphicImage library="images" name="carolina.jpg" style="margin-left: 50px;"/>
What I need to know is why this happens, the settings should be those below, and they don’t work. is that I am creating the codes in the wrong way on the page?
That’s on the page:
<h:graphicImage library="images" name="carolina.jpg" styleClass="foto_carolina"/>
This is in the CSS file:
@CHARSET "UTF-8";
.foto_carolina{
margin-left: 50px;
}
I even tried this way, and it didn’t work either:
This is my full page:
<?xml version="1.0" encoding="UTF-8" ?>
<!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"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<h:outputStylesheet library="css" name="bootstrap-theme.css" />
<h:outputStylesheet library="css" name="bootstrap.css" />
<h:outputStylesheet library="css" name="sistema.css" />
<h:outputScript library="js" name="jquery-2.1.4.min.js" />
<h:outputScript library="js" name="bootstrap.js" />
</h:head>
<style>
body {
width:80%;
margin: 0 auto;
padding-top: 40px;
}
</style>
<h:body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<h:graphicImage library="images" name="logotipoK.png" />
</div>
<div class="col-md-6">
<ul class="breadcrumb">
<li><a href="#">Inicio</a><span class="divider"></span></li>
<li><a href="#">O PLano</a> <span class="divider"></span></li>
<li><a href="#">Loja Virtual</a> <span class="divider"></span></li>
<li class="active">Contato</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h:graphicImage library="images" name="legumes.png" />
</div>
<div class="col-md-6">
<h:graphicImage library="images" name="plano_carolina.png"
style="margin-left: 50px;" />
<h:graphicImage library="images" name="carolina.jpg" styleClass="foto_carolina/>
</div>
</div>
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
</div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</h:body>
</html>
I accept suggestions.
If by chance the post is not very clear, please ask me questions so I can clarify the doubts so that you can help me.
I am at all disposal, and eagerly awaiting help.
Image tag does not display image or style is not applied? .
– Aurélio
Answering your question, it is not applied, and other, does not display error message.
– wladyband