CSS, Anchor doesn't show up :-(

**deotpit** · Mar 16, 2012 04:05

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:

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

**Stevie D** · Mar 16, 2012 06:52

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

**deathshadow60** · Mar 16, 2012 08:49

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.

**deotpit** · Mar 16, 2012 10:02

Originally Posted by Stevie D

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

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 !

**RyanReese** · Mar 16, 2012 10:15

I'll give a quick runthrough

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

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

.

**deotpit** · Mar 16, 2012 11:05

Originally Posted by RyanReese

I'll give a quick runthrough

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

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.