CSS, Anchor doesn't show up :-(

Hi Everyone,
I’d like to see on my page 3 menu items placed horizontally one next to the other. I wrote the following code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1255" />
<style type="text/css">
   * {margin: 0; padding: 0;}
   div#menuitems
      {
        width:1000px;
        height:600px;
        position:absolute;
      }

   div#menuitems ul
     {
      list-style:none;
     }
   div#menuitems ul li
     {
      float:left;
     }
   div#menuitems ul li a
     {
      border:2px solid red;
      position:absolute;
      width:10%;
      height:6.5%;
     }
</style>
</head>
<body>
<div id="menuitems">
    <ul>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
    </ul>
</div>
</body>
</html>

All I get i one red rectangle with the titles placed ont in each other :-(. Can anyone explain me why i can’t see all 3 menu items placed
separately, horizontally?
Thanks

Take off position:absolute; and that should solve the problem.

As a general rule, you shouldn’t use position:absolute; unless you definitely known what you are doing with it :cool:

Usually not a great idea to have a 1000px fixed width either, since that screams “accessibilty, what’s that”

Though the APO is the real warning sign, especially without declaring left/right/top or bottom on it. Then the APO inside the APO? Ouch. You’ve removed the entire element from flow, then not even bothered positioning it? Most odd.

… and of course the DIV around it for NOTHING isn’t helping; you aren’t doing anything to that DIV you couldn’t be doing to the UL.

Thanks Stevie. I removed the “position:absolute” and the menu items showed up. I thought the only “position” i knew was that of “absolute”, refering to its fellow neighbor divs. It is the other “positions” i don’t know what to do with ;-)… In fact it is the whole CSS where I get lost…
Thanks again !

I’ll give a quick runthrough :slight_smile:

position:relative (this is most often used to provide a parent (a starting place) for Absolutely positioned elements. Aka if you have this

<relative>
<absolute />
</relative>

And you set coordinates for the <absolute>…it would base the starting point at the boundaries of <relative>. Otherwise, it would normally start at the viewport. Positoin:relative (combined with coordinates) basically just creates an imaginary box over the element, with all the colors/what not. And if you move it with coordaintes, you’re moving that imaginary box with the colors. Thus the original element stays in place. It still retains where it is in the documents flow

Position:absolute; removes elements from the flow completely. Without coordinates, the browser guesses where to place it. With, it will go to the nearest parent with position:relative (or any other position value) and use that as a reference. Generally you want to avoid using this in most pages. At least for structure anyway :slight_smile:

Position:fixed, basically the same as absolute, however, it will stay on the screen (assuming you set coordinates that make it on screen). Even with scrolling, it will stick on the viewport. No getting rid of it :).

Thanks Ryan for that post.
If I understand it correctly, “absolute” should reside inside a “relative” to reference to something and “relative” is where you “host” "child divs? “Absolute” in this case.

Yes that’s correct :).

However you can still have absolute inside of absolute. The outer absolute would be “relative” for the inner absolute.

If that makes sense :). It’s not often you do that but still worth mentioning.

Thanks a lot ! All that “position” thing is eventually not that monstrous but wait till we start “float” :slight_smile: