I have tried all the solutions I have found on the new trying to get this div to sit on top of the image.
We have a background image, and as you can see from the image below are four words Eversoft, TruSoft, Solarmax and Active Family.
These four words need to be moved up into the boxes on the picture, but I can get the CSS right, this is how my page is constructed
<div class="row">
<img src="~/Content/Images/Mobile-BackGround-new-2.png" class="img-responsive" style="position: relative" />
<div id="stainMasterLinksContainer">
<div id="stainMasterLinksTop">
<b>EverSoft</b> <small><sup>®</sup></small>
<b>TruSoft</b> <small><sup>®</sup></small>
</div>
<div id="stainMasterLinksBottom">
<b>SolarMax</b> <small><sup>®</sup></small>
<b>Active Family</b> <small><sup>™</sup></small>
</div>
</div>
And I'm currently using this CSS for the stainMasterLinksContainer
#stainMasterLinksContainer {
padding-top: -40%;
font-size: 15.5px;
position: relative;
z-index: 100;
}
Any help would be appreciated.
It CAN be done. Here's one way:
<img src="http://practicalaction.org/images/sea-of-ducks-300.jpg" style="position:absolute; left:0px; top:0px"/>
<div style="background-color:blue;position:relative;left:80px; top:80px; width:50px;"> Hello</div>
Related
This is my code and a screenshot of the website.
How can I align my text "button will show a page as below" on the left but on the same height like the start of my picture?
<div class="col-sm-9">
<div class="well">
<h4>Item Price</h4>
<span class="align-baseline";><img src="https://picsum.photos/200" class="img thumbnail" align="middle"/>
button will show a page as below</span>
</div>
</div>
I am talking about the first column!
Okay i got it:
<div class="col-sm-9">
<div class="well">
<h4>Item Price</h4>
<div id="image" style="display:inline;">
<img src="https://picsum.photos/200"/>
</div>
<div id="texts" class="logo"; style="display:inline whitespace:nowrap;">
A very long text(about 300 words)
</div>
</div>
</div>
My css clas:
.logo{
position: relative;
top: -70px; /* This will move it 20px up */
left: 20px; /* This will move it 20px to the right */
}
Thanks to Drown who answered this question
instead of making the logo position relative you can use
margin-top:-70px
margin-left:20px
absolute position for this task is not recommended.
I am trying to make a design where some text of id="text-field" will overlap to id="image-field". I have no idea how to do this, Thank you for your help.
<!DOCTYPE html>
<html>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6" id="text-field"> Some text </div>
<div class="col-sm-6" id="link-field"> Some link </div>
</div>
<div class="row">
<div class="col-sm-12" id="image-field">Background Image </div>
</div>
</div>
</body>
</html>
I made a small re-usable example it's a fairly common thing to do with css here
Here is a example
.box {
position: relative;
}
.box__image {} .box__text {
position: absolute;
bottom: 0;
}
<div class="box">
<div class="box__image">
<img src="http://placehold.it/350x150">
</div>
<div class="box__text">
Testing text
</div>
</div>
Just a small explanation position:relative is used to keep position:absolute elements from going out of their containing div
Using position properties you can ser postion of elements.
#image-field{
position: absolute;
top: 0px;
}
Research on postions property of css.You will get more idea
postion properties
Trying to realize the above structure in my UI. A big picture and thumbnails below it.
I am using the grid components for it. Code:
<div class="row">
<div class="col">
<img url="bigPic"></img>
</div>
</div>
<div class="row">
<div class="col" ng-repeat="pic in Pics">
<img url="pic"></img>
</div>
</div>
Now I want to delete pictures out of Pics. That's why I introduce badges with the following code:
<div class="row">
<div class="col">
<img url="bigPic"></img>
</div>
</div>
<div class="row">
<div class="col" ng-repeat="pic in Pics">
<img url="pic"></img>
<span class="badge badge-assertive picture-thumbnail-badge"
on-tap="removePic($index)">
<i class="icon ion-ios7-close-empty"></i>
</span>
</div>
</div>
And this results in the following (with a css class moving the badges in the top left corner):
.picture-thumbnail-badge{
position: relative;
top:-60px;
right:65px;
z-index: 100;
}
The Problem here is that the thumbnails are no longer centered underneath the big picture. I guess the flexbox is taking into account the size of the badge somehow.
My obvious question now: how can I ignore the badge in the alignment calculation and make this thumbnail row centered, even with badges?
Thanks in advance.
You need to move the .picture-thumbnail-badge out of the flow. For that, you can use position:absolute; instead of position:relative; :
.picture-thumbnail-badge{
position: absolute;
top:-60px;
right:65px;
z-index: 100;
}
(note that the parent needs to be positioned with position:relative;)
This question already has answers here:
Image overlay on responsive sized images bootstrap
(5 answers)
Closed 8 years ago.
I'm trying to have a full width <div> over an image, with text inside it, so that the text goes over the image itself. The grid and the image is responsive, and I can't get the <div> to be 100% of the grid.
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="http://lorempixel.com/300/300/cats" class="img-responsive portfolio_frontpage" alt="">
<div class="portfolio_description">
<h2>Heading</h2>
<p>Some random tekst blablabla</p> <span class="read_more"></span>
</div>
</div>
<div class="col-md-6">
<img src="http://lorempixel.com/300/300/cats" class="img-responsive portfolio_frontpage" alt="">
<div class="portfolio_description">
<h2>Heading</h2>
<p>Some random tekst blablabla</p> <span class="read_more"></span>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
As you can see, I want the portfolio_desciption to be over the image, fill the width of the grid col-md-6 and have a white background.
Any suggestions on how my CSS should be composed?
tl;dr
Use position: absolute; with top: 0; on the <div> and don't forget to add position: relative; to their parent <div>s.
Solution
.portfolio_description {
position: absolute;
top: 0;
width: 100%;
background-color: white;
}
You also need a new class that you need to add to the parent elements of the <div>s that have the .portfolio_description class.
.portfolio-block {
position: relative;
}
Explanation
The MDN docs on position: relative; states:
The absolutely positioned element is positioned relative to its nearest positioned ancestor (i.e., the nearest ancestor that is not static).
Also, the MDN docs on top states:
When position is set to absolute or fixed, the top property specifies the distance between the element's top edge and the top edge of its containing block.
So you need absolute positioning and because that is positioned relatively to the nearest non static ancestor, you need to make the parent elements relatively positioned, because that positioning is not static and will keep the element flow intact. Then just make sure the top property is set to 0 so there is no distance between the <div> and its containing block.
Demo
In this example I used a semi-transparent background to prove that it is over the image.
.portfolio_description {
position:absolute;
width:100%;
top:0;
background-color:rgba(255, 255, 255, 0.5);
}
.portfolio-block {
position: relative;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-6 portfolio-block">
<img src="http://lorempixel.com/300/300/cats" class="img-responsive portfolio_frontpage" alt="">
<div class="portfolio_description">
<h2>Heading</h2>
<p>Some random tekst blablabla</p> <span class="read_more"></span>
</div>
</div>
<div class="col-md-6 portfolio-block">
<img src="http://lorempixel.com/300/300/cats" class="img-responsive portfolio_frontpage" alt="">
<div class="portfolio_description">
<h2>Heading</h2>
<p>Some random tekst blablabla</p> <span class="read_more"></span>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
Got it working with the following CSS:
.portfolio_description {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
}
You'll have to use absolute positioning, something like this
.col-md-6 {
position: relative;
}
. portfolio_description{
position: absolute;
width: 100%;
bottom: 0px;
hieght: 60px;
}
You should use a background image instead of inline images, adjust your code like below then add your image as a background image in your CSS, this gives you a lot more flexibility. this way you can absolutely position everything inside your #portfolio1 div
<div class="col-md-6">
<div id="portfolio1">
<div class="portfolio_description">
<h2>Heading</h2>
<p>Some random tekst blablabla</p>
<span class="read_more"></span>
</div>
</div>
</div>
add the style=" padding-left: 0px ; padding-right: 0px;" in the col-md-6 or in whichever column div u are adding your image , the padding will fix the image entirely in the column without any before and after gap
i want to alignt a image, that is in front of another image, to the right.
In this example the little google image is on the upper left but i want it to be on the upper right:
http://jsfiddle.net/2NYve/
i already tried float: right and align="right" but that doenst work.
As you can see in the example the background is a object with a svg but for this example i simple put a image at this place, i think there should be no different.
<div id="divSvgView" dojoType="dojox.mobile.ScrollableView" style="background-color: #d0d0d0;">
<!--foreground-->
<div style="float:right;width:30px; height:30px;position: absolute; z-index:5000"><img class="mapImage" src="https://www.google.de/images/icons/product/chrome-48.png" /></div>
<!--background-->
<div style="width:100%; position: absolute; z-index:100"><img class="mapImage" src="https://www.google.de/images/srpr/logo4w.png" />
<!--<object type="application/xhtml+xml" id="svgObject" data="" style="width:100%; height:100%;margin:1%;"></object>--></div>
Add (Where 20px is the width of your image)
right: 20px;
to the image. That's the only way as far as I know if you use absolute positioning
http://jsfiddle.net/2NYve/1/
<div style="z-index:10; position: relative; float:right;width:30px; height:30px; z-index:5000">
<a href="javascript:goToLastNodeDiv()"><img class="mapImage" src="https://www.google.de/images/icons/product/chrome-48.png" />
</a></div>
<div style="z-index:1; width:100%; position: absolute; z-index:100">
<img class="mapImage" src="https://www.google.de/images/srpr/logo4w.png" />
</div>
I added to the div with the chromo logo :
z-index:10; position: relative;
And to the other one, with the google logo :
z-index:1
I used the CSS z-index proprety : http://www.w3schools.com/cssref/pr_pos_z-index.asp
Here's the updated jsFiddle : http://jsfiddle.net/2NYve/7/
Set the foreground divs position to 'relative' instead of 'absolute' and add some right margin to place it a little to the right.
<div id="divSvgView" dojoType="dojox.mobile.ScrollableView" style="background-color: #d0d0d0;">
<!--foreground-->
<div style="float:right;width:30px; height:30px;position: relative; z-index:5000;margin-right:10px"><img class="mapImage" src="https://www.google.de/images/icons/product/chrome-48.png" /></div>
<!--background-->
<div style="width:100%; position: absolute; z-index:100"><img class="mapImage" src="https://www.google.de/images/srpr/logo4w.png" />
<!--<object type="application/xhtml+xml" id="svgObject" data="" style="width:100%; height:100%;margin:1%;"></object>--></div>