Want to keep a portion of page at top

[Wkevco]

I’m getting a little better at this css stuff, but I could use some help with this one.
I would like to keep this at the top of my page, centered, at all times:

[img]http://wkevin.com/img/top_of_page.jpg[/img]

Here is the existing css:

Code:

#modernbricksmenu
{
height:20px;
width:100%;
background:transparent;
voice-family:inherit;
text-align:center;
padding:0;
}

#modernbricksmenu ul
{
font:bold 11px Arial;
list-style:none;
margin:0;
padding:0;
}

#modernbricksmenu li
{
display:inline;
text-transform:uppercase;
margin:0 2px 0 0;
padding:0;
}

#modernbricksmenu a {
background-color:#000000;
color:#FFFFFF;
display:inline-block;
letter-spacing:1px;
margin:0 1px 0 0;
padding:5px 10px 2px;
text-decoration:none;
}

#modernbricksmenu a:hover
{
background-color:gray;
}

#modernbricksmenu #current a
{
background-color:#00f;
border-color:#00f;
}

#modernbricksmenuline
{
clear:both;
width:100%;
height:5px;
line-height:5px;
background:#00f;
padding:0;
}

body
{
color:#00f;
font-size:14pt;
font-family:verdana, sans-serif;
}

a:visited{
color:blue
}

td,th,tr
{
color:#000;
font-size:13pt;
font-family:verdana, sans-serif;
}

body
{
background-color:#d4d0c8;
margin:0;
padding:12px 30px 4px;
}

h1
{
font-family:Georgia, “Times New Roman”, Times, serif;
font-size:28px;
color:red;
}

p.note
{
color: black;
font-size:10pt;
font-weight: bold;
}

#topofpage
{
margin:0;
}

Here is the source of my page:

Code:

• Home
• My Pizza
• My Siberian Husky
• My Music
• Attleboro Weather
• Email Kevin

 

This is just my little space on the interweb, nothing special.

Myself and Sheba, my Siberian Husky, in Lancaster, New Hampshire.

Any help would be appreciated.

[ikthius]

this might be your problem.

Code:

there is no point making a div for making a div’s sake??? what is in this div? <div id="topofpage"></div>
you also have 2 body div’s… why?

here is jow I would do it: NOTE: not everyone will agree, but I am doing this quickly, without testing

HTML

Code:

CSS

Code:

body
{
text-align:center; //for IE
}
#topofpage
{
margin-left:auto;
margin-right:auto;
}

P.S. you have a gorgeous sib

[chazzwick]

Code:

div {margin: 0 auto; width:960px}

to centre a div

[Wkevco]

"ikthius" wrote:

this might be your problem.

Code:

there is no point making a div for making a div’s sake??? what is in this div? <div id="topofpage"></div>
you also have 2 body div’s… why?
P.S. you have a gorgeous sib

Sorry, not shown in my html code is this at the bottom :
<a href="#topofpage">Top of Page</a>
This just brings the page to the top, which is what I want to change so that the menu stuff stays fixed.
Also, I’m not seeing the second body tag you mention.

Thanks for the comment about my sibe. She is the best.

I’ll try what you posted.[code]<a href="#topofpage">Top of Page</a>
This just brings the page to the top, which is what I want to change so that the menu stuff stays fixed.
Also, I’m not seeing the second body tag you mention.

Thanks for the comment about my sibe. She is the best.

I’ll try what you posted.

[Wkevco]

Ok, I cleaned it up a bit using what you guys posted.

The css is now:

Code:

#modernbricksmenu
{
height:20px;
width:100%;
background:transparent;
voice-family:inherit;
text-align:center;
padding:0;
}

#modernbricksmenu ul
{
font:bold 11px Arial;
list-style:none;
margin:0;
padding:0;
}

#modernbricksmenu li
{
display:inline;
text-transform:uppercase;
margin:0 2px 0 0;
padding:0;
}

#modernbricksmenu a {
background-color:#000000;
color:#FFFFFF;
display:inline-block;
letter-spacing:1px;
margin:0 1px 0 0;
padding:5px 10px 2px;
text-decoration:none;
}

#modernbricksmenu a:hover
{
background-color:gray;
}

#modernbricksmenu #current a
{
background-color:#00f;
border-color:#00f;
}

#modernbricksmenuline
{
clear:both;
width:100%;
height:5px;
line-height:5px;
background:#00f;
padding:0;
}

div
{
margin: 0 auto; width:960px;
}

body
{
color:#00f;
font-size:14pt;
font-family:verdana, sans-serif;
}

a:visited{
color:blue
}

td,th,tr
{
color:#000;
font-size:13pt;
font-family:verdana, sans-serif;
}

body
{
background-color:#d4d0c8;
margin:0;
padding:12px 30px 4px;
text-align:center; //for IE
}

h1
{
font-family:Georgia, “Times New Roman”, Times, serif;
font-size:28px;
color:red;
}

p.note
{
color: black;
font-size:10pt;
font-weight: bold;
}

#topofpage
{
margin-left:auto;
margin-right:auto;
}

my test page:
http://wkevin.com/test.htm

I still want the image and the menu to stay fixed at the top of the page. (in other words,scrolling the main content will have no effect on the top)

[ikthius]

you meaning having the banner and nav always showing even when scrolling?

position:fixed;

I think you should start again with your code, I like to code the html and then the css.
for example, you body is halfway down your CSS but it is the first real style element you could work with.

take it in stages.

but for complete static logo banner, position fixed (if thats what you meant)

also: get rid of transprency and make a background colour, make thos elements z-index:1 maybe make the scolling element z-index:-1

[Wkevco]

"ikthius" wrote:

also: get rid of transprency and make a background colour, make thos elements z-index:1 maybe make the scolling element z-index:-1

I have no idea what you mean with that.

Anyway, I am getting there, I am just having trouble centering it. Firefox has it to the left and IE has it way right.

CSS:

Code:

#modernbricksmenu {
height:20px;
width:100%;
background:transparent;
voice-family:inherit;
text-align:center;
padding:0;
}

#modernbricksmenu ul {
font:bold 11px Arial;
list-style:none;
margin:0;
padding:0;
}

#modernbricksmenu li {
display:inline;
text-transform:uppercase;
margin:0 2px 0 0;
padding:0;
}

#modernbricksmenu a {
background-color:#000;
color:#FFF;
display:inline-block;
letter-spacing:1px;
text-decoration:none;
margin:0 1px 0 0;
padding:5px 10px 2px;
}

#modernbricksmenu a:hover {
background-color:gray;
}

#modernbricksmenu #current a {
background-color:#00f;
border-color:#00f;
}

#modernbricksmenuline {
clear:both;
width:100%;
height:5px;
line-height:5px;
background:#00f;
padding:0;
}

a:visited {
color:blue;
}

td,th,tr {
color:#000;
font-size:13pt;
font-family:verdana, sans-serif;
}

#main {
margin-top:160px;
}

body {
background-color:#d4d0c8;
text-align:center;
margin:0;
padding:12px 30px 4px;
}

h1 {
font-family:Georgia, “Times New Roman”, Times, serif;
font-size:28px;
color:red;
}

p {
color:#00f;
font-size:14pt;
font-family:verdana, sans-serif;
}

p.note {
color:#000;
font-size:10pt;
font-weight:700;
}

#topofpage {
position:fixed;
}

HTML:

Code:

• Home
• My Pizza
• My Siberian Husky
• My Music
• Attleboro Weather
• Email Kevin

 

This is just my little space on the interweb, nothing special.

Myself and Sheba, my Siberian Husky, in Lancaster, New Hampshire.

http://wkevin.com/test.htm

[Wkevco]

"apostrophe" wrote:

Something like this:

Exactly. :D
It works in Firefox, but it’s still not centered in IE.

[Wkevco]

Thanks ,
It’s better, but still a little screwy, especially in IE.
I may just keep it the way it is for now and scrap the fixed position idea. Looks like it’s too much work for not much benefit.

[Author]

Posts