I know there should a mistake in my CSS but I can't figure out which one has caused of the footer be in front of the calendar.
The calendar is in the lab content div and the footer is outside of that div.
So far I've tried removing position:fixed for the footer; then it floats to the top of the page (with margin-top:auto; and without it)
I just want to figure out how to enable scrolling only my page.
body {
line-height: 1.5;
padding: 0;
margin: 0;
background-color: silver;
}
.imagebox {
width: 450px;
height: 350px;
display: flex;
float: left;
flex-basis: 75%;
}
.container {
width: 97%;
margin: auto;
}
.header {
background-color: white;
position: fixed;
top: 0;
left: 200px;
right: 0;
height: 150px;
color: black;
padding-top: 28px;
min-height: 70px;
border: 3px solid;
border: solid;
border-width: thin;
border-color: black;
display: flex;
flex: 0.5;
flex-wrap: wrap;
text-align: center;
padding: 5px;
padding-left: 250px;
padding-right: 250px;
}
.header1 {
flex: 1;
text-align: center;
float: left;
width: 50%;
background-color: white;
}
.header2 {
flex: 1;
text-align: center;
float: right;
width: 50%;
background-color: white;
}
.flex-container {
clear: both;
display: flex;
float: inherit;
}
h3 {
padding: 8px 16px;
}
ul {
list-style-type: none;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
.summary {
flex: 30%;
width: 50%;
font-size: 12px;
border-style: solid;
border-width: thin;
border-color: black;
order: 2;
background-color: white;
top: 150px;
float: left;
position: fixed;
bottom: 50px;
left: 200px;
right: 600px;
text-align: justify;
}
.biobox {
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
flex: 50%;
order: 3;
width: 50%;
text-align: left;
border-color: black;
border-width: thin;
border-style: solid;
font-size: 15px;
top: 150px;
left: 900px;
position: fixed;
background-color: white;
float: right;
bottom: 50px;
overflow-wrap: break-word;
}
.lab-content {
background-color: silver;
position: fixed;
margin-top: auto;
left: 200px;
bottom: 50px;
right: 0;
}
.footer {
background-color: white;
position: fixed;
bottom: 0;
left: 200px;
right: 0;
margin-top: auto;
text-align: center;
border: 3px solid;
border: solid;
border-width: thin;
border-color: black;
}
.summarybox {
position: fixed;
bottom: 50px;
left: 190px;
right: 600px;
margin-top: 30px;
text-align: justify;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
font-size: 12px;
}
.navtext h3 {
text-align: center;
padding: 8px 16px;
}
.cal {
text-align: left;
}
.cal h3 {
padding: 0 0;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Tony's Calendar
</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="newIt207.css" type="text/css"/>
<link rel="stylesheet" href="calendar.css" type="text/css"/>
</head>
<body>
<div class ="container">
<header>
<?php
include('header.php');
?>
</header>
<div class = "flex-container">
<?php
include('menu.ssi');
?>
<div class = "lab-content">
<div class ="input_option">
<form method = "post" action = "calender.php">
<input type = "text" name = "name" center>Student name
<input type = "text" name = "email" center>Email
<input type = "submit" value = "submit">
</div>
<?php
date_default_timezone_set("America/New_York");
$current_year = date("Y");
$current_month = date("m");
$daysinmonth = date("t");
$d = mktime(0,0,0, $current_month, 1, $current_year);
$day_of_week = date('w',$d);
$day_array= array("Sunday", "Monday", "Tuesday", "Wednesday","Thursday", "Friday", "Saturday");
$title = date('F');
$blank = 0;
switch ($day_of_week) {
case 0: $blank = 0; break;
case 1: $blank = 1; break;
case 2: $blank = 2; break;
case 3: $blank = 3; break;
case 4: $blank = 4; break;
case 5: $blank = 5; break;
case 6: $blank = 6; break;
}
echo "<h1><b>" .$title." ".$current_year."</h1></b>" ;
echo "<div class ='table'>";
echo "<div class='table_body'>";
echo "<div class='table_row'>";
foreach($day_array as $value)
{
echo "<div class ='table_header_cell'>".$value."</div>";
}
echo "</div> </div>";
$day_count = 1;
echo "<div class='table_body'>";
echo "<div class='table_row'>";
while ($blank > 0) {
echo "<div class='table_cell'></div>";
$blank = $blank-1;
$day_count++;
}
$day_num = 1;
while ($day_num <= $daysinmonth) {
echo "<div class='table_cell'>$day_num</div>";
$day_num++;
$day_count++;
if ($day_count > 7) {
echo "</div></div><div class='table_body'><div class='table_row'>";
$day_count = 1;
}
}
while ($day_count > 1 && $day_count <=7) {
echo "<div class='table_cell'></div>";
$day_count++;
}
echo "</div> </div>";
echo "</div>";
?>
</div>
<div>
<?php
include('footer.ssi');
?>
</div>
</div>
</div>
</body>
</html>
It's hard to tell without seeing your code but, try setting the z-index property in .lab-content and .footer. The z-index for the lab-content element should be higher than the footer element.
.lab-content {
z-index: 2;
}
.footer {
z-index: 1;
}
Here is some info on z-index: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
Here is the last part of your HTML.
<div>
<?php
include('footer.ssi');
?>
</div>
</div> <<----
</div>
</body>
</html>
The footer DIV seems to be inside the .flex-container. I have highlighted the offending /div with an arrow. If you move that above the footer DIV it should work and the footer should be actually at the foot of your page. Both the header and footer will still be inside your main container.
Related
I'm making a messaging app in Electron. I'm using backdrop-filter to blur the messages as they scroll past the title bar, so I need the messages to pass behind the title bar, rather than being contained inside their own div in the middle of the screen.
When the page is not scrolled, the messages behave as expected. However, at the bottom of the page, the messages are cut off by the bottom bar for entering messages.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Chat</title>
<link rel="stylesheet" href="css/chat.css" />
<script src="js/chatWindow.js"></script>
</head>
<body>
<div class="header">
<span class="name">Room Name</span>
</div>
<div class="messageBar">
<input id="messageBox" type="text" placeholder="Enter a message..." />
<div class="sendBtn">Send</div>
</div>
<div class="messageList"></div>
</body>
</html>
CSS
#font-face {
font-family: "Roboto Light";
font-style: "normal";
font-weight: 400;
src: url("fonts/Roboto-Light.ttf") format("truetype");
}
body {
background-color: white;
font-family: "Roboto Light";
padding: 45px 0px;
}
.header {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 45px;
z-index: 100;
background-color: rgba(56, 92, 254, 0.75);
display: flex;
text-align: center;
justify-content: center;
align-items: center;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
-webkit-app-region: drag;
}
.header span {
font-weight: bold;
}
.messageBar {
position: fixed;
top: calc(100% - 45px);
left: 0px;
width: 100%;
height: 45px;
z-index: 100;
background-color: rgba(57, 93, 255, 0.75);
padding: 0px;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
vertical-align: middle;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
#messageBox {
width: 90%;
height: 100%;
background-color: rgba(255,255,255,0.5);
font-size: 1em;
margin: none;
border: none;
padding: 0px 5px 0px 5px;
}
#messageBox::-webkit-input-placeholder {
color: dimgray;
}
.sendBtn {
float: right;
width: 10%;
height: 100%;
padding: 0px 3px;
line-height: 45px;
transition: 0.2s;
}
.sendBtn:hover {
background-color: rgba(0,0,0,0.25);
}
.messageList {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
.message {
display: block;
width: auto;
max-width: 50%;
border-radius: 10px;
padding: 4px;
margin: 5px 0px;
box-sizing: border-box;
background-color: lightblue;
overflow-wrap: break-word;
float: left;
clear: both;
}
.message.mine {
float: right;
background-color: lightgreen;
}
Does anybody know how to fix this issue? Here's a CodePen for an example of what's happening. Any help would be greatly appreciated!
Try this javascript code may this help you.
window.addEventListener("load", function(){
var messageList = document.querySelector(".messageList");
var messageBox = document.getElementById("messageBox")
var sendBtn = document.querySelector(".sendBtn");
for(var i = 0; i < 100; i++) {
var content = "Message body: " + i + "\nThe quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.";
createMessageBubble(content, Math.random() > 0.5);
}
sendBtn.onclick = function() {
var message = messageBox.value;
messageBox.value = "";
if(!message || message.length <= 0) {
return;
}
createMessageBubble(message, true);
// TODO: actually send the message
};
function createMessageBubble(content, isUser) {
var el = document.createElement("div");
el.classList.add("message");
if(isUser) {
el.classList.add("mine");
}
el.innerText = content;
messageList.appendChild(el);
}
var div = document.createElement("div");
div.style.width = "100%";
div.style.height = "45px";
div.style.float = "left";
messageList.parentNode.appendChild(div);
});
here is the link to the site ( http://pavilioncreative.com/ ) hit refresh if you don't see a fullscreen gif as the background.
Im trying to get the red box to be alway centre no matter what size the screen is at. The problem is that the side menu has a position of fixed so the main content div is stretching fully 100% across the screen, under the side menu.
I think I might be going about it all wrong ?
<html lang="en">
<head>
<title>FirstPage</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/reset.css" >
<link rel="stylesheet" href="css/text.css" >
<link rel="stylesheet" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Lora:400,700' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
</head>
<body>
<div class="wraper">
<ul>
<li class="menu" >
<div class="menu_tab_wrap">
<div class="menu_tab">
<div class="menu_off_wrap">
<div class="menu_off">
<div class="barOne"></div>
<div class="spacer"></div>
<div class="barTwo"></div>
<div class="spacer"></div>
<div class="barThree"></div>
</div>
</div>
</div>
</div>
<div class="menu_tab_wrap_on">
<div class="menu_tab_on">
<div class="menu_on_wrap">
<div class="menu_on">
<div class="cross"></div>
</div>
</div>
</div>
</div>
<div class="logo_wrap">
<div class="logo">
<img src="img/logo.svg">
</div>
</div>
</li>
<section id="menu_out">
<div class="menu_inner_wrap">
<div class="menu_list">
<ul class="menu_ul">
<li class="menu_li"> Home </li>
<span class="in_lable">Back to the home page</span>
<li class="menu_li"> About </li>
<span class="in_lable">Find out more about me</span>
<li class="menu_li"> Portfolio </li>
<span class="in_lable">Take a look at my past work</span>
<li class="menu_li"> Contact Me </li>
<span class="in_lable">Get in contact with me</span>
</ul>
</div>
</div>
</section>
<li class="content">
<div class="content_wrap">
<h1>test</h1>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function () {
var hoverIn = false; //You need this counter to detect whether animate occurs.
$(".menu_tab").hover(function() {
if (hoverIn)return; //if the hover is activated, it stops the function
//I also took the liberty to help you add stop to prevent multiple hover. Feel free to implement that else where
$(".barOne").stop(true, true).animate({
"bottom": "+=5px"
}, "fast");
$(".barThree").stop(true, true).animate({
"top": "+=5px"
}, "fast");
hoverIn = true;
}, function() {
if (!hoverIn)return; //if the hover is deactivated, it stops this function
$(".barOne").stop(true, true).animate({
"bottom": "-=5px"
}, 300);
$(".barThree").stop(true, true).animate({
"top": "-=5px"
}, 300);
hoverIn = false;
});
});
$(document).ready(function () {
if($(window).width() > 700) {
$(".menu_tab").click(function(){
$("#menu_out").animate({"width": "30em"}, "slow");
$(".menu_tab_wrap_on").stop().fadeIn();
$(".menu_list").stop().delay( 400 ).fadeIn('slow');
});
}else{
$(".menu_tab").click(function(){
$("#menu_out").animate({"width": "100%"}, "slow");
$(".menu_tab_wrap_on").stop().fadeIn();
$(".menu_list").stop().delay( 400 ).fadeIn('slow');
});
}
});
$(document).ready(function () {
$(".menu_tab_wrap_on").click(function(){
$(".menu_tab_wrap_on").stop().hide('fast');
$("#menu_out").animate({"width": "0em"}, "slow");
$(".menu_list").stop().hide();
});
});
</script>
</body>
</html>
html{
-webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape */
}
.wraper{
width: 100%;
margin: auto;
padding: 0;
}
.wraper ul{
width: 100%;
margin: 0 auto;
padding: 0;
}
.wraper ul li{
padding: 0;
margin: 0 auto;
display: inline-block;
}
.wraper ul .menu{
width: 7%;
min-width: 7em;
max-width: 7em;
background: black;
height: 100%;
position: fixed;
z-index: 20;
float: left;
}
.wraper ul .content{
background-color: blue;
width: 93%;
height: 70em;
float: right;
}
.wraper ul .content .content_wrap{
width: 80%;
margin: auto;
text-align: center;
border: red solid 1px;
}
.menu .menu_tab_wrap{
position: relative;
}
.menu .menu_tab{
width: 100%;
background-color: #232323;
height: 6em;
display: table;
position: absolute;
width: 100%;
cursor: pointer;
}
.menu .menu_tab .menu_off_wrap {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
.menu .menu_tab .menu_off_wrap .menu_off{
margin-left: auto;
margin-right: auto;
position: relative;
}
.menu .menu_tab .menu_off_wrap .menu_off .barOne,.barTwo,.barThree{
width: 3em;
padding: 2px;
background-color: white;
margin: auto;
position: relative;
}
.menu .menu_tab .menu_off_wrap .menu_off .spacer{
width: 5em;
height: 5px;
}
.menu .menu_tab_wrap_on{
position: relative;
display: none;
}
.menu .menu_tab_wrap_on .menu_tab_on{
width: 100%;
background-color: white;
height: 6em;
display: table;
position: absolute;
width: 100%;
cursor: pointer;
}
.menu .menu_tab_wrap_on .menu_tab_on .menu_on_wrap {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
.menu .menu_tab_on .menu_on_wrap .menu_on{
margin-left: auto;
margin-right: auto;
position: relative;
text-align: center;
}
.menu .menu_tab_on .menu_on_wrap .menu_on .cross{
width: 3em;
height: 3em;
color: #232323;
margin: auto;
position: relative;
}
.cross:before, .cross:after {
position: absolute;
content: ' ';
height: 3em;
width: 4px;
background-color: #333;
}
.cross:before {
transform: rotate(45deg);
}
.cross:after {
transform: rotate(-45deg);
}
.menu .logo_wrap{
width: 100%;
text-align: center;
}
.menu .logo_wrap .logo{
width: 7em;
margin: auto;
position:absolute;
bottom:0;
padding-bottom: 2em;
}
.menu .logo_wrap .logo img{
width: 70%;
height: auto;
}
#menu_out{
background-color: #232323;
height: 100%;
width: 0em;
position: fixed;
z-index: -1;
overflow-y:scroll;
overflow-x:hidden;
border-right: 0.5em black solid;
z-index: 10;
}
#menu_out .menu_inner_wrap{
position: relative;
}
#menu_out .menu_list{
width: 70%;
height: auto;
margin: auto;
padding-top: 5em;
padding-bottom: 0em;
display: none;
position: relative;
}
#menu_out .menu_list .menu_ul{
padding: 0;
margin: 0 auto;
width: 100%;
padding-left: 4em;
padding-bottom: 2em;
}
#menu_out .menu_list .menu_ul .menu_li{
display: block;
padding: 0;
margin: 0 auto;
}
#menu_out .menu_list .menu_ul .menu_li a{
font-size: 40px;
color: white;
text-decoration: none;
font-family: 'Lora', serif;
font-weight: 700;
opacity: 0.8;
}
#menu_out .menu_list .menu_ul .menu_li a:hover{
opacity: 1;
}
#menu_out .menu_list .menu_ul .in_lable{
font-size: 15px;
color: #80E577;
font-weight: 100;
font-family: 'Open Sans', sans-serif;
position: relative;
bottom: 10px;;
}
#menu_out .menu_inner_wrap .footer{
width: 100%;
margin: auto;
position:absolute;
bottom:0;
height: 10em;
}
#media only screen and (max-width: 800px) {
.wraper ul .content{
background-color: blue;
width: 90%;
height: 70em;
float: right;
}
}
#media only screen and (max-width: 700px) {
.wraper ul .content{
background-color: blue;
width: 100%;
height: 70em;
float: none;
}
.wraper ul .menu{
width: 100%;
min-width: none;
max-width: none;
height: 5em;
}
.menu .menu_tab{
height: 100%;
display: table;
position: absolute;
width: 6em;
cursor: pointer;
right: 0;
}
.menu .logo_wrap{
width: 100%;
text-align: center;
}
.menu .logo_wrap .logo{
width: 7em;
margin: auto;
position:absolute;
bottom:0;
padding-top: 1em;
padding-bottom: 1em;
}
.menu .menu_tab_wrap_on .menu_tab_on{
width: 6em;
height: 100%;
right: 0;
}
#menu_out .menu_list{
width: 100%;
height: auto;
margin: auto;
padding-top: 8em;
text-align: center;
}
#menu_out .menu_list .menu_ul{
padding: 0;
margin: 0 auto;
width: 100%;
padding-left: 0em;
text-align: center;
}
#menu_out .menu_list .menu_ul .menu_li a{
font-size: 35px;
color: white;
text-decoration: none;
font-family: 'Lora', serif;
font-weight: 700;
}
#menu_out .menu_list .menu_ul .menu_li a .in_lable{
font-size: 10px;
color: #80E577;
font-family: 'Open Sans', sans-serif;
font-weight: 100;
}
#menu_out{
width: 0;
border-right: none;
}
}
Looking at your CSS, I see this:
#content_wrap .content {
max-width: 1050px;
width: 80%;
margin: auto;
height: 700em;
border: red solid 1px;
margin-right: 7%;
margin-left: 13%;
}
If you remove margin left and margin right, does it accomplish what you're after?
Example:
#content_wrap .content {
max-width: 1050px;
width: 80%;
margin: auto;
height: 700em;
border: red solid 1px;
}
(When you remove margin-left and margin-right, margin: auto will then apply auto to margin top, right, bottom, and left.)
UPDATE 2/25/2016:
After following the steps above, you're most of the way there. However, if you want the content to change it's position (or re-center itself) as the menu expands out from the left side, it'll require a little more CSS and some JavaScript to add and remove a class. Note: The above CSS changes are necessary for this to work.
#content_wrap{
//This should be the exact same with as the menu when it's not expanded out
padding-left: 7em;
//Set this to the same amount of time it takes for the menu to expand
//This will animate the effect using CSS
transition: 0.5s;
}
#content_wrap.menu_showing {
//This should be the exact same with as the menu when it's expanded out
padding-left: 30em
}
Now just toggle that class on and off with JavaScript as you click the "Expand Menu" icon. Here's an example using jQuery:
$(".menu_tab").click(function(){
$("#content_wrap").toggleClass("menu_showing");
});
I have a problem in my HTML code I want to center something that is inside a division that is inside a division. I am not really sure how. This is my code:
HTML CODE(ACTUALLY A PHP FILE):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mateo.css">
<title>Mateo's About Page</title>
</head>
<body>
<div class="items">
<div id="basicInfo">
<img src="images/question.png">
</div>
<div id="langs">
<img src="images/code.jpg">
</div>
</div>
<div id="textSpace">
</div>
<?php
$username = $_POST['username'];
$password = $_POST['password'];
$accounts = mysqli_connect("localhost","root","BKpH7e6k","accounts") or die(mysqli_error());
mysqli_select_db($accounts, "accounts");
$sql = "
SELECT * from users WHERE Username LIKE '{$username}' AND Password LIKE '{$password}' LIMIT 1
";
$results = $accounts->query($sql);
if(!$results->num_rows == 1){
header("Location: http://localhost/aboutPage/login.php");
} else {
echo "<p>Logged in successfully!</p>";
}
?>
</body>
</html>
And this is my css file:
body {
background: url("images/background.jpg") repeat;
font-size: 100%;
font-family: Arial;
}
.items {
display: block;
background-color: gray;
max-width: 50%;
max-height: 100%;
border-radius: 20px;
border: 2px solid black;
opacity: .8;
margin-left: auto;
margin-right: auto;
}
#basicInfo{
background-color: orange;
width: 100px;
height: 100px;
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
}
#basicInfo:hover{
background-color: green;
}
#basicInfo img{
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 16px;
}
#langs{
background-color: orange;
width: 100px;
height: 100px;
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
}
#langs img{
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 16px;
}
#langs:hover{
background-color: green;
}
And this is a picture or the problem.
So I want the orange boxes to float next to each other in the center of the div they are in. Any help is appriciated :) Thanks1
Since you're using display: inline-block on #basicInfo and #langs just call text-align: center on the parent .items:
.items {
display: block;
background-color: gray;
max-width: 50%;
max-height: 100%;
border-radius: 20px;
border: 2px solid black;
opacity: .8;
margin-left: auto;
margin-right: auto;
text-align: center; //add
}
FIDDLE
add text-align: center to your .items class (http://jsfiddle.net/cz19q7a9/)
.items
{
text-align: center;
}
Just do margin: auto on the inside div, it will center according to it's parent. Here is an example.
I am new to backbone...
I would like to increase the size of circle...
can you guys tell me how to double the size of circle...
providing my code below...
and even i wanted it to rotate slowly..and how to enter text inside the circle...
.box {
border-radius: 300px;
width: 20px; height: 10px;
padding: 5px 0;
color: #fff;
font: 10px/10px Arial;
text-align: center;
position: absolute;
}
To change the circle diameter, you change the CSS, e.g.
.box-view {
width: 60px; height: 60px;
float: left;
position: relative;
margin: 8px;
}
.box {
border-radius: 300px;
width: 40px; height: 30px;
padding: 5px 0;
color: #fff;
font: 10px/10px Arial;
text-align: center;
position: absolute;
}
To change the text displayed, you change the template:
<script type="x-template" id="underscore-template">
<div class="box" id="box-<%= number %>" style="top: <%= top %>px; left: <%= left %>px; background: rgb(0,0,<%= color %>);">
Count : <%= content %>
</div>
</script>
Finally, to make them move slower, you delay the call to the animation function:
var backboneAnimate = function() {
for (var i = 0, l = boxes.length; i < l; i++) {
boxes[i].tick();
}
window.timeout = _.delay(_.defer, 50, backboneAnimate);
};
And the result: http://jsfiddle.net/Fr94w/
Try this one:
.box-view {
width: 40px; height: 40px;
float: left;
position: relative;
margin: 2px;
}
.box {
border-radius: 50%;
width: 40px; height: 40px;
color: #fff;
font: 10px/40px Arial;
text-align: center;
position: absolute;
}
http://jsfiddle.net/9sc4Q/
I need your help,
How can the text be vertically centered in my custom alert box.
I thought that by having the existing css properties of:
#alertBox_text {
width: 100%;
height: auto;
text-align: center;
margin-top: 10px;
}
That it would automatically appear to be centered.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
/*--------------------------------------------------------------------------------------------------
CUSTOM ALERT BOX
--------------------------------------------------------------------------------------------------*/
#alertBox_container {
left: 50%;
padding: 10px;
top: 50%;
margin: 0;
padding: 0;
height: 100%;
border: 1px solid #808080;
position: relative;
color: rgb(11,63,113);
font-family: Arial;
background: #FFF;
visibility: hidden;
}
#alertBox {
height: 100px;
width: 400px;
bottom: 50%;
right: 50%;
position: absolute;
font-size: 9pt;
}
#alertBox_titlebar {
line-height:24px;
width: 100%;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#cdcdcd");
font-weight: bold;
}
.alertBox_Button {
color: #464646;
border: 1px solid;
border-color: #999 #666 #666 #999;
background-color:#ccc;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#E7E7E7');
}
.alertBox_Button:hover {
background-color: #ddd;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
color: #000000;
}
#alertBox_close {
line-height: 10px;
width: 18px;
font-size: 8pt;
font-weight: bold;
margin-top: 2px;
margin-right: 2px;
padding-top: 2px;
position:absolute;
top:0;
right:0;
}
#alertBox_text {
width: 100%;
height: auto;
text-align: center;
margin-top: 10px;
}
</style>
<script type="text/javascript">
/*--------------------------------------------------------------------------------------------------
CUSTOM ALERT BOX
--------------------------------------------------------------------------------------------------*/
function alertBox(text, type) {
if (type == "err") {
document.getElementById('alertBox_text').style.color = "#FF0000"
document.getElementById('alertBox_div_btn_OK').innerHTML = "<input class='alertBox_Button' id='alertBox_btn_OK' type='button' value='OK' onclick='alertBox_hide()'>"
}
else if (type == "sucess") {
document.getElementById('alertBox_text').style.color = "#008000"
document.getElementById('alertBox_div_btn_OK').innerHTML = "<input class='alertBox_Button' id='alertBox_btn_OK' type='button' value='OK' onclick='alertBox_hide()'>"
}
else if (type == "ok") {
document.getElementById('alertBox_div_btn_OK').innerHTML = "<input class='alertBox_Button' id='alertBox_btn_OK' type='button' value='OK' onclick='alertBox_hide()'>"
}
document.getElementById('alertBox_text').innerHTML = text
document.getElementById('alertBox_container').style.visibility = 'visible'
}
function alertBox_hide() {
document.getElementById('alertBox_container').style.visibility = 'hidden'
}
</script>
</head>
<body onload="alertBox('testing the system')">
<div id="alertBox">
<div id="alertBox_container">
<div id="alertBox_titlebar"><span style="padding-left: 3px;">IMTS</span></div>
<div><input class="alertBox_Button" id="alertBox_close" type="button" value="X" onclick="alertBox_hide()"></div>
<div id="alertBox_text"></div>
</div>
</div>
</div>
</body>
</html>
Text-align only applies to horizontal alignment.
If you wish to vertically align text and you know your container's height, you can use the line-height property to vertically align single-line text by setting it equal to the height.
Alternatively, use one of the techniques documented here: http://css-tricks.com/centering-in-the-unknown/