Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Vertical list within Horizontal list

    I consider myself a novice and I'm having some difficulty understanding how to implement a vertical list within a horizontal list. With reference to the code below how would I configure the css code to enable a vertical list to appear within any of the horizontal lists already defined, specifically:
    <li class="about">
    <li class="blog">
    <li class="contact">


    Code:
    <body>
    
    <div class="top-bar-wrap">
       <div id="top-bar" class="mod-con">
      
          <div class="rft">We Accept: <a href="http://www.visa.ca" target="_blank" class="visa"></a><a href="http://www.mastercard.com" target="_blank" class="mastercard"></a></div>
          </div>
       </div>
       <div class="main-bg">
          <div id="home-page" class="main-wrap">
             <div id="header" class="mod-con">
             <h1 id="logo"><a href="#"><img src="image/logo_ennew.png"     alt="" /></a></h1>
             <ul id="main-menu">
             <li><a class="cur" href="index.html"><strong>Home</strong></a></li>
             <li><a href="about.html"><strong>About</strong></a></li>
             <li><a href="services.html"><strong>Services</strong></a></li>
             <li><a href="contact.html"><strong>Contact</strong></a></li>
             </ul>
             </div>
             <div id="slogan"><img src="image/slogan.png" alt="" /></div>
             <div class="slide-box mod-con">
             <ul class="slide-player">
             <li class="selected"><a href="#"><img src="image/banner1.jpg" alt="" /></a></li>
             <li><a href="#"><img src="image/banner2.png" alt="" /></a></li>
             <li><a href="#"><img src="image/banner3.jpg" alt="" /></a></li>
             <li><a href="#"><img src="image/banner4.jpg" alt="" /></a></li>
             <li><a href="#"><img src="image/banner5.png" alt="" /></a></li>
             </ul>
                <div class="slide-menu"> <a href="#" class="selected">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a>   </div>
           </div>
        
    <div id="main" class="mod-con">
        
    <ul id="home-con" class="clearfix">
          
    **********<li class="about">
    <div class="title-nav">
    <h2>About ClearAway</h2>
    </div>
    <div class="con"> <img src="image/junkpile.jpg" alt="" />
    <p>ClearAway Removal Service Ltd. is a locally owned and operated debris removal company. We believe in providing prompt and professional service and work to ensure our clients are as confident in our services as we are.</p>
    </div>
    <div class="btns"><a href="about.html">Learn More</a></div>
    </li>
    **********<li class="blog">
    <div class="title-nav">
    <h2>Our Services</h2>
    </div>
    <div class="con"> <img src="image/junkpilea.jpg" alt="" />
    <p>ClearAway Removal Services Ltd. has three sizes of trucks to accommodate your needs. Each is equipped with a hydraulic dump box which in turn means faster service for our clients
    </p>
     </div>
    <div class="btns"><a href="services.html">Learn More</a></div>
    </li>
    **********<li class="contact">
    <div class="title-nav">
    <h2>Get In Touch</h2>
    </div>
    <div class="con">
    <p><img src="image/phone_ico.png" alt="" /><strong>PHONE</strong> 604-816-1055</p>
    <p><img src="image/email_ico.png" alt="" /><strong>EMAIL</strong> darren.clearaway@shaw.ca</p>
    </div>
    <div class="net-links"><a href="#"><img src="image/twitter_ico.png" alt="" /></a><a href="#"><img src="image/fscebook_ico.png" alt="" /></a><a href="#"><img src="image/flickr_ico.png" alt="" /></a><a href="#"><img src="image/in_ico.png" alt="" /></a><a href="#"><img src="image/t_ico.png" alt="" /></a><a href="#"><img src="image/youtube_ico.png" alt="" /></a></div>
    </li>
    </ul>
        </div>
      </div>
    </div>
    <div class="footer-wrap">
      <div id="footer" class="mod-con">
        <div class="copyright">&copy; 2013 Copyright ClearAway Removal Service Ltd. All Rights Reserved.</div>
        <div class="links">Web Design by <a href="http://www.square-one.ca" target="_blank">Square One</a> | <a href="index.html">Home</a> | <a href="about.html">About</a> | <a href="services.html">Services</a> | <a href="contact.html">Contact</a></div>
      </div>
    </div>
    </body>
    Last edited by VIPStephan; 03-14-2013 at 10:09 PM. Reason: added code BB tags

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,225
    Thanks
    23
    Thanked 606 Times in 605 Posts
    Are you sure the items you mentioned <li class="about"> <li class="blog"> <li class="contact"> are what this is about? Normally a horizontal list that has drodowns (vertical list) are menus. The li's you mention may be better off as paragraphs: <p>.

    If menus are what you are looking or check out this tutorial( it maybe a little out of date?) http://www.htmldog.com/articles/suckerfish/dropdowns/

  • #3
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's a little confusing I know, which is most likely caused by my attempt at describing it...but they are not part of a navigation window, but they create 3 individual columns next to each other. Each column has <img>.<p>, etc for content.

    The following is the template that I'm using.
    http://www.smashingmagazine.com/2010...e-bluemasters/

    Thanks for your help.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello mack88,
    It's not too difficult but there may be a learning curve involved.
    Too start out with, your markup needs to be correct. To nest another ul that would contain a dropdown in your existing menu you would make your code look like this -
    Code:
    	<ul>					<!--parent ul-->
    		<li></li>			<!--ul li-->
    		<li></li>			<!--ul li-->
    		<li>				<!--ul li that contains dropped ul-->
    			<ul>			<!--ul ul-->
    				<li></li>	<!--ul ul li-->
    				<li></li>	<!--ul ul li-->
    			</ul>			<!--close ul ul-->
    		</li>				<!--close ul li that contains dropped ul-->
    		<li></li>			<!--ul li-->
    	</ul>					<!--close ul-->
    The markup validator I link to in my signature can really help getting that right!


    ...

    Next your CSS needs to target the parent ul, the child li's, the dropped ul and that ul's child li's. You just need to be specific enough to target each element of your list menu so it does what you want. Sometimes just referencing ul ul in your CSS is enough, sometimes you need to add a class or id to the ul and/or li so you don't interfere with other lists on your page.

    Look at a demo I have for a simple CSS dropdown menu here. I MUCH prefer this over the suckerfish menus!!! which are becoming pretty outdated if you ask me.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •