I'm trying to position a close icon from bootstraps sprite, in the top right side of the image ( not the box). I took this from a working example, but it wont work for me. It always ends up outside the box and at the right corner of the screen.
How can I get this right? I've setup a fiddle, but could not figure how to get the sprite in there. Can you help?
Fiddle
<!DOCTYPE HTML>
<html>
<head>
<link media="screen" type="text/css" href="icons.css" rel="stylesheet">
<title>Delete Image Icon Dev</title>
<style>
img.thumbnail {
background: none repeat scroll 0 0 #FFFFFF;
}
.image:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.image {
-moz-box-sizing: border-box;
border: 1px solid #DDDDDD;
box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
float: left;
height: 150px;
margin-bottom: 10px;
padding: 10px;
}
.image img {
vertical-align: middle;
}
.delete {
position:absolute;
top:0;
right:0;
}
</style>
</head>
<body>
<div class="image"><img class="thumbnail" src="http://i.imgur.com/dsPfaSjs.jpg"><i class="icon-remove blue delete"></i></div>
</body>
</html>
This example can take an image of any height.
Turn the <i class="delete"> into a <div>
Wrap the <img> with the new delete div
Give .image:before a min-height: 150px; and remove the fixed height on .image
Apply position: relative to .delete
Apply the delete button to a pseudo elment with .delete:after or place another <i> to make it interactive.
Have an example!
Example without the delete pseudo element
HTML
<div class="image">
<div class="icon-remove blue delete">
<img class="thumbnail" src="http://i.imgur.com/dsPfaSjs.jpg">
<!-- <i class="delete-button"></i> if you need to use a real element -->
</div>
</div>
CSS
.image:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
min-height: 150px;
}
.image {
-moz-box-sizing: border-box;
border: 1px solid #DDDDDD;
float: left;
margin-bottom: 10px;
padding: 10px;
}
.delete {
position: relative;
vertical-align: middle;
display: inline-block;
}
.delete:after {
content: '';
position:absolute;
top:0;
right:0;
height: 20px;
width: 20px;
background: #F00;
}
/* If you need to use a real element remove .delete:after and use this --
.delete .delete-button {
content: '';
position:absolute;
top:0;
right:0;
height: 20px;
width: 20px;
background: #F00;
}*/
You need to set position:relative; to the .image div and then set the top and right parameters to the .delete element.
.image {
/* Other rules here */
position:relative;
}
.delete {
/* Other rules here */
position:absolute;
top:30px;
right:15px;
}
Here is a jsfiddle also: http://jsfiddle.net/eugbrqwc/15/. I added some text to the .delete element just to make it visible.
/e
you need to update your markup:
<div class="image">
<div class="img">
<img class="thumbnail" src="http://i.imgur.com/dsPfaSjs.jpg" />
<i class="icon-remove blue delete"></i>
</div>
</div>
and also your css:
img.thumbnail {
background: none repeat scroll 0 0 #FFFFFF;
}
.image:before {
content:"";
display: inline-block;
vertical-align: middle;
}
.image {
-moz-box-sizing: border-box;
border: 1px solid #DDDDDD;
float: left;
height: 150px;
margin-bottom: 10px;
padding: 10px;
vertical-align: middle;
}
.image .img {
display: block;
vertical-align: middle;
position: relative;
}
.delete {
position:absolute;
top:0;
right:0;
width: 10px;
height: 10px;
background: red;
}
Example: http://jsfiddle.net/eugbrqwc/17/
you don't need the height, width and background in .delete - just for showing purposes
Add a wrapper <div> around your image and icon, set it to display: inline-block and position: relative. Its size will conform to the image's, while allowing the icon to absolutely position itself to the top right.
Hi I created a fork of your fiddle and I have solved it. http://jsfiddle.net/bkx1dnsb/1/
You needed Position:relative on the image class
There was no icon so i added an X but your icon will be in the same spot.
Use the top & right from the delete class to tinker the positioning.
The reason it was going to the top right was because position absolute is relative to the browser window. Unless you set position releative on the parent of the absolute positioned element.
Hope that helps
Related
I want to put three images at the center of a page. In the following code, when I use float, the image jumps out of the parent div with class "centered". Is there any way that I can keep the child div inside the parent div?
HTML:
<div class="centered">
<div id="M">
<img src="images/M.png">
<img src="images/M.png">
<img src="images/M.png">
</div>
</div>
CSS:
.centered {
margin-left: auto;
margin-right: auto;
border: 3px solid #73AD21;
width: 1500px;
}
.centered img {
display: block;
}
#M {
float:left;
}
you have to add sudo element just after your .centered div to clear the float after it.
.centered:after{
content: "";
display:table;
clear:both;
}
If you want to center the image, give it a width and a left and right margin of auto:
img {
display: block;
width: 100px;
height: 100px;
margin: 12px auto;
background-color: rgb(255,0,0);
}
<img />
If you want to center the image inside a 1500px wide div.centered with a 3px green border, do the same:
img {
display: block;
width: 100px;
height: 100px;
margin: 12px auto;
background-color: rgb(255,0,0);
}
.centered {
margin: 0 auto;
border: 3px solid #73AD21;
width: 1500px;
}
<div class="centered">
<img />
</div>
I want to display a button centered inside a div. I did it with the following:
transformation:translateY(25%);
but this is is not allowed for older version of browsers. This is the follwing CSS code for the div and the button:
#buttonSwap.swap{
background: url("../img/thumb_10600.png") no-repeat;
height: 15px;
width: 15px;
border: none;
}
.swapCities{
float: left;
height: 100%;
width: 15px;
margin: 5px 8px 0px 8px;
}
and the HTML code is the following:
<div class="swapCities">
<input type="button" id="buttonSwap" class="swap" ng-click="swapingCities()" />
</div>
There is a lot of methods for vertical alignment in CSS. I recommend reading http://css-tricks.com/centering-css-complete-guide/.
Personally I find the "ghost element" technique (http://codepen.io/KatieK2/pen/ucwgi) most universal. The idea is to prepend an inline-block pseudoelement with 100% height to your container, set your button display to inline-block as well and set vertical-align: middle on both:
.swapCities:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
#buttonSwap {
display: inline-block;
vertical-align: middle;
}
You need something like this:
.swapCities{
display: inline-block;/* or table-cell */
vertical-align: middle;
}
Here is a simple example: the key here is that the parent container is position:relative, and the button is position:absolute;
you can use top:50%; left:50%;... this will align the top-left corner of the button to center;
To complete the centering, you need to add margin to the button to equal half of the width and height.
Copy/Paste the below into an .html document, and you will see it at work.
<!DOCTYPE html>
<html>
<body>
<style>
center { background-color:#CCCCCC; position:relative; min-height:600px; }
button { width:300px; height:30px; position:absolute; top:50%; left:50%; margin-left:-150px; margin-top:15px; }
</style>
<center>
<h2>Content Area</h2>
<button type="button">Click Me</button>
</center>
</body>
</html>
You could use position: absolute; then top: 50% property to offset.
Have a look at this Codepen to see if it's any good for you: EXAMPLE HERE
Your css will look like this:
.swapCities{
position: relative;
height: 100px; width: 100px;
margin: 5px 8px 0px 8px;
border: 1px solid;
}
#buttonSwap.swap{
position: absolute;
top: 50%; margin-top: -9px;
left: 50%; margin-left: -9px;
background: url("../img/thumb_10600.png") no-repeat;
height: 15px; width: 15px;
border: 1px solid;
}
I was asked to code an unusual shape background on some centered text.
The text should be centered and have it's background extend to the right edge of the content-box.
How can I do this with CSS?
http://jsfiddle.net/7U688/
The text centering is cake.
The tricky bit is extending the background off into one direction.
This is one way of accomplishing this:
#outer{
border:2px solid black;
background-color:red;
overflow:hidden;
}
#inner{
margin:40px;
text-align:center;
}
p{
display:inline-block;
color:white;
background-color:black; // or an image
margin:0 -999em 0 5px;
padding: 5px 999em 5px 5px;
line-height:1;
}
In this case - I use a huge padding and an equally huge negative margin to keep an element in flow, but visually extend outside of its borders. A benefit of this technique is that it allows the dev to keep an element in normal static or relative position.
Finally, use overflow:hidden in a parent element to prevent unwanted bleed.
Using :after, you may do something like THIS.
This allows the text to be centered normally without using margin and padding hacks.
p {
display: table;
background: black;
margin: auto;
color: white;
position: relative;
font-size: 1em;
}
p:after {
content: '';
background: black;
width: 150px;
line-height: 1em;
height: 100%;
display: inline-block;
position: absolute;
}
Is this what you want? Fiddle
Html:
<div class="wrapper">
<span class="text">You text</span>
</div>
Css:
.wrapper {
width: 200px;
height: 200px;
border: 1px solid;
text-align: center;
vertical-align: middle;
display: table-cell;
}
.text {
background: yellow;
}
HTML:
<html>
<head>
<title>Parallax</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<br><br>
</nav>
<h2>One ring to rule them all</h2>
<button>View Our Work</button>
</body>
</html>
CSS:
*
{
margin: 0;
}
body
{
background-image: url("background.jpg");
color: white;
font-family: Helvetica;
padding: 0;
}
h2
{
font-family: "Kingthings Calligraphica";
font-size: 30pt;
text-align: center;
margin-top: 30%;
}
nav
{
border: 1px solid red;
position: fixed;
padding: 10px 20px;
width: 100%;
top: 0;
}
nav div
{
float: left;
height: 100%;
width: 20%;
background-color: rgba(0,0,0,0.6);
transition: background-color 0.5s;
}
nav div:hover
{
background-color: rgba(0,0,0,0);
cursor: pointer;
}
button
{
border: 1px solid white;
border-radius: 3px;
background-color: rgba(0,0,0,0);
color: white;
padding: 10px 20px;
width: 100%;
}
Result:
Why does the nav go off the screen but the button doesn't?
That's cause you use
width:100%;
and
border: 1px solid red;
which equals to
100% + 2px;
than you also add padding
and it just adds to the math.
This will work: http://jsbin.com/vubug/2/edit
nav{
box-shadow: inset 0 0 0 1px red;
position: fixed;
width:100%;
top: 0;
}
To let the browser do the math you can also use the calc CSS property. (*2014 still experimental)
Also worth to note: action elements (input, button etc) act differently across browsers and even OS. The padding applied to a 100% width button is applied inwards, while applied to a 100% width block level DIV element it acts outwards adding to the set width.
One of the logic reasons is that you cannot have block-level elements inside the <button></button> (and have a valid markup) that will allow you to use that element's padding instead, so browsers try to compensate that applying the padding in the inner button's space. TEST CASE
Using CSS3 box-sizing: border-box ;
DEMO
<div id="widthAuto">DIV {width: auto;}</div> <!-- DESIRED -->
<div id="width100">DIV {width: 100%;}</div> <!-- OVERFLOWS -->
<div id="fixed">DIV {position:fixed;}</div> <!-- LOOSES WIDTH -->
<div id="fixed_width100">DIV {position:fixed; width:100%;}</div> <!-- OVERFLOWS -->
<div id="fixed_width100_boxSizing">DIV {position:fixed; width:100%; box-sizing: border-box;}</div>
CSS:
div{
background:#ddd;
border:10px solid red;
padding:10px;
margin-bottom:5px;
font-family:monospace;
}
div[id^=fi]{border-color:blue}
#widthAuto{
width:auto;
}
#width100{
width:100%;
}
#fixed{
position:fixed; /* Not in flow and looses the "auto" width :( */
/*just for preview*/ top:200px;
}
#fixed_width100{
position:fixed;
width: 100%; /* same issue as #width100 */
/*just for preview*/ top:300px;
}
#fixed_width100_boxSizing{
position:fixed;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/*just for preview*/ top:400px;
}
Simplest solution
Or simply use the fixed element as a 100% width dummy wrapper and apply padding, border, whatever you need to an inner element. That's the way I do.
This question already has an answer here:
Create vertically centered horizontal line to fill width of title with padding in CSS
(1 answer)
Closed 9 years ago.
Can the line behind the text be accomplished with CSS only?
Yes.
HTML:
<h2><span>Centered Header Text</span></h2>
CSS:
body {
background: #ccc;
}
h2 {
text-align: center;
display: table;
width: 100%;
}
h2 > span, h2:before, h2:after {
display: table-cell;
}
h2:before, h2:after {
background: url(http://dummyimage.com/2x1/f0f/fff&text=+) repeat-x center;
width: 50%;
content: ' ';
}
h2 > span {
white-space: nowrap;
padding: 0 9px;
}
JSFiddle
Source
Yes it can.
No images, no tables, just two elements and simple CSS.
Here's a fiddle to demonstrate it: http://jsfiddle.net/URrdP/
HTML:
<div> <span>Text Here</span> </div>
CSS:
div {
font-size: 45px;
border: #EEEEEE inset 2px;
position: relative;
text-align:center;
height: 0px;
}
span {
position: relative;
top:-0.7em;
background: #CCCCCC;
}
The key points here are that the outer element has an inset border and zero height and the inner element is positioned half a line upward so it sits on top of the outer element's border.
The other key point is that the inner element has a solid background color, otherwise the border line would show through. This means the technique will only really work successfully when you are placing it on top of a solid background; putting it on top of a gradient or an image may not work so well.
I may not have got the colors or the font sizing perfect for you in my example, but the principle should work perfectly fine for you.
CSS border inset may not be the best way to get a perfect colour match for you; if you need more fine-grained control of the colours you can specify individual colours for border-top and border-bottom.
Here's how you could do something similar with no images.
HTML:
<h1><span>Text Here</span></h1>
CSS:
body, span { background: #ccc; }
h1 { text-align: center; border-bottom: 1px solid #333; font-size: 20px; height: 10px; }
JSFiddle http://jsfiddle.net/ChrisLTD/fvetd/
Without images version (I'd prefer the display:table version though)
CSS:
body
{background:silver;}
h1
{text-align:center;color:white;font-weight:normal;position:relative;
line-height:1;text-shadow:0 1px black;font-size:34px;font-family:georgia, serif}
h1::before, h1::after
{width:100%;border-bottom:1px white solid;content:' ';
position:absolute;top:50%;left:0;}
h1::after
{margin-top:-1px;border-color:gray}
h1 > span
{background:silver;position:relative;z-index:1;}
HTML:
<h1>
<span>
Text Here<br>
On Multiple Lines too
</span>
</h1>
Demo: http://jsbin.com/uqexar/1/edit
Since there was no HTML specification, I added in a couple of spans
<h1>
<span class="wrapper">
<span class="text">TEXT HERE</span>
<span class="line"></span>
</span>
</h1>
CSS:
h1 {
width:300px;
background:#dcdcdc;
padding:10px;
text-align:center;
color:#333;
}
.wrapper {
display:block;
position:relative;
}
.line {
display:block;
height:1px;
background:#cecece;
border-bottom:1px solid #e3e3e3;
width:100%;
position:absolute;
top:50%;
z-index:100;
}
.text {
z-index:200;
position:relative;
padding:10px;
background:#dcdcdc;
display:inline-block;
}
This means the line will look like you specified with two greys.
http://jsfiddle.net/3q5he/
This can be done with a single element:
http://jsfiddle.net/Puigcerber/vLwDf/
<h1>Heading</h1>
h1 {
overflow: hidden;
text-align: center;
}
h1:before,
h1:after {
background-color: #000;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 50%;
}
h1:before {
right: 0.5em;
margin-left: -50%;
}
h1:after {
left: 0.5em;
margin-right: -50%;
}
Origin: http://www.impressivewebs.com/centered-heading-horizontal-line/#comment-34913