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.
Related
I am working on my portfolio. I have this page here:
The first picture there is a date on. I would like a text in the bottom, like this:
But I cannot get that text placed. Everytime I add a div tag and set in a text, it is going outside of the picture. I guess it is a div tag there has to be somewhere?
<div class="portfolio logo" data-cat="logo">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="date">
<span class="day">10</span>
<span class="month">aug</span>
<span class="month">2016</span>
</div>
</a>
<div class="portfolio-wrapper">
<div class="portfolio-hover">
<div class="image-caption">
<div class="col-md-4 col-sm-6 col-xs-12">
<h2>link</h2>
</div>
</div>
<img src="img/portfolios/logo/5.jpg" alt="" />
</div>
</div>
</div>
If we are talking about the h2 element, that html tag sits inside a element that is hidden by default and only appears on hover.
I will move it outside the .image-caption div
<div class="portfolio-wrapper">
<div class="portfolio-hover">
<div class="col-md-4 example col-sm-6 col-xs-12">
<h2>link</h2>
</div>
<div class="image-caption">
</div>
<img src="img/portfolios/logo/5.jpg" alt="" />
</div>
</div>
and give it those styles
.example {
position: absolute;
bottom: 0;
z-index: 1;
text-align: center;
left: 0;
}
Adjust than bottom and left values to match the positioning for your design
You'll have to create a css for your image-caption class, that will be in absolute position, meaning it can clash with other things. This should help you with that: Position absolute but relative to parent . Then just make sure you have your z-index right so it's not behind the image
I am using older Skeleton css version, it is a 16 column grid system. I am trying to setup similar layout as in this picture.
http://imgur.com/sIV2aYo
I am pretty new to CSS, is using two containers (one inside another) a proper method?
Here is a sample code of what I been trying, but not working out too well =(
<div class="container">
<div class="eight columns alpha">
<div class="image">
<img alt="" src="images/coffee.jpg">
</div>
</div>
<div class="eight columns omega">
<div class="container">
<div class="eight columns">
<img alt="" src="images/plate.jpg">
</div>
<div class="eight columns">
<img alt="" src="images/macaro.jpg">
</div>
<div class="text area">
<p class="quote">"One of my favorite parts of using Square Register is being able to talk to customers while I am swiping their cards."</p>
<p class="name">Norm Mui, Coffee Foundry</p>
</div>
</div> <!-- 2nd container -->
</div>
</div> <!-- 1st container -->
Thanks in advance.
I don't know your CSS, but maybe this helps you:
HTML:
// The class "columns" is your "block" (div) that needs the content. I've made a CSS with a background-color, height and width.
// In that div "columns we create new "columns, numbered by 1,2 and 3. I've floated all the text to the left and gived it a margin. The first, second and the third a margin of 15px ( top, right, buttom and left ).
// In the div column "columns" I have made a textarea with also a margin of 15px. The vertical-align is for a top vertical align. with the display we means that it needs to be in the block, with a margin of 40% ( it takes 40% of the block).
<div id="container">
<div class="columns">
<div class="eight-columns-1">
<img alt="" src="http://ww1.prweb.com/prfiles/2014/04/10/11752526/gI_134971_best-image-web-hosting.png">
</div>
<div class="eight-columns-2">
<img alt="" src="http://www.causingeffect.com/images/made/images/example/cow_100_100_c1.jpg">
</div>
<div class="eight-columns-3">
<img alt="" src="http://www.causingeffect.com/images/made/images/example/cow_100_100_c1.jpg">
</div>
<div class="textarea">
<p class="quote">"One of my favorite parts of using Square Register is being able to talk to customers while I am swiping their cards."</p>
<p class="name">Norm Mui, Coffee Foundry</p>
</div>
</div>
</div>
CSS:
.columns {background-color:yellow; width: 530px; height: 285px;}
.eight-columns-1 {float:left; margin: 15px;}
.eight-columns-2 {float: left; margin: 15px;}
.eight-columns-3 {float:left; margin: 15px 15px 15px 0px;}
.textarea {vertical-align:top; margin: 15px; display:inline-block; width: 40%;}
Text over image. I can't seem to get my text over my picture. I tried with absolution and everything.
<div class="wrapper">
<div class="container">
<div class="row">
<div class="stages col col-6">
<img src="styles\images\stage1.jpg" alt="Stage1">
<p>Stage 1</p>
</div>
<div class="stages col col-6">
<img src="styles\images\stage2.jpg" alt="Stage2">
<p>Stage 2</p>
</div>
</div>
</div>
You are not applying it correctly.
To make it work, you need to make the parent div to have a position:relative; and the child div to have position:absolute;
Once you do the position:absolute;, you need to change the positioning by attributes such as top, bottom, left and right with numeric values.
Just in case, if your text is below the image, you can use z-index attribute to bring it up with a numeric value.
For Instance,
<div class="wrapper">
<div class="container">
<div class="row" style="position:relative;">
<div class="stages col col-6">
<img src="styles\images\stage1.jpg" alt="Stage1">
<p style="position:absolute;top: 0;left: 0;">Stage 1</p>
</div>
<div class="stages col col-6">
<img src="styles\images\stage2.jpg" alt="Stage2">
<p>Stage 2</p>
</div>
</div>
</div>
LIVE DEMO
Hope this helps.
It would be better to manage it through classes. Add image-container to the parent div of image, and text-over-img to p tag used for text.
.image-container {
position: relative;
}
.text-over-img {
position: absolute;
background-color: red;
padding: 5px;
border-radius: 5px;
top: 0px;
left: 5px;
margin-top: 5px;
}
DEMO
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>
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;)