I am trying to display the background image of the absolutely positioned div. but that div would never show off..
fiddle here
<div class=""> City:
<span class="displaycity" style="display: none;">xxxx
</span>
<span class="contentbox editcitytext" style="display: inline-block;">
<input type="text" value="xxxx" class="citynamebox">
<div style="position: absolute; color: brown; z-index: 3333; top: -101px; left: 90px;" class="validationmessagecomposed">
<div style=" border:1px solid brown; padding:10px;background-color:white;">Please check for invalid characters
</div>
<div style="height:7px; text-align:center;background- image:url(https://upload.wikimedia.org/wikipedia/commons/2/21/Ic_arrow_drop_ down_48px.svg); background-repeat:no-repeat;background-position:60px; position:absolute; top:93px;">
</div>
</div>
</span>
<span class="editcitybutton">Update
</span>
</div>
Difficult to say for sure - but you never set a width, which would be required for an absolutely positioned div. Try adding a border to the div to see if it has a width/height.
Related
I have an info icon which when the user hovers over, is able to see more information. The icons are pngs and I DO NOT want to change the position of the image, so is there any idea about using tooltips with images in my case? I also would like the tooltip to look like this:
Example Tooltip
This is my HTML:
<div class="modeHolder">
<div class="toggle">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div class="mode">
<p>Ipad Mode</p>
</div>
<div class="infoIcon">
<img src="images/info.png" alt="info icon">
</div>
<div class="settings">
<img src="images/settings.png" alt="settings icon">
</div>
</div>
<div class="modeHolder">
<div class="toggle">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div class="mode">
<p>Mac Mode</p>
</div>
<div class="infoIcon">
</div>
<div class="settings"></div>
</div>
</div>
Thank you in advance
Codepen: https://codepen.io/D4SH13/pen/jOmOWqb
1st: Using Title tag in <img> element.
<div class="infoIcon">
<a href="#">
<img title="Extra Info" src="https://cdn.onlinewebfonts.com/svg/img_151567.png" alt="info icon" />
</a>
</div>
Final Code
Code Pen: https://codepen.io/gautam25raj/pen/poPoeNy
2nd: Using <span> element.
Take a <span> element and put it inside your tootltip container.
<div class="infoIcon">
<!-- New span element -->
<span class="extraInfo">Extra Info</span>
</div>
Make the <span> postion: absolute relative to your tooltip container position: relative and add some styles to <span> element.
.infoIcon {
position: relative;
}
.extraInfo {
position: absolute;
color: #fff;
background-color: #000;
border-radius: 5px;
padding: 2px 5px;
width: 70px;
text-align: center;
}
Now, change the visibility of the span element. So that it can stay hidden until the tooltip is hovered.
visibility: hidden;
i.e.
.extraInfo{
position: absolute;
color: #fff;
background-color: #000;
border-radius: 5px;
padding: 2px 5px;
width: 70px;
text-align: center;
visibility: hidden;
}
Now, when your tooltip is hover make the span element visible.
.infoIcon:hover .extraInfo {
visibility: visible;
}
Final Code
Code Pen: https://codepen.io/gautam25raj/pen/xxdxgrO
Hope this solves your problem
I am trying to set a vertical line with buttons in the middle with bootstrap.
Using Bootstrap simple vertical line:
<div class="row">
<div class="col-md-6" style="padding-right:20px; border-right: 1px solid #ccc; " >
Area 1
</div>
<div>
Area 2
</div>
</div>
Above only shows a vertical line, but I wanted to be able to add these right in the middle of that vertical line.
<span class="glyphicon glyphicon-arrow-left"></span>
<span class="glyphicon glyphicon-arrow-right"></span>
I couldn't really figure out how to position it using CSS. Is there a good way to go about this?
Any suggestions?
Edit:
I added -
<div class="round" style="position: absolute; top: 40%; right: -13px;">
<span class="glyphicon glyphicon-chevron-right" style="font-size: 1.2em; cursor: pointer;"></span>
</div>
<div class="round" style="position: absolute; top: 55%; right: -14px;">
<span class="glyphicon glyphicon-chevron-left" style="font-size: 1.2em; cursor: pointer;"></span>
</div>
It works, but the vertical line is in between the buttons.. Any suggestions on updating this?
Try this something like this
<div class="row">
<div class="col-md-6">
<div style="padding-right:20px; border-right: 1px solid #ccc; " >Area 1</div>
</div>
<div>
Area 2
</div>
You could use the after selector in css: http://www.w3schools.com/cssref/sel_after.asp
Using it you could do something like:
<div class="row">
<div class="col-md-6 myStyle" style="" >
Area 1
</div>
<div>
Area 2
</div>
</div>
.myStyle {
padding-right:20px; border-right: 1px solid #ccc; }
.myStyle::after{
font-family: 'Glyphicons Halflings';
content: "whatever the icon you want is";
}
You can then use CSS to position the icons however you want.
If you'd like to use more than one Icon you could use the :before selector on the button on the right, and the after on the button on the left.
I have a bunch of photos with different sizes and I would like to place texts on the left-hand corner and right-hand corner. How do I achieve this?
Here's the example code of what I'm trying to do.
http://jsfiddle.net/noppanit/29pGw/
<div class="content" id="panel_photos">
<p>POPULAR PHOTOS</p>
<div class="tweet_photo">
<img src="http://pbs.twimg.com/media/Bh_YPrmIMAAsiYE.jpg" />
<span class="twitter_name">#twitter_name</span>
<span class="someother">something_cool</span>
</div>
<div class="tweet_photo">
<img src="http://pbs.twimg.com/media/Bh-tD9iIUAAHU8-.jpg" />
<span class="twitter_name">#twitter_name</span>
<span class="someother">something_cool</span>
</div>
<div class="tweet_photo">
<img src="http://pbs.twimg.com/media/Bh7CEUwCcAAmy2C.jpg" />
<span class="twitter_name">#twitter_name</span>
<span class="someother">something_cool</span>
</div>
<div class="tweet_photo">
<img src="http://pbs.twimg.com/media/Bh6BqxkIIAAz0i4.jpg" />
<span class="twitter_name">#twitter_name</span>
<span class="someother">something_cool</span>
</div>
<div class="tweet_photo">
<img src="http://pbs.twimg.com/media/Bh5cDniIgAAhhsh.jpg" />
<span class="twitter_name">#twitter_name</span>
<span class="someother">something_cool</span>
</div>
<div class="tweet_photo">
<img src="http://pbs.twimg.com/media/Bh4idriCEAAIa2C.jpg" />
<span class="twitter_name">#twitter_name</span>
<span class="someother">something_cool</span>
</div>
</div>
<div> elements are block-level which fill the entire space of their containing block. You could float divs and then clear the float for each one to decrease the width of them up to their content as well as keep each one in a separate row.
Then simply use bottom/left and right properties to position the absolutely positioned elements within their containing block (the relatively positioned parent .tweet_photo) as follows:
.tweet_photo {
position: relative;
float: left;
clear: left;
}
.twitter_name {
position: absolute;
color: white;
bottom: 20px;
left: 20px;
}
.someother {
position: absolute;
right: 20px;
bottom: 20px;
color: white;
}
WORKING DEMO.
I'm trying to overlay a bootstrap label in the corner of a DIV.
I'd like to put the label in the top left of the div, like a overlay so part on the div and part off.
Thanks
<div class="span4" style="border-bottom: none; border-top: 4px solid #28A197;">
<h3>Quick Links</h3>
<div class="row">
<div class="span2">
<div class="quickbtn">
<p><a href="#wirelessnetworkinfo" data-toggle="modal"><img src="images/icons/wirelesssignal.png" /></p>
<p>Wireless Network Information</a></p>
</div>
<br />
<div class="quickbtn">
<p><a href="http://mail.google.com" target="_blank"><img src="images/icons/gmail.png" /></p>
<p>Gmail</a></p>
</div>
</div>
</div>
<span class="label label-important">UPDATED</span>
</div>
Heres the JSFiddle of the coding etc. with example label ready for placement and the CSS for the div in question (button)
Using position: relative on .quickbtn and position: absolute on .quickbtn .label, you can absolutely position the label inside .quickbtn.
Fiddle: http://jsfiddle.net/Pq6JL/1/
As your post is not clear, I am adding the following:
If you wanted the label to overhang outside of .quickbtn, set a negative top and left for the position of .label:
.quickbtn .label {
position:absolute;
left: -4px;
top: -3px
}
Fiddle: http://jsfiddle.net/Pq6JL/3/
In the code below I added input button to the leftPane div.
Here I have two div's/ Left 80% and right 20%.
Now I want to position this button to be vertically in the middle and on the right side in the leftPane.
But it when I set 'right:0;' it goes to the right side of the browser, and not of the right side of the leftPane.
Why?
<body style="overflow:hidden;">
<div style="background: #ff0000; position: fixed; top:0; left:0; width:100%; height:100%;">
<div id="leftPage" style="width:80%; height:100%;background:#00ff00; float:left;text-align:center;">
<img src="http://fc07.deviantart.net/fs45/f/2009/106/c/1/HD_Nature_Wallpapers_by_CurtiXs.jpg" alt="test" style="max-width:90%; max-height:90%;"/>
<input type="submit" value="Next" style="width:40px;height:70px;position:absolute;top:50%;right:0;"/>
</div>
<div id="rightPane" style="width:20%; height:100%;background:#0000ff; float:left;">
<div id="commentBox" style="background:#dddddd; width:90%; height: 50px;">
<input type="text" placeholder="Enter here..." />
</div>
</div>
</div>
</body>
You need to have the parent <div style="position: relative;"> otherwise your absolute positioning is defaulting to your <body>
To clarify, set #leftPage to relative positioning.