Jump to content
Stef's Coding Community

Wolfgang

Member
  • Content Count

    3
  • Joined

  • Last visited

Posts posted by Wolfgang

  1. Just to quickly update you:  I have managed to work out where the white background on the span was coming from.  The parent <div> wasn't given a height so the span was filling the background with the default background-color white. I fixed this by giving the parent <div> ID a height of 30px. so the html looks like this:

    	<div id="NavBar">
    	  <span id="NavBar-Pad"><ul id="NavBar-Drop">
      		<li><a href="#">Home</a></li>
    		<li><a href="#">Swimwear</a></li>
      		<li><a href="#">Tops</a></li>
      		<li><a href="#">Bottoms</a></li>
          		<li><a href="#">Dresses</a></li>
         		<li><a href="#">jackets</a></li>
    		<li><a href="#">lingerie</a>
    		  <ul>
          		    <li><a href="#">Bras</a></li>
          		    <li><a href="#">Briefs & Thongs</a></li>
          		    <li><a href="#">hosiery</a></li>
          		    <li><a href="#">Nightwear</a></li>
    		    <li><a href="#">Slips & Teddies</a></li>
        		  </ul>
    		</li>
    		<li><a href="#">footware</a></li>
         		<li><a href="#">sale</a></li>
    		<li><a href="#">Additional Link</a>
    		  <ul>
          		    <li><a href="#">Child Link1</a></li>
          		    <li><a href="#">Child Link2</a></li>
          		    <li><a href="#">Child Link3</a></li>
        		  </ul>
    		</li>
    	      </ul>
    	  </span>
    	</div>
    

    The global and Pseudo classes in css style sheet remain unchanged but the NavBar section changed to:

    #NavBar {
    	height: 30px;
    }
    
    #NavBar-Pad {
    	display:block; 
    	background-color: #ee2326; 
    	text-align: center;
    <!-- style="color:white; display:block; background-color: #ee2326; text-align: center;" -->
    
    }
    
    #NavBar-Drop li ul li {
    	background-color: #ee2326;
    	border-top: 0px;
    /*	margin: 40px auto; Not needed sets the margns inbetween child links */
    }
    

    I solved the third question also and for this I removed the line: "border: 10px 100px; /* Sets size of box */" from the Pseudo class: ul li a.  So that pseudo class now looks like:

    ul li a {
    	display: block;
    	background: #ee2326;
    	padding: 5px 10px 5px 10px;
    	text-decoration: none;
            white-space: nowrap;
    	color: white;
    	border: 10px 100px; /* Sets size of box */
    }
    

    So, I have solved 2 out of the 3 questions (and in the words of Meatloaf - "2 out of 3 ain't bad").

     

    My only outstanding question is:

    how do I center the menu (NavBar) in the parent div?

     

    Thank you in advance.

  2. Hi all

     

    I am trying to build a website but I am struggling to understand and compute a few things.  In the 90's when I first learned HTML we used tables to achieve the look and feel of the website.  In comes a new millenium and in comes a much needed new design method .... CSS.

     

    I am not sure if this is correct, but I am using <div> where I would have in past used <table> and <tr> (table row) and I am using <span> where I would have used <td> (table data).  If this is wrong then I would like to know.

     

    Onto my problem: I want to create a drop-down menu on hover.  (I need to learn "Pseudo classes" but that will come in a related but new topic).  I kinda have the drop-down menu on hover but it needs some tweeking and for that i am struggleing. The problem is that the background-color for the <div> is being overwritten somewhere but I can not see it, the menu is not center in the <div> and the drop-down looks wrong.

     

    Here is the css file:

    /**************** Global ****************/
    
    
    * { 
    	font-family: Tahoma, sans-serif; /* corporate font */
    	font-size: 12px; /* corporate font size */
    	text-decoration: none; /* hyperlinks no underline by default */
    }
    
    div {
    	background-color: #ee2326; /* Corporate red color */
    	width: 1000px; /* Page width */
    	margin: 0 auto; /* Center div */
    }
    
    .shadow { 1px 1px 1px #606163; } /* default shadow */
    
    /**************** Pseudo classes ****************/
    
    a { text-decoration: none;} /* removes underline for hyperlinks */
    
    ul {
    	border: 0px hidden;
    	list-style: none;
    	padding: 0px;
    	margin: 0px; 
    	width: 100%; 
    	margin-left: auto; 
    	margin-right: auto;
    	font-family: Tahoma, sans-serif;
    	font-size: 14px;
    	font-weight: bold;
    	text-shadow:1px 1px 1px #606163;
    }
    ul li {
    	display: block;
    	position: relative;
    	float: left;
    	text-align: left!important;
    	text-shadow:1px 1px 1px #606163;
    }
    li ul {display: none;} /* Hides drop down menu */
    ul li a {
    	display: block;
    	background: #ee2326;
    	padding: 5px 10px 5px 10px;
    	text-decoration: none;
            white-space: nowrap;
    	color: white;
    	border: 10px 100px; /* Sets size of box */
    }
    ul li a:hover {background: #8523ee;} /* Sets the color of the hover on the parent */
    li:hover ul {
    	display: block; /* displays the drop down menu */
    	position: absolute;
    }
    li:hover li {float: none;}
    li:hover a {background: #ee2326;} /* sets the background-color of the drop down menu */
    li:hover li a:hover {background: #8523ee;} /* Sets the color of the hover on the child */
    
    /************************* ID's *************************/
    
    <!------------------NavBar --------------------->
    
    #NavBar {
    	width: 100%; /* Sets the NavBar div to be equal the default div */
    	/* height: 12px; not needed */
    	margin: 0 auto; /* trying to center NavBar-Drop but doesn't work */
    
    }
    
    #NavBar-Drop li ul li {
    	border-top: 0px;
    	margin: 40px auto; /* Center NavBar - Not working */
    }
    
    

    and here is the html code:

    	<div id="NavBar">
    	  <span><ul id="NavBar-Drop">
      		<li><a href="#">Home</a></li>
    		<li><a href="#">Swimwear</a></li>
      		<li><a href="#">Tops</a></li>
      		<li><a href="#">Bottoms</a></li>
          		<li><a href="#">Dresses</a></li>
         		<li><a href="#">jackets</a></li>
    		<li><a href="#">lingerie</a>
    		  <ul>
          		    <li><a href="#">Bras</a></li>
          		    <li><a href="#">Briefs & Thongs</a></li>
          		    <li><a href="#">hosiery</a></li>
          		    <li><a href="#">Nightwear</a></li>
    		    <li><a href="#">Slips & Teddies</a></li>
        		  </ul>
    		</li>
    		<li><a href="#">footware</a></li>
         		<li><a href="#">sale</a></li>
    		<li><a href="#">Additional Link</a>
    		  <ul>
          		    <li><a href="#">Child Link1</a></li>
          		    <li><a href="#">Child Link2</a></li>
          		    <li><a href="#">Child Link3</a></li>
        		  </ul>
    		</li>
    	      </ul>
    	  </span>
    	</div>
    

    Questions:

    1) how do I center the menu in the div?

    2) what is filling the <div> with the color white instead of the corporate red?

    3) how do I change the size of the child menu so that all the text fits? (The child is the part which drops down when you hover).

     

×
×
  • Create New...