Need some HTML help.

If it's not ZDoom, it goes here.
User avatar
Amuscaria
Posts: 6634
Joined: Mon Jul 26, 2004 12:59 pm
Location: Growing from mycelium near you.

Need some HTML help.

Post by Amuscaria »

I'm currently taking an web design class over the summer. Been having some minor trouble making this menu bar with a drop-down menu.

I have 2 ordered lists on the same page, which forces me to use class names for my <ul> and <li> tags. However, when I add the class name (in this case "topbar"), it moves my "Information" drop-down menu to the end of the menu. I wanted it to the left. When I remove the class name, it moves back to the right. The bottom codes are one with the class name, and one without. What am I doing wrong here?

Code: Select all

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="UIC BVIS Program Website">
        <meta name="keywords" content="uic,bvis,biomedical visualization">
        <meta name="author" content="Eric Ou">
       <style>
           ul.topbar {
                list-style-type: none;
                margin: 0;
                padding: 0;
                overflow: hidden;
                background-color: #333;
            }
           li.topbar {float: left;}
           li a, .dropbtn 
                {display: inline-block;
                color: white;
                text-align: center;
                padding: 8px 14px;
                text-decoration: none;}

           li a:hover, .dropdown:hover .dropbtn 
           {background-color: #555;}

           li.dropdown {display: inline-block;}

           .dropdown-content 
           {display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}

           .dropdown-content a 
           {color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            text-align: left;}

           .dropdown-content a:hover {background-color: #f1f1f1}
           .show {display:block;}
        </style>
    </head>       
    <body> 
        <ul class="topbar">
        <li class="dropdown">
            <a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Information</a>
            <div class="dropdown-content" id="myDropdown">
            <a href="information.html">Program Requirements</a>
            <a href="Lecture.html">Frank Armitage Lecture</a>
            </div>
        </li>
        <li class="topbar"><a href="about.html">About</a></li>
        <li class="topbar"><a href="History">History</a></li>
        <li class="topbar"><a href="contact.html">Contact</a></li> 
        </ul>        
        <script>
            function myFunction() 
            {document.getElementById("myDropdown").classList.toggle("show");}            
            window.onclick = function(e) 
            {if (!e.target.matches('.dropbtn')) 
                {var dropdowns = document.getElementsByClassName("dropdown-content");
                 for (var d = 0; d < dropdowns.length; d++) 
                    {var openDropdown = dropdowns[d];
                        if (openDropdown.classList.contains('show')) 
                        {openDropdown.classList.remove('show');}
                    }
                }
            }
        </script>
    </body>
</html>

Code: Select all

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="UIC BVIS Program Website">
        <meta name="keywords" content="uic,bvis,biomedical visualization">
        <meta name="author" content="Eric Ou">
       <style>
           ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
                overflow: hidden;
                background-color: #333;
            }
           li {float: left;}
           li a, .dropbtn 
                {display: inline-block;
                color: white;
                text-align: center;
                padding: 8px 14px;
                text-decoration: none;}

           li a:hover, .dropdown:hover .dropbtn 
           {background-color: #555;}

           li.dropdown {display: inline-block;}

           .dropdown-content 
           {display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}

           .dropdown-content a 
           {color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            text-align: left;}

           .dropdown-content a:hover {background-color: #f1f1f1}
           .show {display:block;}
        </style>
    </head>       
    <body> 
        <ul>
        <li class="dropdown">
            <a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Information</a>
            <div class="dropdown-content" id="myDropdown">
            <a href="information.html">Program Requirements</a>
            <a href="Lecture.html">Frank Armitage Lecture</a>
            </div>
        </li>
        <li><a href="about.html">About</a></li>
        <li><a href="History">History</a></li>
        <li><a href="contact.html">Contact</a></li> 
        </ul>        
        <script>
            function myFunction() 
            {document.getElementById("myDropdown").classList.toggle("show");}            
            window.onclick = function(e) 
            {if (!e.target.matches('.dropbtn')) 
                {var dropdowns = document.getElementsByClassName("dropdown-content");
                 for (var d = 0; d < dropdowns.length; d++) 
                    {var openDropdown = dropdowns[d];
                        if (openDropdown.classList.contains('show')) 
                        {openDropdown.classList.remove('show');}
                    }
                }
            }
        </script>
    </body>
</html>
Top
Nevander
Posts: 2254
Joined: Mon Jan 06, 2014 11:32 pm

Re: Need some HTML help.

Post by Nevander »

Add float: left; to li.dropdown. See if that works.

Worked for me using this code (altered a little bit). Do note it will float all dropdowns left when you use this class, so it will work fine if thats the only dropdown you need on the left. If you need more, I'd make a special class just for that one dropdown and float it left. Might be a better simpler way to fix it, I'll keep trying different stuff. This is more of a quick fix atm.
Spoiler:
Last edited by Nevander on Sun Jun 26, 2016 1:14 am, edited 1 time in total.
Top
User avatar
Amuscaria
Posts: 6634
Joined: Mon Jul 26, 2004 12:59 pm
Location: Growing from mycelium near you.

Re: Need some HTML help.

Post by Amuscaria »

Thanks for the help! :D I'll try that when I go back to school tomorrow morning/later today.

EDIT: Oh sweet, that works! Thanks man! :D
Top
User avatar
NeuralStunner
 
 
Posts: 12328
Joined: Tue Jul 21, 2009 12:04 pm
Preferred Pronouns: No Preference
Operating System Version (Optional): Windows 11
Graphics Processor: nVidia with Vulkan support
Location: capital N, capital S, no space

Re: Need some HTML help.

Post by NeuralStunner »

If I can give some general advice: Link, rather than embed, styles and scripts. Besides being cleaner and more extensible, it's easier to maintain. (You only have to update one smaller file to fix or tweak the style/scripts.)
Top
User avatar
wildweasel
Posts: 21706
Joined: Tue Jul 15, 2003 7:33 pm
Preferred Pronouns: He/Him
Operating System Version (Optional): A lot of them
Graphics Processor: Not Listed

Re: Need some HTML help.

Post by wildweasel »

NeuralStunner wrote:If I can give some general advice: Link, rather than embed, styles and scripts. Besides being cleaner and more extensible, it's easier to maintain. (You only have to update one smaller file to fix or tweak the style/scripts.)
Not to mention (though perhaps Neural had implied this in his post) you can then link the same stylesheet across multiple HTML files.
Top
User avatar
Amuscaria
Posts: 6634
Joined: Mon Jul 26, 2004 12:59 pm
Location: Growing from mycelium near you.

Re: Need some HTML help.

Post by Amuscaria »

I'm not quick sure how do do that. I do know how to use CSS to set the style, but I'm not sure how to use the same menu-bar across all pages but still have it as a separate file. Right now, I have the same code on all 6 pages, which definite seems stupid. I don't know how to PHP yet either, so that kinda sucks.
Top
Nevander
Posts: 2254
Joined: Mon Jan 06, 2014 11:32 pm

Re: Need some HTML help.

Post by Nevander »

He means to put your style stuff into a new file called styles.css or whatever that would then look like this:
Spoiler: line to add in HTML in <head></head>
Spoiler: contents of styles.css
And then the same for scripts in a scripts.js file:
Spoiler: line in HTML right before </body>
Spoiler: contents of scripts.js
This should be right. I've never used scripts outside of the HTML file so I'm not sure if that method is correct. I know the CSS one is.
Top
User avatar
wildweasel
Posts: 21706
Joined: Tue Jul 15, 2003 7:33 pm
Preferred Pronouns: He/Him
Operating System Version (Optional): A lot of them
Graphics Processor: Not Listed

Re: Need some HTML help.

Post by wildweasel »

Some time, I should figure out if it's possible to have an HTML file pull in menu bars from another HTML file so that they only need to be defined and styled once...or if that's something I can't do without PHP.
Top
User avatar
AFADoomer
Posts: 1339
Joined: Tue Jul 15, 2003 4:18 pm

Re: Need some HTML help.

Post by AFADoomer »

wildweasel wrote:Some time, I should figure out if it's possible to have an HTML file pull in menu bars from another HTML file so that they only need to be defined and styled once...or if that's something I can't do without PHP.
You can do it pretty easily with JQuery's 'get' function and setting innerhtml of an element to that content... no PHP required, but JQuery...
Top
User avatar
Amuscaria
Posts: 6634
Joined: Mon Jul 26, 2004 12:59 pm
Location: Growing from mycelium near you.

Re: Need some HTML help.

Post by Amuscaria »

Nevander wrote:He means to put your style stuff into a new file called styles.css or whatever that would then look like this:
Spoiler: line to add in HTML in <head></head>
Spoiler: contents of styles.css
And then the same for scripts in a scripts.js file:
Spoiler: line in HTML right before </body>
Spoiler: contents of scripts.js
This should be right. I've never used scripts outside of the HTML file so I'm not sure if that method is correct. I know the CSS one is.
Ooo I see. We just went into CSS this week, didn't know I could do this. Thanks! :D
Top

Return to “Off-Topic”