Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > CSS - HELP

Reply
Thread Tools

CSS - HELP

 
 
Clive Quinn
Guest
Posts: n/a
 
      07-28-2003
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



 
Reply With Quote
 
 
 
 
rf
Guest
Posts: n/a
 
      07-28-2003

"Clive Quinn" <(E-Mail Removed)> wrote in message
news:fq7Va.25034$(E-Mail Removed)...
> 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.


 
Reply With Quote
 
 
 
 
Clive Quinn
Guest
Posts: n/a
 
      07-28-2003

"David Dorward" <(E-Mail Removed)> wrote in message
news:bg317i$la2$1$(E-Mail Removed)...
> 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


 
Reply With Quote
 
Leif K-Brooks
Guest
Posts: n/a
 
      07-28-2003
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;
}


 
Reply With Quote
 
Clive Quinn
Guest
Posts: n/a
 
      07-28-2003

"Leif K-Brooks" <(E-Mail Removed)> wrote in
message news:yE9Va.4463$(E-Mail Removed)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


 
Reply With Quote
 
brucie
Guest
Posts: n/a
 
      07-28-2003
In post <kGaVa.25048$(E-Mail Removed)>
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/
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Is this the newsgroup for CSS help? CSS Question Included AF HTML 17 08-09-2006 06:57 PM
masterpages vs. CSS or Masterpages with CSS??? help me out please! Nick Wouters ASP .Net 5 05-08-2006 10:19 AM
CSS Layout question - how to duplicate a table layout with CSS Eric ASP .Net 4 12-24-2004 04:54 PM
Is there a way to set the a CSS property to be explicitly the same as another CSS property? Joshua Beall HTML 1 12-10-2003 07:21 PM
print.css and screen.css tom watson HTML 1 09-09-2003 02:48 PM



Advertisments