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><span>Logout</span></div>
<div><span>Settings </span></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;
}
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
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;
}
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.
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;
}
Related
I have built this header using custom CSS and bootstrap class names. I have tried z-index, float: initial properties already. Thanks in advance
.branding-preview {
height: 75px;
margin-left: 15px;
margin-right: 15px;
background-color: #0071bb;
}
.branding-logo {
float: left;
height: 50px;
font-size: 18px;
padding: 15px 15px;
}
.branding-logo img {
width: 300px;
height: 50px;
}
.branding-powered-by-logo {
float: right;
height: 50px;
color: white;
font-size: 15px;
padding: 2px 10px;
}
.preview-menu {
margin: 30px 0 0 0;
}
.preview-menu > li > a {
margin: 0 3px;
color: white;
text-transform: uppercase;
border-bottom: solid 1px transparent;
background-color: transparent !important;
}
<div class="branding-preview">
<div class="branding-logo">
<img id="branding-logo" src="/path/to/logo">
</div>
<div class="branding-powered-by-logo">
<span>Powered By</span>
<img id="branding-powered-by-logo" src="/path/to/logo" height="30">
</div>
<ul class="navbar-nav navbar-right nav preview-menu">
<li><a>Start</a></li>
<li><a>Plan</a></li>
<li><a>Manage</a></li>
<li><a>Learn</a></li>
<li><a>Admin</a></li>
</ul>
</div>
This is the result that I am getting with the current code,
actual result:
This is what I'm hoping it will look like, expected result:
Isn't simple without all the css rules, but the concept is: Create a wrapper floated to right and inside create 2 lines, one for the branding-powered-by-logo and display:block the second line is depend from actual CSS but probably works without modify anything.
If you can post the real page we can help you with more precision.
Hope this help you.
.branding-preview {
display:block;
height: 75px;
margin-left: 15px;
margin-right: 15px;
background-color: #0071bb;
}
.branding-logo {
float: left;
height: 50px;
font-size: 18px;
padding: 15px 15px;
}
.branding-logo img {
width: 300px;
height: 50px;
}
.branding-powered-by-logo {
/* ADDED */
display:block;
text-align:right;
height: 50px;
color: white;
font-size: 15px;
padding: 2px 10px;
}
.preview-menu {
margin: 0px 0 0 0;
}
.preview-menu > li > a {
margin: 0 3px;
color: white;
text-transform: uppercase;
border-bottom: solid 1px transparent;
background-color: transparent !important;
}
/* ADDED */
.wrapper-logo-navbar {
float: right;
}
.preview-menu > li {
display: inline-block;
}
<div class="branding-preview">
<div class="branding-logo">
<img id="branding-logo" src="/path/to/logo">
</div>
<div class="wrapper-logo-navbar">
<div class="branding-powered-by-logo">
<span>Powered By</span>
<img id="branding-powered-by-logo" src="https://cdn.pixabay.com/photo/2012/05/02/19/27/head-46086_960_720.png" height="30">
</div>
<ul class="navbar-nav navbar-right nav preview-menu">
<li><a>Start</a></li>
<li><a>Plan</a></li>
<li><a>Manage</a></li>
<!-- removed some elements for the rendering on StackOverflow -->
</ul>
</div>
</div>
I think you just need add
position:absolute; right:0px;
to your .preview-menu class.
It was probably asked before / someone had a similar problem, but I have been searching for a long time and couldn't find any solution to my problem.
I have a div called loginBox that is centred, and has a form in it. I want the text boxes in the form to take almost the entire width of the form (It should look like google's new sign in form).
I am setting the input's margin to auto and the width to 90% using css, but for some reason it has no effect. Even when I set the width to a number (i.e 200px), the width remains unchanged.
The only way I could make it work is increase the padding of the input to 100px, but this is both not responsive, and not a good practice.
This is the code I am using:
body {
margin: 0;
background-color: #EEEEEE
}
.menu {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
.menu a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
}
.pageMain {
width: 100%;
padding: 16px;
margin-top: 70px;
height=1500px;
}
.loginBox {
display: table;
margin: auto;
width: 50%;
background-color: white;
box-shadow: 2px 2px lightgrey;
padding: 25px;
}
input {
margin: auto;
width=90%;
padding: 12px 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
<div class="menu">
<a class="active" href="index.html">Home</a>
Grades
Behavior
Homework
Learning Enviroments
Time Table
People
<a style="float: right" href="contact.html">Contact</a>
<a style="float:right" href="contact.html">Login</a>
</div>
<div class="pageMain">
<div class="loginBox">
<h3>Sign in</h3>
<h4>With your RSIS account</h4>
<form>
<input type="text" size="300" name="username" value="Email, RSIS username or id">
</form>
</div>
</div>
Screenshot of what I get right now
Fix your width. Instead of = it should be :. Your code seems fine otherwise. And width: 100% works just the way you intended.
Also, as mentioned in the comments, It should be height: 1500px; in .pageMain
body {
margin: 0;
background-color: #EEEEEE
}
.menu {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
.menu a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
}
.pageMain {
width: 100%;
padding: 16px;
margin-top: 70px;
height: 1500px;
}
.loginBox {
display: table;
margin: auto;
width: 50%;
background-color: white;
box-shadow: 2px 2px lightgrey;
padding: 25px;
}
input {
margin: auto;
width:100%;
padding: 12px 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
<div class="menu">
<a class="active" href="index.html">Home</a>
Grades
Behavior
Homework
Learning Enviroments
Time Table
People
<a style="float: right" href="contact.html">Contact</a>
<a style="float:right" href="contact.html">Login</a>
</div>
<div class="pageMain">
<div class="loginBox">
<h3>Sign in</h3>
<h4>With your RSIS account</h4>
<form>
<input type="text" size="300" name="username" value="Email, RSIS username or id">
</form>
</div>
</div>
the first look into your css file
height=1500px; // Why =, not :? <----- PageMain class
width=90%; // <---- same here in input class
change:
width=90%;
height=1500px;
to:
width:90%;
height:1500px;
also use * { box-sizing: border-box;} for remove scrollbars.
I'm wondering why the elements in my nav bar appear to have blank space above them? I've checked the margin and padding and there doesn't seem to be an issue, but there is a large space above my #logo and #searchbox which is messing up my layout, how can I get rid of the space above the elements?
Thanks a lot!
Here's my Code:
li {
display: inline-block;
}
ul {
display: inline-block;
margin: 0px;
padding: 0px;
}
#main_nav, logo {
display: inline-block;
padding: 0px;
margin: 0px;
}
nav li a:link {
font-weight: bold;
display: inline-block;
text-decoration: none;
font-family: times;
font-size: 24px;
list-style: none;
padding: 5px;
border: 2px solid black;
border-radius: 5px;
color: black;
}
nav li a:visited {
color: rgba(0,0,0,0.7);
}
nav li a:hover {
background-color: rgba(0,0,0,0.6);
color: white;
}
nav li a:active {
color: black;
border-color: black;
}
nav {
width: 1000px;
height: 130px;
background-color: rgba(255,255,255,0.7);
padding: 10px;
margin: 0px auto;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
input[type=search] {
font-size: 16px;
}
#searchbox {
position: absolute;
right: 0px;
top: 0px;
}
#searchbox_div {
position: relative;
display: inline-block;
padding: 0;
width: 100%;
}
#logo {
display: inline-block;
width: 200px;
font-family: arial;
margin: 0px;
padding: 0px;
font-size: 26px;
}
#logo_jeff, #logo_arries, #logo_website {
margin: 0px;
}
#logo_jeff {
letter-spacing: 35.5px;
}
#logo_arries {
letter-spacing: 11px;
}
#logo_website {
letter-spacing: 4px;
}
#main_content {
width: 1000px;
min-height: 600px;
display: block;
background-color: rgba(255,255,255,0.7);
margin: 0 auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
position: relative; top: 0px;
padding: 10px;
}
#here_you_can_learn {
font-size: 47px;
color: gray;
margin: 0 auto;
margin-bottom: 10px;
text-align: center;
}
#welcome {
text-align: center;
color: rgb(0, 0, 110);
font-size: 100px;
margin: 0;
padding: 10px 10px 20px 10px;
}
#down_arrow {
height: 50px;
margin: auto;
display: block;
padding: 10px;
}
#most_frequent {
width: 600px;
vertical-align: top;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#m_f_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#m_f_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#recent_activity {
width: 375px;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#r_a_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_body {
font-size: 15px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more_link:visited {
color: black;
}
#r_a_show_more_link:hover {
color: gray;
background-color: rgba(0,0,0,0.9);
}
#r_a_show_more_link:active {
color: black;
}
body {
background-image: url("../pictures/jeff_skiing.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 500px;
margin: 0px;
padding: 0px;
}
aside {
position: absolute;
right: 0px;
background-color: rgba(255,255,255,0.9);
width: 170px;
height: 600px;
margin: 0;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding: 10px;
}
<!DOCTYPE html>
<head>
<title>Home | Jeff's Website</title>
<link href="styles/main_navigation.css" type="text/css" rel="stylesheet" />
<link href="styles/body.css" type="text/css" rel="stylesheet" />
<link href="styles/main_content.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!--Main Nav-->
<header>
<nav>
<div id="searchbox_div">
<form action="" id="searchbox">
<input id="search_input" type="search" name="searchmysite" placeholder="Search my Site!">
<input type="submit" value="Search!">
</form>
</div>
<div id="logo">
<h1 id="logo_jeff">JEFF</h1>
<h1 id="logo_arries">ARRIES</h1>
<h1 id="logo_website">WEBSITE</h1>
</div>
<div id="main_nav">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Trips</li>
<li>Politics</li>
<li>Pictures</li>
<li>Videos</li>
<li>Computer</li>
<li>Misc</li>
</ul>
</div>
</nav>
</header>
<!--Welcome to jeff's website-->
<div>
<h2 id="welcome">Welcome to my Website!</h1>
<a href="#here_you_can_learn">
<img src="pictures/down_arrow.png" id="down_arrow"/>
</a>
</div>
<!--right side nav-->
<aside>
<p>this is aside</p>
</aside>
<!--Main Content-->
<div id="main_content">
<h2 id="here_you_can_learn">Here you can learn about me and my adventures!</h2>
<!--Most Frequently visited pages: on left side of page-->
<div id="most_frequent">
<p id="m_f_heading">Most frequently visted pages!</p>
<p id="m_f_show_more">Show More</p>
</div>
<!--Recent Activity: on the right side of page-->
<div id="recent_activity">
<p id="r_a_heading">Recent Activity</p>
<p id="r_a_body">test</p>
<p id="r_a_show_more">Show More</p>
</div>
</div>
</body>
Your <nav> element has a padding of 10px.
EDIT: The absolutely positioned search form seems to be causing the problem. I made the following changes and the space went away:
#searchbox_div {
position: relative;
display: block;
padding: 0;
width: 100%;
}
#searchbox {
position: relative;
float: right;
}
#logo {
display: inline-block;
width: 200px;
font-family: arial;
margin: 0px;
padding: 0px;
font-size: 26px;
float: left;
}
#main_nav{
display: inline-block;
padding: 0px;
margin: 0px;
margin-top: 4em;
margin-left: 1em;
}
I noticed that you`re not using a css reset. A CSS Reset (or “Reset CSS”) is a short, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline.
In case you didn’t know, every browser has its own default ‘user agent’ stylesheet, that it uses to make unstyled websites appear more legible. For example, most browsers by default make links blue and visited links purple, give tables a certain amount of border and padding, apply variable font-sizes to H1, H2, H3 etc. and a certain amount of padding to almost everything. Ever wondered why Submit buttons look different in every browser?
Obviously this creates a certain amount of headaches for CSS authors, who can’t work out how to make their websites look the same in every browser.
Using a CSS Reset, CSS authors can force every browser to have all its styles reset to null, thus avoiding cross-browser differences as much as possible.
Also, sometimes if I have a problem with blank spaces, I run the html all together so there are no blank spaces between the tags. To make it look neat, I insert carriage returns in the middle of the html tag.
By default, most browsers have an 8px or so margin that is built in or "Added" to the page style. The super easy way to eliminate this is through CSS. Simply use:
html,body{
margin:0;
}
You can also add:
padding:0;
If it's still giving you problems!
You appear to need to reset/normalize your css as that
html,body{
margin:0;
padding:0;
}
The <nav> element is configured to have 10 pixels of padding on all sides.
Suppose that I have a content div like this:
<div id="content">
</div>
I would like to know if it is possible with CSS to style this div to have a minimum height (let's say 700px, for example) and all the content that is placed inside this div will only stretch (making its height longer) the div if the sum of the height of its content is greater than the div's height.
I tried using the min-height attribute, but it simply didn't work. All content that I place inside the div makes it longer.
UPDATE
This is some page of my application with the css files (the id of the content div in the css files is conteudo) Unfortunatelly my code is not in English, but I think this is irrelevant. If you can spot the bug why the min-height attribute is not working:
acessonegado.xhtml
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head id="j_idt2">
<title>Grupos de E-mail de Servidores</title>
<link href="resources/css/gruposemailservidores.css" rel="stylesheet" type="text/css" />
<link href="resources/css/layout.css" rel="stylesheet" type="text/css" />
<link href="resources/css/acessonegado.css" rel="stylesheet" type="text/css" /></head><body>
<div id="cabecalho">
<img src="resources/img/ufca.png" alt="Universidade" />
<span>Grupos de E-mail de Servidores</span>
</div>
<form id="form" name="form" method="post" action="/gruposemailservidores/acessonegado.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="form" value="form" />
<div id="usuario">
<div>
ADMIN<br />UNIVERSIDADE
</div>
</div>
<div id="barraTitulo">Acesso Negado
Sair
</div>
<div id="conteudo">
<p>Este aplicativo é de uso exclusivo de servidores da</p>
<p>COORDENADORIA DE INFRAESTRUTURA DE TI</p>
</div><input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="-8939669570174810183:-4107362002777505590" autocomplete="off" />
</form>
<div id="rodape">
<p>aaaaaaaaaaaaa</p>
<p>bbbbbbbbbbbbb</p>
</div></body>
</html>
gruposemailservidores.css
body
{
margin: 0;
padding: 0;
font-family: verdana, arial, sans-serif;
font-size: 70%;
}
#cabecalho
{
height: 84px;
background-color: #dde8df;
border-bottom: 1px solid #6f9b76;
}
#cabecalho img
{
position: absolute;
top: 4px;
left: 10px;
}
#cabecalho span
{
position: absolute;
top: 23px;
left: 145px;
font-family: trebuchet ms, arial, sans-serif;
font-size: 240%;
font-weight: bold;
color: rgba(0, 83, 83, 0.8);
text-shadow: 2px 8px 6px rgba(0, 0, 0, 0.2), 0px -5px 35px rgba(255, 255, 255, 0.3);
}
#rodape
{
font-size: 90%;
color: white;
background-color: #6f9b76;
text-align: center;
padding: 10px 0;
}
#rodape p
{
margin: 0;
}
#rodape p:first-child
{
margin-bottom: 2px;
}
input, select, textarea, button
{
font-family: inherit;
font-size: 100%;
}
input[type="submit"], input[type="button"]
{
border: 1px solid;
}
.ui-dialog
{
box-shadow: 5px 5px 5px #888;
-webkit-box-shadow: 5px 5px 5px #888;
-moz-box-shadow: 5px 5px 5px #888;
}
.ui-dialog #iconeAlerta
{
float: left;
margin: 0 7px 10px 0;
}
.ui-dialog #emailGrupoSetor
{
font-style: italic;
}
layout.css
#form #usuario
{
position: absolute;
height: 84px;
top: 0;
margin-right: 10px;
right: 0;
font-size: 105%;
color: #608a66;
}
#form #usuario div
{
height: 84px;
display: table-cell;
vertical-align: middle;
}
#form #barraTitulo
{
color: white;
font-size: 130%;
font-weight: bold;
background-color: #6f9b76;
margin: 0;
padding: 2px 10px;
}
#form #barraTitulo a
{
float: right;
color: white;
font-size: 75%;
font-weight: normal;
text-decoration: underline;
}
#form #conteudo
{
margin: 5px 10px;
min-height: 750px;
}
acessonegado.css
#conteudo p
{
text-align: center;
font-size: 180%;
}
#conteudo p:first-of-type
{
/* Comment the margin-top attribute and the height of the #conteudo div will change. It shouldn't. */
margin-top: 150px;
margin-bottom: 10px;
}
#conteudo p:last-of-type
{
margin: 0;
color: #004182;
}
Using min-height works just fine. see fiddle: http://jsfiddle.net/1g1pdqbc/6/
div {
min-height: 100px;
background-color: blue;
width: 100px;
}
The both divs are set to min-height: 100px but the second div has extra stuff in it and makes it taller.
This might be helpful
<div style = "min-height:100px; background-color:gray" id="content">
div with 100px height
</div>
<br/>
<div style = "min-height:100px; background-color:gray" id="content">
div with 100px height
<div style = "min-height:100px; background-color:blue" id="content">
inner div with 100px height
</div>
<div style = "min-height:100px; background-color:green" id="content">
inner div 3 with 100px height
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
body {
background: #00BFFF;
font-family: "Candara";
src: url(data/candara.ttf);
}
#wrapper {
margin: 0 auto;
width: 800px;
padding: 15px;
}
#wrapper:after {
content: ".";
display: block;
clear: both;
height: 0;
overflow: hidden;
}
#header {
display: block;
background-color: blue;
}
#header .left {
display: inline-block;
padding: 15px 25px;
float: left;
}
#header .left h1{
display: inline-block;
font-weight: bold;
}
#header .right {
float: right;
display: inline-block;
}
#header .right span{
display: block;
}
#page {
display: block;
float: left;
}
#page .box{
display: inline-block;
background: black;
float: left;
}
#header, .box {
background: blue;
opacity: 0.7;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="left">
<h1>Title</h1>
</div>
<div class="right">
<span><b>needle:</b> <?php //echo $haystack; ?></span>
<span><b>needle:</b> <?php //echo $haystack; ?></span>
<span><b>Last update:</b> <?php //echo $lastupdate; ?></span>
</div>
</div>
<div id="page">
<div class="left box">
Heey mannn
</div>
</div>
</div>
</body>
</html>
This is the design im aiming for, but its not working at all, instead, i get this.
And i don't know what im doing wrong, i realy don't. Can you guys help me? All the things i want are in the image. And the red areas are just to mark that i want those boxes there. I also made a jsfiddle with the code. If anything is unclear, leave a comment please, instead of just thumbing it down, because its realy hard to explain...
If you want a transparent background, use rgba or hsla colors.
Example:
background-color: rgba(0, 0, 255, 0.7); /* Blue, opacity 0.7*/
Here's code, which renders what you have in your design image. Tested only in Chrome. This is not optimal nor an optimized solution but should let you continue with your design.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
body {
background: #00BFFF;
font-family: "Candara";
src: url(data/candara.ttf);
}
#wrapper {
margin: 0 auto;
width: 800px;
}
#header {
width: 720px;
height: 100px;
margin-top: 20px;
padding: 10px 40px;
background: rgba(0, 0, 255, 0.7);
-webkit-border-radius: 13px;
border-radius: 13px;
}
.title_area {
float: left;
width: 300px;
margin-top: 12px;
padding: 25px 25px;
background: #f00;
-webkit-border-radius: 13px;
border-radius: 13px;
}
#header .info_area {
float: right;
width: 200px;
height: 60px;
margin-top: 30px;
padding: 5px;
background: #f00;
-webkit-border-radius: 13px;
border-radius: 13px;
}
#page {
clear: both;
margin: 20px 0px;
}
.content {
float: left;
width: 380px;
height: 500px;
padding: 20px;
background: rgba(0, 0, 255, 0.7);
-webkit-border-radius: 13px;
border-radius: 13px;
}
.up_right {
float: left;
width: 320px;
height: 240px;
margin-left: 20px;
margin-bottom: 20px;
padding: 20px;
background: rgba(0, 0, 255, 0.7);
-webkit-border-radius: 11px;
border-radius: 11px;
}
.down_right {
float: left;
width: 320px;
height: 200px;
margin-left: 20px;
padding: 20px;
background: rgba(0, 0, 255, 0.7);
-webkit-border-radius: 11px;
border-radius: 11px;
}
.close {
clear: both;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="title_area">
<h1>Title</h1>
</div>
<div class="info_area">
<div><b>needle:</b> <?php //echo $haystack; ?></div>
<div><b>needle:</b> <?php //echo $haystack; ?></div>
<div><b>Last update:</b> <?php //echo $lastupdate; ?></div>
</div>
</div>
<div id="page">
<div class="content">
Heey mannn
</div>
<div class="up_right">
Hou hou
</div>
<div class="down_right">
Yeah
</div>
<div class="close"></div>
</div>
</div>
</body>
</html>
rgba is a good solution, but
It might be cross browser issue as well
try this, instead of just opacity:0.7
opacity: 0.7;
-moz-opacity: 0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0.7);