I have css sheet that keeps making one of my webpages have the same opacity as the background image, but it doesn't do it to the others. I don't want the whole page to have the opacity, just the background. I've played around with it but I'm not exactly sure why it's doing it to this page in particular. The only thing that's different is that this page has a table, the others either have a form or don't have one. Let me know if I should share some of the html.
The css that's causing it:
div::after {
min-height: 100%;
min-width: 1024px;
pointer-events: none;
width: 100%;
height: auto;
top: 0;
left: 0;
content: "";
display: block;
position: fixed;
background: url(brain.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
opacity: 0.1;
}
Added html:
<html>
<head>
<meta charset="utf-8" />
<script>
function display() {
document.getElementById("displayarea").innerHTML = document.getElementById("fname").value;
document.getElementById("fname").value = "";
document.getElementById("displayarea1").innerHTML = document.getElementById("pname").value;
document.getElementById("pname").value = "";
document.getElementById("displayarea2").innerHTML = document.getElementById("rname").value;
document.getElementById("rname").value = "";
document.getElementById("displayarea3").innerHTML = document.getElementById("kname").value;
document.getElementById("kname").value = "";
document.getElementById("displayarea4").innerHTML = document.getElementById("hname").value;
document.getElementById("hname").value = "";
document.getElementById("displayarea5").innerHTML = document.getElementById("oname").value;
document.getElementById("oname").value = "";
}
</script>
<link href="general.css" rel="stylesheet" />
</head>
<body>
<header>
<nav class="horizontal">
<ul>
<li>Sitemap</li>
<li>Quiz page 1</li>
</ul>
</nav>
<article>
<h1>Goal Setting</h1>
<p></p>
</article>
</header>
<table bgcolor="#FF00FF" border="1" align="center">
<tr>
<td>Goal</td>
<td><input type="text" name="fname" id="fname"></td>
</tr>
<tr>
<td>Plan</td>
<td><input type="text" name=pname" id="pname"></td>
</tr>
<tr>
<td>Goal</td>
<td><input type="text" name="rname" id="rname"></td>
</tr>
<tr>
<td>Plan</td>
<td><input type="text" name=kname" id="kname"></td>
</tr>
<tr>
<td>Goal</td>
<td><input type="text" name="hname" id="hname"></td>
</tr>
<tr>
<td>Plan</td>
<td><input type="text" name=oname" id="oname"></td>
</tr>
<tr>
<td> </td>
<td align="center"><input type="button" value="Submit" name="submit" id="submit" onClick="display(event)" /></td>
</tr>
</table>
<table width="400px" align="center" border=0>
<tr style="background-color:#8FBC8F;">
<td align="center"><b>Goal</b></td>
<td align="center"><b>Plan</b></td>
<td align="center"><b>Goal</b></td>
<td align="center"><b>Plan</b></td>
<td align="center"><b>Goal</b></td>
<td align="center"><b>Plan</b></td>
</tr>
<tr>
<td align="center">
<div id="displayarea"></div>
</td>
<td align="center">
<div id="displayarea1"></div>
</td>
<td align="center">
<div id="displayarea2"></div>
</td>
<td align="center">
<div id="displayarea3"></div>
</td>
<td align="center">
<div id="displayarea4"></div>
</td>
<td align="center">
<div id="displayarea5"></div>
</td>
</tr>
</table>
<footer></footer>
</body>
</html>
So bottom pic is what it looks like right now, it shares the same opacity as the background but I only want the background to have it, not the content. The above pic is what another page looks like, I want it to look like that.
#jackie, it's not making everything transparent, but the image is actually above your page content, thus making it look opaque as well. Your solution is to set z-index of ::after pseudoelement to -1.
div::after {
min-height: 100%;
min-width: 1024px;
pointer-events: none;
width: 100%;
height: auto;
top: 0;
left: 0;
content: "";
display: block;
position: fixed;
background: url(brain.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
opacity: 0.1;
z-index: -1;
}
But like I said in the comment, I would highly suggest that you target very specific element with a class on it, instead of applying ::after to every directly to div element.
Related
I'm practicing writing HTML email code but for this particular issue, I've been stuck it on for a very long time no matter what I try.
When the view reaches <= 600px (when scrolling your screen to left), the This text should be in the middle! text is inside the 1200x1000 placeholder but not directly in the middle of it.
On the flip side, when the view reaches >= 601px, the This text should be in the middle! text is between the 320x30 placeholder and not inside 1200x1000 placeholder
Lastly, once it reaches <= 1207px, the left and right scrolling begins to happen on the entire page, which it shouldn't but not sure why it's happening.
I have no idea why these things are happening and just feeling like I've ran out of options in terms of fixing this. What am I doing wrong and how can I fix it? A Fiddle is provided below as well: https://jsfiddle.net/s01mr3xp/50/
Here's my HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="x-apple-disable-message-reformatting" />
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900&v=1.0&song=cantbuymelove" rel="stylesheet"
type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700&display=swap" rel="stylesheet">
<style type="text/css">
#import url("https://use.typekit.net/anr2nbh.css");
table td, table th {
border-collapse:collapse;
border-spacing:0px;
mso-table-lspace:0pt;
mso-table-rspace:0pt;
border:0px none;
padding:0;
}
#media screen and (max-width: 600px){
.header-welcome {
background-image: url('http://via.placeholder.com/1200x1000');
background-size: 320px 320px;
background-repeat: no-repeat;
width: 320px !important;
height: 320px !important;
}
.width-320 {
width: 320px !important;
}
.height-auto {
height: auto !important;
}
.overload {
display: block !important;
}
.hide {
display: none !important;
}
.fontsize-11 {
font-size: 11px !important;
}
}
</style>
<!--[if gte mso 9]>
<style type="text/css">
.outlook-fallback {
font-family: Arial, sans-serif !important;
}
</style>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG />
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body width="100%" bgcolor="#f4f8f1">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="width-320" style="margin: 0 auto;" width="1200">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="width-320" align="center" > <img class="width-320 height-auto" style="display: block;" src="http://via.placeholder.com/328x44" width="328" height="44" border="0" /> </td>
</tr>
<tr>
<td class="width-320" align="center" height="30"><img class="width-320" style="display: block;" src="http://via.placeholder.com/320x30" width="600" height="30" border="0" /></td>
</tr>
<tr>
<td class="width-320 header-welcome" valign="top" align="center">
<a href="#">
<font class="fontsize-11 outlook-fallback" style="font-family: museo-sans,Arial,Sans-Serif; font-weight: 100; font-size: 40px; color: #000000;">This text should be in the middle!</font>
</a>
<a href="#">
<img class="hide" style="display: block;" src="http://via.placeholder.com/1200x1000" alt="Welcome!" border="0" />
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Take a closer look at these:
#media screen and (max-width: 600px){
.header-welcome {
background-image: url('http://via.placeholder.com/1200x1000');
background-size: 320px 320px;
background-repeat: no-repeat;
width: 320px !important;
height: 320px !important;
}
.hide {
display: none !important;
}
<tr>
<td class="width-320 header-welcome" valign="top" align="center">
<a href="#">
<font class="fontsize-11 outlook-fallback" style="font-family: museo-sans,Arial,Sans-Serif; font-weight: 100; font-size: 40px; color: #000000;">This text should be in the middle!</font>
</a>
<a href="#">
<img class="hide" style="display: block;" src="http://via.placeholder.com/1200x1000" alt="Welcome!" border="0" />
</a>
</td>
</tr>
When the screen width is <=600px:
You are setting the background-image for .header-welcome class.
You are hiding the additional image element <img class="hide"
When the screen width is >600px:
The background-image is not set anymore
The additional image element is shown and the text is placed on top of it.
Then, you have used valign="top" here:
<td class="width-320 header-welcome" valign="top" align="center">
Change it to valign="middle". This places the text in the middle of the cell vertically.
I didn't realise it got put on hold. Sorry about that. Here's the answer:
At the moment every 3rd one is blue and every 5th is black. I'm assuming you want the 3rd one after black to be blue. You are going to want to change the css to
li:nth-child(5n-2) {
background: blue;
}
li:nth-child(5n) {
background: black;
}
I'm stuck with a problem. I need to print the page with the logo but the problem is that the logo is shown in the browser but in the print preview (CTRL P) the logo is not displayed.
For any guidance I would be very thankful.
This is the html code and css media print code
/* ## removed here since they are specific to ASP.NET MVC */
#media print {
#page {
size: A4 landscape;
max-height: 100%;
max-width: 100%;
position: fixed;
}
.prints {
height: 19.2cm;
page-break-after: avoid;
border: black 1px solid;
}
.row {
page-break-after: avoid;
}
}
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on July 30, 2018 */
label {
font: c
}
<table align="center" style="padding-left:10px;">
<tbody>
<tr>
<td colspan="3">
<h4 style="text-align:center;padding-left:25px; font-family:Calibri"><b> CHALLAN FORM </b></h4>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div>
<label style="padding-left:10px;width:145px;">
<span style="line-height:1; width: 135px; font-size:26px; font-family:'Chursaechsische Fraktur';"><strong>Baitul Huda</strong></span>
<span style="line-height:1;border:0px; width:100px; font-size:12px; font-family:'Adobe Devanagari';">High School For Girls</span>
</label>
</div>
</td>
<td rowspan="2" style="width:30px;padding-right:0px; padding-left: 10px;">
<img src="~/images/nku_02.png" height="70" width="70" alt="Bail ul huda logo" />
</td>
<td style="padding-left:10px;">
<div style="padding-left:5px;">
<label style="width:120px;padding-top:0px;padding-bottom:0px;">
<span style="line-height:0; width: 160px; font-size:26px; font-family:'UL Sajid Heading';">بیت الھدیٰ</span>
<span style="line-height:1; width:100px;padding-left:10px; font-size:16px; font-family:'Al Qalam Quran 2A';"> ھایئ سکول فارگرلز</span>
</label>
</div>
</td>
</tr>
</tbody>
</table>
I Found the solution
Img is not coming in print view because there is a missing of a div
<td rowspan="2">
<div style="padding-left:10px;width:80px;height:50px">
<img src="/images/offical_Logo_Baitul_Huda.jpeg" class="img-responsive" style="height:50px ; width:100px" alt="">
</div>
</td>
As i add the div the logo start displayed in print view
I'm trying to find a solution to laying out forms in our app (ported from Silverlight). We like labels to up, are trying to do this without tables, but there's a fundamental problem that tables solve I'm not sure how to address any other way.
Here is an example (plnkr):
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 1.1rem;
border-bottom: 1px solid #ccc;
}
td {
vertical-align: top;
padding-bottom: 0.5rem;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan='2'><h1>This is a header that should span columns.</h1></td>
</tr>
<tr>
<td>
label:
<div>(This label is extra</div>
<div>tall because of these</div>
<div> extra lines.)</div>
</td>
<td><input placeholder='search for stuff'></td>
</tr>
<tr>
<td>this is the longest label:</td>
<td><input placeholder='search for stuff'>
<div>This content is extra tall.</div>
</td>
</tr>
<tr>
<td>longer label:</td>
<td><input placeholder='search for stuff'></td>
</tr>
<tr>
<td colspan='2' class='my-header-style'><h1>This is a header that should span columns.</h1></td>
</tr>
<tr>
<td>long label:</td>
<td><input placeholder='search for stuff'></td>
</tr>
<tr>
<td>another label:</td>
<td>
<div>This content is extra tall.</div>
<div>This content is extra tall.</div>
<div>This content is extra tall.</div>
</td>
</tr>
<tr>
<td>short label:</td>
<td><input placeholder='search for stuff'></td>
</tr>
</table>
</body>
</html>
We have two groups of "label: input" lists, each with their own headings. The leftmost-column adjusts to the width of the widest label in either group, and simultaneously each row also adjust to the height of the tallest element.
How do I achieve this same behavior without tables? When people are talking about "tableless" layout, is that only for things that don't care about content size for their layout?
EDIT:
Uh, sorry. You actually can do more than two elements per line, but (as usual with float: right) you have to put them in reverse order.
If you must not use a table: Add a div for each row and put a invisible horizontal rule between them to keep them from piling onto each other. Also: a float: left to the labels and a float: right to the input boxes. It works, but I would not know how to make a line with three or more elements, like: Born on: Month/Day/Year, work.
Anyway, here is how you can do it.
<!DOCTYPE=html>
<html>
<style>
* {
margin: 0;
padding: 0;
}
body {
float: left;
}
hr {
clear: both;
border: none;
}
p{
float: left;
}
form {
float: right;
}
</style>
<body>
<div id = "row_1">
<p>looooooooooooo <br /> ooooooooooooo <br /> ooong label: </p>
<form><input type="text" placeholder="Second" /></form>
</div>
<hr />
<div id = "row_2">
<p>short</p>
<form><input type="text" placeholder="First" /></form>
</div>
</body>
</html>
Well, I've got a really annoying problem: my table columns keep getting cut off at lower resolutions, particularly # 800 x 600.
Here's an example of how it should look like (1920 x 1080):
And here's how it looks # 800x600:
EDIT:
html:
<div class="tablewrapper">
<div class="center2">
<div class="component">
<table>
<tr>
<c:forEach items="${nombreColumnas}" var="columnas" >
<th><c:out value="${columnas}"/></th>
</c:forEach>
</tr>
<c:forEach items="${suscripciones}" var="item" >
<tr>
<td><c:out value="${item.idSuscripcion}"/></td>
<td><c:out value="${item.nombreCompleto}"/></td>
<td><c:out value="${item.fechaUltimoPago}"/></td>
<td><a href="">
<button type="button" class="button-table"><i class="fa fa-plus-circle"></i> Asignar apadrinado</button></a></td>
</tr>
</c:forEach>
</table>
</div>
</div>
css:
.tablewrapper {
display: inline-block;
position: relative;
margin-left: 10%;
width:80%;
max-width: 80%; }
.center2 {
display: inline-block;
position: relative;
margin-right: 100px;
width:100%;
max-width: 100%;}
What could it be?
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to align a <div> to the middle of the page
I need is to show the content of a web page in the middle of the screen, no matter what screen size it is, big or small, resolution high or low, it always gets automatically adjusted to the middle of screen.
I'm guessing you want to center the box both vertically and horizontally, regardless of browser window size. Since you have a fixed width and height for the box, this should work:
Markup:
<div></div>
CSS:
div {
height: 200px;
width: 400px;
background: black;
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -200px;
}
The div should remain in the center of the screen even if you resize the browser. Just replace the margin-top and margin-left with half of the height and width of your table.
Edit: Credit goes to CSS-Tricks, where I got the original idea.
Solution for the code you posted:
.center{
position:absolute;
width:780px;
height:650px;
left:50%;
top:50%;
margin-left:-390px;
margin-top:-325px;
}
<table class="center" width="780" border="0" align="center" cellspacing="2" bordercolor="#000000" bgcolor="#FFCC66">
<tr>
<td>
<table width="100%" border="0">
<tr>
<td>
<table width="100%" border="0">
<tr>
<td width="150"><img src="images/banners/BAX Company.jpg" width="149" height="130" /></td>
<td width="150"><img src="images/banners/BAX Location.jpg" width="149" height="130" /></td>
<td width="300"><img src="images/banners/Closet.jpg" width="300" height="130" /></td>
<td width="150"><img src="images/banners/BAX Company.jpg" width="149" height="130" /></td>
<td width="150"><img src="images/banners/BAX Location.jpg" width="149" height="130" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0">
<tr>
<td width="150"><img src="images/banners/BAX Company.jpg" width="149" height="130" /></td>
<td width="150"><img src="images/banners/BAX Location.jpg" width="149" height="130" /></td>
<td width="300"><img src="images/banners/Closet.jpg" width="300" height="130" /></td>
<td width="150"><img src="images/banners/BAX Company.jpg" width="149" height="130" /></td>
<td width="150"><img src="images/banners/BAX Location.jpg" width="149" height="130" /></td>
</tr>
</table>
</td>
</tr>
</table>
--
How this works?
Example: http://jsfiddle.net/953Yj/
<div class="center">
Lorem ipsum
</div>
.center{
position:absolute;
height: X px;
width: Y px;
left:50%;
top:50%;
margin-top:- X/2 px;
margin-left:- Y/2 px;
}
X would your your height.
Y would be your width.
To position the div vertically and horizontally, divide X and Y by 2.
If you want to center the content horizontally and vertically, but don't know in prior how high your page will be, you have to you use JavaScript.
HTML:
<body>
<div id="content">...</div>
</body>
CSS:
#content {
max-width: 1000px;
margin: auto;
left: 1%;
right: 1%;
position: absolute;
}
JavaScript (using jQuery):
$(function() {
$(window).on('resize', function resize() {
$(window).off('resize', resize);
setTimeout(function () {
var content = $('#content');
var top = (window.innerHeight - content.height()) / 2;
content.css('top', Math.max(0, top) + 'px');
$(window).on('resize', resize);
}, 50);
}).resize();
});
Demo: http://jsfiddle.net/nBzcb/
HTML
<!DOCTYPE html>
<html>
<head>
<title>Center</title>
</head>
<body>
<div id="main_body">
some text
</div>
</body>
</html>
CSS
body
{
width: 100%;
Height: 100%;
}
#main_body
{
background: #ff3333;
width: 200px;
position: absolute;
}
JS ( jQuery )
$(function(){
var windowHeight = $(window).height();
var windowWidth = $(window).width();
var main = $("#main_body");
$("#main_body").css({ top: ((windowHeight / 2) - (main.height() / 2)) + "px",
left:((windowWidth / 2) - (main.width() / 2)) + "px" });
});
See example here