The squarespace template that I am using will not let me insert the code below. I got a response back that I need to split out the commands manually.
I am getting an error back with the background: I had tried a few times to accomplish this but couldn't quite get it accurate.
.mobile-nav .show-nav {
background: url("http://www.jobspark.ca/item/517adb63e4b06ea9dd79ace8?format=original") no-repeat scroll center center / 30% auto #000000;
border-bottom: 1px solid #000000;
color: #FFFFFF;
cursor: pointer;
display: block;
max-height: 50px;
padding: 1em 40px 50px;
}
Its likely the CSS 3 background shorthand thats causing the problem, support isn't consistent across all platforms and browsers - you should split the shorthand up like so:
.mobile-nav .show-nav {
background-image: url('http://www.jobspark.ca/item/517adb63e4b06ea9dd79ace8?format=original');
background-position: center center;
background-size: 30% auto;
background-color: black;
/* omitted default values */
border-bottom: 1px solid #000000;
color: #FFFFFF;
cursor: pointer;
display: block;
max-height: 50px;
padding: 1em 40px 50px;
}
Related
This question already exists:
How to change one element style when another is hovered [closed]
Closed 8 months ago.
Sorry for making things unclear last time, it really was code dump because I didn't know how to explain what was happening. Good news, I fixed it now. However now I a problem with CSS. I am trying to change background colour of a table row () when hovered over a button (my code doesn't work). The css is provided below. The problem is at the buttom of the CSS (the two hover styles): Please tell me what I am doing wrong, I searched for answers for so long however I have not come up with a proper solution.
body{
margin: 0px;
font-family: Helvetica;
}
header{
background-color: #e7e7e7;
height: 100px;
padding-top: 25px;
text-align: center;
font-size: 50px;
}
table{
background-color: white;
border-collapse: collapse;
font-size: 20px;
margin-left: auto;
margin-right: auto;
}
#myTable{
margin-top: 50px;
}
th,td{
padding: 20px;
text-align: center;
border:1px solid black;
width: 200px;
height: auto;
}
.nthChild{
background-color: #e7e7e7;
}
#nlRow th{
border-top: 0px;
}
input{
font-size: 20px;
width: 100%;
padding: 5px 0px;
border-radius: 4px;
}
#numeracyCredits, #literacyCredits{
width: 30%;
}
.button{
font-size: 20px;
padding: 5px 20px;
width: 15%;
border-radius: 4px;
background-color: white;
color: black;
border: 2px solid black;
transition-duration: 0.3s;
}
.button:hover{
background-color: #c4c2c2;
transition-duration: 0.3s;
}
.button:hover + .nthChild{
background-color: white;
}
the .nthChild of what? you should put the parent or whatever from that .nthChild. Or else if you give it a class or an id use that in stead of .nthChild then it should work.
I have this code here in CSS:
#submit{
border: 2px solid white;
width: 100px;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border-radius: 30px;
padding: 10px;
outline: none;
color : #fff;
transition: background-color 0.25s;
}
#submit:hover{
background: #bbb;
}
And the problem is that when i try it on my page the transition effects applies to the first background :none that i put, so when you enter the page it seems to change from the original background to none in 0,25s as the transition especifies. If i don´t misunderstand transitions this shouldn´t be happening, what is the problem? In case i´m wrong, how do you make that the transition effects apply after the the background changes in the beginning. Thank you!
Added some HTML to make this readable. Run the code and notice the changes. As you have written in your code, you have set the transition to be on hover, so it only applies whenever you hover your mouse over the container with the submit id.
#submit{
border: 2px solid white;
width: 100vh;
height: 80vh;
background-color: red;
display: block;
margin: 20px auto;
text-align: center;
border-radius: 30px;
padding: 10px;
outline: none;
color : #fff;
transition: 0.25s;
}
#submit:hover{
background: #bbb;
color: black;
}
<div id="submit">
<h1>Content</h1>
</div>
I'm a newbie and I'm trying to figure out how to put a background image on my site. I've linked the image but it seems that it is only showing about 30% of the image. (Just the top of the photo is showing, the whole way across but none of the bottom) I'd like the entire image to be the background. The image is 594kb.
Here is my CSS:
#nav1 {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none; }
#nav1 li {
float: left; }
#nav1 {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc; }
#nav1 li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav1 li a:hover {
color: #c00;
background-color: #fff; }
.nav
{
position: fixed;
top: 0;
}
.jumbotron {
background-image: url(../images/image.jpg);
background-repeat: no-repeat;
min-width: 100%;
min-height: 100%;
}
.jumbotron {
padding:0px;
}
body {
font-family: 'Lobster', serif;
text-shadow: 4px 4px 4px #aaa;
text-align: center;
}
h1 {
font-size: 70px;
line-height: 4em;
}
h2 {
font-size: 95px;
line-height: 1em;
}
You have to remember here, that for background images, each person has different screen resolutions and sizes. So having the entire image without some cropping or messing the image ratio is kind of impossible across different screen sizes.
Here is my preferred simple method using background-size cover. - I learned this from CSS Tricks..
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
i am developing sencha android mobile app, every component in sencha is looking very big and font size also big and i finished my application,but finally i have to do styling.
i have to reduce the every component size using css, how can i start, i am not very good at css and also i hared about sass.
what are the things i need to look at and I used below css so for.
.btnfacebook {
background: url(../images/facebook.png) !important;
background-repeat: no-repeat !important;
}
.btnmyapp {
background: url(../images/myapp.png) !important;
background-repeat: no-repeat !important;
}
.btntwitter {
background: url(../images/twitter.png) !important;
background-repeat: no-repeat !important;
}
.my-dataview-item {
background: #ddd;
border-bottom: 1px solid #ccc;
}
.my-dataview-item img {
width: 50px;
height : 43px;
float: left;
margin-right: 1em;
}
.my-dataview-item #count {
float: right;
-webkit-border-radius: 9px;
-moz-border-radius: 999px;
border-radius: 999px;
width: -4px;
height: 25px;
padding: 4px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 14px Arial, sans-serif;
margin-bottom: -4px;
}
.my-dataview-item #time {
float: right;
margin-right: 1em;
}
.x-list-item-label div{
padding-left: 3px;
}
#profilePhoto {
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
#profilePicture{
background-repeat: no-repeat;
background-size: contain;
}
Its best that you use sass, and generate the css file like that. You can set a default font size (by only using 1 line) and the rest of the sizes are calculated upon that size.
A good tutorial on how to start can be found here:
http://docs.sencha.com/touch/2-1/#!/guide/theming
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