This is my jsFiddle http://jsfiddle.net/YrYH6/2/
How can I align the Facebook and Twitter icons with the Logout text?
CSS:
#header_bg {
background: #444444;
height: 20px;
position: absolute;
width: 100%;
z-index: -1;
}
#header {
background: url("http://i.imgur.com/HXC7Q.png") repeat-x scroll center bottom transparent;
height: 30px;
padding: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2;
}
HTML:
<div id="header">
<div id="header_bg"> </div>
<open style="font-size: 0.7em; color: rgb(255, 255, 255); float: right; margin-top: 7px; margin-right: 75px;">
<img src="http://i.imgur.com/pYAtH.png">
<img src="http://i.imgur.com/LnMhg.png">
Logout
</open>
</div>
The simplest solution, which requires no change to the markup is just to use:
a,img{vertical-align:middle}
Live example: http://jsfiddle.net/tw16/YrYH6/4/
For finer tuning, the alignment seems a bit better if you do this:
img{vertical-align:top}
a{vertical-align:middle}
I put the link in a span and then applied these styles
span{
display:inline-block;
vertical-align:top;
padding:0;
}
Example: http://jsfiddle.net/YrYH6/3/
Remove the open elements, float the a to the left and apply margins - http://jsfiddle.net/edY2Y/
Related
I have an image and some text inside. But it make hard to read because the image is too light. I want to make it a little dark at the bottom so the text can appear more clearly. How can I do that? Thank you!
This image is described what I've mentioned:
Here is my code:
.image {
height: 450px;
position: relative;
width: 256px;
margin-right: 1.4rem;
margin-bottom: 3rem;
cursor: pointer;
color: white;
}
.image__text {
font-size: 2rem;
position: absolute;
bottom: 1%;
left: 20%;
line-height: 50px;
}
<div class="image">
<div class="image__child">
<img alt="img" src="https://lh3.googleusercontent.com/-MVd7NWMh1oI/Vqrtx00GXQI/AAAAAAAAWT8/PRBTjxMENbY/s800-Ic42/ch%2525C3%2525B3-teacup-pomeranian.jpg" />
</div>
<div class="image__text">SOME TEXT</div>
</div>
If your only goal is to make the text more visible you could just add a text shadow.
.image__text {
text-shadow : 1px 1px black;
}
Otherwhise you can add an overlayer with a gradient that goes from black to trasparent
.image {
height: fit-content;
position: relative;
width: fit-content;
margin-right: 1.4rem;
margin-bottom: 3rem;
cursor: pointer;
color: white;
z-index:1;
}
.image::after{
content:"";
position:absolute;
background: linear-gradient(0deg, rgba(39,38,42,1) 0%, rgba(255,255,255,0) 60%);
z-index:2;
height:100%;
width:100%;
top:0;
left:0;
}
.image__text {
font-size: 2rem;
position: absolute;
bottom: 10%;
left: 20%;
line-height: 50px;
z-index:3
}
<div class="image">
<div class="image__child">
<img alt="img" src="https://lh3.googleusercontent.com/-MVd7NWMh1oI/Vqrtx00GXQI/AAAAAAAAWT8/PRBTjxMENbY/s800-Ic42/ch%2525C3%2525B3-teacup-pomeranian.jpg" />
</div>
<div class="image__text">SOME TEXT</div>
</div>
I would suggest using a background-image gradient overlay and add the source via the css as illustrated below under background-image. It may take a moment to fiddle with the percentages to make sure the right portions are overlaid with the gradient, and with the degrees as well. Can check out the docs on css gradients for more info - https://www.w3schools.com/cssref/func_linear-gradient.asp
.image {
background-image:
linear-gradient(190deg, rgba(white, 10%), rgba(black, 100%)),
url('images/insert background image.jpg');
height: 450px;
position: relative;
width: 256px;
margin-right: 1.4rem;
margin-bottom: 3rem;
cursor: pointer;
color: white;
}
With this you can then place the text inside the div - as the image becomes the background of the div.
There is also the option of placing the text in the div with the image and just giving that a background color and sizing it accordingly.
How do you place text above an image, such that it runs across the bottom of the image.
i.e.
<div class="i_have_an_image">
<h2>I appear on top of the image, but aligned along the bottom</h2>
</div>
I am struggling to work it out, to see what I mean, The following web site, has a great example of this. I've seen it before on sites, heres an example snapshot of what I mean:
Wrap the image in an inline-block div which has position:relative.
Position the h2 absolutely with bottom:0 and width:100% and the height of the h2 will adjust automatically to the content of the positioned element.
.i_have_an_image {
display: inline-block;
position: relative;
}
.i_have_an_image img {
display: block;
}
.i_have_an_image h2 {
position: absolute;
margin: 0;
bottom: 0;
left: 0;
width:100%;
padding: 1em;
background: rgba(255, 255, 255, 0.5);
color: white;
}
<div class="i_have_an_image">
<img src="http://www.fillmurray.com/460/300" alt="">
<h2>I appear on top of the image, but aligned along the bottom</h2>
</div>
.i_have_an_image{
position:relative;
width:200px;
height:200px;
}
h2{
position:absolute;
bottom:0px;
background:rgba(0,0,0,0.5);
color:#fff;
margin:0px;
}
<div class="i_have_an_image">
<img src="http://i-cdn.phonearena.com/images/article/32854-image/First-samples-from-Sonys-new-13MP-stacked-camera-sensor-capable-of-HDR-video-show-up.jpg">
<h2>I appear on top of the image, but aligned along the bottom</h2>
</div>
.butFrame {
width: 32%;
position: relative;
cursor: pointer;
}
.butFrame .butHeading {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 10px 0;
display: block;
background: rgba(0, 0, 0, 0.5);
margin: 0;
font-family: inherit;
font-size: 1.2em;
color: #fff;
text-align: center;
text-transform: uppercase;
font-weight: 400;
}
<div class="butFrame">
<img src="https://unsplash.it/g/380/210?random">
<div class="butHeading">Heading</div>
https://jsfiddle.net/n0aLts9w/
Another solution of image with heading and sub heading. (As per your given image)
Demo Here
.i_have_an_image{
position: relative;
background-image: url(http://i.imgur.com/McIDx6g.jpg);
background: url((http://i.imgur.com/McIDx6g.jpg) no-repeat center center;
height: 400px;
width: 400px;
}
.title_wrap{
position: absolute;
background-color: rgba(0, 0, 0, 0.5);
bottom: 0;
left: 0;
right: 0;
padding: 15px;
color: #ffffff;
}
.title_wrap h2 {
font-size: 20px;
margin: 0;
}
.title_wrap h6 {
font-size: 12px;
margin: 0;
}
<div class="i_have_an_image">
<div class="title_wrap">
<h2>Heading goes here</h2>
<h6>I appear on top of the image, but aligned along the bottom</h6>
</div>
</div>
You can make it like this:
I added only the "wrap" div
.wrap {
max-width: 300px;
}
h2 {
position: relative;
top: -78px;
opacity: 0.8;
background: #222222;
color: #fff;
}
<div class="i_have_an_image">
<div class="wrap">
<img src="http://www.theage.com.au/content/dam/images/g/p/o/1/v/l/image.related.homepagePortrait.300x370.gpnu1x.2f8s9.png/1466499504473.jpg" alt="Angelika Graswald in court with her lawyers. " width="300" height="370">
<h2>I appear on top of the image, but aligned along the bottom</h2>
</div>
</div>
This is how I've been doing it recently. It's using the new html5 tag figcaption
It doesn't matter how big the image is or what you put in the figcaption it should just work.
figure.overlay {
display: inline-block;
position: relative;
margin: 0;
}
figure.overlay figcaption {
position: absolute;
background: rgba(0, 0, 0, .5);
color: #fff;
bottom: 4px;
width: calc(100%-10px);
padding: 5px;
}
<figure class="overlay">
<img src="http://www.dogbreedinfo.com/images/germanshepherdface.jpg">
<figcaption>
<h3>
'Some header of some sort!'
</h3> Words that make up a sentance! Or maybe 2 sentances.
<br />
<br />Even with a new line
</figcaption>
</figure>
Ho you can do it with flexbox simply like this:
.imageWrapper {
width: 200px;
height: 300px;
display: flex;
flex-direction: column;
justify-content: flex-start;
border: 1px solid black;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/a/a8/Tour_Eiffel_Wikimedia_Commons.jpg");
background-size: 100%;
}
.textAboveImage {
width: 100%;
height: 50px;
background-color: grey;
z-index: 200;
opacity: 0.5;
}
<div class="imageWrapper">
<div class="textAboveImage">I'm text</div>
</div>
Cheers.
You can make it like this:
I added only the "wrap" div
HTML:
<div class="i_have_an_image">
<div class="wrap">
<img src="http://www.theage.com.au/content/dam/images/g/p/o/1/v/l/image.related.homepagePortrait.300x370.gpnu1x.2f8s9.png/1466499504473.jpg" alt="Angelika Graswald in court with her lawyers. " width="300" height="370">
<h2>I appear on top of the image, but aligned along the bottom</h2>
</div>
</div>
CSS:
.wrap {
max-width: 300px;
}
h2 {
position: relative;
top: -78px;
opacity: 0.8;
background: #222222;
color:#fff;
}
I am trying to make my text appear ontop of my background image. I have tried playing around with the z-index and positioning, but cannot seem to get it right.
Here is my HTML:
<div id="float-left">
<div id="triangles">
<img src="img/trianglebackground.png" id="tripic">
</div>
<div id="float-left-text">
<img src="img/portrait.png" id="port">
</div>
</div>
Here is the CSS I have currently:
#tripic {
z-index:1;
height: 550px;
width: 500px;
text-align: center;
opacity: 0.2;
position: relative;
}
#float-left {
float: left;
/*background: url('img/trianglebackground.png') no-repeat center;*/
background-size:500px 550px;
background-color: #03C9A9;
height: 550px;
width: 50%;
z-index:0 ;
position: relative;
}
#float-left-text{
text-align: center;
z-index: 100;
position: absolute;
}
#port {
height: 200px;
width: 125px;
}
Right now, the entire #floatlefttext section is below the background image, whereas I would like it to be ontop. I have tried to use background-image, but I am not sure it's going to be the best way to get the results I would like. Any advice would be great, thanks!
I created a fiddle for you here: https://jsfiddle.net/0w1max4f/
#floatlefttext{
text-align: center;
z-index: 100;
position: absolute;
top: 0px;
left: 0px;
}
Is this what you were looking for? Since your html didn't actually include any text elements (just an image) to be placed on top of the background, but hopefully this will help you anyway.
What I did was to clean up your html (you had some tags that were not properly closed, for example the images and some divs) and add top and left to you absolute positioned div.
You were using absolute and relative positioning correctly but forgot to specifiy where the absolute positioned item were supposed to be placed.
here's a good article about positioning if you want to learn more:
https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Something like this
<div style="position: relative; background: url(path to image); width: (width)px; height: (height)px;">
<div style="position: absolute; bottom: 0; left: 0.5em; width: 400px; font-weight: bold; color: #fff;">
<p>(text to appear at the bottom left of the image)</p>
</div>
<p style="position: absolute; top: 1em; right: 2em; width: 120px; padding: 4px; background-color: #fff; font-weight: bold; font-size: 11px;">
(text to appear at the top right of the image)
</p>
</div>
Be aware that you should separate the css from the html
Fiddle: Text ontop of an image and linkage
CSS:
div.image-container
{
width: 400px;
}
a.imagewrapper
{
width:inherit;
}
img.theimage{
width:inherit;
}
a.teasertext
{
position: absolute;
padding-top: 1%;
color: #fff;
line-height: 1.2em;
text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
letter-spacing: .02em;
font-size: 1.5em;
overflow-wrap: break-word;
overflow-y: hidden;
-webkit-transition: all .3s;
transition: all .3s;
font-size: 41px;
width:inherit;
}
HTML:
<div>WOOP DE DOO</div>
<div class="image-container">
<a class="teasertext" href="www.stackoverflow.com">Text on the image, wow amazing !</a>
<a class="imagewrapper" href="www.stackoverflow.com">
<img class="theimage" src="http://img.thesun.co.uk/aidemitlum/archive/01667/THUNDER620_1667926a.jpg">
</a>
</div>
<div class="image-container">
<a class="teasertext" href="www.stackoverflow.com">Text on the image, wow amazing !</a>
<a class="imagewrapper" href="www.stackoverflow.com">
<img class="theimage" src="http://img.thesun.co.uk/aidemitlum/archive/01667/THUNDER620_1667926a.jpg">
</a>
</div>
<div>WOOP DE DOO</div>
I have the following html:
<div class="article">
<img src="..." class="article-bg">
<h1 class="heading">Article Heading</h1>
<h2 class="author">Author Name</h2>
</div>
The article divs background image gets set dynamically, so setting the divs background in css is out, I have to use an image tag. I'm not too sure though how to use an img as the divs background, and at the same time have text over the img.
Also the height of the article div should always be 180px, I only have the following simple CSS:
.article {
height: 180px;
padding: 10px;
background-color: blue;
}
Thanks in advance for any tips!
You can do it by this way:
<div class="article">
<img src="http://www.bdembassyusa.org/uploads/images/beautiful-Bangladesh-23.jpg" class="article-bg">
<h1 class="heading">Article Heading</h1>
<h2 class="author">Author Name</h2>
</div>
Ad some more css below:
.article{
height: 180px;
padding: 10px;
background-color: blue;
overflow:hidden;
}
.article img{
position:absolute;
z-index:0;
width: 100%; // make the img fluid
height:200px;
margin:-10px;
object-fit: contain; // similar to `background-size: contain;`
}
.article h1,.article h2{
position:relative;
z-index:1;
}
Test it on jsfiddle:
http://jsfiddle.net/sarowerj/o9L72do0/
What you're looking for in z-index.
Using Z-index allows you to position one element above of the other. But do keep in mind that z-index does only work with positioned elements such as absolute or relative positioning.
You do specify a z-index as follows in the CSS:
.heading { position: absolute; top: 10px; left: 10px; z-index: 900; color: #fff; }
See this jsFiddle for a demo on how to use it:
You can use the CSS property object-fit for this.
However it is worth noting that this property has very little to no support on IE and Edge browser.
.conainer{
position: relative;
width: 500px;
height: 300px;
color: #ffffff;
overflow: hidden;
margin: auto;
}
.conainer img{
position: absolute;
top: 0;
left: 0;
transition: all 1s ease;
}
.conainer:hover img{
transform: scale(1.2);
}
.conainer .content{
position: relative;
z-index: 1;
}
.conainer .content h2{
color: white;
text-shadow: 3px 2px 10px #545454;
text-align: center;
}
<div class="conainer">
<div><img src="https://placeimg.com/640/480/nature" alt=""></div>
<div class="content">
<h2>Here's an example</h2>
</div>
</div>
You can use this code, to make <img> behave like a background image:
<img src="..." class="background-image" />
.background-image {
position: absolute;
z-index: -1;
min-width: 100%;
min-height: 100%;
left: 0;
top: 0;
pointer-events: none;
}
use
<div class="article" style="background: url(imageurl)">
</div>
I'm writing an online chatting widget and I plan to design it as Facebook's.
In my page, a bar is fixed on the bottom, and every chat rooms are contained in that bar.
While the bar's height is fixed, the chat rooms cannot extend its height outside the bar.
Is there any method to achieve this? I have used z-index, !important, and overflow, but all failed.
CSS:
#SNbar {
background-color: rgba(203, 203, 203, 0.80);
position: fixed;
bottom: 0;
width: 100%;
height: 25px;
z-index: 900;
overflow: visible;
}
#chatSessions {
position: relative;
bottom: 0;
float:right;
z-index: 901;
}
.chatSession {
/*
position: fixed;
bottom: 0;
*/
padding: 0 10px 0 0;
width: 260px;
float: right;
z-index: 999;
}
.CStitle {
height: 25px;
background-color:#3B5998;
cursor: pointer;
}
.CStitle .titleText{
text-decoration: none;
font-weight:bold;
color: #FFFFFF;
text-decoration: none;
line-height:2em;
}
.CSbody {
background-color: #FFFFFF;
opacity: 1.0;
display: none;
height: 0 !important;
}
.opened{
min-height: 260px !important;
display: block;
}
.CSMsgContainer {
overflow-y: scroll;
height: 210px;
}
HTML:
<div id="SNbar">
<div id="chatSessions">
<div class="chatSession" id="Div4">
<div class="CStitle" onclick="toggleChatSession(this)"><span class="titleText">Title (With Whom)</span> </div>
<div class="CSbody">
<div class="CSMsgContainer">
<div class="message">b: test1</div>
<div class="message">b: this is used to test css</div>
<div class="message">a: This may be help</div>
</div>
</div>
</div>
<div class="chatSession" id="Div8">
<div class="CStitle" onclick="toggleChatSession(this)"><span class="titleText">Title (With Whom)</span></div>
<div class="CSbody">
<div class="CSMsgContainer">
<div id="Div9" class="message">d: hi C!!</div>
<div id="Div10" class="message">c: Hello D~~</div>
<div id="Div11" class="message">
c: We are the second chat session
</div>
</div>
</div>
</div>
</div>
</div>
position:absolute for the inner container is what you want. Then you can put it anywhere you want. Best is probably to set position:relative to the parent container, so that the position of the inner containers will using the parent as "base".
If I am not wrong, from this when you click on .CStitle, you are toggling the CSbody. So for this, you can set position relative to chatSession class and to the CSbody, give position absolute.
.chatSession {
position: relative;
padding: 0 10px 0 0;
width: 260px;
float: right;
z-index: 999;
}
.CStitle {
height: 25px;
background-color:#3B5998;
cursor: pointer;
}
.CSbody {
position:absolute;
background-color: #FFFFFF;
opacity: 1.0;
display: none;
height: 0;
bottom:25px;
}
.opened{
min-height: 260px;
display: block;
}
.CSMsgContainer {
overflow-y: scroll;
height: 210px;
}
Hope this helps.
try adding this
#SNbar {
height: 25px;
max-height: 25px;
}