I have the following HTML code generated by Primefaces's components (I've only considered HTML important code)
<html>
<body>
<link type="text/css" rel="stylesheet" href="/tiendaVirtual/css/init.css" /></head><body>
<div id="page">
<div id="header">
//Header content
</div>
<div id="content">
<div id="dvLogin">
<div id="pnlLogin" class="ui-panel ui-widget ui-widget-content ui-corner-all pnlLogin" data-widget="widget_pnlLogin">
<div id="pnlLogin_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all">
<span class="ui-panel-title">Login</span>
</div>
<div id="pnlLogin_content" class="ui-panel-content ui-widget-content">
</div>
<div>
</div>
</div>
<div id="footer">
//Footer content
</div>
</div>
</body>
</html>
And your css file init.css:
body{
font-size: 12px !important;
}
#page{
width: 100%;
height: 100%;
position: absolute !important;
}
#header{
height: auto !important;
top: 0;
}
#content{
height: 100% !important;
display: block;
}
#footer{
height: auto !important;
position: absolute;
width: 100%;
bottom: 0;
}
.dvLogin{
vertical-align: middle;
height: 660px !important;
}
.pnlLogin{
width: 500px;
margin: auto auto !important;
}
#pnlFooter{
margin-bottom: 10px !important
This generate the following HTML page:
I want that panel called 'Login' is centered vertically and horizontally but I don't know as...
PD:
I added the XHTML pages:
login.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
template="/templates/template.xhtml">
<ui:define name="content">
<h:form prependId="false">
<div id="dvLogin">
<p:panel id="pnlLogin" header="Login" styleClass="pnlLogin">
<h:panelGrid columns="2">
<p:outputLabel value="Usuario"/>
<p:inputText id="txtUsuario" value="#{loginBean.usuario}" required="true" requiredMessage="Especificar usuario"/>
<p:outputLabel value="Contraseña"/>
<p:password id="pswContrasenia" value="#{loginBean.contrasenia}" required="true" requiredMessage="Especificar contraseña"/>
</h:panelGrid>
<p:commandButton value="Ingresar" action="#{loginBean.ingresar}" />
</p:panel>
</div>
</h:form>
</ui:define>
</ui:composition>
template.xhtml
<!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:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<f:loadBundle basename="resources.application" var="msg"/>
<h:head>
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/init.css" />
</h:head>
<h:body>
<div id="page">
<div id="header">
<ui:insert name="header" >
<ui:include src="/templates/header.xhtml" />
</ui:insert>
</div>
<div id="content">
<ui:insert name="content">
</ui:insert>
</div>
<div id="footer">
<ui:insert name="footer" >
<ui:include src="/templates/footer.xhtml" />
</ui:insert>
</div>
</div>
</h:body>
</html>
header.xhtml
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<p:panel>
<p:graphicImage value="/img/common/logo.png" />
</p:panel>
</ui:composition>
footer.xhtml
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<p:panel id="pnlFooter">
Everis Peru © - Shoppping Cart
</p:panel>
</ui:composition>
There are few things that you need to look.
1) there is no need of unwanted position absolute and !important tags this can be simple achieved with diaplay: table properties as follows
CSS
#content:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
/* For visualization
background: #808080; width: 5px;
*/
}
#dvLogin {
display: inline-block;
vertical-align: middle;
width: 500px;
padding: 10px 15px;
border: #a0a0a0 solid 1px;
background: #f00;
}
html, body{height:100%;}
Demo - jsfiddle i.e. in full screen Demo full screen
also you need to check CSS as unwanted css are commented in above demo. so Please check that
Reference Link
Hope it Helps!
Related
So I have a navbar fixed to the top and for this I've used position: fixed but for some reason my content is overriding it. I would like to have something like this:
html {
position: relative;
min-height: 100%;
}
.header {
top: 0;
position: fixed;
}
.footer {
position: fixed;
bottom: 0
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
<title>Static Template</title>
</head>
<body>
<div class="header">
<h2>Header</h2>
</div>
<div class="row">
<div class="column side" style="background-color: #aaa;">Column</div>
<div class="column middle" style="background-color: #bbb;">Column</div>
<div class="column side" style="background-color: #ccc;">Column</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</body>
Codesandbox Demo: https://codesandbox.io/s/laughing-dew-2g2r6?file=/index.html
You have to add some margin-top to the row class.
html {
position: relative;
min-height: 100%;
}
.header {
top: 0;
position: fixed;
}
.row {
margin-top: 50px;
}
.footer {
position: fixed;
bottom: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
<title>Static Template</title>
</head>
<body>
<div class="header">
<h2>Header</h2>
</div>
<div class="row">
<div class="column side" style="background-color: #aaa;">Column</div>
<div class="column middle" style="background-color: #bbb;">Column</div>
<div class="column side" style="background-color: #ccc;">Column</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</body>
For that you need to add margin-top css in your row class.
For example:
.header {
position: fixed;
top: 0;
width: 100%;
}
.row{
margin-top: 67px;
}
.footer {
position: fixed;
bottom: 0
}
<div class="header">
<h2>header</h2>
</div>
<div class="row">
<div class="column side" style="background-color: #aaa;">Column</div>
<div class="column middle" style="background-color: #bbb;">Column</div>
<div class="column side" style="background-color: #ccc;">Column</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
You can play with code here. Also you can check here in other resources.
I have a table like this and i want this;
tr {
float: left !important;
}
tr:nth-child(2n+1) {
clear: left !important;
padding-right: 10px !important;
}
<table>
<tbody>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
<tr><td>8</td></tr>
<tr><td>9</td></tr>
</tbody>
</table>
This code not working internet explorer 7, how can i solve? This is explorer 7 result;
try this
table, tbody, tr {
display: block;
}
tr {
float: left;
width: 50%;
}
I suggest trying to use DIV instead of a table. It may help you to achieve the desired output for the IE 7 browser.
<!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" >
<head>
<title>Untitled Page</title>
<style type="text/css">
#container, #left, #right{margin: 0px; padding: 0px; border: 0px;}
#left{width: 10%; float: left;}
#right{width: 90%; float: right;}
</style>
</head>
<body>
<div id="container">
<div id="left">
1
</div>
<div id="right">
2
</div>
<div id="left">
3
</div>
<div id="right">
4
</div>
</div>
<div id="left">
5
</div>
<div id="right">
6
</div>
</div>
<div id="left">
7
</div>
<div id="right">
8
</div>
<div id="right">
9
</div>
</div>
</body>
</html>
Output in the IE 11 browser with Document mode IE 7:
i want to make my horizontal table go vertical in responsive. what i mean is that my table is at the moment horizontal, and i want to make it vertical. i dont care if it is with table attributes or div attributes.
thanks.
i dont know what else to write about my problem.
body {
background-color: #596770;
margin-left: 85px; /* Same as the width of the sidenav */
margin-top: 102.5px;
font-size: 18px; /* Increased text to enable scrolling */
padding: 0px 52px 0px 52px;
font-size: 35;
color:white;
font-family: montserrat, sans-serif;
}
table {
}
th {
width: 423px;
height: 273px;
}
.latest img {
max-width: 100%;
}
.About {
margin: -45px 0px 0px -52px;
}
/* Bottom left text */
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
<div class="main">
<h2>Latest News</h2>
<style>
table, th {
border: 1px solid black;
}
table, tr {
border: 0px;
}
</style>
<table class="latest">
<tr>
<!--Latest news-->
<th>
<a href="">
<img src="img/NemID_app_to.jpg.png" alt="NemID"><img/>
</a>
</th>
<td width="61px">
<!--second news-->
<th>Pic2</th>
<td width="61px">
<!--Third news-->
<th>Pic3</th>
</tr>
</table>
</div>
You can use bootstrap and have col tags. When the screen is made smaller the columns will shift down vertically. See an example here: https://getbootstrap.com/docs/3.3/examples/grid/
Are you looking for something like this?
* {
margin: 0;
}
.table {
display: table;
width: 100%
}
.tr {
display: table-row;
}
.td {
display: table-cell;
border: 1px solid #ccc;
padding: 5px
}
#media (max-width: 768px) {
.tr {
display: block;
float: left;
}
.td {
display: block;
}
}
<div class="table">
<div class="tr">
<div class="td">Test 1</div>
<div class="td">Test 2</div>
<div class="td">Test 3</div>
<div class="td">Test 4</div>
<div class="td">Test 5</div>
<div class="td">Test 6</div>
</div>
<div class="tr">
<div class="td">Test 1</div>
<div class="td">Test 2</div>
<div class="td">Test 3</div>
<div class="td">Test 4</div>
<div class="td">Test 5</div>
<div class="td">Test 6</div>
</div>
</div>
When i try to use bootstrap, it is interference with my own CSS. it is possible, to only let the Bootstrap CSS to work on a special ammount of my website.
Looking at your example, you don't want an actual table, but some grid to place the news items. I don't know which browsers you want to support, but CSS Grid layout may be the solution. Then you can define a different grid depening on the screen width.
is this what you are looking for:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-2" style="background-color:lavender;">.col-sm-4a</div>
<div class="col-sm-2" style="background-color:lavenderblush;">.col-sm-4a</div>
<div class="col-sm-2" style="background-color:lavender;">.col-sm-4a</div>
<div class="col-sm-2" style="background-color:lavender;">.col-sm-4a</div>
<div class="col-sm-2" style="background-color:lavenderblush;">.col-sm-4a</div>
<div class="col-sm-2" style="background-color:lavender;">.col-sm-4a</div>
</div>
<div class="row">
<div class="col-sm-2" style="background-color:lavender;">.col-sm-4b</div>
<div class="col-sm-2" style="background-color:lavenderblush;">.col-sm-4b</div>
<div class="col-sm-2" style="background-color:lavender;">.col-sm-4b</div>
<div class="col-sm-2" style="background-color:lavender;">.col-sm-4b</div>
<div class="col-sm-2" style="background-color:lavenderblush;">.col-sm-4b</div>
<div class="col-sm-2" style="background-color:lavender;">.col-sm-4b</div>
</div>
</div>
<header>
</header>
</body>
</html>
resize the window to see effect
I am trying to create a website but these images I have are not working, they should be under the title, for example, the alcohol photo should be under the alcohol title and nervous system photo should be under the nervous system title.
Here is a screenshot of how it looks like at the moment:
Here is my code at the moment:
HTML: http://hastebin.com/utafabumof.xml
CSS: http://hastebin.com/arefipaguy.css
Thank you for helping if you can. it'd mean a lot.
The images should be inside the same div, for example alcohol image should be in
<div class="science">
<div class="alco">Image for Alco goes Here</div>
<div class="nersys">Image for Nersys goes Here</div>
</div>
Try this.
html file:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Science - Portfolio</title>
<link rel="stylesheet" type="text/css" href="styles/science.css"/>
</head>
<body>
<header>
<div class="nav">
<ul>
<li class="home">Home</li>
<li class="about">English</li>
<li class="news">Hosptality & Catering</li>
<li class="contact">Leisure & Tourism</li>
<li class="contact">BTEC Computing</li>
<li class="contact">BTEC Business</li>
<li class="contact">CV</li>
</ul>
</div>
</header>
<div class="science">
<center><h2>Science:</h2></center>
</div>
<div class="center-block">
<div class="alco">
<h4>Alcohol:</h4>
<div class="alcoimage"><img src="images/Science/alcohol.jpg" width="400" height="357" alt=""/></div>
</div>
<div class="nersys">
<h4>Nervous System:</h4>
<div class="alcoimage"><img src="images/Science/NervousSystem.jpg" width="291" height="291" class="nerimage" /></div>
</div>
</div>
<div id="wrapper">
<div id="footer">
<p><center>Contact Me:</center></p>
<p><center>11lanjac#abbeyfield.wilts.sch.uk</center></p>
</div>
</div>
</body>
</html>
And Css file:
....
.science {
padding-top: 30px;
}
.center-block{
text-align: center;
}
.center-block .alco {
display: inline-block;
vertical-align: top;
text-align: center;
padding-right:150px;
}
.center-block .nersys{
display: inline-block;
text-align: center;
padding-left:150px;
}
.alcoimage {
padding-top: 60px;
}
#footer {
background:#40ea3c;
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
color: white;
}
I have two templates. index.html (PARENT) and test.html (CHILD)
I have a DIV which is fixed on top of the page, like a bar [#TopBar]. it stays there on the the PARENT template, but once it reaches the CHILD template, it insists on adding some sort of padding or margin, and its a few pixels off the top.
I tried overiding the css from within the child template, and still no luck. I stopped using the templates, and creating two full HTML files and that works(don't want to do this as i am duplicating html code). So it seems everytime i put {% extends "crm/index.html" %} on the child template it stuffs things up.
Heres my code:
PARENT - index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>{%block title%}Control Panel {%endblock%}</title>
<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}crm/crm.css" />
</head>
<body>
<div id="TopBar" >
<div id="header">
<h1> TITLE</h1>
</div>
<div id="searches" >
<input type="text" id="search" name="search" /> <input type="button" value="submit" />
</div>
</div>
<div id="LeftCol">
<div id="LeftMenu">
<h3>MENU</h3>
</div>
</div>
<div id="RightCol">
<div id="UserProfile">
{% block content %}
<h1 class="profile"> USER PROFILE</h1>
<p>Random text</p>
{%endblock%}
</div>
</div>
</body>
</html>
CHILD - test.html
{% extends "crm/index.html" %}
{%block title%} Test {%endblock%}
{%block content%}
<h1 class="profile"> test</h1>
<p> hkhksjhgkdhskghdk</p>
{%endblock%}
CSS
*{padding:0px;margin:0px;}
body{background-color:#DBDBDB; }
#TopBar{width:100%; height:50px; background-color:#009999; margin:0px;}
#header{float:left}
#searches{float:right; padding:15px;}
#LeftCol{height:840px; margin-top:10px; width:200px; background-color:#C0C0C0; -moz-border-radius: 20px; -webkit-border-radius: 20px;-khtml-border-radius: 20px; border-radius: 20px;
display:block; overflow: hidden; float:left;}
#RightCol{width:1040px; margin:10px; color:black;-moz-border-radius: 20px; -webkit-border-radius: 20px;-khtml-border-radius: 20px; border-radius: 20px;
display:block; overflow: hidden; background-color:white; float:left;}
h1{color:white;font-family:"Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
padding:5px;}
h1.profile{ color:black;font-family:"Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
padding:5px;}
.h3{margin-left:70px; padding-top:10px}
I Only want to change content in the {% block content %} there is no reason for me to put other DIVS in blocks.
This is the output I get from the browser (right click, view source):
index.html:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> Control Panel </title>
<link rel="stylesheet" type="text/css" href="/static/crm/crm.css" />
</head>
<body>
<div id="TopBar" >
<div id="header">
<h1>Control Panel</h1>
</div>
<div id="searches" >
<input type="text" id="search" name="search" /> <input type="button" value="submit" />
</div>
</div>
<div id="LeftCol">
<div id="LeftMenu">
<h3>MENU</h3>
</div>
</div>
<div id="RightCol">
<div id="Contents">
<h1 class="profile"> USER PROFILE</h1>
<p>Random text</p>
</div>
</div>
</body>
</html>
test.html:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> Test </title>
<link rel="stylesheet" type="text/css" href="/static/crm/crm.css" />
</head>
<body>
<div id="TopBar" >
<div id="header">
<h1> Test</h1>
</div>
<div id="searches" >
<input type="text" id="search" name="search" /> <input type="button" value="submit" />
</div>
</div>
<div id="LeftCol">
<div id="LeftMenu">
<h3>MENU</h3>
</div>
</div>
<div id="RightCol">
<div id="Contents">
<h1 class="profile"> test</h1>
<p> hkhksjhgkdhskghdk</p>
</div>
</div>
</body>
</html>
i don't think this is a django problem, the extended template seems right.. maybe you could post the full HTML output of both the index.html and the test.html you receive when accessing your views in the browser...
try using the stylesheet for css reset it removes a lot of margins and paddings. it may not solve your problem, but usually it helps a lot