TWCL Forum Index TWCL
Forums for The Webcomic List
 
 FAQFAQ   SearchSearch   MemberlistMemberlist   UsergroupsUsergroups   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 

Help with my CSS drop-down menu?

 
Post new topic   Reply to topic    TWCL Forum Index -> General Ramblings
View previous topic :: View next topic  
Author Message
Marscaleb



Joined: 28 Aug 2012
Posts: 256

PostPosted: Sat Feb 16, 2013 7:08 pm    Post subject: Help with my CSS drop-down menu? Reply with quote

I'm revising my personal website to look more professional instead of the childish thing I've been running for so long. I'm running into a couple problems, and I figure, there are a number of folks around here who are web developers, so maybe someone here could point out what I'm doing wrong.

Right now I'm working on a menu bar at the top of the page(s) with all my site's content conveniently organized into groups and subgroups, which means a menu bar with drop-down menus for certain items. Overall, it has gone well, but I am facing two issues that I am uncertain how to solve.



First of all, when I have an item that is nested into three tiers of menu drop-downs, the menu box is squished to its absolute minimum width, so anything with a space or a hyphen in the name gets broken onto multiple lines. It looks ugly and I would rather keep them on one line.

Secondly, I have a gap in the menu, but it isn't working the way I want. I want to have the various elements of site content on the left side of the menu with the standard generic site pages on the right. Thus there is a gap between the two sections. While I am sure there are a myriad of way this could be set up, (including alternate methods I should be using instead,) I elected to keep all these elements lined up in sequence with one extra element in the menu which is blank. This serves as a functional division betwixt the two sections, (once I gave it a special class so it didn't change colors when hovered) the problem is that the size of this element is wrong.
Effectively, I would want all the other elements taking up no more than their padding allows, and then this blank element fills the whole of the remaining space. But how do I get this element to stretch while the others don't? Or perhaps, how can I add a natural division between the two sections while still keeping them on the same bar visually?
Right now, once I add a set width to the menu (which is what I'll be doing next) it will cause each item on the menu to expand equally, leaving me with long/wide buttons and a tiny division.

Also I am open to comments or suggestions about ways to improve what I am doing; I am not too experienced with CSS yet.

Site's content:
Code:
<!DOCTYPE html>
<html>
<head>
<title>Drop-down Test</title>
<link rel="stylesheet" type="text/css" href="Basic.css">
</head>

<body>
<nav>
   <ul>
      <li class="TopMenu"><a href="#">Gaming Projects</a>
         <ul>
            <li><a href="#">Active</a>
               <ul>
                  <li><a href="#">Magic Castle</a></li>
                  <li><a href="#">Zelda-Style ARPG</a></li>
               </ul>
            </li>
            <li><a href="#">Finished</a>
               <ul>
                  <li><a href="#">CAS-ilvania</a></li>
                  <li><a href="#">Kefka the Mighty</a></li>
               </ul>
            </li>
            <li><a href="#">Innactive</a>
               <ul>
                  <li><a href="#">Ninja Mod</a></li>
                  <li><a href="#">Kartcade</a></li>
               </ul>
            </li>
         </ul>
      </li>
      <li class="TopMenu"><a href="#">Videos</a>
         <ul>
            <li><a href="#">Halo Videos</a></li>
            <li><a href="#">Ninja Mod Development</a></li>
            <li><a href="#">Other Gaming Videos</a></li>
            <li><a href="#">Misc</a></li>
         </ul>
      </li>
      <li class="TopMenu"><a href="#">Writing</a>
         <ul>
            <li><a href="#">Twilight Descent</a></li>
            <li><a href="#">Various Articles</a></li>
            <li><a href="#">Gaming Articles</a></li>
            <li><a href="#">Other writing</a></li>
         </ul>
      </li>
      <li class="TopMenu"><a href="#">Artwork/Images</a>
         <ul>
            <li><a href="#">Mischief in Maytia</a></li>
            <li><a href="#">Photographs</a>
               <ul>
                  <li><a href="#">Artistic</a></li>
                  <li><a href="#">Humor</a></li>
               </ul>
            </li>
         </ul>
      </li>
      <li class="TopMenuGap" >  &nbsp; </li>
      <li class="TopMenu" ><a href="#">Links</a></li>
      <li class="TopMenu"><a href="#">About/FAQ</a></li>
      <li class="TopMenuLast"><a href="#">Home</a></li>
   </ul>
</nav>


</body>

</html>

CSS file:
Code:
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
   margin: 0; padding: 0; border: 0;
}

body {
   background: #909eab url(bg.png);
   font-family: Helvetica, sans-serif; font-size: 18px; line-height: 24px;
}

nav {
   margin: 50px auto;
   text-align: center;
}

nav ul ul {
   display: none;
}

   nav ul li:hover > ul {
      display: block;
   }


nav ul {
   background: #efefef;
   background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
   background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
   background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
   box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
   padding: 0 20px;
   border-radius: 10px; 
   list-style: none;
   position: relative;
   display: inline-table;
}
   nav ul:after {
      content: ""; clear: both; display: block;
   }

   nav ul li {
      float: left;
   }
      nav ul li:hover {
         background: #4b545f;
         background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
         background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
         background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
      }
         nav ul li:hover a {
            color: #fff;
         }
      
      nav ul li a {
         display: block; padding: 5px 10px;
         color: #757575; text-decoration: none;
      }
         
      
   nav ul ul {
      background: #5f6975; border-radius: 0px; padding: 0;
      position: absolute; top: 100%;
   }
      nav ul ul li {
         float: none;
         border-top: 1px solid #6b727c;
         border-bottom: 1px solid #575f6a; position: relative;
      }
         nav ul ul li a {
            padding: 7px 15px;
            color: #fff;
         }   
            nav ul ul li a:hover {
               background: #4b545f;
            }
      
   nav ul ul ul {
      position: absolute; left: 100%; top:0;
   }

.TopMenu {
   border-left: 1px solid #ababab;
}

.TopMenuGap {
   border-left: 1px solid #ababab;
   display: block; padding: 5px 10px;
}
.TopMenuGap:hover {
   background: #efefef;
   background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
   background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
   background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
      }

.TopMenuLast {
   border-left: 1px solid #ababab;
   border-right: 1px solid #ababab;
{
      

_________________
My webcomic: Mischief in Maytia
http://maytiacomic.com/
Back to top
View user's profile Send private message Visit poster's website
Display posts from previous:   
Post new topic   Reply to topic    TWCL Forum Index -> General Ramblings All times are GMT + 1 Hour
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group

Hosted by Fluent
The Webcomics List is operated and owned by Ash Young. Syndicate the comic updates.