The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> UL navbar issues with unordered lists
judo2000
post 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;



User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 2 2017, 11:36 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 3 2017, 06:55 AM
Post #3


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(judo2000 @ Mar 3 2017, 03:02 AM) *

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>
...

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
judo2000
post 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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
judo2000
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 03:43 AM