Reputation: 73
HTML Div Disappears when given Fixed Position
Currently I am developing a Facebook like Messenger. Right now I am working under a chat-area, this thing should be fixed. But if I give position:fixed suddenly div disappear. I don't know what to do.
Here is my HTML/PHP code.
<?php
// Turn off all error reporting
//shop not login users from entering
if(isset($_SESSION['id'])){
$user_id = $_SESSION['id'];
}else{
}
require_once("./inc/connect.inc.php");
?>
<header>
<link rel="stylesheet" href="home - Copy.css" />
<nav>
<h3><a class="h3" href="#">Cp</a></h3>
<div>
<?php
//Start your session
session_start();
//Read your session (if it is set)
if (isset($_SESSION['user_login']))
echo $_SESSION['user_login'];
?>
</div>
<div><a href="logout.php"><span>Logout</span></a></div>
<div><a href="#"><span>Settings </span></a></div>
</nav>
<body>
<div class="shead">
<div class="a1"> <li >Frequent Member</li>
<ul>
<?php
//show all the users expect me
$user_id = $_SESSION['id'];
$q = mysql_query("SELECT * FROM `users` WHERE id!='$user_id'");
//display all the results
while($row = mysql_fetch_assoc($q)){
echo "<a href='home.php?id={$row['id']}'><p>{$row['username']}</p></a>";
}
?>
</ul>
</div>
<div class="a2"> <li >Site's Popular in Your College</li></div>
</div>
</header>
<div class="rss">
<?php
//include('rssclass.php');
//sinclude('rss.php');
?>
<div class="message-right">
<!-- display message -->
<div class="display-message">
<?php
//check $_GET['id'] is set
if(isset($_GET['id'])){
$user_two = trim(mysql_real_escape_string( $_GET['id']));
//check $user_two is valid
$q = mysql_query( "SELECT `id` FROM `users` WHERE id='$user_two' AND id!='$user_id'");
//valid $user_two
if(mysql_num_rows($q) == 1){
//check $user_id and $user_two has conversation or not if no start one
$conver = mysql_query( "SELECT * FROM conversation WHERE (user_one='$user_id' AND user_two='$user_two') OR (user_one='$user_two' AND user_two='$user_id')");
//they have a conversation
if(mysql_num_rows($conver) == 1){
//fetch the converstaion id
$fetch = mysql_fetch_assoc($conver);
$conversation_id = $fetch['id'];
}else{ //they do not have a conversation
//start a new converstaion and fetch its id
$q = mysql_query( "INSERT INTO `conversation` VALUES ('','$user_id',$user_two)");
$conversation_id = mysql_insert_id($con);
}
}else{
die("Invalid $_GET ID.");
}
}else {
die("Click On the Person to start Chating.");
}
?>
</div>
<div class="send-message">
<!-- store conversation_id, user_from, user_to so that we can send send this values to post_message_ajax.php -->
<input type="hidden" id="conversation_id" value="<?php echo base64_encode($conversation_id); ?>">
<input type="hidden" id="user_form" value="<?php echo base64_encode($user_id); ?>">
<input type="hidden" id="user_to" value="<?php echo base64_encode($user_two); ?>">
<div class="textbox">
<input class="t_box" type="text" id="message" placeholder="Enter Your Message"/>
<button class="t_btn" id="reply">Reply</button>
<span id="error"></span>
</div>
</div>
</div>
<!--
<div class="textbox">
<form action="#" method="post">
<input type="text" name="msg_body" class="t_box" id="t_box" >
<input type="submit" class="t_btn" id="t_btn" name="submit" value="Send">
</form>
</div>-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
Here is my css and .message-right is the element where problem occurs.
@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Roboto', Arial, sans-serif;
background-color: #222;
overflow-x: hidden;
text-align: center;
}
header {
position: fixed;
width: 100%;
height: 50px;
background-color: #FFD700;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
header > nav > div {
float: right;
width: 10.6666%;
height: 100%;
position: relative;
}
header > nav > div > a {
text-align: center;
width: 100%;
height: 100%;
display: block;
line-height: 50px;
color: #222;
transition: background-color 0.2s ease;
text-transform: uppercase;
}
header > nav > div:hover > a {
background-color: rgba(0, 0, 0, 0.1);
cursor: pointer;
}
a{
text-decoration: none;
color: #000;
}
a:hover{
text-decoration: none;
background-color: #FFD700;
font-weight: bolder;
}
h3{
float: left;
height: 100%;
text-align: bottom;
padding-top: 10px;
padding-left: 10px;
}
.h3{
color: #222;
font-size:25px;
}
.nav{
position: fixed;
}
.title-head {
font-size:18px;
font-weight:bold;
text-align:left;
background-color:#F5F6F7;
color:#000;
float: left;
width: 455.33px;
}
.feeds-links {
text-align:left;
width: 455.33;
font-size: 20px;
padding:5px;
border:1px solid #dedede;
padding-top:inherit;
color: #000;
background-color: #FFFFFF;
}
.rss{
float: right;
padding-top: 100px;
}
.h2{
color: #000;
background: #ffd700;
height: 45px;
width: 455.33px;
padding-top: 10px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.textarea{
float: left;
padding-top:553px;
width: 455.3px;
position: fixed;
}
.t_box{
float: left;
border-radius: 5px;
border: 1px solid #FFD700;
background-color: #fff;
padding: 5px 5px;
font-size: 1em;
width: 78%;
outline: none;
}
.textbox{
background-color: #FFD700;
border: 1px solid #FFD700;
margin-top: 565px;
padding: 10px;
height: 50px;
width:455.5px;
float: left;
}
.t_btn{
text-decoration: none;
color:#222;
font-weight: bold;
background-color: transparent;
border: none;
font-size: 1em;
cursor: pointer;
height: 33px;
width: 70px;
outline: none;
}
.shead{
height: 50px;
width: 910px;
float: right;
margin-top: 0px;
background: #FFD700;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
position: sticky;
border-top: #000;
}
.a1{
text-align: center;
width: 50%;
display: block;
line-height: 50px;
color: #000;
font-size: 19px;
list-style: none;
font: #000;
}
.a2{
text-align: center;
width: 50%;
display: block;
line-height: 50px;
color: #222;
float: right;
transition: background-color 0.2s ease;
font-size:19px;
text-decoration: none;
margin-top: -150px;
list-style: none;
}
.frequentmem{
display: block;
height: 100%;
width: 100%;
float: right;
}
.message-right{
margin-right:908px;
background: #fff;
height: 615px;
width:455.5px;
margin-top: 50px;
float: left;
position: fixed;
}
hr{
background: #e9e9e9;
border: 0;
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 1px;
margin: 0;
min-height: 1px;
}
.message{
width: 455.3px;
background: #fff;
height: 50px;
padding: 8px 24px;
}
Upvotes: 1
Views: 2484
Answers (4)
Reputation: 811
float:left doesn't do anything if your position is fixed, you should add left:0 instead, on the other hand, you should always specify vertical and horizontal position of a fixed element unless you want it to stay on the part of the page it was rendered this means if your message-right are is rendered below the fold it will not be visible to your users unless you tell it at what coordinates it should remain fixed
Upvotes: 1
Reputation: 1
your code looks fine. Adding a border should do the trick.For instance: But without the rest of the code(html and css) it would be hard to know what is wrong.
.chat-area{
margin-right:908px;
background: #fff;
border:1px solid black;<-- like this
height: 615px;
width:455.5px;
margin-top: 50px;
float: left;
position: fixed;
}
Upvotes: 0
Reputation: 1140
I think floating divs and fixing the position do not go well together.
Try removing the float:left and as the user above suggested, adding the left: some_pixels, top: some_pixels to align the div "absolutely" on the page. I usually add a border/background color to divs to identify where they are on the page (then remove later), so you can try that to to make sure it is where you expect it to be.
.message-right{
margin-right:908px;
background: #fff;
height: 615px;
width:455.5px;
margin-top: 50px;
**float: left;** <-- remove
position: fixed;
left: 50px;
top: 50px;
}
Upvotes: 1
Reputation: 503
With a fixed position, maybe your div is behind some other content. Have you tried using a z-index ? Setting the z-index to 1 would move it forward over another div. Also, you have no top, bottom, right or left dimensions for your fixed position. You could try moving the div around by assigning those values. Example. Anyways, it is hard to tell what your problem is without the HTML to go with the CSS. Posting that would help you get better response. I don't have 50 reputation, so I had to add this comment as an answer.
Upvotes: 0
Related Questions
- div disappears after position: relative
- Div disappears when set position: fixed
- My div disappears after I position it as absolute
- Position: fixed; makes the div element that it is applied to disappear
- Div not staying in position
- My header div disappearing when added position fixed
- Div disappears on positioning it fixed
- Fixed position Div ALWAYS appear on top?
- how to make the position of div is fixed even though it's empty?
- div with fixed position