Can some one suggest how to display this type of message chat in html where messages are shown in boxes in left & right of screen ..?
Boxes are shown in blue & green colour
I will give some clues so you can work on it, I think it can help you:
HTML code:
<div class="blue_box">
<span>Hello</span>
</div>
<div class="green_box">
<span>Bye</span>
</div>
CSS:
.blue_box, .green_box {
display: block;
clear:both;
}
.blue_box span {
background-color: blue;
color: white;
padding: 10px 5px;
display: block;
float: right;
}
.green_box span {
background-color: green;
color: white;
padding: 10px 5px;
display: block;
float: left;
}
Hope it helps,
here is a fiddle to see it running.
http://jsfiddle.net/54vgn2um/2/
Related
I'm currently working on a simple project in HTML/CSS (Bootstrap). Very simply, I have the task of styling links to look like buttons, and getting them to stack in a mobile view.
Requirements: buttons should be side-by-side on regular/desktop view, and should stack on top of each other in iPhone/Android devices.
CodePen: https://codepen.io/anfperez/pen/joqoXG
Here's the code I have so far:
html
<a class="button-a" href="www.google">Link that looks like button</a>
<a class="button-b" href="www.amazon.com">Another link that looks like a button</a>
css (Bootstrap can be included)
.button-a, .button-b {
background-color: blue;
color: white;
text-decoration: none;
padding: 10px;
}
.button-a {
background-color: blue
}
.button-b {
background-color: red;
}
When I try viewing the code in a mobile view, the red button button ends up overlapping on top of the blue button since they're both links. How can I get the red button to clear the blue button? I can't use Bootstrap's btn-group in this case.
You can use Flexbox inside a media query to stack the elements using flex-direction: column.
.button-a, .button-b {
background-color: blue;
color: white;
text-decoration: none;
padding: 10px;
}
.button-a {
background-color: blue
}
.button-b {
background-color: red;
}
#media (max-width: 767px) {
.wrapper {
display: flex;
flex-direction: column;
align-items: flex-start;
}
}
<div class="wrapper">
<a class="button-a" href="www.google">Link that looks like button</a>
<a class="button-b" href="www.amazon.com">Another link that looks like a button</a>
</div>
....really? you can making a have behaviour of div, if you want them to stack, just make the button class having inline-block
.button-a, .button-b {
background-color: blue;
color: white;
text-decoration: none;
padding: 10px;
margin: 20px;
display:inline-block;
}
Edited Codepen
This make the a link has the margin and padding behaviour like div. You just have to setting the width.. So if the media canvas shorter, the link will automatically stacking
.button-a, .button-b {
background-color: blue;
color: white;
text-decoration: none;
padding: 10px;
margin: 20px;
display:block;
}
.button-a {
background-color: blue
}
.button-b {
background-color: red;
}
I'm looking to find out how to add another box inside my box which would be faded to act as a title bar for that specific box (If that makes sense)!
So basically, in the SOCIALBOX I'm looking to get a sub-faded bar at the top inside which would act as a title bar.
After a few comments of people saying they're not sure what I mean, I created a quick image in photoshop to act as some reference point.
Code Snippet:
body {
background: url("../images/backgroundimage.jpg") repeat 0 0;
}
/* CSS MENU BAR CODE GOES HERE */
#menubar {
width: 98.5%;
height: 40px;
background-color: #000000;
position: fixed;
border: 2px solid #ffffff;
}
.inside_text {
color: #FFFFFF;
float: right;
margin: 11px 7px 0 0;
}
.inside_text2 {
color: #FFFFFF;
float: left;
margin: 11px 0 0 7px;
}
/* CSS SOCIALBOX (RIGHT) GOES HERE */
#socialbox {
width: 40%;
height: 40%;
position: relative;
float: right;
margin: 0 8px 0 0;
background-color: #000000;
border: 2px solid #126b72;
}
<div id="menubar">
<div class="inside_text">
PLACEHOLDER TEXT
</div>
<div class="inside_text2">
PLACEHOLDER TEXT
</div>
</div>
<br />
<br />
<br />
<div id="socialbox">
</div>
So you are asking for a faded line within SOCIALBOX div, to serve as underline for a title?
If thats correct create another class
.title-bar
{
border-bottom:3px;
solid black;
opacity:0.3;
}
position with margin-left & margin-top values inside that class based on where you want it within SOCIALBOX.
for example:
.title-bar
{
border-bottom:3px;
solid black;
opacity:0.3;
margin-left:50px;
margin-top:30px;
float:left;
}
create a:
<div class="title-bar"></div>
and place that inside
<div id="socialbox"></div>
BTW make it a habit to use float:left when positioning divs with CSS, try to avoid position:absolute or fixed, unless absolutely necessary. It just comes out cleaner this way.
When you hover over the paragraph text in JS Fiddle the image gets covered with the background. Using z-index everywhere I could think of doesn't have any effect. (I left the useless z-index stuff in there so show you what I tried.) I also tried pointer-events: none; in various places.
I also tried this type of thing elm1:hover elm2{}, but that didn't help. I'm new to CSS and I'm applying what I have searched and found.
Edit: The problem: on hover background color covers image
Markup:
<div id="col2-middle" class="three-cols-middle three-cols">
<a href="About.php#how-we-work- projects">
<h1 class="h-big-font">Specific Projects</h1>
<img class="col-img" src="3dplotCroppedWithFinancial.png" alt="3dplot">
<p class="p-on-white">
XXXXXXXX XXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXX hover here to cover img XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
<br/>
<br/>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</p>
</a>
</div>
css:
div.three-cols {
float: left;
width: 29.33%;
position: relative;
left: 70.67%;
overflow: auto;
padding: 1% 1% 1% 1%;
min-width: 200px;
z-index:-1;
}
.three-cols a {
position: relative;
text-decoration: none;
color: #000;
}
.three-cols a p:hover {
background-color: #ecebeb;
}
.col-img {
float: left;
padding: 4%;
z-index: 1;
}
.three-cols h1 {
margin-bottom: 2%;
text-align: center;
}
.three-cols p {
padding: 0.5% 0 3% 0;
z-index: -1;
}
p {
word-wrap: break-word;
color: #000;
margin: 0;
padding: 10px 20px;
font-size: 16px;
}
Here is my demo:
http://jsfiddle.net/pxD33/
PS - needs to be responsive and solution all in CSS and HTML.
<a> is by default an inline-level element. Once you set display: block to it, it fixes the issue.
.three-cols a {
display: block;
position: relative;
text-decoration: none;
color: #000;
}
http://jsfiddle.net/teddyrised/pxD33/2/
p/s: You don't need z-index for your case. You can safely remove all of them.
Anything you use a z-index with has to also have a position attribute.
I hope this helps!
You can get rid of the z-indexes, and then change
.three-cols a p:hover {
background-color: #ecebeb;
}
to
.three-cols:hover {
background-color: #ecebeb;
}
Updated fiddle: http://jsfiddle.net/pxD33/1/
updated fiddle: Fiddle
just change anchor's display to block:
.three-cols a {
display:block;
position: relative;
text-decoration: none;
color: #000;
}
and give hover class to a not p:
.three-cols a:hover {
background-color: #ecebeb;
}
As #Terry said, setting display: block on your three-cols a element should do the trick.
If you want to have a "free hanging" picture on the left of your text, you could also use a media object.
Simply add the following rules
display: block;
overflow: hidden;
to col-img and three-cols p.
You can read more about the media object here.
Is there a way to display a line next to a header using CSS? Here's an image of what I'm talking about:
I could do it with a static background image, but that'd require custom CSS for every heading. And I could do some hacky stuff using :after and background colors on the h1, but it wouldn't look right against a gradient background.
I'd like to do this with CSS, not JavaScript. If it doesn't work in older browsers, that's fine.
UPDATE:
In the past I've done something like this:
<h1><span>Example Text</span></h1>
h1 {background-image:url("line.png");}
h1 span {background-color:#FFF;dislpay:inline-block;padding-right:10px}
While that works, it's hacky, and it doesn't work well with gradient backgrounds, because the span has to have a solid background color.
What I'm really looking for is something like this:
<h1>Example Text</h1>
h1 {background-image:url("line.png");} /* but don't appear under the example text */
I misspoke about the :after thing in the original post, I was thinking of another issue I had in the past.
You could do something like the following:
HTML
<div class="border">
<h1>Hello</h1>
</div>
CSS
h1 {
position: relative;
bottom: -17px;
background: #fff;
padding-right: 10px;
margin: 0;
display: inline-block;
}
div.border {
border-bottom: 1px solid #000;
}
Here is the JsFiddle to the above code.
After doing some more research, I think I found the best solution:
h2 {
color: #F37A1F;
display: block;
font-family: "Montserrat", sans-serif;
font-size: 24px;
font-weight: bold;
line-height: 25px;
margin: 0;
text-transform: uppercase;
}
h2:after {
background: url("../images/h2.png") repeat-x center;
content: " ";
display: table-cell;
width: 100%;
}
h2 > span {
display: table-cell;
padding: 0 9px 0 0;
white-space: nowrap;
}
Modified from: How can I make a fieldset legend-style "background line" on heading text?
It still requires some extra markup, unfortunately, but it's the most minimal that I've found. I'll probably just write some jQuery to add the span automatically to the h2s.
Here is one way of doing it.
Start with the following HTML:
<h1>News<hr class="hline"></h1>
and apply the following CSS:
h1 {
background-color: tan;
display: table;
width: 100%;
}
.hline {
display: table-cell;
width: 100%;
padding-left: 20px;
padding-right: 20px;
border: none;
}
.hline:after {
content: '';
border-top: 1px solid blue;
width: 100%;
display: inline-block;
vertical-align: middle;
}
See demo at: http://jsfiddle.net/audetwebdesign/Dsa9R/
You can repurpose the hr element to add the line after the text.
The advantage here is that you don't have to wrap the text with some other element.
Note: You can rewrite the CSS selectors and avoid declaring a class name and save a bit of typing.
Whenever I click on the checkbox, the browser window (firefox) will scroll on the top of the screen.
How can I prevent this behavior so when I click on the checkbox the browser window will not scroll on top?
Here is the code found from here http://jsfiddle.net/zAFND/6/
Thank you.
<html>
<head>
<title>Test</title>
<style>
div label input {
margin-right: 100px;
}
body {
font-family:sans-serif;
}
#ck-button {
margin: 4px;
background-color: #EFEFEF;
border-radius: 4px;
border: 1px solid #D0D0D0;
overflow: auto;
float: left;
}
#ck-button {
margin: 4px;
background-color: #EFEFEF;
border-radius: 4px;
border: 1px solid #D0D0D0;
overflow: auto;
float: left;
}
#ck-button:hover {
margin: 4px;
background-color: #EFEFEF;
border-radius: 4px;
border: 1px solid red;
overflow: auto;
float: left;
color: red;
}
#ck-button label {
float: left;
width: 4.0em;
}
#ck-button label span {
text-align: center;
padding: 3px 0px;
display: block;
}
#ck-button label input {
position: absolute;
top: -20px;
}
#ck-button input:checked + span {
background-color: #911;
color: #fff;
}
</style>
</head>
<body>
<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="ck-button">
<label>
<input type="checkbox" value="1"><span>red</span>
</label>
</div>
</body>
The problem is this rule:
#ck-button label input {
position:absolute;
top:-20px;
}
When you click on a label the browser tries to focus the related input. In your case the checkbox element is lying at the top of the page, even outside the viewport – so Firefox tries to scroll there.
You can solve it like this by adding:
#ck-button label {
display: block;
position: relative;
overflow: hidden;
}
Demo
Try before buy
Alternative
Heisenberg points out a problem in his answer which can occur when using extreme values. Unfortunately the proposed idea has the same quirk as the one shown above.
So an alternative solution is simply to hide the input. The functionality is not affected.
CSS
#ck-button label input {
display: none;
}
Demo
Try before buy
The answer accepted is not entirely true. Works, but not in all cases.
If you use the common css to hide elements (probably -999em or similar) at the "top" attribute, in this case position:relative has nothing to do because always -999em will be much higher than the viewport.
The answer accepted works fine because the "top" is only -20px . Try to set it a more higher number and you´ll see the problem.
So, the solution is not to set a relative position.
I think the correct way is only to set a negative value at left position (not top).
Try it. :)
you could hide your checkbox input like this:
#ck-button label input {
position:absolute;
top:+20px;
visibility: hidden;
}