SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    217
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:
    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

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    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

  3. #3
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    217
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    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 !

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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 .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    217
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    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.

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    217
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot ! All that "position" thing is eventually not that monstrous but wait till we start "float" :-)


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •