20. Bright Buttons placement issue


#1
<!DOCTYPE html>
    <html>
        <head>
            <style>
                body {
    text-align: center;
    background:  url(http://vignette2.wikia.nocookie.net/ums/images/8/86/Rick_Astley_pixel_art.png/revision/latest?cb=20140425212803);
    color: white;
    font-family: Helvetica;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;     
   
    input[type¨submit¨] {
        background: limegreen;
        color: black;
}
}
p {
    font-size: 24px;
}
input {
    border: 0;
    font-size: 18px;
}  
padding: 12px;
    </style>    
        </head>
             <body>
 <img src="http://socialnewsdaily.com/wp-content/uploads/2014/05/rick-astley-rickrolling.jpg" height="250" width="250">
 
<h1> RICK ASTLEY </h1>
<input type="email"   placeholder=YourEmail>
    <input type="submit">

   
    
    
<h1>     </h1>
<p> Ooh Were no strangers to love </p> 
    <p> You know the rules and so do I </p>
        <p> A full commitments what i'm thinking of </p>
            <p> You wouldn't get this from any other guy </p>
    </body>
        </html>

That's my current code. i'm just curious just as to what the main issue is. I've been trying to figure it out for two days now.
Not to mention I have no idea where
input[type¨submit¨] {
background: limegreen;
color: black;
}

Goes at all.
If anyone could help me with this I would greatly appreciate it.


#2

​Hi 181758,

Your code isn't currently visible. Please edit your post to format it, then comment back so we'll know you've updated the code. You can format code by selecting it all while in the post editor, and pressing Ctrl/Cmd + K, or by adding a new line and three backticks (`) before and after your code, like this:


```
<code> will show up properly here
```

Thanks!


#3

Well now you can see my code, but all I need now is help with what i´m doing wrong now.


#4

Thanks for formatting it :)

You've got a few problems in your code, but they're all pretty small:

  • You can't have nested CSS rules. Move the closing curly brace (}) on line 18 up to line 14, so it closes the body CSS rule before the input[type="submit"] one
  • Something is wrong with your quotes around submit. Instead of ¨, use the regular "
  • Line 27 belongs inside your input CSS rule - otherwise the computer won't know which element to give that padding to :)

Please let me know if you've got any more questions, I'm happy to help whenever I can :)


#5

The information you gave me has helped me quite substantially, but I´m still having issues. One being
<input type='submit'> and where its placed.

Here is my current code once again.

   <!DOCTYPE html>
    <html>
        <head>
            <style>
                body {
    text-align: center;
    background:  url(http://vignette2.wikia.nocookie.net/ums/images/8/86/Rick_Astley_pixel_art.png/revision/latest?cb=20140425212803);
    color: white;
    font-family: Helvetica;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;     
                } 

    input[type"submit"] {
        background: limegreen;
        color: black;

}

p {
    font-size: 24px;
}
input {
    border: 0;
    font-size: 18px;
    padding: 12px;
}  

    </style>    
        </head>
             <body>
 <img src="http://socialnewsdaily.com/wp-content/uploads/2014/05/rick-astley-rickrolling.jpg" height="250" width="250">
 
<h1> RICK ASTLEY </h1>
<input type="email"   placeholder="YourEmail>
    <input type="submit">
    
<h1>     </h1>
<p> Ooh Were no strangers to love </p> 
    <p> You know the rules and so do I </p>
        <p> A full commintments what im thinking of </p>
            <p> You wouldnt get this from any other guy </p>
                
<p> I just wanna tell you how I'm feeling </p>
    <P> Gotta make you understand </p>
        <P> Never gonna give you up </p>
            <p> Never gonna let you down </p>
            
<p> Never gonna run around and desert you </p>
    <p> Never gonna make you cry </p>
        <p> Never gonna say goodbye </p>
            <p> Never gonna tell a lie and hurt you </p>


</head>
    </body>
        </html>

Any further assistance will be greatly appreciated.


#6

Your placement for that rule is fine now, but I forgot to mention: you're missing an equal sign (=) between type and "submit". That line should look like this:

input[type="submit"] {

After that, your code should work :)


#7

I did what you said, and now its giving me the following error.
"Oops, try again. Where did your submit input go? Add an "<input type='submit'>" element at the bottom."
I have also tried to figure out where it exactly goes, but I haven't had any luck figuring it out.

Once again here is my current code:

<!DOCTYPE html>
    <html>
        <head>
            <style>
                body {
    text-align: center;
    background:  url(http://vignette2.wikia.nocookie.net/ums/images/8/86/Rick_Astley_pixel_art.png/revision/latest?cb=20140425212803);
    color: white;
    font-family: Helvetica;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;     
                } 

    input[type="submit"] {
        background: limegreen;
        color: black;

}

p {
    font-size: 24px;
}
input {
    border: 0;
    font-size: 18px;
    padding: 12px;
}  

    </style>    
        </head>
             <body>
 <img src="http://socialnewsdaily.com/wp-content/uploads/2014/05/rick-astley-rickrolling.jpg" height="250" width="250">
 
<h1> RICK ASTLEY </h1>
<input type="email"   placeholder="YourEmail>
    <input type="submit">
    
<h1>     </h1>
<p> Ooh We're no strangers to love </p> 
    <p> You know the rules and so do I </p>
        <p> A full commitment's what i'm thinking of </p>
            <p> You wouldn't get this from any other guy </p>
                
<p> I just wanna tell you how I'm feeling </p>
    <P> Gotta make you understand </p>
        <P> Never gonna give you up </p>
            <p> Never gonna let you down </p>
            
<p> Never gonna run around and desert you </p>
    <p> Never gonna make you cry </p>
        <p> Never gonna say goodbye </p>
            <p> Never gonna tell a lie and hurt you </p>


</head>
    </body>
        </html>

If you could help me with this It will be greatly appreciated.


#8

Never mind, I figured it out somehow. Thank you very much for your assistance! I truly appreciate it!


#9

What did you find out? I'm having the same problem as you.