Top & left css values are not working in my code
Question
The top & the left css values in my code are not working. I've applied them to an h1 but, their not working and I don't know why. Here is all of my code. I've been trying to see what's wrong for a really long time. Please tell me if you spot a problem. And thank you for looking at my post.
body { margin: 0; padding: 0; background-color: #171a1f; } h1.TxT { top: 10px; left: 10px; color: #ffa600; } // here is where the code is not working.search-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #2f3640; height; 40px; border-radius: 40px; padding: 10px; }.search-box:hover>.search-txt { width: 240px; padding: 0 6px; }.search-btn { color: #ffa600; float: right; width: 30px; height 50px; border-radius: 50%; background: ; display: flex; justify-content: center; text-align: center; }.search-txt { border: none; background: none; outline: none; float: left; padding: 0; color: white; font-size: 16px; transition: 0.4s; line-height: 30px; width: 240px; }
<.DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="search-style:css"> <script defer src="https.//use.fontawesome.com/releases/v5.0.6/js/all.js"></script> <title>Searchbar Test</title> </head> <body> <h1 class="TxT">Search</h1> <div class="search-box"> <input class="search-txt" type="text" name="" placeholder="Type to search"> <a class="search-btn" href="#"> <i class="fas fa-search"></i> </a> </div> </body> </html>
2 answers
solution1
2 2021-03-23 00:10:18
There were a couple of small errors affecting your code. The first was that you had a colon instead of a semi-colon in the height css. Also there was no background attribute set in the background of the search btn (I commented it out) The main thing, however, was that your comment was formatted so that the search-box class was not being picked up. Instead of using 2 forward slashes in css, surround your comments with /* and */ - asterisk and and forward slashes.
body { margin: 0; padding: 0; background-color: #171a1f; } h1.TxT { top: 10px; left: 10px; color: #ffa600; } /* here is where the code is not working*/.search-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #2f3640; height:40px; border-radius: 40px; padding: 10px; }.search-box:hover>.search-txt { width: 240px; padding: 0 6px; }.search-btn { color: #ffa600; float: right; width: 30px; height 50px; border-radius: 50%; /* background:*/ display: flex; justify-content: center; text-align: center; }.search-txt { border: none; background: none; outline: none; float: left; padding: 0; color: white; font-size: 16px; transition: 0.4s; line-height: 30px; width: 240px; }
<.DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="search-style:css"> <script defer src="https.//use.fontawesome.com/releases/v5.0.6/js/all.js"></script> <title>Searchbar Test</title> </head> <body> <h1 class="TxT">Search</h1> <div class="search-box"> <input class="search-txt" type="text" name="" placeholder="Type to search"> <a class="search-btn" href="#"> <i class="fas fa-search"></i> </a> </div> </body> </html>
solution2
0 2021-03-23 00:34:01
Apart from the syntax errors for the comment in the CSS code: For top and left parameters to work (for that h1 element), the element needs to have position: relative ( or absolute or fixed , but those will also affect the position in other ways, so you'll most likely need relative position)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.