here is the css/html
<!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" />
<style>
#chatContainer {
position: fixed;
bottom: 20px;
right: 0;
vertical-align: bottom;
}
.chat {
border: 1px solid #999;
float: right;
margin: 0 5px;
height: 200px;
width: 250px;
vertical-align: bottom;
overflow: hidden;
bottom: 0px;
transition: 1s;
}
.title {
padding: 0.5em;
background-color: blue;
color: white;
}
.text {
padding: 10px;
overflow-y: scroll;
overflow-x: hidden;
height: 120px;
}
.inputText {
width: 100%
}
</style>
</head>
<body>
<div id="chatContainer">
<div class="chat" id="{id}">
<div class="title"> <span>{title}</span>
<div style="float:right">
<input class="minimize" name="" value="min" type="button">
</div>
</div>
<div class="text"> </div>
<div class="chatbox">
<input type="text" class="inputText" placeholder="enter text" />
</div>
</div>
<div class="chat" id="{id}" style="height:100px">
<div class="title"> <span>{title}</span>
<div style="float:right">
<input class="minimize" name="" value="min" type="button">
</div>
</div>
<div class="text"> </div>
<div class="chatbox">
<input type="text" class="inputText" placeholder="enter text" />
</div>
</div>
</div>
</body>
</html>
My problem is that I want the chatbox to be aligned on bottom
Here is now the bad result I got:
Any idea how to fix that ?
(I tried vertical-align with no success)
I have created the fiddle:
http://jsfiddle.net/uwmxT/
(click on min to see the bug)
Don't use float:right but display:inline-box on your chat boxes and vertical-align them to the bottom.
http://jsfiddle.net/willemvb/SfnrU/2/
.chat {
display: inline-block;
vertical-align: bottom;
}
Add width to following id of css :
#chatContainer {
bottom: 20px;
position: fixed;
right: 0;
vertical-align: bottom;
width: 265px; // added width
}
Demo : http://jsfiddle.net/7gEfL/1/
Its actually pretty simple i just made a fiddle which shows a fixed positioned chatbox
with a input area in the bottom of it
i made a innerholder to make sure it works in all browsers
See this fiddle to see the code
code:
<div class="chat">
<div class="innerchat">
<input type="text" class="textbox" placeholder="start chatting" />
</div>
</div>
.chat {
height: 300px;
width: 200px;
display: block;
border: 1px solid #000;
position:fixed;
top:20px;
left:20px;
}
.chat .innerchat {
position:relative;
height:100%;
width:100%;
}
.chat .innerchat .textbox {
position:absolute;
bottom:0;
left:0;
width:100%;
border:none;
background:#ccc;
color:#404040;
height:30px;
text-indent:6px;
}
enjoy
set the box css position to absolute and add to it basic positioning commands to css style
#id_chat{
position:absolute;
bottom:0;
right:250px; /*width of your very right chat box, + you can add e.g. 10px as margin*/
}
http://jsfiddle.net/ueE4b/1/
Related
Good day,
I am wondering if someone can have a look at this help me understand why the second tab button doesn't seem to work.
I am trying to make wrapper div, left side div with the label buttons and a right side div to display the content.
If I put the show/hide div on the left with the buttons then it displays and hides like it should but, when its in the div on the right the button does nothing.
#chk:checked~#tab1,
#chk2:checked~#tab2 {
display: none;
}
div.wrapper {
width: 100%;
background: black;
height: 300px;
}
div.forred {
width: 80%;
float: right;
}
div.left {
width: 20%;
float left;
}
div#tab1 {
background: red;
width: 100%;
text-align: center;
}
div#tab2 {
background: red;
width: 100%;
text-align: center;
}
div.right {
width: 80%;
float: right;
}
input.tabs {
display: none;
}
label.tab_button {
float: left;
padding: 15px 0px;
font-weight: 600;
text-align: center;
color: #FFFFFF;
border-bottom: 1px inset black;
background: #30E514;
width: 100%;
}
<div class="wrapper">
<div class="left">
<input type=checkbox id=chk class=tabs>
<label for=chk class=tab_button>tab 1</label>
<input type=checkbox id=chk2 class=tabs>
<label for=chk2 class=tab_button>tab 2</label>
<div id=tab1>
OVER HERE
</div>
</div>
<div class="right">
<div id=tab2>
OVER HERE
</div>
</div>
</div>
Your second "button" doesn't work because take a look at this part of your css :
#chk:checked ~ #tab1,
#chk2:checked ~ #tab2 { display:none; }
Here, you apply to the sibling of #chk:checked a display:none; It works for the first "button" because in your HTML you can see that #tab1 is a sibling of #chk:checked but, as you can already guess it, #chk2:checked is not a sibling of #tab2. So move up your div#tab2 just after div#tab1 and then it will works.
Also, I took some time to modify your code to put them at first invisible, then, visible if someone click on tab1 or tab2.
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Untitled 1</title>
<style>
div.wrapper {width: 100%; background: black; height: 300px;}
div.left {width: 20%; float left;}
input.tabs { display: none;}
label.tab_button {
float: left;
padding: 15px 0px;
font-weight: 600;
text-align: center;
color: #FFFFFF;
border-bottom: 1px inset black;
background: #30E514;
width: 100%;
}
#tab1, #tab2 {background: red; width: 100%; text-align: center;}
div.right { width: 80%; float: right;}
#tab1, #tab2 {display:none;}
#chk:checked ~ #tab1,
#chk2:checked ~ #tab2 { display:block; }
</style>
</head>
<body>
<div class="wrapper">
<div class="left">
<input type="checkbox" id="chk" class="tabs">
<label for="chk" class="tab_button">tab 1</label>
<input type="checkbox" id="chk2" class="tabs">
<label for="chk2" class="tab_button">tab 2</label>
<div id="tab1">
TAB 1 HERE
</div>
<div id="tab2">
TAB 2 HERE
</div>
</div>
<div class="right">
Right div
</div>
</div>
</body>
</html>
Hope this helps!
please help, i want this form dead center both vertical and horizontal so it looks like this http://www.creattor.com/files/14743/5515/futuristic-login-form-screenshots-1.jpg and so it is dynamical center hope you can help me.
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style>
body{
background-color:#33383E;
}
.login input{
width:150px;;
background-color:#1D1E22;
border: 0px solid;
padding:5px;
color:#33383E;
}
.login{
width:320px;
padding:20px;
background-color:#1D1E22;
border-radius:10px;
margin-top:33.3%
}
#user{
margin-bottom:-10px;
}
#pass{
margin-top:-10px;
margin-bottom:0px;
}
#login{
display: inline;
margin: 0;
}
hr{
border:2px solid;
background-color: #33383E;
}
#circle {
width: 100px;
height: 100px;
background: #33383E;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
float:right;
}
#mini-circle{
width: 70px;
height: 70px;
background: #1D1E22;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
border-radius: 40px;
margin-right:auto;
margin-left:auto;
margin-top:15px;
}
.ring{
margin-top:-125px;
margin-left: 200px;
}
</style>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-3">
<div class="form-group">
<div class="login">
<form id="login" method="post">
<input type="text" id="user" name="user" placeholder="Username" /><br />
<hr />
<input type="password" id="pass" name="pass" placeholder="Password" />
</form>
</div>
<div class="ring"><div id="circle"><div id="mini-circle"></div></div></div>
</div>
</div>
<div class="col-md-4"></div>
</div>
</div>
</body>
</html>
Codepen: http://codepen.io/anon/pen/rVjpJb
CSS for .form
display: inline-block
CSS for containing element (eg. div, body)
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
Also, Make sure that the document has 100% height
PS- Sorry I didn't use all the markup
You can achieve it with CSS tables too.
Here's the fiddle: http://jsfiddle.net/jf4nvk1n/ for the futuristic-login-form
And here's the fiddle for the fast explanation http://jsfiddle.net/1dcevxhm/
HTML:
<div class="table">
<div class="table-cell">
<p>Test</p>
</div>
</div>
CSS:
html, body, .table, .table-cell{
height: 100%;
width: 100%;
}
.table{
display: table;
}
.table-cell{
display: table-cell;
vertical-align: middle
}
p{
margin-right: auto;
margin-left: auto;
width: 20%;
text-align: center;
}
I referred CSS align that refers suggests to use auto margin for center align. I used it but it is not aligning on the center. I checked and verified that doctype is specified.
What is the missing point here?
Note: I am using relative positioning.
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.headerAlert
{
float:left;
width: 100%;
/*border: 1px solid blue;*/
display: inline;
}
.logoContainer
{
float:left;
width: 50px;
/*height:250px;*/
display: inline;
}
.vrContainer
{
float:right;
/*border: 2px solid yellow;*/
display: inline;
}
.underlineHeader
{
clear:both;
display: block;
height:10px;
width:100%;
float:left;
background-color:#632C5A;
}
.alert
{
padding:50px 0 0 0px;
/*border:1px solid red;*/
clear:both;
display: block;
}
.messageContainer
{
width:400px;
border: 1px solid red;
float: left;
display: block;
margin: auto;
align: center;
}
.message
{
padding:10px 0 0 0px;
clear:both;
display: block;
font-weight:bold;
font-size:20px;
color:#632C5A;
}
.options
{
padding:20px 0 0 0px;
font-size:14px;
}
</style>
</head>
<body>
<form name="_ctl0" method="post" action="RedirectAlert.aspx" id="_ctl0">
<input type="hidden" name="__VIEWSTATE" value="dDw5NjYas=" />
<div id="header" class="headerAlert">
<div id="mainLogo" class="logoContainer">
<IMG alt="My Inc" src="images/logo.png">
</div>
<div id="vcontainer" class="vrContainer">
<IMG alt="VIT" src="images/logo_v.jpg">
</div>
<div id="underline" class="underlineHeader">
</div>
</div>
<div class="alert">
<div class="messageContainer">
<div class="message">
AVC Lts
</div>
<div class="options">
If you still want to use
<input type="submit" name="btnContinue" value="Continue" id="btnContinue" />
</div>
</div>
</div>
</form>
</body>
</html>
The problem is
.messageContainer {
float: left;
align: center;
}
Just remove those lines: float: left prevents margin: auto centering, and align: center is invalid.
Demo
".messageContainer" has all kinds of problems.
You're floating it left, which is why its off to the left
'align:center' isn't a thing. Use 'margin: 0 auto" instead
.messageContainer { margin: 0 auto; }
`align: center;` in CSS doesn't exist.
it is : text-align: center; to center text inside
or margin:auto; for a block element that has a width and do not : float , or be in absolute or fixed position
I'm trying to remove the white strip above the "form-strip" div and also center it to the middle of the page (exactly below the image) with no success. Any suggestions?
(I also used a CSS reset style).
Thanks!
HTML:
<!DOCTYPE html>
<html lang="he">
<meta charset="UTF-8">
<head>
<title>Title</title>
<link href="Styles/Reset.css" rel="stylesheet" />
<link href="Styles/Base.css" rel="stylesheet" />
</head>
<body dir="rtl">
<header>
<div class="title">
<h1>text come here</h1>
<h2>text come here</h2>
</div>
</header>
<div class="img-strip" align="center">
<img src="img/picture.jpg" class="image" />
</div>
<div class="form-strip" align="center">
<h1>text come here</h1>
<form method="post" accept-charset="utf-8" action="">
<input type="text" class="form-control" id="name" placeholder="text come here">
<input type="text" class="form-control" id="name" placeholder="text come here">
<input type="text" class="form-control" id="email" placeholder="text come here">
<input type="text" class="form-phone" id="phone" placeholder="text come here">
<ul>
<li>052</li>
<li>054</li>
<li>057</li>
</ul>
<input type="submit" value="text come here">
</form>
</div>
<div class="footer">
<img src="img/logo.png" class="logo" />
<div class="address">
<h1>text come here</h1>
<h2>text come here</h2>
</div>
</div>
</body>
</html>
CSS - base.css:
body{
direction: rtl;
background-color: #FFFFFF;
}
.title h1 {
font-family:"FbSpoiler";
font-size:18px;
color:#1BABCD;
text-align:center;
font-weight:lighter;
margin-top: 25px;
}
.title h2 {
font-family:"FbSpoiler";
font-size:22px;
color:#1BABCD;
text-align:center;
font-weight:bold;
margin-top: 3px;
margin-bottom: 7px;
}
img.image {
max-width: 100%;
clear: both;
}
.form-strip {
padding-top: 10px;
background-color:#016a88;
height: 70px;
clear: both;
overflow: hidden;
max-width: 920px;
}
.form-strip h1 {
font-family:"FbSpoiler";
font-size:15px;
color:#ffffff;
font-weight:lighter;
margin-bottom: 7px;
}
.form-control {
width: 200px;
height: 25px;
margin-left: 4px;
}
.form-phone {
width: 150px;
height: 25px;
}
.footer {
padding-top: 10px;
padding-right: 700px;
background-color:#ffffff;
height: 100px;
clear: both;
overflow: hidden;
max-width: 920px;
}
.address h1 {
font-family:"FbSpoiler";
font-size:10px;
color:#737676;
text-align:right;
font-weight:lighter;
margin-top: 5px;
margin-bottom: 3px;
}
.address h2 {
font-size:15px;
color:#737676;
text-align:right;
font-weight:lighter;
margin-top: 3px;
margin-bottom: 7px;
}
Try making the image in the div above the form-strip div a block element to get rid of the gap.
div.img-strip img {
display: block;
}
I'm not sure what you're trying to center - the div.form-strip? If so add left/right margins of 'auto' to it:
div.form-strip {
margin: 0 auto;
}
div.form-strip {
margin-left: 0px;
margin-right: 0px;
}
I have a outer div which is working correctly in chrome, firefox but not in IE.. I have some contents inside outer div.. to make it center aligned or middle of page i gave this width:970px; height:630px; to outer div... so that i got the contents at the center in chrome and Mozilla... but in the case of IE 7.. in IE its left aligned..
here is my css....
<style type="text/css">
body, html
{
font-family:helvetica,arial,sans-serif;
font-size:90%;
}
div.outer
{
display: block;
margin-left: auto;
margin-right: auto;
width:970px;
height:630px;
position:relative;
}
</style>
here is my full code:
<head><title>home</title>
</head><body class='claro'><div class='outer' style="border:1px solid black;">
<div id="dottedBorderhome">
</div>
<div id="dragIconhome">
</div>
<div class="claro" id="menuDiv2" onclick="setWidgetproperty(this.id,'x','navMenu2');" onmousedown="setMenuBarProperty('navMenu2');" onmouseup="setDocStyle(this.id)" style="border: 1px dotted white; left: auto; position: absolute; top: 17px;">
<!-- here one menu bar will come -->
</div>
<div class="claro" id="divlabel43" onclick="setWidgetproperty(this.id,null,'divlabel43')" onmouseup="setDocStyle(this.id)" style="left: 50px; position: absolute; top: 92px; text-align: right; font-family: Times; font-size: 15pt; font-weight: bold;" >
<label id="label43" onclick="setLblProperty(this.id)" onmouseover="editName('divlabel43',this.id,'label')">
Worklist Manager
</label>
</div>
<div class="claro" id="htmlTableDiv9" onmouseup="setDocStyle(this.id)" style="left: auto; position: absolute; top: 130px; height:70px; width:150px;">
<!-- here its contains table -->
</div>
<div class="claro" id="divImage2" onclick="setWidgetproperty(this.id,'xy','image2')" onmouseup="setDocStyle(this.id)" style="left: auto; position: absolute; top: 70px;">
<img class="images" id="image2" name="Search-icon2.png" onclick="setImgProperty(this.id)" src="images/uploads/Search-icon2.png" style="height: 50px; width: 58px;">
</div>
<div class="claro" id="menuDiv1" onclick="setWidgetproperty(this.id,'x','navMenu1');" onmousedown="setMenuBarProperty('navMenu1');" onmouseup="setDocStyle(this.id)" style="border:1px dotted white; left: auto; position: absolute; top: 640px;">
<!-- here another menu bar -->
</div>
<div id="CWPWORKLIST__1" onclick="setWidgetproperty(this.id,'xy','inner__CWPWORKLIST__1')" ondblclick="editDataGridResponseMapping(this.id)" onmouseup="setDocStyle(this.id)" style="left:auto; position:absolute; top:340px; height: 296px; width: 921px;">
<!-- here another table-->
</div>
</div></body>
As Sven suggested, https://stackoverflow.com/questions/4742877/center-align-div-in-internet-explorer likely holds your answer. Either you've got non-valid HTML that is putting IE7 in quirks mode, or you're missing the doctype.
Try this
<style type="text/css">
body, html
{
font-family:helvetica,arial,sans-serif;
font-size:90%;
}
div.outer
{
display: block;
margin:0 auto;
width:970px;
height:630px;
position:relative;
}
</style>
Use code with proper doc type.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">