Member Avatar for WigglesMcMuffin

Probably a simple mistake of not knowing all tags and attributes involved. I have a HTML page linked to a CSS file (I know it works, cause I can change things like background, and heading size, etc). When I try to create a navigation bar however using

#navigation {
  position: absolute;
  top: 0;
  right: 0;
  width: 10em;
}

all my stuff is still just listed vertically (with the things not in the <div id="navigation"> tag). I've found that if I copy and paste the information into the <style> tag of the HTML head the output works correctly. However I know that I'm not supposed to put that stuff in HTML because of it being bad practice. Can someone please set me straight?

  • 3 Contributors
  • 4 Replies
  • 145 Views
  • 22 Hours Discussion Span
  • Latest Post Latest Post by WigglesMcMuffin

Recommended Answers

All 4 Replies

Member Avatar for macneato

Please post your HTML as well

Member Avatar for ko ko

Check the file path of CSS. Is it correct place? You can easily check the file path by clicking the link of your CSS in the view source. If the CSS codes has been shown, the path is correct, otherwise, your path is wrong.

Member Avatar for WigglesMcMuffin

Well, when I make other changes, like for example:

h1{
  color:red
}

The new change is reflected, but the positioning doesn't translate.

My HTML is just a test demo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>
      Home Brew Studios | Info Page
    </title>
    <link rel="stylesheet" type="text/css" media="all" href="main.css" />
  </head>
  <body>
    <div id="navigation">
      Does this stuff appear on the left?
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="form.html">Other Page</a></li>
        </ul>
        What about this stuff?
      </div>
      <div id="info">
      Does this appear on the right?
      <p>
        This website is made to showcase the software they we intend to make
      </p>
      <p>
        Granted it isn't ready yet, it is a work in progress, probably for quite a while. Check back later
      </p>
      What about this?
      Or this?
    </div>
    <div id="content">
      Does this appear on the right?
      <p>
        This is where all the awesome stuff would go
      </p>
      What about this?
      Or this?
    </div>
  </body>
</html>​
Member Avatar for WigglesMcMuffin

Alright... so I seem to have solved the problem with an 'upgrade'. I was using Kodingen and was getting that issue, where things wouldn't format correctly. However, as soon as I switched to using Geany, I get the exact output I'm looking for.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.