jamesadrian Posted January 14, 2018 Share Posted January 14, 2018 (edited) My web pages each avoid the use of a separate CSS file this way: <!DOCTYPE html> <html> <head> <style> a.link_style0:link {color: #000000; text-decoration: none;} a.link_style0:visited {color: #000000; text-decoration: none;} a.link_style0:hover {color: #00AA00; text-decoration: none;} a.link_style0:active {color: #000000; text-decoration: none;} a.link_style1:link {color: #000000;} a.link_style1:visited {color: #000000;} a.link_style1:hover {color: #00AA00;} a.link_style1:active {color: #000000;} </style> </head> So far, this method is only used for links such as this one: <a href="https://www.futurebeacon.com/" class = link_style0>FutureBeacon.com</a> I would like to have a pull-down menu on a web page, but all the examples I have found seem to depend on a separate CSS file with I would like to avoid. Is this possible? Thank you for your help. Jim Adrian Edited January 14, 2018 by jamesadrian typo Link to comment Share on other sites More sharing options...
Ingolme Posted January 14, 2018 Share Posted January 14, 2018 You should have your CSS in a separate file, it only has to be one file. With that said, you can put CSS code anywhere. If an example has the CSS in another file, you can just copy the code and put it in your HTML document between style tags. Link to comment Share on other sites More sharing options...
jamesadrian Posted January 14, 2018 Author Share Posted January 14, 2018 Ingolme, Thank you for this reply. Can I place the CSS material between head and /head? This is an example to be placed between body and /body of of the html file: <div class="dropdown"> <button class="dropbtn">Dropdown</button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> Would the CSS material go in between the style /style terms which I have between head and /head? Thank you for your help. Jim Adrian Link to comment Share on other sites More sharing options...
Ingolme Posted January 14, 2018 Share Posted January 14, 2018 Yes, CSS code goes in the <head> section of the document. Link to comment Share on other sites More sharing options...
jamesadrian Posted January 15, 2018 Author Share Posted January 15, 2018 Ingolme, Thank you for this reply. I copied the code from this site https://www.w3schools.com/howto/howto_css_dropdown.asp I put the CSS material between head and /head. I used the html code suggested by that page. The resultant html page had the CSS material printed out at the top of the page instead of being hidded and affecting the html code. Is there something I should place at the top of the CSS material to announce it or contain it? Thank you for your help. Jim Adrian Link to comment Share on other sites More sharing options...
Ingolme Posted January 15, 2018 Share Posted January 15, 2018 It has to be between <style> tags. Link to comment Share on other sites More sharing options...
jamesadrian Posted January 15, 2018 Author Share Posted January 15, 2018 Ingolme, Thank you for this suggestion. It worked. I have a problem with the code: <!DOCTYPE html> <html> <head> <style> /* Dropdown Button */ <!-- Dropdown Button --> .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } <!-- The container <div> - needed to position the dropdown content --> .dropdown { position: relative; display: inline-block; } <!-- Dropdown Content (Hidden by Default) --> .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } <!-- Links inside the dropdown --> .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } <!-- Change color of dropdown links on hover --> .dropdown-content a: hover {background-color: #f1f1f1} <!-- Show the dropdown menu on hover --> .dropdown :hover .dropdown-content { display: block; } <!-- Change the background color of the dropdown button when the dropdown content is shown --> .dropdown: hover .dropbtn { background-color: #3e8e41; } </style> </head> <body style="background-image: url(https://www.futurebeacon.com/fb1.png);"> <div style="position: absolute; top: 120px; left: 300px; font-size: 40px; line-height: 30px; font-family: times new roman;"> <b>Page Name</b> </div> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <div class="dropdown"> <button class="dropbtn">Dropdown</button> <div class="dropdown-content"> <a href="https://www.futurebeacon.com/">Link 1</a> <a href="https://www.futurebeacon.org/">Link 2</a> <a href="https://www.futurebeacon.com/email.htm">Link 3</a> </div> </div> <br /><br /> <br /><br /> <br /><br /> </body> </html> I changed the comment indicators from /* and */ to <!-- and -->. I hope that does not matter. The links in the menu work, but the menu is not hidden before it is pulled down. Can you suggest anything? Thank you for your help. Jim Adrian Link to comment Share on other sites More sharing options...
jamesadrian Posted January 15, 2018 Author Share Posted January 15, 2018 I found typos and it now works. Thank you for all your help. Jim Adrian Link to comment Share on other sites More sharing options...
dlgalasso Posted January 19, 2018 Share Posted January 19, 2018 You could use <details i guess Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now