Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member
    Join Date
    Feb 2015
    Posts
    3
    Member #
    45982

    UL won't display correct after declaring styles for my nav tag

    I declared styles for my nav tag to get a horizontal drop down menu. I thought i was specific so the style wouldn't carry over into all my UL or OL tags.

    However, when I try and make an UL in my aside ( right column ) its not working right. All the list items just list side by side horizontally with no spacing. I want them vertical like a normal bullet list.

    Thanks for any help you can provide.

    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.webdesignforums.net/forum/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.webdesignforums.net/forum/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 http://nicolasgallagher.com/micro-clearfix-hack/*/
    /* 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>
    Last edited by wisp; Feb 26th, 2015 at 11:54 AM.

  2.  

  3. #2
    Junior Member
    Join Date
    Feb 2015
    Posts
    3
    Member #
    45982
    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?

  4. #3
    Junior Member
    Join Date
    Feb 2015
    Posts
    3
    Member #
    45982
    Nevermind I fixed it.

    Line 144. I had nav ul, li {

    instead of: nav ul, nav li {

  5. #4
    Senior Member breno's Avatar
    Join Date
    Feb 2015
    Location
    Australia
    Posts
    138
    Member #
    41574
    Liked
    29 times
    Awesome Well done.




Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:14 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com