I'm trying to get this Sprite done, but i'm stuck and can't figure out a solution.
FIDDLE HERE
I have a simple button:
<a href="#" class="ui-button sub-beta-button">
<span class="button-content">Beta Sign-Up</span>
</a>
and the css:
.sub-beta-button {
height: 78px;
background: transparent url("http://i.imgur.com/PSpIGLA.png") 100% -160px no-repeat;
padding-right: 50px;
margin-left: 30px;
bottom: 18px;
z-index: 1;
position: relative;
}
.ui-button {
background: 0;
border: 0;
cursor: pointer;
display: inline-block;
height: auto;
overflow: visible;
padding: 0;
margin: 0;
vertical-align: middle;
outline: 0;
text-align: center;
white-space: nowrap;
cursor: pointer;
}
.sub-beta-button .button-content {
background-image: url("http://i.imgur.com/PSpIGLA.png");
padding-left: 50px;
color: #fff;
font: normal normal 18px/86px "Bliz Quadrata", Times New Roman;
text-transform: uppercase;
text-shadow: 0 0 4px #000, 0 0 8px #000;
overflow: hidden;
min-width: 110px;
margin-left: -30px;
height: 76px;
z-index: 2;
}
.ui-button span {
outline: 0;
display: inline-block;
background-repeat: no-repeat;
}
but i'm getting only this result:
That's the Sprite:
FIDDLE HERE
your .ui-button class removes the background (background: 0).
You can better first get the button working without the ui-button class, and then rule by rule fill up the ui-button class. That way you are sure you are using minimal and correct css.
I've made an edit and removed all the junk code.
If you want the text to the center, edit padding-left and add text align:center
padding-left
and change it to
text-align:center
http://jsfiddle.net/va854
Related
so i have got a box , with some text in it and i want to highlight the text as shown in the jsfiddle.... unfortuntely I can't seem to change the green box so it has the same padding as the text... can someone help a stupid boy ?
the jsfiddle is here ...
http://jsfiddle.net/2es4bx0o/3/
and here is the css involved (not much really)
.border {
background-color:#8cc63f;
}
.tile-area-main {
position: fixed;
left: 0px;
top: 0px;
display: inline-block;
color: #ffffff;
width: 780px;
height: 450px;
overflow: hidden;
z-index : 3000;
background-color:rgba(37, 34, 104, 0.3);
border-radius: 25px;
}
.tile-area-main p {
margin: 0;
padding: 0 2.4em 0.6em;
font-size: 1.4em;
line-height: 1.5;
color : #000;
cursor: pointer;
}
You need to set margin instead padding for the .border element:
.border {
margin: 0 2.4em 0.6em !important;
padding: 0 !important;
}
FIDDLE: https://jsfiddle.net/lmgonzalves/2es4bx0o/4/
I'm trying to achieve the following page divider:
But, I'm ending up with this:
Obviously the yellow is just to tell me where the tops and bottom are (should be white), and I seem to be getting this unwanted top and bottom margin. I've tried a few methods including display:inline-block, display:inline, margin-top:-2px but lost what I've tried and what I haven't. The span was originally a div but this was one of the many things I changed trying.
This is my last attempt:
<style>
.pageDivider {
margin: 30px 0;
background: #E5E5E5;
padding: 0;
text-align: center;
}
.pageDivider .inner {
line-height: 24px;
margin: 0 auto;
padding: 0 15px;
background: yellow;
font-size: 16px;
color: #333;
}
</style>
<div class="pageDivider"><span class="inner">SHARE</span></div>
Any clues on how to do this the proper way?
I cannot delete my question, so I will share the solution I have just found which works really, really nicely - I hope it helps others.
JSFIDDLE DEMO
h6.pageDivider {
font-family: 'Lato', 'Open Sans', sans-serif;
overflow: hidden;
text-align: center;
margin: 40px 0;
font-weight: 700;
color: #555;
}
h6.pageDivider:before,
h6.pageDivider:after {
background-color: #E9E9E9;
content: "";
display: inline-block;
height: 18px;
position: relative;
vertical-align: middle;
width: 50%;
}
h6.pageDivider:before {
right: 30px;
margin-left: -50%;
}
h6.pageDivider:after {
left: 30px;
margin-right: -50%;
}
<h6 class="pageDivider">HELLO WORLD</h6>
your answer is ....
.pageDivider {
margin: 30px 0;
background: #E5E5E5;
padding: 0;
text-align: center;
}
.pageDivider .inner {
line-height: 24px;
margin: 0 auto;
padding:2.5px 20px !important;
background: yellow;
font-size: 16px;
color: #333;
}
<div class="pageDivider"><span class="inner">SHARE</span></div>
As part of my HTML5/CSS3 app, I need to implement zoomable image popup. When the user clicks on a small image, a full-screen popup appears containing that image in the middle with a title above it and a button to close the popup below it. Clicking on the image then removes any scaling and puts it full-size inside a box in the middle to allow scrolling - with title and "close" button staying above and below.
I'm using flex (for several reasons, including vertical centering content). The overall popup works and looks fine. Clicking on the image does increase it in size, but it resizes the box so that the "done" button is pushed below the overall popup.
Here's the jsfiddle demonstrating the issue
I don't mind the fact that the box resizes - the more room to view/scroll the larger image - but I need to ensure that the button at the bottom stays put relative to the bottom edge of the popup.
My HTML looks like this (I used a random image for demonstration):
<div id="overlay" class="hidden">
<div id="alsg">
<div class="intro">Assist with ALS</div>
<div class="box scrollable">
<img src="http://upload.wikimedia.org/wikipedia/commons/8/8c/Male_monarch_butterfly.JPG" class="fit" />
</div>
<div class="popup-buttons">
<div id="button-alsg-done" class="button button-state-action button-green right">Done</div>
<div class="clear"></div>
</div>
</div> <!-- alsg -->
</div>
With the javascript being
$('img', '#alsg').on('click', function(e) {
$(this).toggleClass('fit');
});
There's a lot of CSS, unfortunately. You'll note that there's a pretty bad mix of flex and old-school positioning. This is because the app initially didn't use flex at all and I'm in a slow process of migrating/cleaning up now.
div#overlay {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 104;
display: flex;
align-items: center;
justify-content: center;
}
div#overlay > div {
position: relative;
width: calc(100% - 40px);
margin: 10px auto;
background-color: #A9A9A9;
border-radius: 8px;
text-align: center;
padding: 10px;
display: flex;
flex-direction: column;
}
div#alsg {
max-height: calc(100% - 40px) !important;
}
div#overlay div.intro {
color: #FFF !important;
font-size: 12pt;
margin-bottom: 10px;
}
div#overlay div.box, div.template div.box {
padding: 3px 5px;
overflow: hidden;
font-weight: bold;
position: relative;
flex-grow: 1;
}
div#alsg div.box {
text-align: center;
position: relative;
overflow: auto !important;
margin: 10px 0px 0px !important;
}
div.box {
background-color: #FFF;
color: #27374A;
border-radius: 8px;
border: 3px solid #FBE96E;
position: relative;
margin: auto;
flex-shrink: 1;
}
.fit {
max-width: calc(100% - 4px) !important;
max-height: calc(100% - 4px) !important;
}
div.popup-buttons {
margin-top: 10px;
}
#overlay .button.right {
margin-left: 10px;
}
#button-alsg-done {
margin-top: 10px;
flex-basis: 25px;
}
div.button-green {
background-color: #2CC55D;
color: #FFF;
font-weight: bold;
}
div.button-state-action {
height: 25px;
padding: 0px 5px;
line-height: 25px;
text-align: center;
border-radius: 4px;
font-size: 10pt;
font-weight: normal !important;
width: 60px;
cursor: pointer;
margin-bottom: 5px;
}
div.button {
height: 22px;
padding: 0px 2px;
line-height: 22px;
text-align: center;
border-radius: 4px;
font-size: 9pt;
width: 42px;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
}
.right {
float: right;
}
.clear {
clear: both;
}
I have an image 200px x 100px which acts as a background image to a link.
On hovering, the bg image changes.
Fiddle here: http://jsfiddle.net/EnsFK/
As you can see from the image, the text is not aligned with the image and appears at the bottom. Is there a way to align the text so it is in the middle (Aligned with the small dot?) I've tried vertical-align and
line-height but to no avail.
.current-location {
line-height: 24px;
background-size: 48px 24px;
height: 24px;
width: 24px;
text-decoration: none;
position: relative;
line-height: 24px;
vertical-align: middle;
}
.current-location span {
background: url(images/mobile/current-location.gif) left top no-repeat;
display: inline-block;
background-position: 0px 0px;
background-size: 48px 24px;
height: 24px;
width: 24px;
margin-right: 10px;
}
.current-location:hover span {
display: inline-block;
background-position: -24px 0px;
background-size: 48px 24px;
height: 24px;
width: 24px;
}
Rather than using an empty span in your markup, you could use pseudo elements.
Something like this:
.current-location:before {
content: '';
/* image here */
margin-right: x px; /* however much you need */
vertical-align: middle;
}
FIDDLE
Markup:
Use this location
CSS
.current-location {
line-height: 24px;
background-size: 48px 24px;
height: 24px;
width: 24px;
text-decoration: none;
position: relative;
}
.current-location:before {
content: '';
background: url(http://i39.tinypic.com/2lk5lci.png) left top no-repeat;
display: inline-block;
background-position: 0px 0px;
background-size: 48px 24px;
height: 24px;
width: 24px;
margin-right: 10px;
vertical-align: middle;
}
.current-location:hover:before {
background-position: -24px 0px;
}
You can either change the line-height of the text to fit the image's location, or play with background-position property for the image's position to fit it to the text.
Working jsFiddle - also removed some of the unnecessary code.
.current-location {
line-height: 24px;
height: 24px;
text-decoration: none;
position: relative;
line-height: 26px;
display:inline-block;
}
.current-location span {
background: url(http://i39.tinypic.com/2lk5lci.png) left top no-repeat;
display: inline-block;
background-position: 0px 0px;
background-size: 48px 24px;
height: 24px;
width: 24px;
margin-right: 10px;
vertical-align:top;
}
.current-location:hover span {
background-position: -24px 0px;
}
Note: this is usually done without the <span> element using background on the anchor itself. However you method will work just as fine with the new CSS..
I like to use this css snippet for vertical centering
#text{
position:absolute;
top:50%;
height:240px;
margin-top:-120px; /* negative half of the height */
}
#container {
position: relative;
height: 400px;
}
<div id="container">
<div id="text"><span>Text.....</span></div>
</div>
Your link is aligned properly look at your image instead
background: url(images/mobile/current-location.gif) left top no-repeat;
If you want it to be center aligned you should consider doing...
background: url(images/mobile/current-location.gif) center center no-repeat;
Also give the true width and height of the image for this method to work.
display: inline-block;
has problems with ie6 you will need to use:
display:inline-block;
*zoom: 1;
*display: inline;
try and stay away from vertical alignment.
How about a version with no images and no extra markup? http://jsfiddle.net/6aaZX/
For this HTML:
Use this location
This CSS:
a {
display: inline-block;
color: #333;
text-decoration: none;
font-family: sans-serif;
padding-left: 4em;
line-height: 2;
}
a:before {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #81B995;
content: '';
display: inline-block;
width: 0.7em;
height: 0.7em;
border: 0.4em solid #B7E2C8;
margin-right: 1em;
vertical-align: -0.3em;
}
It requires support for border-radius, but that's it - nothing fancy otherwise. If you did need to use an image, you could apply it to the :before pseudo element, as suggested by Danield
The search glass icon in the orange input at the top of my page here isn't displaying as a link, so when hovered over the pointer doesn't show.. Any ideas why it might be?
Here's the CSS:
.searchGlass {
background-image: url(/images/searchicon.png);
background-position: left 1px;
background-color: rgba(0, 0, 0, 0);
display: block;
height: 18px;
position: relative;
top: -24px;
width: 15px;
background-repeat: no-repeat;
left: 7px;
}
.hideText {
text-indent: 125%;
white-space: nowrap;
overflow: hidden;
}
.submit {
margin: 1em 0 0 0;
width: 30px;
height: 30px;
text-transform:uppercase;
font-size:15px;
padding: 6px 13px;
cursor:pointer;
border-radius: 20px;
}
And html:
<div class="left"><input type="submit" class="submit hideText" value=""/><span class="searchGlass hideText">Go</span></div>
Many thanks.
Try from here:
<div class="left">
<button class="submit"><span class="searchGlass hideText">Go</span></button>
</div>
and CSS:
.searchGlass {
background-color: transparent;
background-image: url("/images/searchicon.png");
background-position: left 1px;
background-repeat: no-repeat;
display: block;
height: 18px;
position: relative;
width: 15px;
}
You can always submit by javascript:
<span class="searchGlass hideText">Go</span>
the default display for span is inline, you have to change it to block then float it where you want, then you will be able to but width and height
try this in CSS
.hideText {
text-indent: 125%;
white-space: nowrap;
overflow: hidden;
width:50px; /* 50px is just assumed value, put yours */
height:50px;
display:block
float:left;
}