Hello All I hope you are doing Fine! So actually I'm working a chatroom and Im having problem displaying the messages. You see what is actually happening is that when i enter a message the message box goes down. Instead what I want is that I want the messages at the top go behind the navbar and I want the container which shows the message to show a scrollbar so the message send box will stay in place
my index.php
body {
overflow: none;
}
.container {
border: 2px solid #dedede;
background-color: #f1f1f1;
border-radius: 5px;
padding: 10px;
margin: 10px 0;
overflow: auto;
}
.darker {
border-color: #ccc;
background-color: #ddd;
}
.container::after {
content: "";
clear: both;
display: table;
}
.container img {
float: left;
max-width: 60px;
width: 100%;
margin-right: 20px;
border-radius: 50%;
}
.container img.right {
float: right;
margin-left: 20px;
margin-right: 0;
}
.time-right {
float: right;
color: #aaa;
}
.time-left {
float: left;
color: #999;
}
<div class="container">
<p>
<div id="load_msg"></div>
</p>
<span class="time-right">11:00</span>
</div>
<div class="container darker">
<form method="POST" action="">
<input type="text" name="message" id="message_id" />
<button type="button" id="send_msg">Send</button>
</form>
</div>
You have two .container: One for the messages and another for the form. You need to separate the two, so give the container for the messages an id. TheN you set a height for the container with the id.
HTML
<div class="container" id="msg">...</div>
<div class="container">...</div>
CSS
#msg {
height: 100px;
}
Take a look at this link
Related
I am looking to show an error message below a text input like so
The message should not extend any wider than the width of the input, so I was thinking could I inherit the width of the input on say a span that sits below it?
Something like:
<div class="my-form-control-group has-error">
<input type="text" class="my-form-control" >
<p style="width:inherit;">Some Error Here</p>
</div>
My current attempt - http://jsfiddle.net/4eu2qkra/
I know this sample above will not work, and usage of inherit is wrong here since it will be looking to use the width of the parent div.
Is there a pure css way to inherit from a sibling element immediately before a target element? Maybe I'm going about this all the wrong way?!
Use your wrapper DIV to control the width of the input and the error message. Make sure that the input has width: 100%; so that it will fill the wrapper DIV.
<div class="control-wrap">
<input type="text">
<p>Error Message. Error Message</p>
</div>
* {
box-sizing: border-box;
}
.control-wrap {
width: 50%;
padding: 5px;
background-color: red;
border: 1px solid #666;
}
input {
width: 100%;
border: 1px solid #666;
}
p {
margin: 5px 0;
}
jsFiddle: http://jsfiddle.net/2krc8tyL/
You can wrap the input and error message in a div with display: table set on it, which will match the width of the largest child. This way it will adjust to the input's width.
.my-form-control-group {
display: table;
padding: 4px;
}
.my-form-control {
width: 250px;
border-width: 1px;
}
.my-form-control-group.has-error {
color:white;
border-color:red;
background-color: red;
padding: 1px 1px 4px 1px;
}
<div class="my-form-control-group has-error">
<input type="text" class="my-form-control" >
<div>Some Error Here</div>
</div>
The most obvious option is to use absolute positioning.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.my-form-control-group {
display: inline-block;
position: relative;
background: red;
padding: 4px;
}
.my-form-control {
border-width: 1px;
display: block;
}
.error {
position: absolute;
left: 0;
top: 100%;
width: 100%;
background: red;
color: white;
padding: 4px;
}
<div class="my-form-control-group has-error">
<input type="text" class="my-form-control" />
<p class="error">Some Error Here Lorem ipsum dolor.</p>
</div>
How to I align my text and image on the same line?
Whenever I used padding or margins it crashes into the circle image I'm using.
#alignPhoto {
padding-right: 50px;
padding-left: 400px;
}
#alignCompany {
margin-left: 240px
}
#alignImage {
position: relative;
bottom: -250px;
}
.wrapper {
background: #C3C3C3;
padding: 20px;
font-size: 40px;
font-family: 'Helvetica';
text-align: center;
position: relative;
width: 600px;
}
.wrapper:after {
content: "";
width: 200px;
height: 0;
border-top: 42px solid transparent;
border-bottom: 42px solid transparent;
border-right: 40px solid white;
position: absolute;
right: 0;
top: 0;
}
<div id="alignPhoto">
<div class="circle" id=image role="image">
<img src="http://placehold.it/42x42">
</div>
</div>
<div id=alignPhoto class="titleBoldText">Mary Smith</div>
<div id=alignCompany class="titleText">Morris Realty and Investments</div>
<br>
Currently It does this:
My desired effect is this:
Any help or suggestions would be greatly appreciated.
You're making it a little more complicated than it needs to be. Just put two elements as wrappers (one you already have in alignImage, set them to display as inline-block and then put the vertical-align to middle, top, or whatever you like. I got rid of all the bizarre padding, which was messing with the display as well. Looks like that was a holdover from your vertically stacked layout.
Edit – You've also got two elements with the ID alignPhoto. You really, really shouldn't do that. If you need to style two different elements with one rule, please use classes instead.
#alignPhoto {
display: inline-block;
vertical-align: middle;
}
#alignPhoto img {
border-radius: 100%;
}
#alignImage {
position: relative;
}
.alignText {
display: inline-block;
vertical-align: middle;
}
.titleBoldText { text-align: right; }
<div class="alignText">
<div class="titleBoldText">Mary Smith</div>
<div id=alignCompany class="titleText">Morris Realty and Investments</div>
</div>
<div id="alignPhoto">
<div class="circle" id=image role="image">
<img src="http://placehold.it/42x42">
</div>
</div>
<br>
One quick and dirty way to wrap it in a table, as to get your vertical align working without any problems as well.
<table>
<tr>
<td>
<div id="alignPhoto" class="titleBoldText">Mary Smith</div>
<div id="alignCompany" class="titleText">Morris Realty and Investments</div>
</td>
<td>
<img src="image/url" alt=""/>
</td>
</tr>
</table>
http://jsfiddle.net/7m5s6gd7/
What about slightly simpler version:
HTML:
<div id="alignPhoto">
<div class="content-wrapper">
<p>Mary Smith</p>
<p>Morris Realty and Investments</p>
</div>
<div class="image-wrapper" id="image" role="image">
<img src="http://placehold.it/250x200" />
</div>
</div>
CSS:
.content-wrapper { float:left; }
.image-wrapper img { border-radius:50%; }
#alignPhoto {
display: flex;
flex-direction: row;
align-items: center;
}
JSFiddle for that
Basically you keep both paragraphs of text in one holding div and float it to left. This alone should do the job.
EDIT:
To make it even simpler, you can use flexbox for vertical alignment.
I've updated the answer.
One of the more effective and scalable solutions to ensuring elements are placed correctly from left to right are to employ wrapper divs with clear:both;. Inside of these wrapper divs you can use float:left or float:right. The wrapper divs allow you to generate a new "row".
#alignPhoto {
float: left;
margin-left: 10px;
}
#profileCompany, #profileName {
display:block;
width:100%;
}
#alignImage {
float: left;
}
.profileWrapper {
float:left;
}
/* Below creates a circle for the image passed from the backend */
.wrapper {
padding: 20px;
font-family: 'Helvetica';
text-align: center;
position: relative;
width: 600px;
clear: both;
}
.profileWrapper:after {
content: "";
width: 200px;
height: 0;
border-top: 42px solid transparent;
border-bottom: 42px solid transparent;
border-right: 40px solid white;
/* Tweak this to increase triangles height */
position: absolute;
right: 0;
top: 0;
}
.circle {
display: block;
height: 50px;
width: 50px;
background-color: #cfcfcf;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
-khtml-border-radius: 25px;
border-radius: 25px;
}
<div class="wrapper">
<div class="profileWrapper">
<div id=profileName class="titleBoldText">Mary Smith</div>
<div id=profileCompany class="titleText">Morris Realty and Investments</div>
</div>
<div id="alignPhoto">
<div class="circle" id=image role="image">
</div>
</div>
</div>
I'm having a problem with the floating property.
My code: JSFiddle
I want it to look this way: printscreen
What can I do, I want the button to NOT float like the other two elements above the button.
My css: (You can see my HTML on JSFiddle)
#upload_photo_form > p {
margin: 3px;
}
#upload_one {
width: 150px;
height: 60px;
background-image: url('image, doesnt matter, looke the same anyways');
background-size: 100%;
float: left;
border: 1px solid grey;
border-radius: 3px;
}
#upload_two {
margin-left: 5px;
width: 150px;
height: 60px;
background-image: url('image, doesnt matter, looke the same anyways');
border: 1px solid grey;
border-radius: 3px;
background-size: 100%;
float: left;
}
You cam modify your code as follows:
<div id="upload_photo_form">
<div>
<p>Please choose a file to upload.</p>
<input id="upload_file" type="file" /><br>
</div>
<div>
<p>Which mode would you like to use?</p>
<div id="upload_one"></div>
<div id="upload_two"></div>
</div>
</div>
<div style="clear:both;"></div>
<button id="upload_button">Upload</button>
Try this:
#upload_button{
margin-top:10px;
clear: both;
}
DEMO
You can also use:
display: block;
Try this if you want to do this just with CSS:
#upload_photo_form div {overflow: hidden}
#upload_button {clear: both; margin-top: 10px;}
Was wondering if i can display 1 text box and 3 images on the same row? All the images are the same size. If possible aswell i'd ideally like a some text underneath each image aswell?
heres the code:
<div class="row">
<div class="side-bar">
<h3> Recent Work </h3>
<p>Here's some of my latest work, covering web design, branding and identity.</p>
View the Portfolio →
</div>
<div class="recent-wrap">
<img src="img/body-metrix.png">
<img src="img/body-metrix-logo.png">
<img src="img/market.png">
</div>
</div>
.row {
display: inline;
float: left;
}
.side-bar {
padding: 10px;
background-color: #f3f3f3;
height: 200px;
width: 250px;
}
.side-bar h3 {
font-weight: bold;
font-size: 19px;
margin-bottom: 5px;
}
.side-bar p {
font-size: 14px;
}
.side-bar a {
font-size: 13px;
}
.recent-wrap img {
max-width: 225px;
min-height: 125px;
border-style: solid;
border-width: 1px;
border-color: #000000;
margin-right: 20px;
margin-bottom: 20px;
}
Ive searched the internet but no luck as yet.
thanks in advance.
There are a number of ways to do this, one example is to float the two child elements:
.side-bar, .recent-wrap {
float: left;
}
This will only work if there is enough room on the parent element for the .side-bar and .recent-wrap to sit next to each other.
Example: http://jsbin.com/poxox/1/edit
CSS:
.row {
width: 250px
}
http://jsfiddle.net/3DCSd/
Here Is a working Fiddle
.row {
display: inline-block; /* changed to inline-block, you don't need
inline and float */
}
.recent-wrap a { /*changed to a , since your images are wrapped in <a> */
max-width: 225px;
min-height: 125px;
border-style: solid;
border-width: 1px;
border-color: #000000;
margin-right: 20px;
margin-bottom: 20px;
}
The rest of the CSS stayed the same
and HTML I just added the text box
<div class="row">
<div class="side-bar">
<h3> Recent Work </h3>
<p>Here's some of my latest work, covering web design, branding and identity.</p>
View the Portfolio →
</div>
<div class="recent-wrap">
<input type="text" id="ss" />
<img src="img/body-metrix.png"/>
<img src="img/body-metrix-logo.png"/>
<img src="img/market.png"/>
</div>
</div>
Try this:
.side-bar {
padding: 10px;
background-color: #f3f3f3;
height: 200px;
width: 250px;
float: left; /* added */
}
.recent-wrap {
margin-left: 270px; /* added (padding + width) of side-bar */
}
Working Fiddle
This approach let the second container stay in line with the first container even if the window size is small.
Here is the sample with textboxes below image: example
I have a CSS problem that I'm not able to figure out. I'm not even sure it is possible. What I want is the following:
I have three buttons/tabs like this http://sv.tinypic.com/r/21cf85t/6 and when you click one tab a different div should show for each tab like this http://sv.tinypic.com/r/21l5y85/6 or http://sv.tinypic.com/r/2dbrv5u/6.
I know how to show/hide the divs with jQuery but the problem is that the divs will increase in height http://sv.tinypic.com/r/k2xxfb/6 and then they will push the other tabs and divs down. Is there a way to create what I am trying to do?
I'm not a guru in CSS so if you have an example to look at or can post code here I would be very very thankful!
This is the HTML I'm using for my tabs:
<div class="MainContent">Content</div>
<div class="TabsHolder">
<div id="Tab1">
<div style="width:200px">
Content Tab 1
</div>
</div>
<a class="Button1" href="#Tab1"></a>
<div class="clearer"></div>
<div id="Tab2">
<div style="width:200px">
Content Tab 2
</div>
</div>
<a class="Button2" href="#Tab2"></a>
</div>
CSS:
.MainContent {
float: left;
}
.TabsHolder
{
float: left;
}
.Button1
{
float: left;
margin: 100px 0px 20px 0px;
background: url(images/Button1.png) no-repeat 0 0;
height: 79px;
width: 27px;
}
#Tab1
{
width: 200px;
margin: 80px 0px 20px 0px;
border: solid 1px #ACCD45;
position: relative;
float: left;
overflow: hidden;
padding: 20px;
}
.Button2
{
float: left;
margin: 0px 0px 20px 0px;
background: url(images/Button2.png) no-repeat 0 0;
height: 97px;
width: 27px;
}
#Tab2
{
width: 200px;
margin: 0px 0px 20px 0px;
border: solid 1px #ACCD45;
position: relative;
float: left;
overflow: hidden;
padding: 20px;
}
div.clearer
{
clear: both;
margin: 0px;
margin-bottom: 0px;
margin-top: 0px;
padding: 0px;
line-height: 0px;
height: 0px;
width: 0px;
overflow: hidden;
}
Here is what I put together using pure CSS - Tested in Firefox, IE8 and Chrome (not sure about others). Try out a demo here.
Note: I wanted to make a comment about one thing in your original HTML - you can't add a background image to a link <a> tag.
CSS
.MainContent {
float: left;
width: 400px;
height: 400px;
background: #444;
}
.buttons {
float: left;
margin: 10px 0 10px 0;
width: 27px;
clear: both;
}
.Button1 {
background: #555 url(images/Button1.png) no-repeat 0 0;
height: 79px;
}
.Button2 {
background: #555 url(images/Button2.png) no-repeat 0 0;
height: 97px;
}
.Button3 {
background: #555 url(images/Button3.png) no-repeat 0 0;
height: 127px;
}
.tabsHolder {
float: left;
position: relative;
}
.tabs {
width: 200px;
height: 200px;
margin: 0 0 20px 0;
border: solid 1px #ACCD45;
background: #444;
overflow: hidden;
padding: 20px;
display: none;
position: absolute;
left: 0;
}
#tab1 { top: 0; }
#tab2 { top: 98px; }
#tab3 { top: 215px; }
a:hover .tabs {display: block;}
HTML
<div class="MainContent">Content</div>
<div class="tabsHolder">
<a href="#tab1"><div class="buttons Button1">1</div>
<div id="tab1" class="tabs">
Content tab 1
</div>
</a>
<a href="#tab2"><div class="buttons Button2">2</div>
<div id="tab2" class="tabs">
Content tab 2
</div>
</a>
<a href="#tab3"><div class="buttons Button3">3</div>
<div id="tab3" class="tabs">
Content tab 3
</div>
</a>
</div>
</div>
You will need to define the pages (divs to hide/show) and tabs in two separate divs.
These will want to be floated next to each other, so you will have something like
<div class="pages">
<div class="page" id="tab1">....</div>
<div class="page" id="tab2">....</div>
</div>
<div class="tabs">
<div class="tab">Tab 1</div>
<div class="tab">Tab 2</div>
</div>
You can then set a min-height on pages (height for IE6, put into a conditional stylesheet), set pages and tabs to both float left, both with fixed widths.
Finally when you attach your event to $('#tab a'), make sure you iterate over all the pages hiding the non-relevant ones.
Without JavaScript, you cannot hide one of your divs, you can only have an HTML page per tab (like this or this).
If you want something more dynamic, you should use JavaScript. The tabs system is a built-in component of jQuery, for instance. (Homepage, live demo).
Hope that'll help you.