Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Fixed menu problem

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #34965
    Antariksh
    Participant

    I have a fixed menu kinda like those one page portfolios. Now the prob is whenever the browser size changes and I have to scroll through my main content page vertically it goes over the menu. Anyway to solve this?

    #89891

    Do you have a link?

    #89916
    Antariksh
    Participant

    I can write the code for the menu if you want


    html, body, div, span, applet, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, img, small, strong, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, input, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    }

    ul, li {
    list-style-type: none;
    padding: 0;
    margin: 0;
    }

    img, nav, section, article, header {
    display: block;
    }

    a:active {
    outline:none;
    }



    /* LAYOUT*/
    nav {
    width: 447px;
    height: 100%;
    position: fixed;
    left: 0;
    overflow: hidden;

    }

    .content {
    width: 930px;
    height: 100%;
    padding-left: 40px;
    top: 0;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 447px;

    }

    section {
    display: block;
    height: 1200px;
    }

    #matter{
    margin-left:447px;
    margin-top: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 40px;


    }


    /* Menu */
    #nav-logo {
    display: block;
    width: 116px;
    height: 116px;
    float: left;
    margin: 76px 0 0 189px;
    }

    nav ul {
    position: absolute;
    top: 274px;
    left: 0;
    display: block;
    height: 333px;
    background: url('../images/bg-1.png') 53px bottom no-repeat;
    width: 436px;
    }
    nav li {
    display: block;
    width: 435px;
    position: relative;
    z-index: 2;
    left: 0;
    }
    nav li div.first {
    position: relative;
    z-index: 2;
    }
    li div.first span {
    display: block;
    width: 232px;
    background:url(../images/navtxt.png);
    position: absolute;
    left: 52px;
    text-indent: -9999px;
    }
    li div.second {
    position: absolute;
    top: 0;
    left: 240px;
    display: block;
    width: 200px;
    height: 49px;
    text-indent: -9999px;
    z-index: 1;
    }

    nav a {
    display: block;
    outline: none;
    cursor: pointer;
    }

    #nav-1 div.first {
    height: 52px;
    }
    #nav-1 div.first {
    background-position: 0 0;
    }
    #nav-1 span {
    background-position: 0 0;
    height: 52px;
    }

    #nav-2 div.first {
    height: 52px;
    }
    #nav-2 div.first {
    background-position: 0 -49px;
    }
    #nav-2 span {
    background-position: 0 -49px;
    height: 52px;
    }

    #nav-3 div.first {
    height: 52px;
    }
    #nav-3 div.first {
    background-position: 0 -98px;
    }
    #nav-3 span {
    background-position: 0 -98px;
    height: 52px;
    }

    #nav-4 div.first {
    height: 52px;
    }
    #nav-4 div.first {
    background-position: 0 -148px;
    }
    #nav-4 span {
    background-position: 0 -148px;
    height: 52px;
    }

    #nav-5 div.first {
    height: 52px;
    }
    #nav-5 div.first {
    background-position: 0 -205px;
    }
    #nav-5 span {
    background-position: 0 -205px;
    height: 52px;
    }

    #nav-1 div.second {
    background-position: 0 0;
    }
    #nav-2 div.second {
    background-position: 0 -49px;
    }
    #nav-3 div.second {
    background-position: 0 -98px;
    }
    #nav-4 div.second {
    background-position: 0 -148px;
    }
    #nav-5 div.second {
    background-position: 0 -205px;
    height: 52px;
    }



    /* Hello content*/
    #hello {
    padding-top: 117px;
    display:none;
    }
    #hello header {
    height: 430px;
    }
    #hello h1 {
    color:#000;
    width: 440px;
    height: 115px;

    position: absolute;
    top: 152px;
    left: 68px;
    }
    #hello p {
    width: 320px;
    height: 240px;
    text-indent: -9999px;
    position: absolute;
    top: 253px;
    left: 59px;
    }

    I have another style sheet in my project


    html {
    height:100%;
    }
    body {
    background-attachment: fixed;
    background-color: #FFF;
    background-image: url(../images/bg2.jpg);
    background-repeat: repeat;
    background-position: 0 0;

    }

    nav {

    background-image: url(../images/bg2l.png);
    }


Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.