You are viewing our Forum Archives. To view or take place in current topics click here.
How to style two lists in html/css?
Posted:
How to style two lists in html/css?Posted:
Status: Offline
Joined: Jul 09, 201013Year Member
Posts: 602
Reputation Power: 23
Basically, I'm coding my new portfolio website and I have two lists, one is the navigation and the other is the content in my slider. My navigation list has a black background and turns red on hover. However, when I link any content in my slider, it uses that style and turns the background black (and red on hover) which isn't what I want...
So I was wondering if there is a way you can make a list ignore a style... I added #nav infront of my ul/li on the css and this fixed it, however it cut the bottom off my second list (content slider).
HTML:
First list for nav
<div id="nav">
<ul id="menu">
<li class="active"><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="blog.php">Blog</a></li>
<li><a href="services.php">Services</a></li>
<li><a href="portfolio.php">Portfolio</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>
Second list for content
<div id="featuredbg">
<ul class="bxslider">
<li><h1>Bespoke websites at affordable prices.</h1>
<div id="button"><div id="buttontext">Portfolio</div></div>
</li>
<li><h1>Regular tutorials and freebies posted on my blog.</h1>
<div id="button"><div id="buttontext">Blog</div></div></li>
<li><h1>Working on a project has never been easier.</h1>
<div id="button"><div id="buttontext">Read more</div></div></li>
</ul>
</div>
CSS:
ul {
font-family: Trebuchet MS, Arial, Verdana;
font-size: 11px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #2a2a2a;
padding: 5px 15px 5px 15px;
background: #2a2a2a;
margin-left: 3px;
white-space: nowrap;
}
ul li a:hover { background: #e13535; }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li.active a {
background: #e13535;
)
li:hover a { background: #e13535; }
li:hover li a:hover { background: #e13535; }
Thanks for all help, greatly appreciated.
So I was wondering if there is a way you can make a list ignore a style... I added #nav infront of my ul/li on the css and this fixed it, however it cut the bottom off my second list (content slider).
HTML:
First list for nav
<div id="nav">
<ul id="menu">
<li class="active"><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="blog.php">Blog</a></li>
<li><a href="services.php">Services</a></li>
<li><a href="portfolio.php">Portfolio</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>
Second list for content
<div id="featuredbg">
<ul class="bxslider">
<li><h1>Bespoke websites at affordable prices.</h1>
<div id="button"><div id="buttontext">Portfolio</div></div>
</li>
<li><h1>Regular tutorials and freebies posted on my blog.</h1>
<div id="button"><div id="buttontext">Blog</div></div></li>
<li><h1>Working on a project has never been easier.</h1>
<div id="button"><div id="buttontext">Read more</div></div></li>
</ul>
</div>
CSS:
ul {
font-family: Trebuchet MS, Arial, Verdana;
font-size: 11px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #2a2a2a;
padding: 5px 15px 5px 15px;
background: #2a2a2a;
margin-left: 3px;
white-space: nowrap;
}
ul li a:hover { background: #e13535; }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li.active a {
background: #e13535;
)
li:hover a { background: #e13535; }
li:hover li a:hover { background: #e13535; }
Thanks for all help, greatly appreciated.
#2. Posted:
Status: Offline
Joined: Dec 27, 201112Year Member
Posts: 696
Reputation Power: 35
Status: Offline
Joined: Dec 27, 201112Year Member
Posts: 696
Reputation Power: 35
Try something like this,
The !important tag overrides the normal css.
Do that with the links. (CSS) I Don't know if it works. I'll think of a better solution.
body {
color: #000 !important;
}
The !important tag overrides the normal css.
Do that with the links. (CSS) I Don't know if it works. I'll think of a better solution.
- 0useful
- 0not useful
#3. Posted:
Status: Offline
Joined: Jul 09, 201013Year Member
Posts: 602
Reputation Power: 23
No worries I sorted it,
CSS:
#nav ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #2a2a2a;
padding: 5px 15px 5px 15px;
background: #2a2a2a;
margin-left: 3px;
white-space: nowrap;
}
#featuredbg ul li a {
text-decoration: none;
color: #ffffff;
}
CSS:
#nav ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #2a2a2a;
padding: 5px 15px 5px 15px;
background: #2a2a2a;
margin-left: 3px;
white-space: nowrap;
}
#featuredbg ul li a {
text-decoration: none;
color: #ffffff;
}
- 0useful
- 0not useful
#4. Posted:
Status: Offline
Joined: Jul 09, 201013Year Member
Posts: 602
Reputation Power: 23
Slagveld3 wrote Try something like this,
body {
color: #000 !important;
}
The !important tag overrides the normal css.
Do that with the links. (CSS) I Don't know if it works. I'll think of a better solution.
Thanks for the reply, I had a deeper think and thought of a way to fix it +Rep for help, cheers.
- 0useful
- 0not useful
#5. Posted:
Status: Offline
Joined: Dec 27, 201112Year Member
Posts: 696
Reputation Power: 35
Status: Offline
Joined: Dec 27, 201112Year Member
Posts: 696
Reputation Power: 35
Great! Good to hear that.
- 0useful
- 0not useful
You are viewing our Forum Archives. To view or take place in current topics click here.