These forums are currently read-only due to receiving more spam than actual discussion. Sorry.

It is currently Sat Dec 02, 2017 4:04 pm Advanced search

nav bar issues

If you are stuck or have questions regarding HTML or other Web technologies, ask your questions here. No question too dumb!

nav bar issues

Postby fromthericefields » Sat May 12, 2012 3:30 am

I am new in the foray into HTML and am attempting to create a page, but as far as the page goes I always have issues with my navigation bar

Is this a result of bad coding and markup? My HTML5 does validate, so does my CSS. When I set the li to float left to create a vertical bar the entire bar dissapears off the screen not to be found anywhere...

HTML5 code:

Code: Select all
<!DOCTYPE html>

<html lang="en">
   <head>
      <meta charset="utf-8" />
      
      <title>Homepage</title>
      
      <meta name="description" content="fromthericefields, blog, home" />
      <meta name="author" content="Joseph Davies" />
      
      <link rel="stylesheet" type="text/css" href="header.css" />
   </head>
   <body>
      <header id="mainheader">
         <hgroup>
            <h1>fromthericefields</h1>
            <h2>Death and life are in the power of the tounge, and those loving it eat it's fruit</h2>
            <h3>Proverbs 18:21;</h3>
         </hgroup>
         <nav>
            <ul>
               <li><a href="signin.html">Sign in</a></li>
               <li>|</li>
               <li><a href="register.html">Register</a></li>
            </ul>
         </nav>
      </header>
      
      <nav id="mainnav">
         <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="index.html">Blog</a></li>
            <li><a href="index.html">Gallery</a></li>
            <li><a href="index.html">About</a></li>
            <li><a href="index.html">Contact</a></li>
         </ul>
      </nav>
      <section>
         <article>
            <h4>Setting up fromthericefields:</h4>
            <h5>Posted on 10/5/12</h5>
         </article>
      </section>
      <aside>
         <blockquote>
            
         </blockquote>
      </aside>
   </body>
</html>


The CSS:

Code: Select all
body {

}

#mainheader {
   background: blue;
   margin-top: -25px;
   margin-left: auto;
   margin-right: auto;
   border-bottom-left-radius: 25px;
   border-bottom-right-radius: 25px;
   height: 200px;
   width: 1000px;
}

#mainheader hgroup {
   padding-top: 10px;
   width: 1000px;
}

#mainheader h1 {
   font-style: italic;
   color: #ffffff;
   text-shadow: 5px 5px 5px #000000;
   font-size: 40px;
}

#mainheader h2 {
   font-style: oblique;
   font-size: 20px;
   color: #FF0000;
   margin-left: 20px;
   margin-top: -20px;
}

#mainheader h3 {
   font-family: monospace;
   font-size: large;
   color: #AAAAAA;
   margin-left: 600px;
   margin-top: -10px;
}

#mainheader nav {
   margin-left: 810px;
   margin-top: -130px;
}

#mainheader ul {
   list-style-type: none;
}

#mainheader li {
   text-align: center;
   display: inline;
   color: white;
}

#mainheader a {
   text-decoration: none;
   color: white;
}

   /*Main Navagation Bar*/

#mainnav {
   width: 900px;
   background: red;
   border-bottom-left-radius: 25px;
   border-bottom-right-radius:25px;
   margin-left: auto;
   margin-right: auto;
}

#mainnav ul {
   list-style-type: none;
   margin-left: -2.5em;
}
[b]
#mainnav li {
   display: inline;
   border: solid;
}[/b]

#mainnav a {
   text-decoration: none;
   color: white;
   text-align: center;
}


The place where the issue occurs is in bold.

setting the display to inline, when I go to adjust the width, nothing happens but they stay the same size
set it to float: left the whole thing dissapears!

Why?
fromthericefields
<h6>
 
Posts: 1
Joined: Thu May 10, 2012 9:23 am

Re: nav bar issues

Postby zcorpan » Mon Sep 10, 2012 10:29 am

Inline elements can't have dimensions (unless they are replaced inline elements, e.g. images). Floats are taken out of the document flow but still affect line lengths and subsequent floats. If there's nothing else in the parent, it will get no height. You can make the parent wrap its floats by using one of the "clear float" techniques.

I suggest reading some CSS tutorials that discuss these issues to get a better understanding of how it works. :)
zcorpan
<article>
 
Posts: 807
Joined: Tue Feb 06, 2007 8:29 pm
Location: Sweden


Return to Help & Advice

Who is online

Users browsing this forum: No registered users and 1 guest