I'm looking for a way to set the pressable area for a close icon. so if the icon is 19X19, the area to press will be 39X39.
The div is the container of the clost botton, and i want to change it.
I don't want to set a fixed height, because it strach somtimes, in the other hand, there is no height at all to father, and his father...
<div class="ui-pnotify-closer" style="cursor: pointer; visibility: visible;">
<span class="glyphicon glyphicon-remove" title="Close"></span>
</div>
So I thought to do something like that:
.ui-pnotify-closer{
margin: -10px -10px -10px 10px ;
padding: 10px 10px 10px 10px;
height: 40px;
}
But this is very not elegant.
Any other ideas?
I think you are looking something like below.
HTML
<div class="test">
<span><img src="test.gif" width="19" height="19" border="0" /></span>
</div>
CSS
.test
{
background-color:#ff00ff;
padding:10px;
cursor:pointer;
display:inline;
}
Fiddle Demo
Related
I'm attempting to place a 'notification' style badge over an images. I am using Twitters Bootstrap as a base framework and creating a custom CSS class called notify-badge. But I cannot get anything to line up properly.
Through the magic of Photoshop, here is what I am trying to accomplish.
Here is my CSS code.
.notify-badge{
position: absolute;
background: rgba(0,0,255,1);
height:2rem;
top:1rem;
right:1.5rem;
width:2rem;
text-align: center;
line-height: 2rem;;
font-size: 1rem;
border-radius: 50%;
color:white;
border:1px solid blue;
}
I would like to be able to place any small about of text in the badge and it expand the red circle to fit.
Here is my HTML code.
<div class="col-sm-4">
<a href="#">
<span class="notify-badge">NEW</span>
<img src="myimage.png" alt="" width="64" height="64">
</a>
<p>Some text</p>
</div>
Bunch of different ways you can accomplish this. This should get you started:
.item {
position:relative;
padding-top:20px;
display:inline-block;
}
.notify-badge{
position: absolute;
right:-20px;
top:10px;
background:red;
text-align: center;
border-radius: 30px 30px 30px 30px;
color:white;
padding:5px 10px;
font-size:20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-4">
<div class="item">
<a href="#">
<span class="notify-badge">NEW</span>
<img src="https://picsum.photos/200" alt="" />
</a>
</div>
</div>
Addendum (from the Asker #user-44651)
(moved from the question)
Here is the result of applying this answer.
Adding margin-top:-20px; to .item fixed the alignment issue.
The idea here is to overlay an absolute container on top of a relative one. Here's a similar example:
<div class="image">
<img src="images/3754004820_91a5c238a0.jpg" alt="" />
<h2>A Movie in the Park:<br />Kung Fu Panda</h2>
</div>
The CSS:
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
This is going to put our text right up on top of the image nicely, but it doesn't accomplish the box we want to achieve behind the text. For that, we can't use the h2, because that is a block level element and we need an inline element without an specific width. So, wrap the h2 inside of a span.
<h2><span>A Movie in the Park:<br />Kung Fu Panda</span></h2>
Then use that span to style and text:
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
For ideas on how to ensure proper spacing or to use jQuery to cleanup the code a bit by allowing you to remove some of the tags from the code and jQuery them back in, check the source.
Here's a fiddle I made with the sample code:
https://jsfiddle.net/un2p8gow/
I changed the notify-badge span into a div. I saw no reason it had to be a span.
I changed the position to relative. Edit - you could actually keep the attribute position: absolute; provided you know what you're doing with it. Guy in the comments was right.
You had the attribute right: 1.5rem; and I simply changed it to left because it was being inset in the opposite direction of your example.
You can tweak it further but in a vacuum this is what you want.
Several years ago (read as 10 years) I would use a HTML snippet that would take a SPAN / Anchor tag and hook it to a graphic in shape of a button using CSS. But for some reason I must be missing something as it no longer works.
Example html:
<div id="process1" class="loc_1">
<table>
<tr>
<td class="columnOne">
<span class="processTitle">Example</span>
<span class="updateIndicator">12/28/2014</span>
</td>
<td>
<div class="loc_1">
<span class="templateName"><img src="flag.gif" alt="Location 1" />Example Link</span>
<span class="templateLinks"><a target="_blank" href="Example.doc" class="linkTemplate"></a></span>
</div>
</td>
</tr>
</table>
</div>
Associated CSS:
div span.templateName{
float: left;
width: 270px;
height:auto;
text-align: left;
margin-top:7px;
overflow:visible;
}
div span.templateLinks {
float: left;
margin-left: 10px;
text-align: left;
margin-top:7px;
}
div span.templateLinks a.linkTemplate{
float: left;
width:45px;
background:transparent url("button.gif") 0px 0px no-repeat;
}
div span.templateLinks a.linkTemplate:hover{
background:transparent url("button_over.gif") 0px 0px no-repeat;
}
Specifically, the "span class="templateLinks"..." section does not render the graphic button. Everything else renders as normal, and no errors or warning are generated.
Thoughts or comments?
add the height of the button to the div span.templateLinks a.linkTemplate
Ugh! Thank you Nickfmc!
The key was the height:
div span.templateLinks a.linkTemplate{
float: left;
height:28px;
width:45px;
background:transparent url("button.gif") 0px 0px no-repeat;
}
I swear I tried the height parameter multiple ways in the CSS without success, yet simply adding it within the SPAN tag works. Something so simple yet a pain when it work previously.
Thank goodness for the this forum!
Working on a website where I am thinking to make the name as a variable to show who is logged in but the problem is that the log out buttom goes out of the header when the name is short as Petter, but stays inside when the name is long as Petter Hansen. Is it a solution to make the buttom stay at same position independent of the name size?
jsfiddle: http://jsfiddle.net/85tU2/
Try this: http://jsfiddle.net/85tU2/2/
I've tidied up a few things - basically, moved the divs around because you are using float:right. Your code was using margins to move the button to the right of the name. So in the css, I've done this:
#formtekst {
position:relative;
float: right;
margin: 1px 0px 0px 0px;
background:#ccc;
}
#form-group {
position:relative;
float:right;
margin:15px 0px 0px 0px;
background:#ddd;
}
And for the html:
<div id="logo">
<img id="logo" src="NIH.gif" alt="logo" />
</div>
<div id="form-group">
<button type="button" class="btn">Logg ut</button>
</div>
<div id="formtekst">
<p>Logged in as Petter</p>
</div>
Hey ,
you can just easily change the styles for the #formtkst to this
#formtekst {
float: right;
margin: 1px 15% 0px 0px;}
How do I add the icon to the footer? Here is the following code I have completed.
CSS:
#footer {
padding: 0 10px;
background:#EEE;
bottom:0px;
right:0px;
left:0px;
position:fixed;
box-shadow: 0px 0px 8px 0px #000000;
}
#footer p {
margin: 0;
padding: 10px 0;
}
and HTML:
<div id="footer">
<p><center>2013 - Index</center>
<img style="text-align:right" src="./images/ranbir.jpg" height="25" width="25"></p>
</div>
Thank you for any help!
I am trying to put the 2013 - Index in the center and the icons goes right. But it doesn't seem right at all.
Try either:
<img style="float:right" src="./images/ranbir.jpg" height="25" width="25"></p>
or
<img style="position:absolute; right:0;" src="./images/ranbir.jpg" height="25" width="25"></p>
Let me know if that helps you and have a look at http://jsfiddle.net/s89s7 if you want to see it working.
Edit: To clarify, text-align only works on things inside that element. E.g.
<body>
<p style="text-align:center">Text</p>
</body>
Will align "Text" inside of "p" but will not align "p" inside of "body". Hope that makes sense.
I am constructing a vertical navigation bar unable to format the text next to the image as I'd like. I can manipulate the image using the margin. I've got it where I want it. Now, I try to manipulate the text margin and it has no effect. It appears like so....
HTML:
<div class="content_nav">
<div class="content_nav_item"><img src="images/icon.jpg" height="60px" width="60px" alt="One"><span class="content_nav_item_text">One</span></div>
<div class="content_nav_hr"> </div>
<div class="content_nav_item"><img src="images/icon.jpg" height="60px" width="60px" alt="One"><span class="content_nav_item_text">One</span></div>
<div class="content_nav_hr"> </div>
<div class="content_nav_item"><img src="images/icon.jpg" height="60px" width="60px" alt="One"><span class="content_nav_item_text">One</span></div>
<div class="content_nav_hr"> </div>
<div class="content_nav_item"><img src="images/icon.jpg" height="60px" width="60px" alt="One"><span class="content_nav_item_text">One</span></div>
</div>
CSS:
.content_nav{
margin:45px 0px 45px 48px;
padding:0px;
width:232px;
height:467px;
background-color:#82c738;
box-shadow:inset 0px 0px 10px #578e30;
float:left;
}
.content_nav_item {
margin:0px 10px 0px 10px;
padding:0px;
height:115px;
}
.content_nav_hr {
margin:0px 10px 0px 10px;
padding:0px;
height:1px;
width:202px;
background-color:#A0DF5C;
}
.content_nav_item_text {
margin:10px 0px 10px 0px;
padding:0px;
}
.content_nav_item img {
margin:28px 10px 0px 20px;
padding:0px;
display:inline;
}
Any thoughts as to why I can't position that span?
Text is kindof a weird bird in CSS, it's not handled how you'd think or want it to be. Here's a good article explaining the idiosyncrasies of vertical text alignment
The text is between span tags. This tags is between the a tag and the div tag.
You need to separate them. They are stacking the text and they prevent the text to move.
You need to "end" the img tag