Centering Header

J

Jon Slaughter

In the following test code is it possible to make the first div always align
itself to the right of the browsers window? I need a simple method because
the code I'm using it much more complicated. I'm trying to center a table
that is variable in size that spans the browsers window horizontally but in
a case where the user scrolls the table does not scroll with it. In some
sense I need the browser to reposition the table when it scrols. (it works
fine on resize but doesn't work on scroll)

Is there any way to do this with css? What I was trying to do was create a
table with a column that would vary its width so that it "pushes" the image
right but I would need to push an amount that equals the number of pixels
that have been scrolled. This seems impossible though ;/

Thanks,
Jon

<!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=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>

<div style="float:right">
<img src="file:///C|/Documents and Settings/Jon/My
Documents/Temp/images/Nav3.png" />
</div>

<div>
asdljf;lasdjf;kjasdk
alksdA<br />
SDF
AS
dFASDddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd<br
/>
asdfASDf<br />

</div>
</body>
</html>
 
B

Ben C

In the following test code is it possible to make the first div always align
itself to the right of the browsers window? I need a simple method because
the code I'm using it much more complicated. I'm trying to center a table
that is variable in size that spans the browsers window horizontally but in
a case where the user scrolls the table does not scroll with it.
In some
sense I need the browser to reposition the table when it scrols. (it works
fine on resize but doesn't work on scroll)

Is there any way to do this with css? What I was trying to do was create a
table with a column that would vary its width so that it "pushes" the image
right but I would need to push an amount that equals the number of pixels
that have been scrolled. This seems impossible though ;/
Click to expand...

Use position: fixed instead of float.

div#first
{
position: fixed;
right: 0;
}

That will lock the div to the viewport, and therefore move it relative
to the document when the user scrolls.
 
J

Jon Slaughter

Ok, I would like to do the same thing but this time I want to anchor it to
the bottom of the page as a footer. Obviously I can do top:0 to anchor it
to the top but I can't do it for the bottom because there is no absolute
pixel reference for the size of the browser window, or is there?

If I do top:100% then that puts the top of the footer at the bottom of the
page so it doesn't get shown. I can't do top:100%-50px which would life the
footer so it can be shown but ofcourse that isn't part of the syntax.

I suppose I could accomplish this using some layout method such as tables
but is there any way with css attributes? basically I need the top of the
footer to be Window_Size - Footer_Size. Since Window_Size can change I
obviously cannot use a specific value.

Basically my layout is 4 regions, I have the header, menu(which is basically
like the left margin), the content which is whats left, and the footer.

|-------------|
|-------------| Header
| |
|M | Content
| |
|-------------|
|-------------| Footer


The content is open ended while all the others are fixed to the view window.

Thanks,
Jon
 
J

Jon Slaughter

|-------------|
|-------------| Header
| |
|M | Content
| |
|-------------|
|-------------| Footer
Click to expand...

BTW, the header and footer are made up of tables that has two fixed columns
and one arbitrary column so that the arbitrary one grows with the resizing
the window and contains a repeated image. They must also must not be
affected by scrolling. Not sure if this makes it harder to implement or not
else I could just use a table with 3 rows to contain everything I think.
(Might try it but I think it probably won't work)

Jon
 
B

Ben C

Ok, I would like to do the same thing but this time I want to anchor it to
the bottom of the page as a footer. Obviously I can do top:0 to anchor it
to the top but I can't do it for the bottom because there is no absolute
pixel reference for the size of the browser window, or is there?
Click to expand...

Yes, just bottom: 0. For position: fixed that's always relative to the
viewport.

Give it top:0 and bottom:0.
 
J

Jon Slaughter

Ben C said:
Yes, just bottom: 0. For position: fixed that's always relative to the
viewport.

Give it top:0 and bottom:0.
Click to expand...

lol. Duh. I guess I should I been able to figure that out ;/ guess I need
to read up more on css.

Thanks,
Jon
 
J

Jon Slaughter

I now have another issue that I'm reluctant to ask because its probably an
easy fix but this should be the last problem since everything else seems to
be working fine.

Basicaly I want my menu not to scroll vertically but still scroll
horizontally.

http://www.jonslaughter.com/MyPage.html

You can see here. Actually the effect is sorta nice and I might keep it the
way it is but probably not. The html code is a mess and probably not the
most elegant way to do what I am trying to do.

If I change the position:fixed then the menu works vertically but then
scrolling horizontally causes the menu to say where its at and the content
part will scroll under it. (would be nice if I could just tell the browser
only to scroll the content page. Which I guess I can store use with the
overflow but it doesn't look nice)

Thanks,
Jon
 
B

Ben C

I now have another issue that I'm reluctant to ask because its probably an
easy fix but this should be the last problem since everything else seems to
be working fine.

Basicaly I want my menu not to scroll vertically but still scroll
horizontally.
Click to expand...

You mean you want it fixed to the viewport in one dimension but to move
with the scrolling document in another? That's not such an easy fix.
 
J

Jon Slaughter

Ben C said:
You mean you want it fixed to the viewport in one dimension but to move
with the scrolling document in another? That's not such an easy fix.
Click to expand...

Yeah. I sorta need something like position-horizontal:relative;
position-vertical:fixed. Basically I don't want the vertical scroll bar to
effect the menu. Probably not possible but maybe theres some work around?

Thanks,
Jon
 
J

Jon Slaughter

Jon Slaughter said:
Yeah. I sorta need something like position-horizontal:relative;
position-vertical:fixed. Basically I don't want the vertical scroll bar
to effect the menu. Probably not possible but maybe theres some work
around?
Click to expand...

No, I don't think thats what I want. Essentially I just want the menu to be
static and when the content window is to large for the browser it will
scroll. I think that if I put a background on the menu that it will cover up
the text from the content page and it will look right. I'll try and see.

Thanks,
Jon
 
J

Jon Slaughter

Ok, I got it for the most part. What I did was make the menu cover up the
text so that when it goes behind it it will not show through. Looks a little
funny because the text looks like it is cut off but I think I can add a
border or something to make it look better. You can check the site for the
updated version.

Thanks,
Jon
 
D

dorayme

Use position: fixed instead of float.

div#first
{
position: fixed;
right: 0;
}
Click to expand...

Awesome.

Thanks,
Jon [/QUOTE]

It will cause jerky scrolling for Spartanicus and others.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Having trouble centering contents of td ? 3
Centering a button using flexbox 2
Need assistance finetuning HTML, CSS, Javascript - sticky header issue 3
Help with code 0
Help with my responsive home page 2
How do I hide the modal after 5 seconds? 4
centering page 7
Horizontal menu bar header 2

Members online

No members online now.
Total: 27 (members: 0, guests: 27)
Robots: 369

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,015
Latest member
AmbrosePal

Latest Threads

Top