Forums

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

Home Forums CSS White area on right side of webpage

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #31551
    justint24
    Member

    Hi there

    hope someone can help, i have this large white area at the right of my webpage i thought i solved this problem but didnt unfortunately, the problems lies in this menu css code i think

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

    ul#nav {
    float: right;
    position: relative;
    z-index: 597;
    }

    ul.dropdown li {
    float: left;
    line-height: 1.3em;
    vertical-align: middle;
    zoom: 1;
    }

    ul.dropdown li.hover,
    ul.dropdown li:hover {
    position: relative;
    z-index: 598;
    cursor: default;
    }

    ul.dropdown ul {<
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 599;
    width: 100%;
    }

    ul.dropdown ul li {
    float: none;
    }

    ul.dropdown ul ul {
    top: 1px;
    left: 100%;
    }

    ul.dropdown li:hover > ul {
    visibility: visible;
    }

    previously i replaced ul.dropdown (the one with the arrow next to it) with ul#nav, it did remove the white area but the dropdown itself disappeared, so back to square one,

    Sorry guys hope you can help

    Thanks

    #62131
    Akuseru
    Participant

    Hi there,

    Are you doing this with a menu generator?

    Do you have a web page for example?

    All I can see it’s that the container (dropdown or nav) are 100% width and the items (li) are less than that.

    Also I need to know if you want this menu centered or aling to right or left.

    I hope to help you…

    #62063
    justint24
    Member

    Hi Akuseru

    sorry my website is http://www.webbid.co.uk

    i want the menu to float right of the page, the menu itself was positioned left and i couldnt get it to float right so i renamed one element from ul.dropdown to ul#nav as you can see which worked but left me with the white margin area.

    Thanks again.

    #62041
    justint24
    Member

    As i mentioned in the first comment i thought i’d solved it but was mistaken, when i replaced the code with the arrow next to it to ul#nav the margin disappeared but the menu stopped working, so was back to having the margin.

    And as for opening new discussions the last discussion had [solved] on it but it wasnt.

    All my website is in pretty perfect working order i just need help on this problem, it would very much appreciated.

    Thanks

    #62042
    drizzy
    Participant

    I’m having the same issue on my site too.
    like on the first page it’s not too bad, but if I click on register and resize my window it starts to show the white space. myla

    #62046
    justint24
    Member

    Hi drizzy,

    i dont think its the same problem we have, i’ve just looked at your site, theres no body width

    example-

    #body {
    width: 100%;
    }

    same with the header width:1165px; replace with width:100%;

    #61972
    justint24
    Member

    I thought this was a website to help people out with problems they have with there websites, i came on here for help for a small problem hoping to find an answer.

    nobody as yet given me a correct answer to my problem.
    wolfcry your more interested in my errors than helping out and as for removing visibility: hidden; WHY thats just makes my dropdown menu visible doesnt make my margin go away.

    #61975
    TheDoc
    Member

    @justint24 – careful with your words! Many people dedicate hours of their time (for free) to help people solve their problems. An attitude like that will only turn them off from helping you.

    #61977
    justint24
    Member

    I understand what you mean and didn’t mean to come across like that, I am very grateful for help I receive and very grateful for ideas, i would just like a little help and it would be very much appreciated, I’m sorry if I sound a little arrogant and ungrateful but I’m just a little frustrated, hope someone can help soon.

    Thanks
    Justin

    #61978
    jamygolden
    Member

    @justint24, the menu is causing the problem. We have narrowed this down for you. Easy solution to the nav problem? find a new way of doing it. We are here to help you, not do the work for you. Here are a few tutorials for creating a dropdown menu.

    http://www.alistapart.com/articles/horizdropdowns/
    http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/
    http://css-plus.com/2010/06/how-to-make-a-jquery-drop-down-menu-with-a-css-fall-back/

    #61079
    drizzy
    Participant

    justint24, thanks I tired 100% it helped abit, but caused problem when resizing my window and at the bottom footer the purple and orange color is now just cutting off more.

    I can’t seem to figure this one out,

    I think it has something to do with something in here.

    /* topmenu */
    div#topmenu {
    height:76px;
    padding:25px 0 0 0;
    }

    div#topmenu div.topmenu_container {
    height:53px;
    position:relative;
    float:left;
    left:50%;
    }

    div#topmenu ul {
    list-style:none;
    position:relative;
    float:left;
    left:-50%;
    background:url(../images/topmenu_line.png) 100% 0 no-repeat;
    }

    div#topmenu ul li {
    float:left;
    display:block;
    font-family:Arial Black, Helvetica, sans-serif;
    font-size:19px;
    text-transform:uppercase;
    background:url(../images/topmenu_line.png) 0 0 no-repeat;
    padding:0 14px 0 18px;
    height:27px;
    }

    anyone have any suggestions TIA.

    #60199
    drizzy
    Participant

    I managed to fix it somehow but the only issue I have is the logo at the top
    doesn’t align with great deals all day every day underneath when I resize the browser.
    Anyone have any idea why this is happening. TIA

    /* topmenu */
    div#topmenu {
    height:76px;
    padding:25px 0 0 0;
    }

    div#topmenu div.topmenu_container {
    height:53px;
    position:relative;
    float:left;
    width:100%;
    overflow:hidden;
    }

    div#topmenu ul {
    list-style:none;
    position:relative;
    float:left;
    background:url(../images/topmenu_line.png) 100% 0 no-repeat;
    clear:left;
    margin:0;
    padding:0;
    left:50%;
    text-align:center;
    line-height:20px;
    }

    div#topmenu ul li {
    float:left;
    display:block;
    font-family:Arial Black, Helvetica, sans-serif;
    font-size:19px;
    text-transform:uppercase;
    background:url(../images/topmenu_line.png) 0 0 no-repeat;
    height:27px;
    list-style:none;
    margin:-4px 0 0 0;
    padding:0 5px 0 8px;
    position:relative;
    right:50%;
    }

    div#topmenu ul li a {
    color:#FFF;
    text-shadow:#000 0 0 4px;
    display:block;
    margin:0 0 0 1px;
    padding:3px 10px;
    text-decoration:none;
    line-height:1.3em;
    }

    div#topmenu ul li a:hover {
    color:#000066;
    text-shadow:#000 0 0 4px;
    display:block;
    margin:0 0 0 1px;
    padding:3px 10px;
    text-decoration:none;
    line-height:1.3em;
Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘CSS’ is closed to new topics and replies.