I'm trying to create a picture link that includes a question mark glyph that a user can click on to reveal a popover with instructions.
Right now, the question mark glyph appears at the bottom, but ideally I would like that to be right next to the title of the link "My Information".
My code looks like this:
a.picture {
margin: 20px 0;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: top;
}
a.picture > h3 {
margin: 0;
width: 100%;
text-align: center;
}
a.picture > h3 span {
display:block;
color: white;
font-weight: bold;
background: $blue;
padding: 10px;
}
<a ng-if="::(options.link_template == 'Picture')" ng-href="{{::data.href}}" class="picture {{::options.class_name}}" target="{{::data.target}}" >
<h3><span>{{::options.title}}</span></h3>
<img src="{{::options.picture}}" height="100%" width="100%"/>
<div><a tabindex="0" class="glyphicon glyphicon-question-sign" role="button" data-toggle="popover" data-placement="top" data-trigger="focus" title="My Information" data-content="This is what this link will display"/></div>
</a>
What do I have to do in the css in order for the popover glyph to be next to the title? I tried putting the glyphicon class next to the title, but having a link within a link doesn't seem to work well.
Thanks.
Here the code you need :) Use flexbox
Method used: use a container div for the title and help mark, set to top using position absolute and centering it with flex.
Flexbox guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.image {
position:relative;
width:200px;
height:250px;
}
img {
max-width:100%;
max-height:100%;
}
.header {
display:flex;
justify-content:center;
align-items:center;
background:rgba(255,255,255, .5);
color:#000;
position:absolute;
top:0;
left:0;
width:100%;
height:30px;
}
span {
margin:0 5px;
}
.help {
width:15px;
height:15px;
background:red;
/** or use margin 0 5px 0 auto to align right **/
}
<div class="image">
<div class="header">
<span>My info</span>
<div class="help"></div>
</div>
<img src="http://maximumwallhd.com/wp-content/uploads/2015/07/fonds-ecran-paysage-de-reve-161-660x330.jpg">
</div>
Related
Could anybody tell me how can I achieve this style using flexbox? Pls note the modal close button in the right side of the photo.
This is what i have so far. I don't know how to place the close button on top of the image.
Below is my code for the bootstrap modal dialog box:
<Modal show={this.props.show} onHide={() => this.props.onHide()}
>
<Modal.Body className ="modal-body">
<div className = "data-container">
<div class="callout" data-closable>
<button class="close-button" onClick={() => this.props.onHide()} aria-label="Dismiss alert" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
</div>
{this.props.data}
</div>
</Modal.Body>
{/* <Modal.Footer className = "modal-footer">
{this.props.title}
</Modal.Footer> */}
</Modal>
And here is the CSS:
.modal-dialog {
display: flex;
max-width: 800px;
height:auto;
flex-direction:column;
justify-content: center;
padding-top:150px;
margin: auto;
}
.modal-content {
overflow: hidden;
border:none;
justify-content: center;
margin:auto;
}
.modal-body {
display: flex;
flex-direction:column;
align-items: center;
justify-content: center;
background-color:rgb(221, 221, 221);
padding: 2px;
}
.callout {
display:flex;
border: none;
display: block;
margin-left:47rem;
}
.close-button {
border: none;
background-color:rgb(221, 221, 221);
color:red;
margin:auto;
/* font-weight: bold; */
font-size:50px;
/* width:30px;
height:30px; */
}
Any help is greatly appreciated.
Thanks ✌️
First you need to specify your parent containers position as relative
.data-container {
position: relative;
}
And then set position as absolute and right to 0 on container that containers your close button
.callout {
position: absolute;
right: 0;
}
Demo here
I have a blank HTML page and I want to align 2 elements...Vertically and Horizontally. These elements are a <img> tag, a <p> tag for text, and 2 <div> tags for containing those elements...
When I resize my window I don't want these elements to be cut-off by my browser. After countless hours of trying to figure this out, and searching Stack and various other websites...I came close, but I could never get it 100% like I want it...
There's this white-space at the bottom and the ride side of the bordered second div near the text, and the culprit appears to be the <p>. When I get rid of the tag the white-space goes away. However, I want the text under the image so I need it...
The white-space is making me question whether the content is placed in the center or not. How can I get rid of it?
HTML
<body>
<div id="container">
<div id="content">
<p>
<img src="http://www.iconsdb.com/icons/preview/blue/square-xxl.png" alt="Under Construction">
<br> UNDER CONSTRUCTION!
</p>
</div>
</div>
</body>
CSS
body
{
margin:0;
background-color: seagreen;
}
#container
{
position:relative;
height:100%;
width:100%;
min-width:400px;
}
#content
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
outline:3px solid red;
}
#content p
{
margin:0;
text-align:center;
font-family:Courier;
font-size:48px;
white-space:nowrap;
color:springgreen;
}
I changed you HTML to enclose your text in a span tag and removed the br:
<body>
<div id="container">
<div id="content">
<p>
<img src="http://www.iconsdb.com/icons/preview/blue/square-xxl.png" alt="Under Construction">
<span>UNDER CONSTRUCTION!</span>
</p>
</div>
</div>
</body>
Then I added this to your CSS. It styles the enclosing span as a block, so you don't need to <br> tag in your HTML. It also uses line-height to adjust spacing above and below the line of text.
#content span {
display: block;
margin: 0;
line-height: .8;
}
And removed the position attribute from here:
#container
{
/*position:relative;*/ /* Removed */
height:100%;
width:100%;
min-width:400px;
}
Here is a sample fiddle
UPDATE
It appears the reason why you are seeing white-space still on Firefox is that you are using outline instead of border on your CSS for #content.
I don't know exactly why Firefox is rendering the outline differently. But if you change your CSS for #content to the following, you'll get the same result on Chrome, Firefox, Edge and IE (11).:
#content
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
/*outline:3px solid red;*/
border: 3px solid red;
}
Here is the updated fiddle
I have gone through your code . i have made some changes in above given code . I hope this gone be helpful to you.
CSS
body
{
margin:0;
background-color: seagreen;
}
img{
display: block;
margin: auto;
width: 50%;
}
/* add this css to remove the white space under text */
p
{
margin-bottom: -9px !important;
}
#container
{
position:relative;
height:100%;
width:100%;
min-width:400px;
}
#content
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
outline:3px solid red;
margin-top: 200px;
padding-top: 10px;
}
#content p
{
margin:0;
text-align:center;
font-family:Courier;
font-size:48px;
white-space:nowrap;
color:springgreen;
}
<div id="container">
<div id="content">
<img src="http://spectrumapartments.com.au/wp-content/themes/spectrumapartments/img/building/red-squares.png" alt="Under Construction">
<br>
<p>UNDER CONSTRUCTION!</p>
</div>
</div>
I GAVE IT ANOTHER TRY, HOPEFULLY THIS WILL SOLVE IT FOR YOU. YOU SOUND VERY DESPERATE.
*{
border: 0;
margin: 0;
margin: 0;
}
.container {
font-size: 0;
}
.container span {
font-size: 35px;
background: #ff8ea1;
padding: 0;
margin: 0;
}
.container span.no-space {
display: inline-block;
vertical-align: top;
height: .75em;
line-height: .75em;
}
<div class="container">
<span>Under Construction</span>
<div style="height: 20px;"></div>
<span class="no-space">Under Construction</span>
</div>
TRY THIS ONE!
I have an ion slide box and it displays images. I want to add a button, ion-plus-round, to the bottom right side of the image. I don't want to add it to the bottom right of the slider, but rather to the bottom right side of the img only.
<ion-slide-box class="item-slide-box">
<ion-slide ng-repeat="image in vm.item.images" ng-cloak >
<img ng-src="{{image}}">
</ion-slide>
</ion-slide-box>
<a class="button icon ion-plus-round myButton"></a>
I have done the following but I am wondering how I can get the button to be float: right inside of the img:
.slider {
height: 60vh;
background-color: #76838f;
position: relative;
}
.slider-slide {
color: #000;
background-color: #76838f;
height: 100%;
}
.slider .slider-slide .img-ng {
display: block;
margin-left: auto;
margin-right: auto;
height: 100%;
max-width: 100%;
position: relative;
}
.slider .slider-pager {
bottom: 45px;
}
.myButton {
position: absolute;
bottom: 0px;
right: 0px;
}
codepan: http://codepen.io/anon/pen/gPYBpR
I have just edited you code, you can try this in code pane and check whether it is fulling your requirements.
Html code:
<ion-slide-box class="item-slide-box">
<ion-slide ng-cloak class="content">
<img class="img-ng" ng-src="http://geomorph.sourceforge.net/fourier/Bouboule256.jpg">
<a class="button icon ion-plus-round myButton"></a>
</ion-slide>
</ion-slide-box>
add some css line like:
.content{
position:relative;
}
.content a{
position:absolute;
bottom:5px;
right:5px;
}
Note:remove ".myButton" css from css and place button after the image source as shown in code,Hope this would exactly what you want.
For example if you really want the button exactly on the image just follow the example code and you can implement this code in your code.
HTML:
<div class="main">
<img src="http://placehold.it/182x121"/>
Can be BUTTON/LINK
</div>
CSS:
.main{
width: 182px; /*328 co je 1/3 - 20margin left*/
height: 121px;
line-height: 20px;
margin-top: 0px;
margin-left: 9px;
margin-right:0px;
display:inline-block;
position:relative;
}
.content a {
position:absolute;
bottom:5px;
right:5px;
background:blue;
color:#FFF;
}
above code will can help you give button on the image.
Similar to http://m.huffpost.com/us topbar
Edit: I am trying to create a "responsive menu"
ICON (left aligned) and some TEXT that's centered in a bar at the top
My attempt obviously doesnt work:
<div style="float:left" ><i class="fa fa-bars"></i> </div>
<center>Centered Text</center>
my menu-trigger class is :
.menu-trigger {
position: relative;
padding-left: 60px;
font-size: 1.5em;
}
Any help would be appreciated!
There are multiple soutions to the problem. Here's one with the most simple markup:
HTML
<div>
<a>Menu</a>
<h1>HELLO</h1>
</div>
The div is actually not needed necessarily. Here it is used to make a full background color.
CSS
h1 {
margin: 0 0 0 80px;
text-align: center;
}
a {
float: right;
width: 80px;
}
Demo
Try before buy
It also works with a menu on the left
You can try something like this. Here you have a top bar center aligned and 2 icon links left aligned (50% width as in original link that you posted):
HTML:
<div class="menu top">Link</div>
<div class="menu icon"><img src="" />Link</div>
<div class="menu icon"><img src="" />Link</div>
CSS:
.menu {
display:inline-block;
border:1px solid #333;
background-color:#ddd;
padding:10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-right:-4px;
}
.menu>a {
color:#000;
text-decoration:none;
}
.top {
width:100%;
text-align:center;
}
.icon {
width:50%;
}
.icon>a {
padding-left:10px;
}
.icon>img {
display:inline-block;
border:1px solid red;
width:30px;
height:30px;
}
Here's the Fiddle. Hope it helps.
I have a header that I would like to keep centered inside a parent image div both horizontally and vertically at all times when the parent div does not have a fixed width and height but instead has a responsive width and height using Twitter Bootstrap 3.1's responsive columns.
HTML:
<div id ="firstholder" class= " col-sm-4 col-md-4 col-lg-4">
<a href="home.html" title="Home" class="imglink">
<div class="item1"><h1 class="slickfont1" >Home</h1>
</div><img src="/images/slide2.JPG" alt="City Lights Image" class="img-responsive" >
</a>
</div>
#firstholder {
display:inline-block;
float:left;
margin:0;
padding:0;
height:auto;
position:relative;
}
a.imglink {
background: #fff;
display: inline-block;
width:100%;
height:auto;
position:relative;
}
.item1 {
height:150px;
width: 150px;
margin: 0 auto;
position:absolute;
z-index:100;
vertical-align:middle;
}
.slickfont1 {
z-index:10;
color: #fff;
position:absolute;
font-family: 'Bowlby One SC', cursive;
font-size: 37px;
font-weight:lighter;
position: absolute;
text-shadow:0 0 0 transparent, -2px 2px 2px #1542bd;
}
Thanks :)
You can use this nice method by Chris Coyier at CSS Tricks, he uses percentages and CSS3's transform:translate to achieve what you need. Centering Percentage Width/Height Elements
Now as you're using Bootstrap, so you're to tweak it for yourself.
The code from Chris Coyier:
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 40%;
height: 50%;
}
Better to go to CSSTricks (using above link) and study the whole Post (you'll also find the reason of using it and why its better than other methods of centring).
I hope this helped you.
I am not sure if I understood you right, but let's start from here:
CSS:
div.center {
display: table-cell;
width: 200px;
height: 200px;
vertical-align: middle;
text-align: center;
border: 1px solid #000;
background-color: #ccc;
}
div.inner {
margin: 0 auto;
}
HTML:
<div class="center">
<div class="inner">
<div class="title">
Title Here
</div>
</div>
</div>
Is this what you are trying to do? assuming the gray background is an image? SAMPLE HERE