How do I align an icon right next to "Click here"?
I was able to use the below CSS to accomplish it but on a PC when using firefox, chrome, and safari the icons are not aligned.
<div class="link_container">
Click here
<a class="sprite_image action_image"></a>
</div>
.link_container {
margin-top: -10px;
padding-bottom: 10px;
}
.click_action {
color: #999;
font-size: 12px;
text-decoration:none;
}
.sprite_image {
background: url('sprite.png');
}
.action_image {
background-repeat: no-repeat;
background-position: -116px -12px;
width: 10px;
height: 10px;
position: absolute;
margin-left: 3px;
margin-top: 4px;
}
You could add this to the .click_action and .sprite_image css:
float: left;
Allot of browsers hate - positioning, now everything looks good, but my thought is, make it part of click here, not a separate piece. Just add this CSS and your entire ahref and icon are clickable. See Fiddle
.click_action {
background: url("http://www.icondeposit.com/local--files/imageid:105/Preview-blue-set-icons.jpg") no-repeat scroll -6% 29% transparent;
color: #999999;
display: block;
font-size: 12px;
height: 42px;
padding: 15px 0 0;
text-decoration: none;
width: 87px;
}
Related
I'd like to make a message-alert box in my web app. I created the main style but I have problems on small screen sizes.
Here's the image for the regular 1366x768 computer screen:
And here is for a typical mobile device:
Problems:
The X button has tagled with the message.
The main message wrapper has fixed and wasn't expand when the message came out of the wrapper.
How to fix the two above problems? Do I have to follow another path? I use position: fixed; property-value to keep my message on top.
Here are my HTMl and CSS code:
HTML:
<div class="top-msg">
<div class="top-msg-ico">
!
</div>
<div class="top-msg-inner">
<p>Only letters and nubers are allowed for email. See security for more info.</p>
</div>
<div class="top-msg-close" style=" cursor: pointer;">✕</div>
</div>
CSS:
.top-msg {
width: 100%;
height: 55px;
position: fixed;
background-color: rgba(42,45,50,0.6);
color: rgba(250,251,255,0.95);
font-family: "Lato", sans-serif;
font-size: 18px;
}
.top-msg-close {
float: right;
padding-top: 17px;
padding-right: 30px;
//border: 1px solid white;
//height: 100%;
width: 3%;
}
.top-msg-inner {
top: 15px;
position: absolute;
display: inline-block;
padding-left: 10px;
width: 80%;
//border: 1px solid white;
}
.top-msg-ico {
min-width: 65px;
height: 100%;
background-color: #fff;
display: inline-block;
background-color: rgba(0,0,0,0.7);
text-align: center;
font-size: 45px;
}
FIDDLE:
https://jsfiddle.net/4oLvyajo/
UPDATE -SOLUTION!-
After some help from LGSon answer I manage to finish all the design, so I accepts his answer but the hole solution is in the fiddle below.
FIDDLE:
https://jsfiddle.net/4oLvyajo/4/
Images:
Here is a start for you
.top-msg {
width: 100%;
position: fixed;
background-color: rgba(42,45,50,0.6);
color: rgba(250,251,255,0.95);
font-family: "Lato", sans-serif;
font-size: 18px;
}
.top-msg-close {
float: left;
box-sizing: border-box;
padding-top: 17px;
padding-right: 30px;
width: 45px;
}
.top-msg-inner a {
text-decoration: none;
color: RGBA(0, 0, 0, 0.6);
font-weight: bold;
}
.top-msg-inner a:hover {
color: RGBA(0, 0, 0, 0.5);
}
.top-msg-inner {
float: left;
box-sizing: border-box;
padding: 0 10px;
width: calc(100% - 110px);
}
.top-msg-ico {
float: left;
width: 65px;
height: 57px;
background-color: #fff;
background-color: rgba(0,0,0,0.7);
text-align: center;
font-size: 45px;
}
<div class="top-msg">
<div class="top-msg-ico">
!
</div>
<div class="top-msg-inner">
<p>Only letters and nubers are allowed for email. See security for more info.</p>
</div>
<div class="top-msg-close" style="cursor: pointer;">✕</div>
</div>
replace the width: 80% with margin-right: 40px, and you'll have to play around with the top: 15px as well (at -11 I had it looking right, but you can play around with that)
Here is the updated Fiddle
If you want everything scalable you'll need a completely different approach. First of all, if you place a right floating element under a block element it will float right, but underneath it. You'll need to define the floating close button element first.
Anyway, here's the updated Fiddle
It needs some minor tweaks in the padding and margins, but I think this is very close to what you're looking for
I am trying to make it so that the button that I have centered on the screen (when the screen is full size, it is centered) stays in the center while still scaling down to fit to smaller screens.
I have tried some of the answers I found here and other places about changing position: absolute; and wrapping the button in a div with text-align: center; and margin: auto; but so far the button ends up not staying centered.
Here is what I have:
.wrapper {
text-align: center;
margin: auto;
}
#mybutton {
position: absolute;
left: 37%;
text-align: center;
cursor: pointer;
bottom: 10%;
letter-spacing: .55rem;
max-width: 50%;
background: #3498db;
background-image: linear-gradient(to bottom, #3498db, #2980b9);
text-shadow: 1px 1px 3px #666666;
font-family: Arial;
color: #ffffff;
font-size: 30px;
padding: 10px 20px 10px 20px;
text-decoration: none;
border-color: #3498db;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
This is probably something very simple that I am missing, but it's late and I am tired of messing around with this, so if anyone can offer any help, it would be appreciated!
Make it simple. You just need text-align:center with width.
CSS i have used
width:50%;margin:0 auto;text-align:center;
see here
try this , it is working .
.button1 {
text-align: center;
}
.button1 a {
background-color: #03326c;
font-size: 25px;
height: 35px;
position: relative;
text-align: center;
display: inline-block;
color: white;
padding: .5em 1em;
}
<div class="button1">
<span class="Button1">BUTTON</span>
or you can put button also.
</div>
This is what I understood of your problem: you wanted to make a button that scaled in accordance with the screen size AND you wanted it to be be centered.
I've pretty much done what you've been trying to do and achieved this.
.wrapper{
text-align: center;
}
button{
width: 50%;
...
}
Assigned the text align center property to the button's parent div and assigned the button a relative width.
body {
position: relative;
}
button {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
<body>
<button>CLICK ME</button>
</body>
see my pen for further explanation on how I used transform property of css
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
I have below lines in my JSPX
<div class="page_nav">
<a id="saveButton" class="button"><span>${save}</span></a>
<a id="cancelButton" class="button"><span>${cancel}</span></a>
</div>
for loading "save" and "cancel" button. When I load the page, the order of the buttons is not ordered, only in chrome. Please refer screen shot for reference
Below are the copy-pastes from css
a.button {
background: transparent
url('../../images/admin/bg_button_span.png') repeat
scroll top right;
color: #fff;
display: block;
float: left;
font: normal 1.1em Tahoma, Arial;
height: 24px;
margin-right: 6px;
padding-right: 10px;
padding-left: 10px;
text-decoration: none;
cursor: pointer;
}
.page_nav {
float: left;
margin: 1em 0;
width: 100%;
clear: both;
}
This happens only in chrome
I use the same div in another page (same classnames too)., it works there perfectly. Not sure what am missing here
Please help me on this
Try to set overflow:hidden for .page_nav:
.page_nav {
float: left;
display:block;
margin: 1em 0;
width: 100%;
overflow: hidden;
}
I have IE6.
[EDIT: you can see the template live here: http://themeforest.net/item/aqua-terra-lava-html-blog-portfolio-/full_screen_preview/53209 ]
I have a template, with 3 <a></a> that change the position of their background to create a button effect.
This is how it looks in any browser
This is it with IE6:
This the CSS code:
#featured-nav {
width: 944px;
height: 131px;
background: url(/images/site/shadow.gif) bottom center no-repeat;
}
#featured-nav a {
height: 35px;
float: left;
cursor: pointer;
display: block;
padding: 47px 20px 20px 120px;
font-size: 12px;
line-height: 16px;
text-decoration: none;
font-weight: normal;
color: #777;
}
#featured-nav a span {
margin-top: 10px;
height: 30px;
width: 150px;
font-size: 12px;
text-transform: uppercase;
color: #5aa0b1;
font-weight: bold;
position: absolute;
top: 12px;
left: 120px;
}
#featured-nav a img {
position: absolute;
left: 40px;
top: 23px;
}
#featured-nav a.left {
background: url(/images/site/leftbutton.png) top left no-repeat;
width: 178px;
overflow: hidden;
position: relative;
}
#featured-nav a.left:hover, #featured-nav a.left.activeSlide { background: url(/images/site/leftbutton.png) bottom left no-repeat; }
#featured-nav a.middle {
background: url(/images/site/middlebutton.png) top left no-repeat;
width: 174px;
overflow: hidden;
position: relative;
}
#featured-nav a.middle:hover, #featured-nav a.middle.activeSlide { background: url(/images/site/middlebutton.png) bottom left no-repeat; }
#featured-nav a.right {
background: url(/images/site/rightbutton.png) top left no-repeat;
width: 172px;
overflow: hidden;
position: relative;
}
#featured-nav a.right:hover, #featured-nav a.right.activeSlide { background: url(/images/site/rightbutton.png) bottom left no-repeat; }
.content-wrapper {
width: 678px;
overflow: hidden;
margin-top: 10px;
margin-left: 8px;
}
Any idea?
Thank you.
IE 6 cannot understand multiple classes on an element correctly so i would suggest you put the
#featured-nav {
width: 944px;
height: 131px;
background: url(/images/site/shadow.gif) bottom center no-repeat;
}
as the last rule in the CSS so IE 6 picks it up last ..
you are bound to face similar problems elsewhere though ..
To be sure either create full background buttons (the whole button in one image) / create multiple elements to define each side of the button / or scrap IE 6 ...
[EDIT] it does not apply to your case .. scrap my suggestion ..
as an alternative, you can rename you selected classes and instead of using two like left.activeSlide have one named left_activeSlide...
[EDIT 2] here is some code for the specific template you mentioned in your comment
They use the cycle plugin, and in the cycle.js file (at the end) they have the initialization code which is
function onBefore(){
var slide = $(this).attr('id');
$('#featured-nav ul li.activeSlide').removeClass('activeSlide');
$('#featured-nav ul li#' + slide).addClass('activeSlide');
}
now if you change it to
function onBefore(){
var slide = $(this).attr('id');
$('#featured-nav ul li.'+slide+'activeSlide').removeClass('leftactiveSlide rightactiveSlide middleactiveSlide');
$('#featured-nav ul li#' + slide).addClass(slide+'activeSlide');
}
it would work with classes named leftactiveSlide, middleactiveSlide rightactiveSlide
You might want to add display:inline to the floated elements. This doesn't affect other browsers, but prevents IE from doubling margins on the element.
I believe the IE6 has issues with background-positioning certain PNGs. Just as a test, you ought to try replacing the image with a JPG or non-transparent PNG.