I have tried multiple things but not position <img> at desired position. It is always stuck between two spans. Tried to img out of the child div and add it to the parent div. But no luck. I want to position it below my spans and with padding-top:20px;.This image is a 200x38px image. Here is my code:
HTML
<div class="col1-step2">
<div class="heading-step2">
<span class="heading-step2">Hello signed User.</span>
<span class="heading-step2 textblue">How are you doing.</span>
<img class="user-bar" src="<?php echo site_url('img/bar.png'); ?>">
</div>
</div>
CSS
.col1-step2 {
float: left;
width: 40%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
}
div.heading-step2 {
top: 6%;
position: relative;
}
.heading-step2 {
font-size: 24px;
color: #f7f7f7;
}
.heading-step2 .textblue {
color: #55c7fa;
font-weight: bold;
display: block;
}
img.user-bar {
position: absolute;
padding-top: 25%;
}
You have a mix of relative and absolute positioning. By removing the absolute positioning on the image and restructuring the HTML you can get different element ordering:
http://jsfiddle.net/HhbQB/1/
<div class="col1-step2">
<div class="heading-step2">
<span class="heading-step2">Hello signed User.</span>
<img class="user-bar" src="http://placehold.it/200x100" />
<span class="heading-step2 textblue">How are you doing.</span>
</div>
</div>
Updated fiddle in response to your comment: http://jsfiddle.net/HhbQB/2/
You can give relative or absolute position to your divs, if you want help then try giving location where you want the div to be.
Related
I'm doing a progression throught the site bar and I'm having a problem. There are four span elements that represents the sections of the frontpage, when you click on one of them it scroll to that section position. The problem is for some reason, the span element are taller than the div cointaining it, and for that, I can't align it vertically. It ain't a problem until you try to use the website on smaller resolutions, in wich, the span elements overflows the div.
Here is what I'm talking about
See that the right attribute is because of a script that positioned the span according to the section position.
And here is where the problem became obvious
Here is the HTML :
<header id="masthead" class="site-header" role="banner" style="position: relative; top: auto;">
<div class="container-fluid">
<div class="row">
<div id="progressDiv">
<span id="progBar">
</span>
<div id="SectionsPos">
<a href="/#features">
<span id="novedPos" class="sectPos"> Novedades </span>
</a>
<a href="/#about">
<span id="redesPos" class="sectPos tooBig"> Redes Sociales </span>
</a>
<a href="#ProductosPrinc">
<span id="prodPos" class="sectPos"> Productos </span>
<a href="#Contacto">
<span id="contPos" class="sectPos"> Contacto </span>
</a>
</div>
</div>
</div>
</div>
And here is the CSS :
#progressDiv {
display: block;
border: solid 1px;
border-color: #d9b25f;
position: relative;
width: 100%;
height: 10vh;
}
#progBar {
height: inherit;
display: block;
width: 0%;
background: #d9b25f;
max-width: 100%;
}
#SectionsPos{
display: block;
position: absolute;
width: 100%;
top: 50%;
height: 10vh;
margin-top: -5vh;
}
.sectPos {
font-weight: 900;
color: white!important;
position: absolute;
}
Excuse my English, it is not my native language, if there is something that it's not completely clear please let me know and I'll try to explain myself better
I kind of solved it but it is not an actual solution but a way to a avoid the problem, i changed de vh for pixels units, aparently you cant do what i wanted to do using vh units
I have referred this question but it dint help me out . I am trying to change span tags height and width inside image tag but it's not working and this is my code:
html
<img class="profile_pic" alt="Sumanth Jois" src="file/someimage">
<span class="changePicture">HelloThere</span>
</img>
Css
//There are many spans so I am using the . operator to specify
span.changePicture{
width: 100px;
height:200px;
background-color:red;
margin-left: -150px;
color: white;
margin-top: -20px;
}
I am not able to change the width and height using this code.Can I know how I can solve this?
ThankYou
First, span is a single line element. So no height.
Second, image is not : <img> </img>
Image tag is a single tag <img />
Try using a div instead of the span. And may be add span within it.
span is by default an inline element which cannot take width and height properties but you may use display: block; or display: inline-block; to set height/width to it.
Snippet to overlay span over image :
div {
top: 10px;
left: 20px;
position: absolute;
color: #FFF;
}
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="image" />
<div>
<H1>Text </H1>
</div>
First of all the way you use img tag was wrong the html must be like this:
<img class="profile_pic" alt="Sumanth Jois" src="file/someimage" />
<span class="changePicture">HelloThere</span>
and just add display:block; to css to set height and width
span.changePicture{
width: 100px;
height:200px;
background-color:red;
margin-left: -150px;
color: white;
margin-top: -20px;
display:block; /*added*/
}
EDITED:
To do that you need to put the image into div like this one:
<div class="container">
<div class="background-img">
<img class="img-responsive" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT_1tKSY61_ZLpmpR0PWO784otZulHIMgrNLECJ-Te8HwvqoXMJZv8GYDo" alt="Generic placeholder image">
<div class="overlay">
<span>Text</span>
</div>
</div>
</div>
Here is the css:
.background-img .overlay{
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.background-img .overlay {
opacity: 1;
width: 100%;
height: 100%;
background-color: rgba(255, 51, 51, 0.5);
}
.container{position:relative;
max-width:300px;
}
.container img{width:100%;
display:block;
}
Here is the jsfiddle:
DEMO
Currently I can not find a solution that is responsive and scrollable to put text on an image. I need the height to be flexible and the width at 100%. I tried to use position:relative; and css background images with no luck. When I use position: relative; there is a space at the top of the image and the only way to delete it is negative margins which I think is not sustainable it there are multiple posts. css backgrounds does not show the full image unless you set dimensions and when is responsive you cant set dimensions. I dont think I can use position absolute because it would not scroll. so I dont not know what to use.
I have this HTML code here:
<div class="post">
<span><a>Posted By Adam</a></span>
<img width="100%" src="uimg/adam-levine-600.jpg">
</div>
Use position: absolute; and add a spacer for the nav:
http://jsfiddle.net/ryanpcmcquen/p3bes5xq/
.nav {
height: 100px;
width: 100%;
position: fixed;
background-color: #21A7F0;
text-align: center;
z-index: 10;
color: #ffffff;
}
.spacer {
height: 105px;
}
.post span {
position: absolute;
color: #ffffff;
text-shadow: 1px 1px 2px #000000;
}
.post img {
width: 100%;
}
<div class="nav">nav bar</div>
<div class="spacer"></div>
<div class="post"> <span><a>Posted By Adam</a></span>
<img src="//fillmurray.com/880/450" />
</div>
<div class="post"> <span><a>Posted By Adam</a></span>
<img src="//fillmurray.com/880/260" />
</div>
<div class="post"> <span><a>Posted By Adam</a></span>
<img src="//fillmurray.com/880/194" />
</div>
Well im trying to achieve a basic effect of 6 images placed next to each other ( 2 rows of 3) and want to add some text over them. But the problem is (I think) in the float = left "command" in the CSS, which indeed puts my images nicely next to each other... BUT throws all of my text in the one place instead of nicely with the appropriate image. I've been sitting and thinking on this for solid few days and have no idea what to do. Hope you can help.
CSS
.text {
position: absolute;
z-index: 100;
color: black;
width: 100%;
}
.image {
float: left;
clear: both;
padding: 2px;
position: relative;
}
HTML
<body>
<div class="row" style="width:1600px">
<div class="container">
<img class="image" src="Life.jpg" alt="Life" style="width:520px;height:360px;" />
<p class="text">Life</p>
</div>
<div class="container">
<img class="image" src="Trees are Cool.jpg" alt="Trees Are Cool" style="width:520px;height:360px;" />
<p class="text">Trees are Cool</p>
</div>
<div class="container">
<img class="image" src="Radical dinosaurs.jpg" alt="Radical Dino" style="width:520px;height:360px;" />
<p class="text">Radical Dinosaurs</p>
</div>
<div class="container">
<img class="image" src="Big Round Vuttons.jpg" alt="Big Round Buttons" style="width:520px;height:360px;"/>
<p class="text">Big Round Buttons</p>
</div>
<div class="container">
<img class="image" src="Run.jpg" alt="Run" style="width:520px;height:360px;"/>
<p class="text">Run</p>
</div>
<div class="container">
<img class="image" src="Thats crazy.jpg" alt="That's Crazy" style="width:520px;height:360px;"/>
<p class="text">That's Crazy</p>
</div>
</div>
</body>
Use following css, this will solve your problem
.text {
position: absolute;
z-index: 100;
color: black;
width: 100%;
top: 0;
}
.container {
display: inline-block;
box-sizing: border-box;
padding: 2px;
position: relative;
}
the problem is that you are positioning your image to relative. but your .text is direct child of .container by default .text find it's parent to be position relative but .container has not apply css property position relative then it find .container parent to be position relative and so on, in the end html is position relative that's why all your code stack on the top of each other.
SEE DEMO
try this
.contailer{
position: relative;
}
Add position: relative to the .container class, so it will be the .text element context. The element is positioned in relation to the context.
The context is the last parent that has position: relative / absolute / fixed. Right now the context is probably some higher level container or even the body itself, so all .text items are concentrated there.
It has to do with the position of the elements like other have pointed out
.text {
position: absolute;
z-index: 100;
color: black;
width: 100%;
top: 50px;
left: 50px;
}
.image {
padding: 2px;
position: relative;
}
.container {
float:left;
}
https://jsfiddle.net/xqf8kfd1/1/
Give 'container' class style as follows:
.container {
position: relative;
}
And remove float: left; from 'image' class
try removing the position:absolute and adding float:left to the css text class
.text {
float: left;
z-index: 100;
color: black;
width: 100%;
display: inline-block;
}
I have an element that's 60px tall that has other elements like an image and a couple of spans inside of it and I'm having trouble getting them to align vertically inside the 60px high element. Here's the mockup and CSS:
<div class="member">
<img src="images/pic.png" alt="John Smiths's Profile Picture" class="pic">
<span class="name">John Smith</span>
<span class="skills">PHP, MySQL, Javascript, C#, Java</span>
</div>
#sidebar .member {
height: 60px;
margin-bottom: 10px;
vertical-align: center;
}
#sidebar .member .name {
font-size: 15px;
font-weight: bold;
}
#sidebar .member .pic {
width: 50px;
height: 50px;
border-radius: 50%;
float: left;
margin-right: 10px;
}
#sidebar .member .skills {
display: block;
font-size: 12px;
overflow: hidden;
}
I've put it up on jsfiddle: http://jsfiddle.net/CYFyx/2/
As you can see, the elements within the .member element push to the top. I need them vertically aligned like so:
Already tried vertical-align: middle; but with no luck.
You can use vertical-align: middle in td table layout only. So you have to add a div around the spans
<div class="cell">
<span class="name">John Smith</span>
<span class="skills">PHP, MySQL, Javascript, C#, Java</span>
</div>
with this properties
#sidebar .member .cell {
display: table-cell;
vertical-align: middle;
height: 50px;
}
You can test it here: http://jsfiddle.net/Tn2RU/
Try putting them all in a div that you can vertically align using
position:relative;
margin-top: auto;
margin-bottom: auto;
height: XXpx;
You need to set the width of a parent element and width of your children so they must go into next line.
The other posibility would be to set your parent element to position:relative and then use position:absolute on all children and simply, precisely position them with top:20px; , then next one top:40px; etc etc.
With this second solution you can get exact pixel positioning of all children elements.
That shall positively give you best results.
You could also put them into a div and add padding to the top.
HTML
<div id="block">
<span class="name">John Smith</span>
<span class="skills">PHP, MySQL, Javascript, C#, Java</span>
</div>
CSS
#block {
padding-top:5px;
}
jsFiddle