menu creation on Html5 and css3

Asked

Viewed 157 times

0

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

Does anyone have any tips or anything I’m failing to do?

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
  • 4

    try putting example of your code to be checked from a read in How to ask a good question and also Create an example

  • Send the Code, I can help solve!

  • Nav#menu ul { list-style: None; text-Transform: uppercase; position: Absolute; top: -15px; left: 450px }

  • Puts the HTML tb. And uses the {} button of the editor to format the code

  • When you say open the file on another screen, what exactly do you refer to?

  • I put the codes, and sorry is my first question.

Show 1 more comment

1 answer

0

Dude I don’t know if I got it very well, but in the end. I interpreted it 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.

On your dial nav#menu ul

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

You are putting the negative value on your top being that you have no need, just you add the margin: 0; and top: 0; for it to stay totally at the top of your screen.

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

In short, try to leave your code to this selector this way:

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 will be useful.

  • it worked out thanks.

  • I’m glad you helped, man.

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.