Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie
Hi all,
Vanilla are planning an update to the site on April 24th (next Wednesday). It is a major PHP8 update which is expected to boost performance across the site. The site will be down from 7pm and it is expected to take about an hour to complete. We appreciate your patience during the update.
Thanks all.

side nav bar

Options
  • 26-11-2011 9:10pm
    #1
    pjwhite99
    Registered Users Posts: 210 ✭✭


    Hi

    i am making a side nav bar with a unordered list inside a div,


    you know when you make a list it all way pushes over to the right abit is there any way of stoping this i want the list tight up to the left of the div???


Comments

  • Options
    #2
    ivanc
    Registered Users Posts: 125 ✭✭ivanc


    pjwhite99 wrote: »
    Hi

    i am making a side nav bar with a unordered list inside a div,


    you know when you make a list it all way pushes over to the right abit is there any way of stoping this i want the list tight up to the left of the div???

    Put a negative margin on the li.


  • Options
    #3
    matt-dublin
    Registered Users Posts: 4,468 ✭✭✭matt-dublin


    put a 0 margin on the ul and a 0 margin on the li

    you shouln't use negative margins.


  • Options
    #4
    pjwhite99
    Registered Users Posts: 210 ✭✭pjwhite99


    matt-dublin wrote: »
    put a 0 margin on the ul and a 0 margin on the li

    still never worked this is what i have done



    #side_links ul li {
    line-height: 35px;
    font-family: "Times New Roman", Times, serif;
    font-size: 16px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #27C3F3;
    color: #8E6C3E;
    list-style-position: inside;
    list-style-image: url(../images/arrow.png);
    font-weight: bold;
    margin: 0px;
    width: 140px;
    }

    any ideas?


  • Options
    #5
    matt-dublin
    Registered Users Posts: 4,468 ✭✭✭matt-dublin


    can you post both the html and css?

    it sounds like the container the list is in had padding.

    also try
    padding-left: 0px;

    in bothe the ul and li css


  • Options
    #6
    28064212
    Registered Users Posts: 10,458 ✭✭✭✭28064212


    pjwhite99 wrote: »
    still never worked this is what i have done

    #side_links ul li {
    Just to be sure, is side_links the name of the ul or the div above the ul? Also, that CSS only applys to the li elements, not the ul. Set the padding-left and margin-left of both to 0px

    Boardsie Enhancement Suite - a browser extension to make using Boards on desktop a better experience (includes full-width display, keyboard shortcuts, and dark mode). Now available through the extension stores

    Firefox: https://addons.mozilla.org/addon/boardsie-enhancement-suite/

    Chrome/Edge/Opera: https://chromewebstore.google.com/detail/boardsie-enhancement-suit/bbgnmnfagihoohjkofdnofcfmkpdmmce



  • Advertisement
  • Options
    #7
    ivanc
    Registered Users Posts: 125 ✭✭ivanc


    matt-dublin wrote: »
    you shouln't use negative margins.

    The use of negative margins is perfectly valid mark up and solves a lot of those little issues like the indent when using an unordered list.


  • Options
    #8
    tricky D
    Closed Accounts Posts: 9,700 ✭✭✭tricky D


    It is explicitly allowed in the spec, but not for padding which is explicitly not allowed.


  • Options
    #9
    matt-dublin
    Registered Users Posts: 4,468 ✭✭✭matt-dublin


    ivanc wrote: »
    The use of negative margins is perfectly valid mark up and solves a lot of those little issues like the indent when using an unordered list.
    it does work you're right, but if you need to use - margins and padding then you should have a look at all of your container positioning and padding.

    in theory you should never have to use it if everything is structured correctly


  • Options
    #10
    pjwhite99
    Registered Users Posts: 210 ✭✭pjwhite99


    28064212 wrote: »
    Just to be sure, is side_links the name of the ul or the div above the ul? Also, that CSS only applys to the li elements, not the ul. Set the padding-left and margin-left of both to 0px

    i needed to use #side_links ul works fine now thanks


  • Options
    #11
    Liam Byrne
    Closed Accounts Posts: 18,163 ✭✭✭✭Liam Byrne


    matt-dublin wrote: »
    put a 0 margin on the ul and a 0 margin on the li

    you shouln't use negative margins.

    Huh ?
    position:absolute;left:50%;width:950px;margin-left:-475px

    is a perfectly acceptable CSS-based method of centering a popup overlay on an unknown screen size


  • Advertisement
  • Options
    #12
    matt-dublin
    Registered Users Posts: 4,468 ✭✭✭matt-dublin


    why wouldn't you just use an auto margin for that? wouldn't it centre without the added bloat?
    margin:auto; width:950px;


  • Options
    #13
    Giblet
    Registered Users Posts: 11,977 ✭✭✭✭Giblet


    Negative margins should only be used when you need to move something into a defined margin outside the regular flow of a document, centered absolutely positioned elements require it in some cases too, but never just to get something into position without considering how it will affect the flow of the doc.. For a UL, just set margin to 0.

    margin:auto only works when you have a width for the container.


  • Options
    #14
    tricky D
    Closed Accounts Posts: 9,700 ✭✭✭tricky D


    From Smashing Mag

    The Definitive Guide to Using Negative Margins


  • Options
    #15
    matt-dublin
    Registered Users Posts: 4,468 ✭✭✭matt-dublin


    smashin mag wrote:
    Dreamweaver doesn’t understand it
    Negative margins don’t show up in the Design View of DW. Why are you even checking your site in Design View anyway?

    excellent.


  • Options
    #16
    tricky D
    Closed Accounts Posts: 9,700 ✭✭✭tricky D


    Yup, that raised a chuckle from me also.


Advertisement