I was working on a quick and dirty project of mine and when it came to some of the buttons no matter what I did they would not work, I have tried to put them in an <a> tag but it messes up my CSS and isn't worth the extra trouble, anyone know what to do? (The YouTube URL is only there for testing purposes)
Here is my HTML:
<html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <div class="header"> <header> <input class="btn" type="button" value="Home" id="button1" onsubmit=""/> <input class="btn" type="submit" value="Processors" id="button2" onsubmit="" /> <input class="btn" type="submit" value="Motherboards" id="button3" onsubmit"" /> <input class="btn" type="submit" value="Graphics Cards" id="button4" onsubmit="https://www.youtube.com" /> <input class="btn" type="submit" value="Power Supplys" id="button5" onsubmit="" /> <input class="btn" type="submit" value="Website Inquires" id="button6" onsubmit="" /> </header> </div> <h1 class="title"> Personal Computers Technology </h1> <p><span class="paragraph"> Do you want to learn about computers? Do you not know where to start? Well you have come to the right place! Here you will learn about the functionalities of a motherboard, what a processot is and what it does, how your graphics cards sends out video ouput. You will learn about what a power supoply does and why they very important. Lastly you will learn about storage and what the difference between an SSD an HDD </span></p> <!-- Please try to avoid editing code under this line as much as possible--> <div class="container"> <img class="child" src= "https://cdn.glitch.com/8282fc98-4236-406a-9a5e-f9535f41553b%2FPC.jpg?v=1604156880410" width="300" height="200"> </div> <!--I beg you dont tuch the code above this comment line--> <p><span class="secondParagraph"> We are here to support your learning journey on computer parts. As may have most likely alreasdy noticed at the top of the webpage we have direct links to all of the other educational content. If you do have any inquires feel free to leave us a notice and we will try to respond to it as fast as possible. Thank you and have a great learning experience. </span></p> <iframe width="350" height="250" class="video" src="https://cdn.glitch.com/8282fc98-4236-406a-9a5e-f9535f41553b%2FFROST%20Gaming%20PC%20-%20Time%20Lapse%20Build.mp4?v=1604766330602" type="video/mp4"></iframe> </body> </html> And my CSS:
margin: 0; } body { background-color: #e9e4dc; } .header { height: 4.6rem; width: 100%; background-color: #555555; border-bottom: 1px solid black; font-size: 0; padding-left: 0px; margin-bottom: 25px; } .btn { background-color: #555555; padding: 26px; padding-right: 45px; padding-left: 45px; border: none; margin: 0; font-size: 1.2rem; color: #F5F5F5; font-family: Garamond, serif; } .btn:hover { background-color: #696969; } .btn:active { outline: none; border: none; } .btn:focus { outline: none; border: none; } .title { margin-left: 385px; margin-bottom: 55px; font-size: 2.2rem; font-family: Garamond, serif; } .child { position: relative; margin-top: -175px; border-radius: 10px; margin-left: 45px; } .container { display: flex; justify-content: center; float: right; margin-right: 35px; } .paragraph { font-weight: normal; font-size: 1.7rem; margin-top: 0px; margin-left: 0px; font-family: Garamond, serif; float: left; padding-left: 20px; padding-right: 350px; position: relative; } .secondParagraph { font-weight: normal; font-size: 1.7rem; margin-left: 375px; font-family: Garamond, serif; float: right; display: inline; margin-top: 45px; margin-right: 100px; position: relative; } .video { width: 300px; height: 200px; outline: none; border-radius: 10px; margin-top: -165px; margin-left: 20px; } 
没有评论:
发表评论