SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Starting to-digg-in ********* jamesxv7's Avatar
    Join Date
    Oct 2003
    Location
    Island of Puerto Rico @ the Caribbean
    Posts
    873
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Frame Fake Layout Using CSS

    Hi people:

    Working on CSS and trying to use the POSITION:FIXED; to make a static div I found interesting tha way that the layout ends. Looks like a frame! For some parsing reasons the IE browsers doesnt support the FIXED value. Here is the code to see how the POSITION:FIXED; can be used to produce a nice frame-look-like menu. Remember IE browsers doesnt support it.
    HTML Code:
    <body style="margin:0; padding:0;"> 
     <div id="menu" style="position:fixed; background-color:#39C; width:120px; height:auto; top:10px; left:10px; bottom:10px;">
      	<p>Item 1</p>
      	<p>Item 2</p>
      	<p>Item 3</p>
      	<p>Item 4</p>
      	<p>Item 5</p>
      	<p>Item 6</p>
      	<p>Item 7</p>
      </div>
      <div id="content" style="background-color:#FFF; left:140px; top:0; position:absolute;">
     <p>The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. The content goes here. </p>
      </div>
      </body>
    Any comments are welcome. Hope you like it.
    For reference visit:
    Ref 1: Web Style Sheets CSS tips & tricks
    [size=1]
    ] Ref 2: Visual formatting model
    James: Ecodig - My Blog - My Gallery
    Validate your sites: CSS - HTML/XHTML
    Without faith you are lost.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Yes IE doesn't understand position fixed which is a shame as it would be very useful.

    The only time it understands position:fixed is when used on a background image in the body.
    Code:
    body {
     background-attachment: fixed;
     background-image: url(img.gif);
     background-repeat: no-repeat;
     background-position: center center;
    }
    Paul

  3. #3
    SitePoint Enthusiast MegaThemes's Avatar
    Join Date
    Aug 2003
    Location
    Mumbai, India
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The only thing we can do is wait till IE begins to accept the fixed attribute. Until then I will stay away from it.

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by MegaThemes
    The only thing we can do is wait till IE begins to accept the fixed attribute. Until then I will stay away from it.
    Why not help IE catch up instead?

  5. #5
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Vinnie, looks like you caught up with the sp thing


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
  •