UL navbar issues with unordered lists |
UL navbar issues with unordered lists |
judo2000 |
Mar 2 2017, 09:02 PM
Post
#1
|
Group: Members Posts: 3 Joined: 2-March 17 Member No.: 26,332 |
Hi,
I have a style sheet from a site templete. I added code to create an inline nav bar using nut the styles for the nav affect all unordered lists. I will post the navb script:void(0)" class="dropbtn">Heaven's Guests</a> <div class="dropdown-content"> <font color="#000000"><b>Search By:</b></font> <a href="#">Name</a> <a href="#">State</a> <a href="#">Country</a> </div> </li> <li class="dropdown"> <a href="java script:void(0)" class="dropbtn">Categories</a> <div class="dropdown-content"> <a href="#">Armed Forces</a> <a href="#">Child</a> <a href="#">Friend</a> <a href="#">Law Engorcement</a> <a href="#">Parent</a> <a href="#">Spouse</a> </div> </li> <li><a href="#">About Us</a></li> <li><a href="login.html">Log In/Register</a></li> </ul> </div> CSS: /* Resets */ ul { padding:0; margin:0 0 20px 0; list-style:none; color: #FFFFFF; font-weight:bold; } h1, h2 { padding:0; margin:0 0 20px 0; font-weight:normal; } p { padding:0; margin:0 0 20px 0; } a:link, a:visited { text-decoration:underline; color:#FFFFFF; font-weight:bold; } a:hover { text-decoration:none; } ul li { padding:5px 0; } ul li input[type="text"], ul li input[type="password"] { width:200px; } /* Headers */ h1 { font-size:1.8em; } h2 { font-size:1.4em; } .logo { font:2em Arial; margin:0 0 10px 0; padding:0; width:200px; color:#fff; } /* Headers */ h1 { font-size:1.8em; } h2 { font-size:1.4em; } .logo { font:2em Arial; margin:0 0 10px 0; padding:0; width:200px; color:#fff; } /* Containers */ body { font-family:arial,helvetica,sans-serif; font-size:12px; background-color: #7B6D8D; } #container { background:#fff; width:920px; min-height:500px; margin:0 auto; padding: 10px; } #footer { margin:0 auto 0px auto; width:920px; background-color: #AAAE8E; color: #000000; padding: 10px; text-align:center; } .widget { margin-bottom:20px; color: $FFFFFF; } .widget h2 { margin:0 0 10px 0; padding:0 5px; font-weight:normal; border-bottom:1px solid #ddd; } .widget .inner { margin:0 10px; color: $FFFFFF; } header { width:940px; margin:0 auto 0px auto; } #nav { width:940px; margin-left: auto; martin-right: auto; display: inline-block; background-color: #3A606E; } /* Navigation Styles */ ul { display: inline-block; list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #3A606E; } li { float: left; } li a, .dropbtn { display: block; color: white; font-weight:bold; text-align: center; padding: 14px 16px; text-decoration: none; } /* Change the link color to #111 (black) on hover */ li a:hover { background-color: #AAAE8E; } .active { background-color: #AAAE8E; } .drip { background-color: #A5C4D4; } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #E0E0E0; color: #FFFFFF; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: #000000; font-weight:bold; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #AAAE8E; color: #FFFFFFl; } .dropdown:hover .dropdown-content { display: block; } /* Aside */ aside { width:260px; float:right; border-left:1px dashed #aaa; padding-left:15px; } /* Login */ #login li.link { margin-top:5px; } /* Misc */ .clear { clear:both; |
pandy |
Mar 2 2017, 11:36 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
I don't understand. What is the problem you want help with?
QUOTE I will post the navb script:void(0)" class="dropbtn">Heaven's Guests</a> You mean this? CODE <a href="java script:void(0)" class="dropbtn">Categories</a> That's not a script. It's a link that does nothing. Is that the problem? |
Christian J |
Mar 3 2017, 06:55 AM
Post
#3
|
. Group: WDG Moderators Posts: 9,658 Joined: 10-August 06 Member No.: 7 |
I added code to create an inline nav bar using nut the styles for the nav affect all unordered lists. You need to use more specific selectors for the nav bar list than simple UL or LI selectors. It's hard to give specific advice since the code example is cut off at the beginning, but an idea might be to target a parent DIV like this: CODE div#navbar ul {...} and in the HTML: CODE <div id="navbar"> <ul> <li> ... |
judo2000 |
Mar 3 2017, 05:56 PM
Post
#4
|
Group: Members Posts: 3 Joined: 2-March 17 Member No.: 26,332 |
Not sure what happened at the beginning but here is the nav code:
<div id="nav" align="center"> <ul> <li><a class="active" href="index.htmo">Home</a></li> <li class="dropdown"> <a href="java script:void(0)" class="dropbtn">Heaven's Guests</a> <div class="dropdown-content"> <font color="#000000"><b>Search By:</b></font> <a href="#">Name</a> <a href="#">State</a> <a href="#">Country</a> </div> </li> <li class="dropdown"> <a href="java script:void(0)" class="dropbtn">Categories</a> <div class="dropdown-content"> <a href="#">Armed Forces</a> <a href="#">Child</a> <a href="#">Friend</a> <a href="#">Law Engorcement</a> <a href="#">Parent</a> <a href="#">Spouse</a> </div> </li> <li><a href="#">About Us</a></li> <li><a href="login.html">Log In/Register</a></li> </ul> </div> |
judo2000 |
Mar 4 2017, 05:20 PM
Post
#5
|
Group: Members Posts: 3 Joined: 2-March 17 Member No.: 26,332 |
Thanks for the help, but I found an example of how to do it and edited my code to make it work.
|
Lo-Fi Version | Time is now: 26th April 2024 - 02:16 PM |