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!
Related
I have created following html form.
#import url('https://fonts.googleapis.com/css?family=Roboto');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
font-family: 'Roboto', sans-serif;
}
body{
background: url('bg.jpg') no-repeat top center;
background-size: cover;
height: 100vh;
}
.wrapper{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
max-width: 550px;
/* #background: rgba(0,0,0,0.8);*/
background:rgb(233, 227, 227);
padding: 30px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.wrapper .title h1{
color: #c5ecfd;
text-align: center;
margin-bottom: 25px;
}
.contact-form{
display: flex;
}
.input-fields{
display: flex;
flex-direction: column;
margin-right: 4%;
}
.input-fields,
.msg{
width: 48%;
}
.input-fields .input,
.msg textarea{
margin: 10px 0;
border: 0px;
/*#border: 2px solid #c5ecfd;*/
border: 1px solid gray;
padding: 10px;
color: black;
width: 100%;
}
.msg textarea{
height: 212px;
}
::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #c5ecfd;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #c5ecfd;
}
:-ms-input-placeholder {
/* IE 10+ */
color: #c5ecfd;
}
.btn {
background: #39b7dd;
text-align: center;
padding: 15px;
border-radius: 5px;
color: #fff;
cursor: pointer;
text-transform: uppercase;
width: 100%;
}
input[type=submit] {padding:15px; background:#ccc; border:0 none;
display: block;
cursor:pointer;
background: #39b7dd;
text-align: center;
border-radius: 5px;
color: #fff;
text-transform: uppercase; }
input[type=file] {
padding-top:15px;
padding-bottom:15px;
/*#display: block;*/
color: black;
width: 100%;
}
input[type=radio] {
padding-top:15px;
padding-bottom:15px;
/*#display: block;*/
float:left;
position:inline;
color: black;
padding-right:15px;
}
.radioOpContainer
{
/*position:inline;*/
padding-top:15px;
padding-bottom:15px;
}
.radioOpContainer input{
/*#padding-right:15px;*/
margin-right:20px;
}
#media screen and (max-width: 600px){
.contact-form{
flex-direction: column;
}
.msg textarea{
height: 80px;
}
.input-fields,
.msg{
width: 100%;
}
}
/*
#fileuploaddiv
{
padding-top:5px;
}
*/
.label
{
padding-top:20px;
font-size: 15px;
}
.error
{
/*font-family: 'Open Sans Regular';*/
font-family: "Helvetica Neue",Roboto,Arial,sans-serif;
/*font-size: 1em;*/
font-size: 14px;
line-height: 1em;
color: #c0392b;
}
/* ---------------------- */
.table_row
{
padding-top:10px;
}
.cell_wrapper
{
background-color: white;
}
.cell
{
display:inline-block;
/*float: left;
width: 50%; */
/*outline: 1px dashed black; */
/*margin-bottom: 20px;*/
word-break:break-all;
font-family: Monospace;
width: 49%;
}
.resultcell
{
display:inline-block;
/*float: left;
width: 50%; */
/*outline: 1px dashed black; */
/*margin-bottom: 20px;*/
word-break:break-all;
font-family: Monospace;
width: 49%;
}
#media only screen and (max-width: 600px) {
.cell, .resultcell
{
background-color: lightblue;
width: 100%;
}
}
.red{
color: red;
}
.magenta{
color: magenta;
}
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Responsive Contact us form Using HTML and CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<div class="title">
<h1>contact us form</h1>
</div>
<form th:action="#{/}" th:object="${messageForm}" method="post" enctype="multipart/form-data" id="MqMessageSenderForm">
<div class="contact-form">
<div class="input-fields">
<div class="label"><p>Queue manager Name: </p></div>
<select id="recievedQMname" class="input" th:field="*{recievedQMname}"><option selected="selected" value=""/></select>
<div class="error" th:if="${#fields.hasErrors('recievedQMname')}" th:errors="*{recievedQMname}"></div>
<div class="label"><p>Destination queue Name</p></div>
<input type="text" class="input" th:field="*{recievedQname}" id="recievedQname">
<div class="error" th:if="${#fields.hasErrors('recievedQname')}" th:errors="*{recievedQname}"></div>
<div class="label"><p> Select an input method </p></div>
<div class="radioOpContainer"><input type="radio" name="msginputoption" id="fileradio" checked="checked" > <label for="fileradio">File</label></div>
<div class="radioOpContainer"><input type="radio" name="msginputoption" id="messagetextradio" > <label for="messagetextradio">Message text</label></div>
</div>
<div class="msg">
<div class="label">Upload files </div>
<input type="file" th:field="*{files}" multiple accept=".txt,.xml" id="files" >
<div class="error" th:if="${fileUploadValidationResult != null}" th:text="'' + ${fileUploadValidationResult} + ''"></div>
<textarea class="input" th:field="*{msgText}" id="msgText" disabled="disabled" ></textarea>
<div class="error" th:if="${textMsgValidationResult != null}" th:text="'' + ${textMsgValidationResult} + ''"></div>
<input class="btn" type="submit">
</div>
</div>
</form>
<div class="table" th:if="${result != null}">
<div class="table_row" th:each="mapEntry : ${result}">
<div class="cell_wrapper">
<div class="cell" th:text="${mapEntry.key}" >key</div> <div class="resultcell" th:text="${mapEntry.value}">value</div>
</div>
</div>
</div>
<div class="table" th:if="${UImessageSentresult != null}">
<div class="table_row">
<div class="cell_wrapper">
<div class="resultcell" style="width: 100%;" th:text="${UImessageSentresult}" >UImessageSentresult</div>
</div>
</div>
</div>
</div>
</body>
</html>
when messages sent status results are being added to the bottom of the page, portion from the top is disappearing from the browser( not even able to scroll to the top -I have attached an image as well) I have added the code into jsfiddle https://jsfiddle.net/lmatrix47/nux3h1cd/1/
I'm not a UI expert, Can someone point out the where the problem is
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Responsive Contact us form Using HTML and CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<div class="title">
<h1>contact us form</h1>
</div>
<form th:action="#{/}" th:object="${messageForm}" method="post" enctype="multipart/form-data" id="MqMessageSenderForm">
<div class="contact-form">
<div class="input-fields">
<div class="label"><p>Queue manager Name: </p></div>
<select id="recievedQMname" class="input" th:field="*{recievedQMname}"><option selected="selected" value=""/></select>
<div class="error" th:if="${#fields.hasErrors('recievedQMname')}" th:errors="*{recievedQMname}"></div>
<div class="label"><p>Destination queue Name</p></div>
<input type="text" class="input" th:field="*{recievedQname}" id="recievedQname">
<div class="error" th:if="${#fields.hasErrors('recievedQname')}" th:errors="*{recievedQname}"></div>
<div class="label"><p> Select an input method </p></div>
<div class="radioOpContainer"><input type="radio" name="msginputoption" id="fileradio" checked="checked" > <label for="fileradio">File</label></div>
<div class="radioOpContainer"><input type="radio" name="msginputoption" id="messagetextradio" > <label for="messagetextradio">Message text</label></div>
</div>
<div class="msg">
<div class="label">Upload files </div>
<input type="file" th:field="*{files}" multiple accept=".txt,.xml" id="files" >
<div class="error" th:if="${fileUploadValidationResult != null}" th:text="'' + ${fileUploadValidationResult} + ''"></div>
<textarea class="input" th:field="*{msgText}" id="msgText" disabled="disabled" ></textarea>
<div class="error" th:if="${textMsgValidationResult != null}" th:text="'' + ${textMsgValidationResult} + ''"></div>
<input class="btn" type="submit">
</div>
</div>
</form>
<div class="table" th:if="${result != null}">
<div class="table_row" th:each="mapEntry : ${result}">
<div class="cell_wrapper">
<div class="cell" th:text="${mapEntry.key}" >key</div> <div class="resultcell" th:text="${mapEntry.value}">value</div>
</div>
</div>
</div>
<div class="table" th:if="${UImessageSentresult != null}">
<div class="table_row">
<div class="cell_wrapper">
<div class="resultcell" style="width: 100%;" th:text="${UImessageSentresult}" >UImessageSentresult</div>
</div>
</div>
</div>
</div>
</body>
</html>
wrapper div is given as absolute. when comparing to parent element height is less that's the reason for hiding the content you can
either change .wrapper to relative instead of absolute
or you can add scroll for wrapper.
Try the below code
.wrapper {
position: relative;
top: auto;
left: auto;
transform: initial;
}
So I am making a website for class, Ive got one more page to make and its the login page. The thing is, it seems I cant move forms and things in forms around like I can with text boxes. what I want to do is sort of like the steam login page which I will link here. Basically I want box in the middle of the page with a text box for username and password on the left side of the box, then I want a thin line going down the middle of the box separating the two halves and on the right side I want three boxes one for the username and two for the password. The thing is I cant seem to move what I have to the left side of the box yet. https://store.steampowered.com/login/ thats the steam login site itll give you an idea of what i want to do.
Here is what I have so far, I just want to move the grey box down a bit and then put the form that i have now on the left side of the box and write a new form on the right side of the box with a dividing line in the middle.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Portal 2 Launch site</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<h1> <img src="logo.png" class="center"><h1>
</head>
<body>
<!-- The navigation menu -->
<div class="navbar" style="width 100%">
Home
About
Media
<div class="subnav" style="width:20%">
<button class="subnavbtn" style="width: 100%">OtherGames</button>
<div class="subnav-content">
Half Life
Team Fortress 2
Counter strike: Global Offensive
</div>
</div>
Account
</div>
<center>
<div class="container">
forgot password?
<form>
<div class="input-wrap">
<label>Username:</label><br>
<input type="text">
</div>
<div class="input-wrap">
<label>Password:</label><br>
<input type="password">
</div>
</form>
<button class="submit" type="submit" form="form1" value="Submit">Submit</button
</div>
<center>
</body>
</html>
body {
background-color: black;
color: black;
opacity: 300;
}
.container {
display: flex;
flex-direction: column;
background: gray;
border: 10px black;
margin:0;
width: 420px;
padding: 20px
}
.container1 {
display: flex;
flex-direction: column;
background: gray;
border: 10px black;
margin:0;
width: 620px;
padding: 20px
}
.input-wrap1 {
width:620px;
}
form {
display: flex;
flex-direction: column;
width: 200px;
}
.input-wrap {
margin: 5px;
}
input {
background-color: white;
border: 1px solid #4C4B63;
}
.submit{
background: #333;
color: white;
border-style: outset;
border-color: #0066A2;
height: 50px;
width: 100px;
font: bold 15px arial, sans-serif;
text-shadow:none;
cursor: pointer;
}
.submit:hover {
background: green;
color: #eee;
border: 1px solid #eee;
text-shadow:none;
cursor: pointer;
}
I leave you a snippet with the idea you have for the login. You will have to tinker with it to fit your own styles. I leave you a link to a little game to learn flexbox, which I use on the snippet.
.wrapper {
height: 500px;
display: flex;
align-items: center;
justify-content: center;
background-color: slategrey;
}
.login {
display: flex;
width: 400px;
height: 300px;
background-color: lightgrey;
padding: 10px;
}
.side {
flex: 1
}
.separator {
flex: 0;
border-left: 1px solid black;
width: 2px;
height: 250px;
margin: auto 16px;
}
.side {
flex: 1;
}
<div class="wrapper">
<div class="login">
<div class="side">
<form>
<div>
<label>Username:</label><br>
<input type="text">
</div>
<div>
<label>Password:</label><br>
<input type="password">
</div>
</form>
<button class="submit" type="submit" form="form1" value="Submit">Submit</button>
</div>
<div class="separator"></div>
<div class="side">
<form>
<div>
<label>Username:</label><br>
<input type="text">
</div>
<div>
<label>Password:</label><br>
<input type="password">
</div>
<div>
<label>Confirm password:</label><br>
<input type="password">
</div>
</form>
<button class="submit" type="submit" form="form2" value="Submit">Submit</button>
</div>
</div>
</div>
So as you can see on this image:
I want to make a page design as above, but I can not place the checkboxes like on the picture (centered, under it's right times, above it's spaces)
Currently I am here:
body {
background-color: gray;
}
#head {
padding-top: 20px;
text-align:center;
display:block;
}
#container {
background-color: #1b345e;;
}
h2 {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
background-color: #1b345e;
color: white;
}
.topnav {
position: relative;
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #4CAF50;
color: white;
}
/* Centered section inside the top navigation */
.topnav-centered a {
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Right-aligned section inside the top navigation */
.topnav-right {
float: right;
}
input {
margin-left: 49%;
width: 30px;
height: 30px;
}
.checkboxes{
display: inline;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Piarista Kollégium - Stúdiumi jelentkezés</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head>
<body>
<div id="container">
<div class="topnav">
<div class="topnav-centered">
Jelentkezés
</div>
Frissítések
<div class="topnav-right">
Bejelentkezés
</div>
</div>
<div id="head">
<img src="logo.png">
</div>
<h2>Üdvözöllek, XY!</h2>
</div>
<div class="checkboxes">
<div>
<h4>14:30-15:15</h4>
<input type="checkbox">
</div>
<div>
<h4>14:30-15:15</h4>
<input type="checkbox">
</div>
<div>
<h4>14:30-15:15</h4>
<input type="checkbox">
</div>
<div>
<h4>14:30-15:15</h4>
<input type="checkbox">
</div>
<div>
<h4>14:30-15:15</h4>
<input type="checkbox">
</div>
<div>
<h4>14:30-15:15</h4>
<input type="checkbox">
</div>
</div>
</body>
</html>
But as you can see, I am not doing it the right way. Can someone help me or explain me how I could place my elements like on the picture?
(The header part is finished)
Center the elements using flexbox and use justify-content: center to align them.
.checkboxes {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: center;
}
.checkboxes div {
text-align: center;
margin: 0 10px;
}
Here is a working example: https://codepen.io/dobladov/pen/pqqypY
<style type="text/css">
* {margin: 0px; padding: 0px;}
#Header {width:100%;height: 100px;background-color: black;}
#Header #Tools { width: 600px;height: 100px;line-height: 100px;float: left;background-color: brown;overflow:hidden}
#Header #Tools a {position:relative; text-align:center;padding-left:50px; padding-right:50px;border-style:solid;border-width: 5px;border-color: chartreuse;text-decoration: none;font-size: 20px;color: aliceblue;}
#Header #Tools li { float: left;list-style: none;}
#Header #Login {width: 150px;height: 100px; background-color: brown;float: right;line-height: 100px}
#Header #Search {width: 700px; height: 100px;float: left;line-height: 100px; padding-left: 200px;position:relative}
#Header #Search #Text {border:0px;height: 38px;width: 300px;padding-left: 10px; font-size: 15px;position:absolute;top:31px}
#Header #Search #Submit {border-style: none;background: url("../pictures/search.jpg");width: 35px;height: 38px;position:absolute;top:31px;left:500px}
#Header #Login a {border-color: chartreuse;text-decoration: none;font-size: 20px;color: aliceblue;padding-left: 10px}
#Header #Tools .tools1_content {display:none;border-width:2px;border-style: solid;border-color:red; width: 400px;height: 250px;background-color: burlywood;position:absolute;top:80px;left:50px}
</style>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>TestPage</title>
<script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>
</head>
<body>
<div id="Header">
<div id="Tools">
<ul>
<li id="Li" onmouseover="showdiv()" onmouseout="hidediv()">
Tools1
<div class="tools1_content" id="Li_div">
<div>SubTools1</div>
</div>
</li>
<li>
Tools12
<div class="tools1_content">
<div>SubTools2</div>
</div>
</li>
<li>
Tools13
<div class="tools1_content">
<div>SubTools3</div>
</div>
<li/>
</ul>
</div>
<div id="Search">
<form>
<input id="Text" type="text" placeholder="please enter keywords to search" />
<input id="Submit" type="submit" value="" />
</form>
</div>
<div id="Login">
Loagin
Info
</div>
<div id="Content_Left">
<ul>
<li>T1</li>
<li>T2</li>
<li>T3</li>
</ul>
</div>
</div>
</body>
</html>
The Normal behavior
The issues
I just want them in one horizontal line,but when I drag the browser edge resulting in browser screen smaller.
The html element will drop to unexpected position.I want them only change in header div.
You should not use float for layout unless you need support for Internet Explorer. Since flex does not work in IE<10 at all and is buggy in IE>=10.
Flexbox is widely (display: flex) used nowdays and you should rely on this.
You will need to remove or adjust the widths of the element to % values to keep everything responsive.
I set flex as display to the parent element already to keep the element horizontally aligned. (see below)
Also you should try to avoid absolute display as much as possible and also try to use % or "em" values where possible. They are more responsive and more dynamic than static px values.
Resource: https://developer.mozilla.org/en-US/docs/Web/CSS/flex
Responsive Design (adjust design on different sizes): https://developer.mozilla.org/de/docs/Web_Development/Mobile/Responsive_design
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#Header {
width:100%;
height: 100px;
background-color: black;
display: flex;
}
#Header #Tools {
margin: 0;
padding: 0;
width: 50%;
height: 100px;
line-height: 100px;
background-color: brown;
overflow:hidden
}
#Header #Tools li {
display: inline;
list-style: none;
margin-left: 20px
}
#Header #Tools a {
position:relative;
text-align:center;
padding-left:50px;
padding-right:50px;
border-style:solid;
border-width: 5px;
border-color: chartreuse;
text-decoration: none;
font-size: 20px;
color: aliceblue;
}
#Header #Login {
height: 100px;
background-color: brown;
line-height: 100px
}
#Header #Search {
width: 40%;
height: 100px;
line-height: 100px;
margin-left: 5%;
position:relative
}
#Header #Search #Text {
border:0px;
height: 38px;
padding-left: 10px;
font-size: 15px;
position:relative;
}
#Header #Search #Submit {
border-style: none;
background: url("../pictures/search.jpg");
width: 35px;
height: 38px;
position:relative;
}
#Header #Login {
width: 10%;
border-color: chartreuse;
text-decoration: none;
font-size: 20px;
color: aliceblue;
padding-left: 10px
}
#Header #Login a {
border-color: chartreuse;
text-decoration: none;
font-size: 20px;
color: aliceblue;
padding-left: 10px
}
#Header #Tools .tools1_content {
display:none;
border-width:2px;
border-style: solid;
border-color:red;
height: 250px;
background-color: burlywood;
position:absolute;
top:80px;
left:50px
}
#Content_Left{
display: none;
}
</style>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>TestPage</title>
<script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>
</head>
<body>
<div id="Header">
<ul id="Tools">
<li id="Li" onmouseover="showdiv()" onmouseout="hidediv()">
Tools1
<div class="tools1_content" id="Li_div">
<div>SubTools1</div>
</div>
</li>
<li>
Tools12
<div class="tools1_content">
<div>SubTools2</div>
</div>
</li>
<li>
Tools13
<div class="tools1_content">
<div>SubTools3</div>
</div>
<li/>
</ul>
<div id="Search">
<form>
<input id="Text" type="text" placeholder="please enter keywords to search" />
<input id="Submit" type="submit" value="" />
</form>
</div>
<div id="Login">
Loagin
Info
</div>
<div id="Content_Left">
<ul>
<li>T1</li>
<li>T2</li>
<li>T3</li>
</ul>
</div>
</div>
</body>
</html>
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/