csslint.net is throwing errors for the following css and I don't know why. This is pretty normal for css I think. I got the css from this site.
body {
background: #eee !important;
}
.wrapper {
margin-top: 80px;
margin-bottom: 80px;
}
.form-signin {
max-width: 380px;
padding: 15px 35px 45px;
margin: 0 auto;
background-color: #fff;
border: 1px solid rgba(0,0,0,0.1);
.form-signin-heading,
.checkbox {
margin-bottom: 30px;
}
.form-control {
position: relative;
font-size: 16px;
height: auto;
padding: 10px;
#include box-sizing(border-box);
&:focus {
z-index: 2;
}
}
input[type="text"] {
margin-bottom: -1px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
input[type="password"] {
margin-bottom: 20px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
Can someone help me? I really don't know what is wrong with it.
It's pretty malformed, run that into any editor with color syntax highlighting and you'll see that there are missing closing parenthesis for a few rules or they are incorrectly nested - you can't nest normal rules in CSS (media queries are an exception).
You'll need to look over your code and make sure you're not trying to nest rules.
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'm using SCSS compiler extention on VS code still the active class is not getting converted to css format.
I was trying to use this scss file in my code but it won't work properly what to do, I'm new at this please help me.
scss code:
#sideMenu {
background: $lightpurple;
max-width: 280px;
nav {
padding-top: 100px;
a {
display: block;
color: white;
text-decoration: none;
padding: 15px 30px;
&:active {
background: $darkpurple;
border-left: 5px solid $neon;
padding: 15px 30px 15px 30px;
}
}
}
}
I created an autosuggest usting react-autosuggest, now I'm trying do design the layout. I took a css from an example which seems to work fine.
when I copied this css to my project the suggestion list completely detached from the input of the autosuggest as shown in the image below:
I also tried to move the div in the example but the list follows the input (as it should)
here is the css from codepen which I tried to use:
.react-autosuggest__container {
position: relative;
}
.react-autosuggest__input {
width: 240px;
height: 30px;
padding: 10px 20px;
font-family: Helvetica, sans-serif;
font-weight: 300;
font-size: 16px;
border: 1px solid #aaa;
border-radius: 4px;
}
.react-autosuggest__input:focus {
outline: none;
}
.react-autosuggest__container--open .react-autosuggest__input {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.react-autosuggest__suggestions-container {
position: absolute;
top: 51px;
width: 280px;
margin: 0;
padding: 0;
list-style-type: none;
border: 1px solid #aaa;
background-color: #fff;
font-family: Helvetica, sans-serif;
font-weight: 300;
font-size: 16px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
z-index: 2;
}
.react-autosuggest__suggestion {
cursor: pointer;
padding: 10px 20px;
}
.react-autosuggest__suggestion--focused {
background-color: #ddd;
}
I think this css only works for the sandbox as used in the example. Especially
.react-autosuggest__suggestions-container {
position: absolute;
top: 51px;
This means that the suggestions container is always shown 51px from the top of your page. Due to other things on your page the input is probably in the way and pushed aside, since it doesn't has the position: absolute attribute.
I don't know if you're using something like a grid system or another way to manage positions of elements on your website? You might consider using that instead of defining position with pxs.
try to add this
.react-autosuggest__suggestions-container--open {
display: block;
position: absolute;
top: 51px;
width: 100%;
border: 1px solid #aaa;
font-family: Helvetica, sans-serif;
font-weight: 300;
font-size: 16px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
z-index: 2;
max-height: 300px;
overflow-y: auto;
}
A developer recently changed the formatting of my style.css file from:
.header {
border-bottom: 1px solid #e5e5e5;
box-sizing: border-box;
padding: 15px 10px 0 10px;
height: 80px;
}
.header h3 {
margin-top: 0;
margin-bottom: 0;
line-height: 3rem;
}
.header h3 a {
color: #636c72;
}
.header ul.nav {
margin-top: 4px;
}
to this:
.header {
border-bottom: 1px solid #e5e5e5;
box-sizing: border-box;
padding: 15px 10px 0 10px;
height: 80px; }
.header h3 {
margin-top: 0;
margin-bottom: 0;
line-height: 3rem; }
.header h3 a {
color: #636c72; }
.header ul.nav {
margin-top: 4px; }
My Question
I can see that the new developer has changed the formatting to a nested style which is fine I guess BUT I'm wondering if this will have any implications on my app which currently uses SCSS? More specifically I'm wondering if the new developer has used SCSS to do this or he's introduced something new to my project which I don't know about.
I have zero knowledge of css hence the question.
I am new to CSS, I found an layout online, but I have a little problem customizing it.
When the content of mainContent div is "higher" then the left menu, everything is working ok - but when the mainContent is smaller, it looks like this:
The div order is visible through Firefox WebDevelopper addon. The .css file is as follows:
body {
padding: 0px;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
}
#container {
padding-right: 20px;
padding-left: 20px;
}
#header {
}
#mainMenu {
border: 1px solid #808080;
font-size: 0.8em;
}
#pageBody {
position: relative;
}
#sidebar {
width: 250px;
padding: 5px 10px 10px 10px;
float: left;
border: 1px solid #808080;
font-size: 0.8em;
margin-top: 5px;
margin-right: 10px;
min-height: 500px;
}
.mainContent {
text-align: justify;
min-width: 400px;
min-height: 500px;
margin-left: 285px;
}
#footer {
font-size: 0.8em;
border-top-style: solid;
border-top-width: 1px;
border-top-color: #CCCCCC;
text-align: center;
color: #CCCCCC;
background-color: #333333;
padding-top: 10px;
padding-bottom: 10px;
margin: 0;
/*clear: both;*/
}
#footer p {
margin-top: 0px;
margin-bottom: 5px;
}
#footer a {
color: #CC3300;
text-decoration: none;
}
#footer a:hover {
color: #FF9900;
}
Can I please ask for some guidance in repairing this layout? I would like to acheive something similar to:
The exact position is not important, I just want the footer to be placed below the pageBody div.
I would be grateful for any help.
I don't know what your html looks like, but it looks like you could try inserting a clearing div just before the footer... btw, why is the 'clear: both;' commented out in the footer css rule?
code to insert just before the footer div:
<div style="clear: both;"/>
Not positive whether it will help, but if I understand your problem correcty, this is my best guess!
Try changing pageBody to:
#pageBody {
float: left;
clear: both;
}