I'm working on a chat module for a project, everything is working but the css. I have a global container for the chat elements, this div has fixed position. Inside I have two divs, one for the chat windows and one for the contacts list, both the chat window and the contact list are floating to the right and can be "minimized" by clicking on the title (this hides the body and only leaves the title visible). The problem is if I minimize just one of the divs it remains on the top at the same height as the other div (see the image).
This is what I'm getting:
This is what I want:
Relevant code:
<body>
<!--boring code-->
<div class="chat_container">
<div class="contactos show">
<div class="titulo">contactos</div>
<div class="container">
<div class="contacto online" id="contacto_3">juan an orozco</div>
</div>
</div>
<div class="chat_wdow_container">
<div class="chat_wdow " id="chat_wdow_3">
<div class="title_area">juan an orozco</div>
<div class="container">
<div class="msg_area"></div>
<input type="text" name="msg">
</div>
</div>
</div>
</div>
</body>
and css
div.chat_container
{
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
border: 1px dashed gold;
}
div.chat_container > div
{
float: right;
}
div.chat_container div.contactos div.titulo
{
text-align: center;
}
div.chat_container div.contactos
{
min-width: 150px;
background: dimgrey;
padding: 5px;
border-radius: 10px 10px 0 0px;
}
div.chat_container div.contactos div.container
{
display: none;
min-height: 145px;
padding: 10px;
}
div.chat_container div.contactos.show div.container
{
display: block;
}
div.chat_container div.chat_wdow
{
margin: 0 5px;
min-width: 190px;
background: dimgrey;
padding: 5px;
border-radius: 10px 10px 0 0px;
float: left;
}
div.chat_container div.chat_wdow div.title_area
{
text-align: center;
}
div.chat_container div.chat_wdow div.container div.msg_area
{
background-color: white;
height: 120px;
padding: 10px;
}
div.chat_container div.chat_wdow div.container
{
display: none;
}
div.chat_container div.chat_wdow.show div.container
{
display: block;
}
.chat_wdow input[type="text"]
{
width: 186px;
}
To collapse the window I toggle via mootools the class .show. When this class is missing the container area of the windows has display:none and when it gets applied it has display:block.
What I have tried so far:
setting the fixed parent to a height of 0 and overflow visible
seting the inner container to position relative and the child to absolute
using clear and overflow hacks
changing margins to auto values
changing vertical sizes and minimun heights of the inner containers and childs
changing display to inline and inline block
changing chat container to absolute and inner containers to relative
I have been searching for a while on google and SO but I have only found the options that I have already tried, I also looked at facebook's chat css but I can't find anything to help me, so I am looking for new ideas to bring down the collapsed div.
One solution is to use display:inline-block or display:inline instead and then set the vertical-align:bottom.
Ex: http://jsbin.com/uhubeh/1/edit
If you know the widths of both, however, you could also just use absolute positioning.
Related
I have an responsive Owl Carousel (v2), each item or slide has an image and below that some text of variable length, see image below:
As can be seen, all the images are bottom aligned to the same baseline, regardless of how much text there is. I've done this by setting the text div to a fixed height. The problem is, if there were to be just one line of text, I'd have unnecessary space below the carousel.
If I allow the div to set its own height, I get this:
So my images are no longer lined up.
HTML
<div>
<img class='a4_diary_image' src='sizes/test.png'>
<div class='owl_diary_desc'>
A4 size, this is going on to two lines
</div>
</div>
<div>
<img class='a5_diary_image' src='sizes/test.png'>
<div class='owl_diary_desc'>
A5 size
</div>
</div>
<div>
<img class='a6_diary_image' src='sizes/test.png'>
<div class='owl_diary_desc'>
A6 size
</div>
</div>
</div>
CSS
.owl-carousel .owl-item {
display: table-cell;
float: none;
text-align: center;
vertical-align: bottom;
border: 1px dashed grey;
height: 100%;
padding: 0px 10px;
}
.owl_diary_desc {
font-size: 19px;
border: 1px dashed red;
margin-top:10px;
}
.a4_diary_image {
max-width: 100%;
max-height: 100%;
margin-left: auto;
margin-right: auto;
}
.a5_diary_image {
max-width: 70%;
max-height: 70%;
margin-left: auto;
margin-right: auto;
}
.a6_diary_image {
max-width: 50%;
max-height: 50%;
margin-left: auto;
margin-right: auto;
}
Straight HTML and CSS won't allow you to set equal heights based off siblings. Using a little jquery this can be achieved though.
$maxDesc;
function equalize(){
$('.owl_diary_desc').each(function(i){
if ($(this).height() > $maxDesc) { $maxDesc = $(this).height();}
});
$('.owl_diary_desc').each(function(i){$(this).height($maxDesc);});
}
When I use something like this, I generally move the variable holder to the beginning of the script. Then I call the function on document ready. Sometimes I'll even call it on the window resize function. If you choose to do that, you must call an each function on your object and reset the height to auto before recalling the equalize function.
I want to make P to be able to take more text than the height can contain, just so the text can be scrolled down to be read. DIV CLASS="others" has the right height I want. (500px)
The problem is, when I use the overflow: scroll function it goes all the way to the bottom of the page.
EDIT: Forgot to mention I want the titles "News" and "Products" to be without the scroll bar.
Thanks.
.others {
position: relative;
vertical-align: middle;
width: 70%;
background-color: #d0d0d0;
height: 500px;
margin: 0px;
padding: 40px 15% 20px 15%;
display: flex;
justify-content: center;
}
.others div {
width: 400px;
display: inline-block;
float: left;
margin: 0px 15px;
}
.others #news {
background-color: black;
color: white;
text-align: center;
}
.others #products {
background-color: black;
color: white;
text-align: center;
}
.others a {
color: white;
text-decoration: none !important;
}
.others #newsfeed, #productsfeed {
margin: 0px;
padding: 10px 0px;
background-color: lightgreen;
}
.others p {
margin: 0px;
padding: 10px 10px;
vertical-align: middle;
height: 800px;
overflow: scroll;
}
<DIV CLASS="others">
<DIV ID="news">
<H3 ID="newsfeed">News</H3>
<P>News will come here.</P>
</DIV>
<DIV ID="products">
<H3 ID="productsfeed">Products</H3>
<P>Cool photos here.</P>
</DIV>
</DIV>
As I mentioned in my comment, the issue is caused by specifying an explicit height to the inner paragraphs.
Besides, in order to make the inner paragraphs respect the height of their parents (#news and #products flex items which have the same height of their flex container, the .other) you could change the display type of the parents to flex as well and set their flex-direction to column.
And then give flex: 1; to the paragraphs as follows:
Example Here
#news, #products {
display: flex;
flex-direction: column;
}
#news p, #products p {
flex: 1;
overflow: auto; /* up to you */
}
As a side-note: make sure you have included the old (prefixed) syntax of flexbox as well for the sake of browser support. You could use tools like Auto Prefixer to achieve that.
You need a containing div on the paragraphs, then set overflow: scroll; and height: 460px; on that container (or whatever height you need to have it contained within the 500px tall .others block).
You'd also need to make sure your .others div styling doesn't apply to that container - in my example below, I changed that selector to .others > div to only select immediate children of .others. And you should remove the height: 800px; from the inner paragraphs, as mentioned by Hashem Qolami.
jsfiddle example
I have a grid of pictures that displays fine by themselves, but I cannot place this grid next to a sidebar.
To build the grid, I place the pictures in an <ul>, and set the property for <li> display: inline-block.
When trying to incorporate this grid next to a sidebar div, it is not placed to the sidebar's side; instead, it goes under the sidebar. Placing text does what I want. Now, when I omit display and float on the <li>, the pictures show up in the right place (next to the sidebar), but I want the pictures displayed in a grid, not a single column.
JSFIDDLE LIVE DEMO
Here's my CSS
ul.cats li {
width: 200px;
display: inline-block;
/* will not display to the right of sidebar */
/* float: left; */
/* no good either */
text-align: center;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
vertical-align: middle;
border: 1px solid black;
}
.site_body_container {
position: relative;
width: 100%;
height: 100%;
background-color: #ffffff;
}
.site_sidebar {
position: relative;
float: left;
height: 95%;
color: white;
}
.site_content {
position: relative;
float: left;
padding: 10px;
border: 5px solid blue;
height: 100%;
}
and HTML
<div class="site_body_container">
<div class="site_sidebar">
<ul>
<li>Sidebar 1</li>
... etc ...
</ul>
</div>
<div class="site_content">cats
<div class="container">
<div id="links">
<ul class="cats">
<li> <img src="http://placekitten.com/50/30" /><br>Kitty
</li>
<li> <img src="http://placekitten.com/50/30" /><br>Kitty
... etc ...
</li>
</ul>
</div>
</div>
</div>
</div>
You need to explicitly set the width of the container holding the pictures, something like:
.site_content {
position: relative;
float: left;
padding: 10px;
border: 5px solid blue;
height: 100%;
width: 450px;
}
Otherwise, it will take up the whole width, which causes it to break onto the next line, underneath the left sidebar.
Here's a fiddle: http://jsfiddle.net/9Wg3T/8/
After a bit more searching I found an alternate solution which is what I am currently using.
I can make the sidebar's width variable (determined by the size of its contents) and the "cats" gallery take up the remaining width to the sidebar's right:
.site_sidebar {
position: relative;
float: left;
height: 95%;
background-color: #eeffff;
padding: 0;
}
.site_content {
position: relative;
padding: 0;
overflow: hidden;
}
The trick is setting .site_content's overflow to hidden. Explanation in this answer.
I don't really even know what my problem is anymore, but I'll try to explain it as best as I can.
Basically what I have is a two column layout. On the left is the content, which at present only contains a h1 and filler text. On the right is the sidebar which should have a div in it (userinfobox).
The header text of the box is supposed to be outside the box a bit so I have the userinfobox position: relative and the header text position: absolute
Then, under that inside the box, there is a 150x150 image and then some more text below that.
Here's the HTML:
<!-- Main Content -->
<div id="contentwrapper" role="presentation">
<div id="content" role="main">
<h1>Header</h1>
Content link
</div> <!-- content div -->
<!-- Sidebar -->
<div id="sidebar" role="complementary">
<div id="userinfobox">
<p id="header">User Info</p>
<div id="userinfo">
<div id="avatar"><img src="" id="tag" alt="tag" /></div>
<p class="username">Username #</p>
<p id="icons">Icons</p>
<p id="membersonline">Online Members (#)</p></div>
</div> <!-- userinfo div -->
</div> <!-- userinfobox div -->
</div> <!-- sidebar div -->
</div> <!-- contentwrapper div -->
And then the CSS
/* Main Content */
#contentwrapper {
min-height: 400px;
height: 100%;
position: relative;
display: table;
font-size: 1em;
}
#content {
width: 669px;
height: 100%;
padding: 20px;
position: relative;
display: table-cell;
background-color: #F7F8F7;
text-align: left;
}
#content h1 {
margin-bottom: 20px;
font-size: 2.75em;
line-height: 1em;
}
/* Sidebar */
#sidebar {
width: 234px;
height: 100%;
padding: 20px;
position: relative;
color: #0D130D;
background-color: #FDEBCF;
display: table-cell;
text-align: center;
}
#sidebar p#header {
position: absolute;
top: -10px;
font-size: 1.5em;
line-height: 1em;
text-align: left;
overflow: hidden;
}
#sidebar p {
max-width: 214px;
margin: 0 auto;
text-align: center;
overflow: hidden;
}
/* Logged In Sidebar */
#userinfobox {
width: 214px;
max-width: 214px;
padding: 10px;
position: relative;
background-color: #F7F8F7;
}
#avatar, #tag, #userinfo {
margin: 0 auto;
position: relative;
display: block;
outline: 1px solid #000;
overflow: hidden;
}
#avatar, #tag {
width: 150px!important;
height: 150px!important;
}
That should be working, I don't see any reason why it wouldn't be; actually it is working, the sidebar anyway is doing what it's supposed to. But sometimes it pushes down the content (currently the h1 and two words of text), almost to where the bottom of the 150x150 image would be.
I'll attempt to list the conditions that cause it to do this:
It does not work when:
the avatar div is completely empty and the header is position: absolute
the image has a src and the header is position: absolute
But, it does works when (seemingly regardless of absolute positioning of the header):
the src of the image is empty
there is no image, just text, in the avatar div (ie. just text in the entire userinfo div)
the userinfo div is completely empty
I just don't understand how it's affecting something in a completely different div. Every place I've tried to search about this just talked about how absolutely positioned elements inside a relatively positioned element won't affect anything outside and how to use them. Also, this is a fixed width setup, so it's not like the width is changing at all; it is also not based on percent.
Since your #content div is using display:table-cell;, you must also apply vertical-align:top; to prevent your content from centering:
http://jsfiddle.net/R8zAw/3/
#content {
width: 669px;
height: 100%;
padding: 20px;
padding-top: 0;
position: relative;
display: table-cell;
background-color: #F7F8F7;
text-align: left;
border-bottom-left-radius: 5px;
vertical-align: top; /* add this */
}
Here is an image that illustrates my goal:
http://imgur.com/80v5bRk
What would be the best way to achieve a style that looks like this? By this, I am asking, how can I set up rules so that the spacing and locations of the buttons are perfectly aligned in the center (they are not aligned correctly right now). I was thinking of a div that wraps the whole thing together, a div that floats left holding the first angle and the title, and a second div that floats left holding the icons. The icons are from the font-awesome package and I do not understand how to align them correctly.
Something along the lines of this should do:
HTML:
<div class="bar">
<div class="first button"></div>
<dic class="second button"></div>
</div>
CSS:
.bar{
width: 960px;
height: 60px;
margin: 0 auto 0 auto;
padding: 5px;
}
.button {
width: 50px;
height: 100%;
float: right;
margin-right: 10px;
background-size: 50px 50px;
background-repeat: no-repeat;
background-position: center; /* This is what will centralize it vertically and horizontally */
}
.first { background-image: url('image.png') }
.second { background-image: url('image2.png') }
I hope this helped.
Well, its hard to answer it exactly unless you post what you currently have.
However, your on the right track.
What I would do:
Wrap the whole thing in a div (as you said)
float the text left (which you said as well)
float the icons right (not left)
As far as spacing, put a margin/padding left/right to the two buttons.
EDIT:
As per my discussion with Luiz Berti:
You are almost right.
Try this instead:
http://jsfiddle.net/GYPK5/1/
HTML
<div class="bar">
<div class="text">Lots of stuff here</div>
<div class="buttons">
<img src="http://icons.iconarchive.com/icons/led24.de/led/16/page-white-edit-icon.png" />
<img src="http://icons.iconarchive.com/icons/led24.de/led/16/bin-closed-icon.png" />
</div>
<div class="clear"> </div>
</div>
CSS
.bar {
width: 400px;
border: 1px solid black;
height: 20px;
font-size: 16px;
line-height: 20px;
}
.text {
margin-left: 20px;
float: left;
width: 200px;
}
.buttons {
float: right;
margin-right: 20px;
position: relative;
top: 2px;
}
.buttons img {
margin: 0 10px;
}
.clear {
clear: both;
width: 0;
height: 0;
}