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:
<li><a href=\"http://wkevin.com/mypizza\" title=\"My Pizza\">My Pizza</a></li> <li><a href=\"http://wkevin.com/sheba\" title=\"Sheba\">My Siberian Husky</a></li> <li><a href=\"http://wkevin.com/mymusic\" title=\"My Music\">My Music</a></li> <li><a href=\"http://wkevin.com/weather\" title=\"Attleboro Weather\">Attleboro Weather</a></li> <li><a href=\"mailto:kevinw@wkevin.com\" title=\"Contact Kevin\">Email Kevin</a></li> </ul></div> <div id=\"modernbricksmenuline\"> </div> <div align=\"center\"> <h1>This is just my little space on the interweb, nothing special.</h1> <p>Myself and Sheba, my Siberian Husky, in Lancaster, New Hampshire.</p>
<div align=\"center\"><img src=\"http://wkevin.com/images/kevshebanh.jpg\" alt=\"Myself and Sheba in NH\" title=\"Myself and Sheba, in beautiful Lancaster, New Hampshire in 2005.\" width=\"640\" height=\"480\"></div> </body> </html>
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 : [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.
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
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.
I would like to keep this at the top of my page, centered, at all times:
http://wkevin.com/img/top_of_page.jpg
Here is the existing css:
Here is the source of my page:
Any help would be appreciated.
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
CSS
P.S. you have a gorgeous sib
div {margin: 0 auto; width:960px}to centre a div
Sorry, not shown in my html code is this at the bottom :
[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.
The css is now:
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)
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
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:
#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:
http://wkevin.com/test.htm
#container {
margin:0 auto;
position:relative;
width:860px;
}
#topofpage {
padding:0 0 0 80px;
position:fixed;
}
#main {
padding-top:160px;
}
Exactly. :D
It works in Firefox, but it's still not centered in IE.
body {text-align: center;
}
and then this to the #container
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.