CSS - HELP

[Clive Quinn]

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

 

[rf]

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.

 

[Clive Quinn]

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.

Thanks a lot guys for the help. I have used your approach Richard and it
works fine

 

[Leif K-Brooks]

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;
}

 

[Clive Quinn]

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

 

[brucie]

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

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