CSS - HELP

Discussion in 'HTML' started by Clive Quinn, Jul 28, 2003.

  1. Clive Quinn

    Clive Quinn Guest

    Hi,

    I have a CSS style question which I hope someone can assist me with.

    Basically I am trying to convert my web page from frames to fixed
    positioning in CSS.

    Now I am trying to achieve the following in CSS:

    #header {
    display: block;
    position: fixed;
    width: 100%;
    height: 15%;
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    }
    #sidebar {
    display: block;
    position: fixed;
    width: 10em;
    height: auto;
    top: 15%;
    right: auto;
    bottom: 100px;
    left: 0;
    }
    #main {
    display: block;
    position: fixed;
    width: auto;
    height: auto;
    top: 15%;
    right: 0;
    bottom: 100px;
    left: 10em;
    }
    #footer {
    display: block;
    position: fixed;
    width: 100%;
    height: 100px;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    }

    Now within my html code I have the following:
    <div class="main">
    <img class="MainPics" src="My.jpg" alt="My.jpg">
    </div>

    <div class="sidebar">
    Some links here
    </div>

    Now whenever I view the page in IE6 I can see the image appear in the center
    of the page which is what I want but the sidebar links will appear
    underneath the image on the left hand side of the screen.

    My problem is that I want to position these links beside the image on the
    left hand side of the screen. I seem to be missing something in my style
    sheet but when I view the page in Netscape 7 it seems to be fine.

    Any body any ideas.

    Cheers
    Clive
     
    Clive Quinn, Jul 28, 2003
    #1
    1. Advertising

  2. Clive Quinn

    rf Guest

    "Clive Quinn" <> wrote in message
    news:fq7Va.25034$...
    > Hi,
    >
    > I have a CSS style question which I hope someone can assist me with.
    >
    > Basically I am trying to convert my web page from frames to fixed
    > positioning in CSS.


    Do not do this. It is very dangerous.

    <snip suspect CSS>

    The snipped CSS *will* cause some of your content to overlap other bits.

    Use standard flow, do not position anything, except for the sidebar which
    you float left, and the body which you give a left hand margin, like this:

    http://users.bigpond.net.au/rf/html/navleft.html

    > My problem is that I want to position these links beside the image on the
    > left hand side of the screen.


    They will be if you use the above approach.

    > I seem to be missing something in my style
    > sheet but when I view the page in Netscape 7 it seems to be fine.


    What you are missing is that CSS is not a replacement for frames. It is an
    entirely different approach. You should not try to reproduce the frames, you
    should abandon the concept of frames entirely all that goes with them. Then
    build the page from the ground up using CSS.

    Cheers
    Richard.
     
    rf, Jul 28, 2003
    #2
    1. Advertising

  3. Clive Quinn

    Clive Quinn Guest

    "David Dorward" <> wrote in message
    news:bg317i$la2$1$...
    > Clive Quinn wrote:
    >
    > > Basically I am trying to convert my web page from frames to fixed
    > > positioning in CSS.

    >
    > > Now whenever I view the page in IE6 I can see the image appear in the
    > > center of the page which is what I want but the sidebar links will

    appear
    > > underneath the image on the left hand side of the screen.

    >
    > Internet Explorer does not support fixed positioning.
    >
    > I think you can have it fallback to absolute with:
    >
    > position: absolute;
    > position: fixed;
    >
    > but I haven't tested this and I don't have MSIE around to check.
    >
    > --
    > David Dorward http://david.us-lot.org/



    Thanks a lot guys for the help. I have used your approach Richard and it
    works fine
     
    Clive Quinn, Jul 28, 2003
    #3
  4. David Dorward wrote:

    > I think you can have it fallback to absolute with:
    >
    > position: absolute;
    > position: fixed;

    Unfortunatley, IE thinks "fixed" means "static", and will ignore the
    position:absolute. You'll have to use a hack, something like:

    #foo {
    position : absolute;
    }
    * > #foo {
    position : fixed;
    }
     
    Leif K-Brooks, Jul 28, 2003
    #4
  5. Clive Quinn

    Clive Quinn Guest

    "Leif K-Brooks" <> wrote in
    message news:yE9Va.4463$2.webusenet.com...
    > David Dorward wrote:
    >
    > > I think you can have it fallback to absolute with:
    > >
    > > position: absolute;
    > > position: fixed;

    > Unfortunatley, IE thinks "fixed" means "static", and will ignore the
    > position:absolute. You'll have to use a hack, something like:
    >
    > #foo {
    > position : absolute;
    > }
    > * > #foo {
    > position : fixed;
    > }
    >
    >

    Hi,

    I have one more question about this.

    I have created a span block with the help of Richard
    span.nav
    {
    float: left;
    width: 10em;
    background-color: #ffffcc;
    }
    Now because this block is in a different colour to the main content on my
    page how do I successfully set the height for this block. Now I have tried
    height: 713px; in the style sheet which is fine for my first page but when I
    link to a page with more content the span block will only appear for the
    first 713px and after that my content will wrap over the whole page.

    Is there any way of getting around this or am I missing something simple.

    Thanks in advance for any help

    Clive
     
    Clive Quinn, Jul 28, 2003
    #5
  6. Clive Quinn

    brucie Guest

    In post <kGaVa.25048$>
    Clive Quinn said...

    > span.nav
    > {
    > float: left;
    > width: 10em;
    > background-color: #ffffcc;}


    width and height don't apply to inline elements. use a <div>

    --
    brucie a. blackford. 29/July/2003 06:23:45 am kilo.
    http://loser.brucies.com/
     
    brucie, Jul 28, 2003
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Eric
    Replies:
    4
    Views:
    741
    clintonG
    Dec 24, 2004
  2. tom watson

    print.css and screen.css

    tom watson, Sep 9, 2003, in forum: HTML
    Replies:
    1
    Views:
    473
    Jukka K. Korpela
    Sep 9, 2003
  3. Joshua Beall
    Replies:
    1
    Views:
    443
    Bertilo Wennergren
    Dec 10, 2003
  4. Nick Wouters
    Replies:
    5
    Views:
    4,649
    Flinky Wisty Pomm
    May 8, 2006
  5. AF
    Replies:
    17
    Views:
    610
    Nije Nego
    Aug 9, 2006
Loading...

Share This Page