I create a button with hover and active effect but after I created it come out extra "??" on my design.
<form id="form-login">
Login
</form>
And this is my CSS, I did change my "#form-login" to ".form-login" as well but not working. Please help me to check where is did wrong. It keep show me "??" on my design.
/* Login button */
#form-login {
/* Size and position */
width: 340px;
margin: 60px auto 30px;
padding: 15px;
position: relative;
}
#form-login .login {
/* Size and position */
width: 49%;
height: 38px;
float: left;
position: relative;
/* Styles */
border-radius: 3px;
cursor: pointer;
/* Font styles */
font-family: 'Lato', Calibri, Arial, sans-serif;
font-size: 14px;
line-height: 38px; /* Same as height */
text-align: center;
font-weight: bold;
/* Background color */
margin-right: 1%;
background: #34a5cf; /* Fallback */
background: -moz-linear-gradient(#34a5cf, #2a8ac4);
background: -ms-linear-gradient(#34a5cf, #2a8ac4);
background: -o-linear-gradient(#34a5cf, #2a8ac4);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#34a5cf), to(#2a8ac4));
background: -webkit-linear-gradient(#34a5cf, #2a8ac4);
background: linear-gradient(#34a5cf, #2a8ac4);
border: 1px solid #2b8bc7;
color: #ffffff;
text-shadow: 0 -1px rgba(0,0,0,0.3);
text-decoration: none;
}
#form-login .login:hover {
box-shadow:
inset 0 1px rgba(255,255,255,0.3),
inset 0 20px 40px rgba(255,255,255,0.15);
}
#form-login .login:active{
top: 1px;
}
I don't think it's your CSS.
Question signs ? always smell like an unicode character display problem.
Therefore the first thing to do is to check if you are using the correct encoding in your html document output. If it's not UTF-8, change it to UTF-8 and there's a good chance those question marks will "magically" turn into unicode characters instead of question marks. Just be sure to save and serve your html as UTF-8.
Hint to get you started:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style type='text/css'>
/* Login button */
#form-login
{
/* Size and position */
width: 340px;
margin: 60px auto 30px;
padding: 15px;
position: relative;
}
#form-login .login
{
/* Size and position */
width: 49%;
height: 38px;
float: left;
position: relative;
/* Styles */
border-radius: 3px;
cursor: pointer;
/* Font styles */
font-family: 'Lato', Calibri, Arial, sans-serif;
font-size: 14px;
line-height: 38px; /* Same as height */
text-align: center;
font-weight: bold;
/* Background color */
margin-right: 1%;
background: #34a5cf; /* Fallback */
background: -moz-linear-gradient(#34a5cf, #2a8ac4);
background: -ms-linear-gradient(#34a5cf, #2a8ac4);
background: -o-linear-gradient(#34a5cf, #2a8ac4);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#34a5cf), to(#2a8ac4));
background: -webkit-linear-gradient(#34a5cf, #2a8ac4);
background: linear-gradient(#34a5cf, #2a8ac4);
border: 1px solid #2b8bc7;
color: #ffffff;
text-shadow: 0 -1px rgba(0,0,0,0.3);
text-decoration: none;
}
#form-login .login:hover {
box-shadow:
inset 0 1px rgba(255,255,255,0.3),
inset 0 20px 40px rgba(255,255,255,0.15);
}
#form-login .login:active{
top: 1px;
}
</style>
</script>
</head>
<body>
<form id="form-login">
Login
</form>
</body>
</html>
Copy-and-paste it into a new document, save it as "UTF-8", and then open it in your browser. You'll see there are no question signs ? (anymore).
Please note: I removed the useless spacing between the login text and the surrounding tag, changing > Login < to >Login<.
Related
Please refer to the image below:
Is it possible to implement text shadow CSS property such that only the outer periphery (stroke) of the text shadow is visible.
Use a pseudo element and style it with shadows:
:root {
--body: #FFF;
--outline: #666;
--background: #000;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
main {
min-height: 100vh;
background: var(--background);
color: var(--body);
display: grid;
place-items: center;
position: relative;
z-index: 1;
}
.outline-effect {
font-size: 4rem;
position: relative;
font-weight: 900;
}
.outline-effect::before {
font-size: 150%;
content: attr(data-outline);
position: absolute;
top: -0.333em;
left: 1em;
color: var(--background);
text-shadow: 1px 0 0 var(--outline), 0 1px 0 var(--outline), -1px 0 0 var(--outline), 0 -1px 0 var(--outline);
z-index: -1;
font-weight: 200;
}
<main>
<p class="outline-effect" data-outline="Build">Build.</p>
</main>
You can put multiple shadows that will hide each other. Play with this to get what you desired.
Snippet:
body {background-color: black;}
.demo {
margin-top: 30px;
color: white;
font-size: 100px;
font-weight: bold;
text-transform: uppercase;
text-shadow:
24px -17px 0 black, /* same as background color */
25px -16px 0 white,
23px -18px 0 white,
23px -15px 0 white;
}
<div class="demo">demo</div>
Create four shadows each slightly off (↖ ↗ ↘ ↙) by 1 px, and all that behind the main shadow (white in this case):
<html>
<head>
<style>
div {
font-family: 'Arial Black', sans-serif;
font-size: 100px;
text-shadow:
20px -20px 0 white,
19px -19px 0 red,
19px -21px 0 red,
21px -21px 0 red,
21px -19px 0 red;
}
</style>
</head>
<body>
<div>Build.</div>
</body>
</html>
I think its not possible to achieve this exact effect using text-shadow, since the text at back is larger than the solid text. If you need to stick with text-shadow only, then check #Daniel Sixl's answer.
You can achieve this effect using a ::before selector and webkit-text-stroke. Be sure to match the value of data-text attribute, with the text that is inside the h1.
body{
background: #000;
/* Center Text on Screen */
display: grid;
place-items:center;
height: 100vh;
}
h1{
color: white;
font-size: 5rem;
transform: translateX(-50%);
font-family: sans-serif;
}
h1::before{
content: attr(data-text);
position: relative;
top: -0.15em;
right: -88.75%;
font-size: 1.6em;
-webkit-text-stroke: 2px grey;
-webkit-text-fill-color: transparent;
z-index: -1;
}
<h1 data-text="Build.">Build.</h1>
There's an element on my page that's visible in Chrome but disappears in Firefox even though it's using the tinymce library that clearly intended it to be visible.
The element is the button in:
<div class="mce-reset" role="application">
<div id="mceu_17-head" class="mce-window-head">
<div id="mceu_17-title" class="mce-title">Add Parshan Link</div>
<button class="mce-close" aria-hidden="true" type="button">×</button>
<div id="mceu_17-dragh" class="mce-dragh"></div>
</div>
...
and it doesn't help to remove the setting aria-hidden="true" (though I don't know why it's there). Some of the relevant CSS is:
.mce-window-head .mce-close {
position: absolute;
right: 15px;
top: 9px;
font-size: 20px;
font-weight: bold;
line-height: 20px;
color: #858585;
cursor: pointer;
height: 20px;
overflow: hidden;
}
.mce-window-head .mce-close {
position: absolute;
right: 15px;
top: 9px;
font-size: 20px;
font-weight: bold;
line-height: 20px;
color: #858585;
cursor: pointer;
height: 20px;
overflow: hidden;
}
.mce-container, .mce-container *, .mce-widget, .mce-widget *, .mce-reset {
margin: 0px;
padding: 0px;
border: 0px none;
outline: 0px none;
vertical-align: top;
background: none repeat scroll 0% 0% transparent;
text-decoration: none;
color: #333;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
text-shadow: none;
float: none;
position: static;
width: auto;
height: auto;
white-space: nowrap;
cursor: inherit;
line-height: normal;
font-weight: normal;
text-align: left;
box-sizing: content-box;
direction: ltr;
max-width: none;
}
.mce-container, .mce-container *, .mce-widget, .mce-widget *, .mce-reset {
margin: 0px;
padding: 0px;
border: 0px none;
outline: 0px none;
vertical-align: top;
background: none repeat scroll 0% 0% transparent;
text-decoration: none;
color: #333;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
text-shadow: none;
float: none;
position: static;
width: auto;
height: auto;
white-space: nowrap;
cursor: inherit;
line-height: normal;
font-weight: normal;
text-align: left;
box-sizing: content-box;
direction: ltr;
max-width: none;
}
button, input[type="submit"], input[type="button"] {
background: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6) no-repeat scroll 0 0 #fafafa;
border-color: #ccc #ccc #bbb;
border-radius: 4px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
color: #333;
cursor: pointer;
display: inline-block;
font-size: 13px;
line-height: 18px;
padding: 4px 10px;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
}
I found that if I add
padding: inherit;
to the element's style, then the element is always visible, but with improper padding.
I also see that the CSS is getting loaded twice which is not proper, but might not be what's causing the problem.
Can anyone please tell me what's causing the element to become invisible (It's there and can be clicked on but I can't see it)? To see the problem, please go to the page, click on the words "agreeing with I.B.", then click on the "Parshan" button in the toolbar that appears above the text. There is a button at the top right corner of the dialog box which I can't see in Firefox (latest release: 37.0.2).
Also note: When I inspect the element via Firefox, the × often appears immediately.
I'm running on Windows 8.1 64 bit, but the problem is also sometimes seen on Windows 7.
Thanks a lot!!
In the end, the following LESS caused the X to appear and in the right place, though I guess that it's just a workaround, since I still don't know what's causing the problem:
.mce-window-head .mce-close {
padding: inherit;
box-shadow: none;
.mainContainer.ltr ~ div & {
top: 0px;
/* #noflip */ right: 0px;
}
.mainContainer.rtl ~ div & {
top: 0px;
/* #noflip */ left: 0px;
}
}
I think this is a css question.
I have a fixed bar on the top of the page and I want to put there, aligned to the right, a p:commandButton. But the p:commandButton is rendered outside the div, to the left.
I've checked that it's probably a matter of attribute display, because the h:form (which must encapsulates the p:commandButton) has it defined as display:block. If I put the button outside the form, it's rendered like a charm where I want - but, of course, it doesn't work.. When i use the h:form, the button position is changed.
The css i'm using:
/*** Navigation bar ***/
body {
padding: 0; /* Gets rid of the automatic padding */
margin: 0; /* on HTML documents */
font-family: Lucida Grande, Helvetica, Arial, sans-serif;
font-size: 12px;
}
#navigation {
position: fixed;
top: 0;
width: 100%;
color: #ffffff;
height: 55px;
padding-top: 0px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.9);
color: rgba(1, 1, 1, 0.9);
}
#navigation a {
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
}
#navigation a:hover {
color: grey;
}
#navigation img {
padding-left: 250px;
}
I'm not a web developer by any stretch of the imagination, I get things to the way I want them basically thru trial and lots of error. I can't seem to figure this one out.
I want to change the style of my dropdown selector from using the default OS styling to a suitable style I found but I can't figure out what goes where.
Here is my existing dropdown selector css:
/* select
==========================================================*/
.selector, .selector * {
/* margin: 0;
padding: 0; */
}
.selector select:focus { outline: 0; }
div.selector {
/* background-position: -490px -24px;
display: inline-block;
overflow: hidden;
padding-left: 2px;
position: relative;
vertical-align: middle;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2);
box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2); */
}
div.selector span {
/* background-position: 100% 0;
color: #fff;
font-size: 11px;
font-weight: bold;
overflow: hidden;
padding: 0px 27px 0px 7px;
text-overflow: ellipsis;
text-shadow: 1px 1px 0 #000;
white-space: nowrap; */
}
div.selector select {
/*background: #fff;
color: #000;
border: none;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
text-transform:none;*/
font-size:12px;
opacity: 1 !important;
}
div.selector, div.selector span {
/*background-repeat: no-repeat;
line-height: 24px;
text-transform: uppercase;
background-image: url("sprite.png");
background-repeat: no-repeat;
line-height: 24px;*/
}
div.selector, div.selector span, div.selector select { /*height: 24px;*/ }
/* #sort {
margin: 10px 0;
float:right;
width:257px;
}
#sort span {display:none;}
#sort SELECT {
background: none repeat scroll 0 0 #fff;
color: #000;
vertical-align: bottom;
opacity:1 !important;
float:left;
} */
button, textarea, input[type=text], input[type=password] {
border: 0;
margin: 0;
padding: 0;
}
textarea, input[type=text], input[type=password], select, .selector span {
color: #888;
font: 12px 'Helvetica Neue', Arial, sans-serif;
}
input[type=submit] { font: 12px 'Helvetica Neue', Arial, sans-serif; }
textarea, input[type=text], input[type=password] {
border: 1px solid #a9a9a9;
padding: 4px 8px;
}
button {
background: transparent;
color: #1b1e00;
font-size: 28px;
text-transform: lowercase;
}
button, label, input[type=submit] { cursor: pointer; }
.selector span { display: block; }
.selector, .selector span, .selector select { cursor: pointer; }
And here is the css for what I would like it to look like:
/* all form DIVs have position property set to relative so we can easily position newly created SPAN */
form div{position:relative;}
/* setting the width and height of the SELECT element to match the replacing graphics */
select.select{
position:relative;
z-index:10;
width:166px !important;
height:26px !important;
line-height:26px;
}
/* dynamically created SPAN, placed below the SELECT */
span.select{
position:absolute;
bottom:0;
float:left;
left:0;
width:166px;
height:26px;
line-height:26px;
text-indent:10px;
background:url(images/bg_select.gif) no-repeat 0 0;
cursor:default;
z-index:1;
}
Basically I don't know where anything goes. Any help would be very much appreciated.
Thank you!
Right now the only browsers to fully support styling of dropdown menus is chrome. See this post:
How to style a <select> dropdown with CSS only without JavaScript?
If you need your drop downs to match cross browsers there are a couple options.
1) http://harvesthq.github.com/chosen/ or others like it (my usual pick),
2) Compeletly redesign a drop down from scratch. This is not recommended as is is very complicated and easy to create errors. see http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx or http://css-tricks.com/dropdown-default-styling/
Hope this helps!
I am currently working with a customized jquery alert from this SITE. I am trying to achieve a gray transparent background when the alert appears but have been unsucessful. How can I get a gray transparent screen that covers the whole background behind the alertbox? Here is my EXAMPLE
CSS
<style>
#popup_container {
font-family: Arial, sans-serif;
font-size: 12px;
min-width: 300px; /* Dialog will be no smaller than this */
max-width: 600px; /* Dialog will wrap after this width */
background: #FFF;
border: solid 5px #999;
color: #000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#popup_title {
font-size: 14px;
font-weight: bold;
text-align: center;
line-height: 1.75em;
color: #666;
background: #CCC url(images/title.gif) top repeat-x;
border: solid 1px #FFF;
border-bottom: solid 1px #999;
cursor: default;
padding: 0em;
margin: 0em;
}
#popup_content {
background: 16px 16px no-repeat url(images/info.gif);
padding: 1em 1.75em;
margin: 0em;
}
#popup_content.alert {
background-image: url(images/info.gif);
}
#popup_content.confirm {
background-image: url(images/important.gif);
}
#popup_content.prompt {
background-image: url(images/help.gif);
}
#popup_message {
padding-left: 48px;
}
#popup_panel {
text-align: center;
margin: 1em 0em 0em 1em;
}
#popup_prompt {
margin: .5em 0em;
}
</style>
You need something like in this fiddle
The 'alertblanket' has an high z-index and overlays the entire page. Your dialog then must have a higher z-index to be on top of the 'alertblanket'
EDIT: You can set the color of that alert library simply by setting
$.alerts.overlayiOpacity = 0.5
$.alerts.overlayColor = '#AAA'
Or anything you like. See also the comments inside the .js file of jquery.alerts.js