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
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 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.
I want to set the width and height of td tag , which have and tag inside. So , what I want to do is , no matter whatever the image size is , but it should be taken according to the width/height of td tag.
Example:
If image size is 200 * 100 and td tag's width and height is 100*50. then it should take 100 * 50 , according to the width and height of td tag.
<tr>
<td valign="top" align="center" id="animate" style="color: #FFFFFF;font-family: 'Montserrat', sans-serif; font-size:12px;font-weight:bold;line-height: 0px;letter-spacing:1px;text-align:center;text-transform:uppercase;" width="100" height="100"><img src="http://www.hubilo.com/eventApp/ws/images/event/logo/thumb/2712_1455295221.png" width="70" height="70" ></td>
</tr>
I can't use position property for the same.
try this.
display:block;
width:100%;
height:auto;
Give <img> width: 100% and height:auto
Enter a number in the box and it will set the <td> to that dimension, the <img> will conform.
SNIPPET
$('#in1').on('input', function() {
var dim = $(this).val();
$('#animate').height(dim).width(dim);
});
img { width: 100%; height:auto}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td valign="top" align="center" id="animate" style="color: #FFFFFF;font-family: 'Montserrat', sans-serif; font-size:12px;font-weight:bold;line-height: 0px;letter-spacing:1px;text-align:center;text-transform:uppercase;" width="50" height="50">
<img src='http://www.hubilo.com/eventApp/ws/images/event/logo/thumb/2712_1455295221.png'>
</td>
</tr>
</table>
<input id='in1'>
I am trying to pull in the text from the right, 'I am filling out this form as an individual' so it is fits on one line. There seems to be a 'block' preventing it from stretching out. Here is a jsfiddle http://jsfiddle.net/9M8FQ/ If I adjust the width of the label, it adjusts every field but I really want it far over to the left anyway. Here is a screenshot of how i am trying to get it http://www.magnetikmedia.co.uk/images/screen.jpg
Here is the code:
<div class="myclass active" id="right_box">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="0" colspan="2" valign="middle"><label class="desc" id="Name" for="Name">Before filling out the form, please select an option below: <span id="req_2" class="req" style="color:#82cff5;">*</span></label>
</td>
</tr>
<tr height="0">
<td width="30" height="0" align="left" valign="middle" style="padding-left:7px;"><input type="checkbox" id="individual" name="FilledInBy_Individual" value="Yes" onClick="unCheck(this.id);" <%=ind%> />
</td>
<td height="0" valign="middle" style="padding-left:7px;"><label for="option2">I am filling out this form as an Individual</label>
</td>
<tr height="0">
<td width="30" height="0" align="left" valign="middle" style="padding-left:7px;"> <input type="checkbox" id="agencyconsultant" name="FilledInBy_Agency" value="Yes" onClick="unCheck(this.id);" <%=agent%>/>
</td>
<td height="0" valign="middle" style="padding-left:7px;"><label for="option2">I am filling out this form as an Agency Consultant</label>
</td>
</tr>
<tr height="0">
<td width="30" height="0" align="left" valign="middle" style="padding-left:7px;"> <input type="checkbox" id="friendrelative" name="FilledInBy_FriendRelative" value="Yes" onClick="unCheck(this.id);" <%=friend%>/>
</td>
<td height="0" valign="middle" style="padding-left:7px;"><label for="option3">I am filling out this form as a friend or relative</label>
</td>
</tr>
<td height="0" colspan="2"><% if request.cookies("Filled_error") <> "" then %>
<div id="firstname_error" class="errorActive" style="position:relative;">Please select an appropriate option</div>
<% end if %>
</td height="0">
</table>
</div>
CSS
label {
clear: both;
float: left;
padding-right: 10px;
width: 240px;
}
input{
float: left;
width: 425px;
}
.myclass {
border-width: 2px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
color: #000000;
padding-left:10px;
padding-right:10px;
padding-top:10px;
padding-bottom:5px;
}
#right_box {
width: 700px;
float: left;
margin-left: 33px;
margin-bottom: 10px;
padding-top: 20px;
padding-right: 0px;
padding-left: 15px;
background-color:#eaeaea;
}
EDIT. Even adjusting the label width just pushes the text to the right on one line, it just won'\t move anymore left because of this 'wall'
It's because of the large input width which pushes the right text away.. but it doesn't seems so because of the center.
Here's a demo.
Put
input[type='checkbox'] {width:auto}
in the css. That will take care of the checkboxes. There's still the matter of the widths of the labels though...
Below is my code for my website. It works perfectly on firefox but not in chrome or safari. The only thing that doesn't work is the navigation row displays to the right of the header picture and the home button is the full length of the header picture. I think it has something to do with the display:inline in the css but I'm note sure.
<html>
<head>
<title>Workouts</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id = "page">
<table border="0" cellspacing="0" cellpadding="0" align="center" class="border" width = "50%" height ="100%">
<div id = "header">
<tr>
<td>
<img src =images/header_logo2.png />
</td>
</tr>
</div>
<tr class = "nav" height="30px" width="100%">
<td></td>
<td>Home</td>
<td>About</td>
<td>Workouts</td>
<td>Trainers</td>
<td>Contact</td>
<td></td>
</tr>
<tr class = "content" width="100%">
<td><img width="100%" src="images/content.png" /></td>
</tr>
</table>
</div>
</body>
</html>
This is my stylesheet
* {
margin-top:0;
padding-top:0;
padding-bottom: 0;
margin-bottom: 0;
}
body{
background:pink;
}
.border{
background-color: #c92f51;
}
.nav a{
text-decoration: none;
color:pink;
}
.nav a:hover{
color:gray;
}
.nav td{
display: inline-table;
width: 14.29%;
height="30px";
text-align: center;
font-size: 24px;
color:pink;
}
tr .content{
background:#c92f51;
}
.content td{
background:white;
padding: 30px 30px 30px 30px;
}
Invalid mark-up without DOCTYPE declaration. Check your code by copy/paste in w3c validator check the errors.
Every table row has to have the same number of columns. If you don't, you need a colspan attribute to make up for it.
Also you should not have <div> tags directly instead a table. How browsers handle these types of errors is not very consistent, so it's best to fix them. Try changing:
<table border="0" cellspacing="0" cellpadding="0" align="center" class="border" width = "50%" height ="100%">
<div id = "header">
<tr>
<td>
<img src =images/header_logo2.png />
</td>
</tr>
</div>
To
<table border="0" cellspacing="0" cellpadding="0" align="center" class="border" width = "50%" height ="100%">
<tr id = "header">
<td colspan="7">
<img src =images/header_logo2.png />
</td>
</tr>
And also add the same colspan on the last row:
<tr class = "content" width="100%">
<td colspan=7><img width="100%" src="images/content.png" /></td>
</tr>
More generally, using tables for layout like this is not good practice nowadays. If you search google for "css layouts vs tables" you can find out a lot more about it.
Use a validator. Your HTML is invalid and at least one of your errors causes significant differences in how different browsers error recover from it.
Some will move the <div> that is a child element of the <table> so it is outside the table (because it isn't allowed there).
You don't have any tabular data in there, so get rid of all the table markup and use something more appropriate (e.g. a list for your list of links and so on).