CODEWITHSUNDEEP
htmlcssdrop-down-menumenunavigation
Becca Henry
Becca Henry

Reputation: 13

Navigation bar stretched to cover screen

Right now I am fairly happy with my navigation bar and it is centered how I would like it, however instead of the white background box ending at the end of the specified width, It is running the full length of the screen, as seen at www.rebeccahenrydesign.com/about.html Does anyone know what I can to to give it a specified length.

Here is my html 

<script type="text/javascript" src="csshorizontalmenu.js">

/***********************************************

* CSS Horizontal List Menu- by JavaScript Kit (www.javascriptkit.com)
* Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy-     vertical-menu/ 
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more

***********************************************/

</script>

<div class="horizontalcssmenu">
    <ul id="cssmenu1">
    <li><a href="http://rebeccahenrydesign.com">Home</a></li>
    <li><a href="#">Work</a>
    <ul>
    <li><a href="print.html">Print</a></li>
    <li><a href="print.html">Digital</a></li>
    <li><a href="print.html">Photography</a></li>
    </ul>
</li>
<li><a href="about.html" >About</a></li>
<li><a href="contact.html" >Contact</a>

</li>

and here is the css

.horizontalcssmenu ul{
padding: 0;
list-style-type: none;
background:white;
}

/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline-block;
float: none;

}

/*Top level menu link items style*/
.horizontalcssmenu ul li a{
display: block;
width: 120px; /*Width of top level menu link items*/
padding: 2px 8px;
border: 1px white;
border-left-width: 0;
text-decoration: none;
background: white;
color: #f77bb1;
font: 20px Helvetica,sans-serif;
}

/*Sub level menu*/
.horizontalcssmenu ul li ul{
left: 0;
top: 0;
border-top: 1px white;
position: absolute;
display: block;
visibility: hidden;
z-index: 100;
}

/*Sub level menu list items*/
.horizontalcssmenu ul li ul li{
display: inline;
float: none;
}


/* Sub level menu links style */
.horizontalcssmenu ul li ul li a{
width: 160px; /*width of sub menu levels*/
font-weight: normal;
padding: 2px 5px;
background: white;
border-width: 0 1px 1px 1px;
}

.horizontalcssmenu ul li a:hover{
background: #f77bb1;
color:white;
}

.horizontalcssmenu ul li ul li a:hover{
background: #f77bb1;
}

.horizontalcssmenu .arrowdiv{
position: absolute;
right: 0;
background: transparent url(menuarrow.gif) no-repeat center left;
}

* html p#iepara{ /*For a paragraph (if any) that immediately follows menu, add 1em top          spacing between the two in IE*/
padding-top: 1em;
}

/* Holly Hack for IE \*/
* html .horizontalcssmenu ul li { float: left; height: 1%; }
* html .horizontalcssmenu ul li a { height: 1%; }
/* End */

Please forgive me if the formatting of this post is incorrect (or if this is a stupid question). I have never coded anything before this and I have never posted on this site! Any feedback is appreciated. Thanks

Upvotes: 1

Views: 112

Answers (2)

Edward
Edward

Reputation: 79

Editing my answer as i look at the actual website... Also, you have some other errors that need to be corrected. Run your web page through this web site and correct the errors it indicates.

You have defined the class four times with the same name. This will not work. If you need to define four classes, they must all have different names.

http://validator.w3.org/

-----------Update-------

Okay, I fixed your problem. Here is the code, with my changes made as comments that you can delete. You should still run it through the validator, and fix problems.

The problem you asked about required setting a width and a margin in the div element. There are other things you should address, but this solves your main problem.

 <!DOCTYPE html>
 <html>
 <head>
 <!-- Declared character encoding --> <meta charset="utf-8">
 <!-- Inserted required title element --> <title>About Rebecca Henry</title>
 <!-- Moved link element from body to head --><link rel="stylesheet" type="text/css"      href="csshorizontalmenu.css">
 <!-- Moved Script to the head element --><script type="text/javascript" src="csshorizontalmenu.js">

 /***********************************************

 * CSS Horizontal List Menu- by JavaScript Kit (www.javascriptkit.com)
 * Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy- vertical-menu/ 
 * This notice must stay intact for usage
 * Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more

 ***********************************************/

 </script>
 </head>
 <body>
 <h1>About Rebecca Henry</h1>




 <!-- Added a width and a margin. This solves your white bar problem. --><div class="horizontalcssmenu" style="width: 556px; margin: auto">
 <ul id="cssmenu1">
 <li><a href="http://rebeccahenrydesign.com">Home</a></li>
 <li><a href="#">Work<span class="arrowdiv">&nbsp;&nbsp;&nbsp;&nbsp;</span></a>
     <ul style="top: 27px;">
     <li><a href="print.html">Print</a></li>
     <li><a href="print.html">Digital</a></li>
     <li><a href="print.html">Photography</a></li>
     </ul>
 </li>
 <li><a href="about.html">About</a></li>
 <li><a href="contact.html">Contact</a>

 </li>
 </ul>
 </div>
 <!--Split the menu from the table with separate div elements -->
 <div>

 <br>
 <br>
 <br>


     <img src="images/profile.jpg" alt="Profile">


     <!-- changed align center to margin auto inline style --><br><table style="width:410px; margin: auto">

     <tbody><tr> 
     <td>
     <p>
     Hello Friends, 
     <br>
        My name is Rebecca Henry and I am a Graphic
     Designer out of Richmond Virginia. I love 
     working with different mediums, but print is 
     by far my favorite. Experimentation
     and trial and <br> error are important factors in my work. I 
     try to think out of the box and try as many 
     things as I possibly can. The work on this site 
is comprised mostly of work from my junior year 
of college at Virginia Commonwealth University, 
and also of the work I completed at an internship 
with a local luxary car service by the name of 
bioRide. I am passionate about useing my talent to help others in any way I can. My dream job would be to work with a non-profit creating meaningful work. I do not work in hopes of fame or foutune, but simply for the love of what I do. If you have any questions or comments 
about the work, I am always happy to hear them. 
My contact information can be found on the contact
page. I am currently a student, and always looking 
for employment so please feel free to contact me 
in those regards also. Thank you for visiting my page!
</p>
</td>

</tr>


</tbody></table>

 <br>
 <br>
 <br>
 <br>
 <br>
 </div></body></html>

Upvotes: 1

astorije
astorije

Reputation: 2707

Welcome aboard!

I wish you to find all the help you need on this great Q&A platform.

The "local" solution

This solution only resizes the list container. The advantage is that you can choose the width you want without impacting the rest of your page. The drawback is that whenever you add an element to your page, you have to align/size it manually.

Add this in your CSS file:

ul#cssmenu1 {
  width: 580px; /* Edit this line */
  margin: 0 auto;
}

The "global" solution

This solution resizes the entire page by resizing the body, which is the first displayed child element of the <html> element. The drawback is that you cannot expand your list container outside the body element (well, at least not without a hack or side effects). The advantage is that you have a consistent layout in your entire page, no matter what you add or edit in the future. Also, you can resize the entire page (if it's too small, or if you want to have a responsive version, ...) by updating just one value. That's definitely the direction I would take.

Start by resizing the entire body by adding this at the top of your CSS:

body {
  width: 580px; /* Edit this line */
  margin: 0 auto;
}

Now, in your HTML page, line 48, replace:

<table style="width:410px" align="center">

with the following:

<table>

Of course, I am not saying there are no other solutions, but that these two ones are the first ones that come to my mind.

Also, as Edward said in his answer, please use W3C's markup validator as using standard markup gives you - among other things - a better chance to be compliant with all sort of browsers. Results for the page you gave can be found here. Your CSS is also invalid, you can check it with the CSS validator.

Upvotes: 0

Related Questions