menu creation in html5 and css3

Question

menu creation in html5 and css3

Navigation

#1 by (0 votes)

0

I created a menu with HTML5 and CSS3 so far, I left it right at the top of the screen and everything is fine, but when I open the same file on another screen the menu is no longer formatted in the right corner like I had left.

Does anyone have any tips or something I'm missing?

nav#menu ul {
  list-style: none;
  text-transform: uppercase;
  position: absolute;
  top: -15px;
  left: 450px
}
nav#menu li {
  display: inline-block;
  background-color: #dddddd;
  padding: 6px;
  margin: -1px
}
nav#menu {
  display: block;
}

<header id="header1">
  <hgroup>
    <h1>Milky Way</h1>
    <h2>Solar System</h2>
  </hgroup>

  <img id="icone" src="_images/solarsystems01.png" alt="this images is about solar systems" title="solar system" width="250" height="50" align="right"/>

  <nav id="menu">
    <ul>
      <li onmouseover="mudaFoto('_images/Mercurio.png')" onmouseout="mudaFoto('_images/solarsystems01.png')"><a href="sun.html">Sun</a></li>
      <li>Mercury</li>
      <li>Venus</li>
      <li>Earth</li>
      <li>Mars</li>
      <li>Jupter</li>
      <li>Saturn</li>
      <li>Uranus</li>
      <li>Neptune</li>
      <li>Pluto</li>
    </ul>
  </nav>
</header>

html5 css3

asked by anonymous 29.12.2016 / 18:27

1 answer

How to "fix" Copyright? How to capture the td of a web page using selenium vba?

score 0 · Answer 1

Dude, I do not know if I understand this very well, but in the end. I interpreted as if you wanted to leave your menu in the upper right corner of the screen.

If this is the problem the solution can be quite simple.

At your selector nav#menu ul

nav#menu ul {
    list-style: none;
    text-transform: uppercase;
    position: absolute;
    top: -15px;
    left: 450px
}

You're putting the negative value on your top and you do not have to, you just add margin: 0; and top: 0; to it to be totally at the top of your screen.

Now to leave your menu in the right corner you should add the property right: 0; because this property will leave your menu 0 pixels on the right, that is, pasted on the right side of the screen.

In summary, try leaving your code to this selector like this:

nav#menu ul {
    list-style: none;
    text-transform: uppercase;
    margin: 0;    
    position: absolute;
    top: 0;
    right: 0
}

This way your menu should work on other screens as expected. I hope the answer is helpful.