My UL aren't working right in my aside

Wisp · Feb 26, 2015

I have been using HTML for years but recently starting learning CSS.

I'm having trouble with my first site.

I declared styles for my navigation for UL but they are carrying over into my aside. I can't seem to reset the UL or even OL for my aside column. I tried to be specfic about the styling for my nav. Only the UL and LI's inside my nav were supposed to be styled. Yet somehow they transferred over to all UL, OL, LI. What am I doing wrong? Help please!

Code:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Reviews</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>

aside, article, section, header, footer, nav {
	display: block;
}
div, section, article, h1, h2, h3, p {
	margin: 0;
	padding: 0;
}
html, body {
	margin: 0;
	padding: 0;
}
html {
	background-image: url("http://www.webdesignforum.com/images/wood_1.png");
}
body {
	width: 960px;
	background: #fff;
	margin: 0 auto 2em;
	font: 100% Georgia, "Times New Roman", Times, serif;
}


/* link styles */
section a:link {
	color: #7F7D3C;
}
section a:hover {
	color: #CCCA9D;
}
section a:visited {
	color: #7F7E62;
}


/*layout*/
header {
	background-image: url("http://www.webdesignforum.com/images/banner2.jpg");
	margin-bottom: 0px;
	height: 96px;
	padding: 32px 0 0 32px;
}
.col1 {
	clear:both;
	float: left;
	padding-left: 32px;
	width: 512px;
	margin-top: 16px;
}
.col2 {
	float: right;
	width: 352px;
	padding-right: 32px;
	font-size: 90%;
	line-height: 1.6;
	margin-top: 16px;
}
footer {
	background-color: #403F31;
	height: 80px;
	clear: both;
}
img {
	float:left;
	margin: 0 1em 0 0;
}
.largeImg {
	display: block;
	float: none;
	margin: 1em auto;
}
.news {
	clear: both;
	width: 208px;
	padding: 16px;
	font-size: 90%;
	line-height: 1.8;
	background: rgb(237,226,197);
	float: left;
	margin: 16px 16px 0px 32px;
}
.news + .news {
	margin-right: 0;
}


/*typography*/
h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 2em;
	color: white;
	letter-spacing: .1em;
}
p {
	font-size: 1em;
	line-height: 1.5;
	margin-bottom: 1em;
}
h2 {
	font-size: 1.8em;
	margin-bottom: .5em;
	font-weight: normal;
	font-variant: small-caps;
}
h3 {
	font-size: 1.2em;
	margin-bottom: .7em;
	clear: both;
}



/*micro-clearfix by Nicolas Gallagher [url]http://nicolasgallagher.com/micro-clearfix-hack/*/[/url]
/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}


/*horizontal menu styles*/	
nav {
	background: #F7F8FF;
	height: 2.3em;
}
nav ul,li {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
}
nav ul {
	background: #403F31;
	height: 2em;
	width: 100%;
}
nav li {
	position: relative;
}
nav li a {
	display: block;
	line-height: 2em;
	padding: 0 1em;
	color: #ffffff;
	text-decoration: none;

}
nav li a:hover, .topmenu > li:hover > a {
	background: #403F31;
	height: 2em;
	padding-top: .3em;
	position: relative;
	top: -.3em;
	border-radius: .3em .3em 0 0;
}
.current, a:hover.current, .topmenu li:hover a.current  {
	background: #F7F8FF;
	color: #000000;
	padding-top: .3em;
	border-radius: .5em .5em 0 0;
	position: relative;
	top: -.3em;
	border-bottom: .3em solid #F7F8FF;
}
/*dropdown menu styles*/
ul.submenu {
	float: none;
	background: #B2B189;
	width: 5.5em;
	height: auto;
	position: absolute;
	top: 2em;
	left: -9000em;
}
ul.submenu li {
	float: none;
}
.topmenu li:hover ul {
	left: 0;
}
	
ul.submenu li a {
	border-bottom: 1px solid white;
	padding: .2em 1em;
	white-space:nowrap:
}
ul.submenu li:last-child a {
	border-bottom: none;
}
ul.submenu li a:hover {
	background: #7F7F62;
	width: auto;
	height: auto;
	padding-top: .2em;
	top: 0;
	border-radius: 0;
}

ul.rightlist {
	position: initial;
	float: none;
	text-decoration: initial;
	clear:both;
	background-color: #ffffff;
	
}



/* footer styles */
footer a {
	color: #ffffff;
	text-decoration: none;
}
footer a:hover {
	color: #BCB1CC;
}
footer p {
	color: #ffffff;
}	
</style>
</head>



<body>
<header>
<h1>String Critic: Guitar String Reviews</h1>
</header>
<nav class="cf">
<ul class="topmenu">
	<li><a href="index.html" title="Home Page">Home</a></li>
	<li><a href="reviews.html" title="Reviews" class="current">Reviews</a>
		<ul class="submenu">
		<li><a href="reviews.html" title="Audio and Written Reviews">Audio</a></li>
		<li><a href="video.html" title="Video Reviews">Video</a></li>
		</ul>
	</li>
	<li><a href="ratings.html" title="Ratings">Ratings</a></li>
	<li><a href="donate.html" title="Donate">Donate</a></li>
	<li><a href="about.html" title="About">About</a></li>
	<li><a href="contact.html" title="Contact">Contact</a></li>
</ul>
	
</nav>
<section class="col1">
<h2>Reviews</h2>
<h3 class="style13 style20">&nbsp;</h3>
    <h3 class="style13 style20">New Strings</h3>
    <p class="style13 style20"><a href="reviews/labella_700m_medium_sp_new.html"><img src="string box images/thumbnails/labella-700m-medium-sp_thumb.jpg" alt="La Bella 710-M Silk and Steel" width="50" height="50" hspace="10" align="left" /></a><a href="reviews/labella_700m_medium_sp_new.html">La Bella 700-M Medium Silver Plated Wound Guitar String Review</a></p>
    <p>&nbsp;</p>
    <p class="style13 style20"><a href="reviews/labella_710m_medium_ss_new.html"><img src="string box images/thumbnails/labella-710m-medium-ss_thumb.jpg" alt="La Bella 710-M Silk and Steel" width="50" height="50" hspace="10" align="left" /></a><a href="reviews/labella_710m_medium_ss_new.html">La Bella 710-M Medium Silk and Steel Guitar String Review</a></p>
    <p class="style13 style20">&nbsp;</p>
    <p class="style13 style20"><a href="reviews/daddario_ej17_medium_pb_new.html"><img src="string box images/thumbnails/daddario-ej17-medium-pb_thumb.gif" alt="D'Addario EJ17 Medium PB New" width="50" height="50" hspace="10" align="left" /> D'Addario EJ17 Medium Phosphor Bronze Guitar String Review</a></p>
    <p>&nbsp;</p>
    <p><a href="reviews/elixir_nanoweb_medium_pb_new.html"><img src="string box images/thumbnails/Elixir-Nanoweb-Medium-16102-PB-thumb.gif" alt="Elixir Nanoweb Mediums PB Thumbnail" width="50" height="50" hspace="10" align="left" /> Elixir Nanoweb Mediums Phosphor Bronze 16102 Guitar String Review</a></p>
    <p>&nbsp;</p>
    <p><a href="reviews/martin_marquis_medium_pb_new.html"><img src="string box images/thumbnails/Martin-Marquis-Medium-M2200-Phosphor-Bronze_thumb.gif" alt="Martin Marquis Medium PB Thumbnail" width="50" height="50" hspace="10" align="left" /> Martin Marquis Mediums Phosphor Bronze M2200 Guitar String Review</a></p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <h3 class="style21">Old Strings</h3>
    <p><a href="reviews/newtone_dw_handpicked_pb_old.html"><img src="string box images/thumbnails/Newtone-masterclass-Double-Wound-Handpicked_thumb.gif" alt="Newtone Custom Picked Gauges Double Wound Thumbnail" width="50" height="50" hspace="10" align="left" /> Newtone Custom Picked Gauges, Double Wound Guitar String Review</a></p>
    <p>&nbsp;</p>

</section>

<aside class="col2">
<h2>Brands</h2>
<ul class="rightlist">
	<li>Martin</li>
	<li>D'Addario</li>
	<li>Newtone</li>

</ul>
</aside>

<section class="news"><h3>Recent metaphysics</h3><p>Recently, I've started to feel that all metaphysical discussions are relative to each other. Realizing that I had fallen into the trap of relativism, I began to question my beliefs. Just like that, I had fallen to Scepticism. Fighting that, I gathered as many facts as I could, analyzed them, and realized I had moved firmly into the camp of Empiricism. I'll never make that mistake again! Oh no... Positivism!</p></section>
<section class="news"><h3>A quick note</h3><p>The preceding news section had absolutely nothing to do with news. Nothing. It was more a very lame attempt at making a joke out of several very serious branches of metaphysical study. We apologize for the deliberate waste of time, and promise that from this point on, nothing will be discussed in these sections other than cold, hard, metaphysical facts. Thank you.</p>
</section>
<footer>
<center>
<p>
	<a href="index.html" title="Home Page">Home</a> |
	<a href="reviews.html" title="Reviews">Reviews</a> |
	<a href="ratings.html" title="Ratings">Ratings</a> |
	<a href="donate.html" title="Donate">Donate</a> |
	<a href="about.html" title="About">About</a> |
	<a href="contact.html" title="Contact">Contact</a>
</p>
</center>
<center>
<p> Copyright &copy; 2015 String Critic LLC</p>
</center>
</footer>
</body>
</html>

chrishirst · Feb 26, 2015

Please, please, PLEASE

Use

Code:

 delimiters around any pasted code so we can actually read it!

Wisp · Feb 26, 2015

oh sorry first time post. I put some code tags.

Wisp · Feb 26, 2015

I know the problem is somewhere between line 140 and 163 in the nav styles. When I take that section out the aside UL works correctly but then my nav is obviously broken. How come my nav styles are affecting UL that are not within my nav styles? I thought this shouldn't happen if I was specific as I was?

Wisp · Feb 26, 2015

Nevermind I fixed it.

Line 144. I had nav ul, li {

instead of: nav ul, nav li {

breno · Feb 27, 2015

Awesome

Well done.

My UL aren't working right in my aside

Wisp

New Member

chrishirst

Well-Known Member

Wisp

New Member

Wisp

New Member

Wisp

New Member

breno

New Member