Grow your CSS skills. Land your dream job.

Want to keep a portion of page at top

  • # March 28, 2009 at 10:41 am

    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:
    < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">



     

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

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

    Myself and Sheba in NH


    Any help would be appreciated.

    # March 28, 2009 at 11:10 am

    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:
    wkevin.com

    CSS

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

    P.S. you have a gorgeous sib

    # March 28, 2009 at 11:11 am
    Code:
    div {margin: 0 auto; width:960px}

    to centre a div

    # March 28, 2009 at 11:20 am
    "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.

    # March 28, 2009 at 11:42 am

    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)

    # March 28, 2009 at 12:17 pm

    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

    # March 29, 2009 at 7:40 am
    "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:
    < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">



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

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

    Myself and Sheba in NH


    http://wkevin.com/test.htm

    # March 29, 2009 at 8:28 am

    Something like this:

    Code:

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

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

    Myself and Sheba in NH

    Code:
    #container {
    margin:0 auto;
    position:relative;
    width:860px;
    }

    #topofpage {
    padding:0 0 0 80px;
    position:fixed;
    }
    #main {
    padding-top:160px;
    }

    # March 29, 2009 at 8:40 am
    "apostrophe" wrote:
    Something like this:

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

    # March 29, 2009 at 9:02 am

    Try adding this to your body tag

    Code:
    body {
    text-align: center;
    }

    and then this to the #container

    Code:
    text-align: left;
    # March 29, 2009 at 10:38 am

    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.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".