1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Weird Issue with CSS

Discussion in 'HTML & Website Design' started by quarinteen, Jan 25, 2017.

  1. #1
    Hello, I haven't done web design in years and i'm working on a project and ran into a weird CSS issue. I am hoping someone can assist with this. Below is the code. I am using MS Expression. When I save the page and open it with any browser, the first menu item is ok the second one is placed directly under the first and the third and forth are double spaced. Ill attach a screen shot as well. Thanks if you can help.

    <style>
    .dropdown {
    position: relative;
    display: inline-block;
    }

    .dropdown-content {
    display: none;
    position: absolute;
    background-color: #8b8b8b;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
    }

    .dropdown:hover .dropdown-content {
    display: block;
    }
    </style>
    ==========================================================
    Here is the menu Items
    <div class="dropdown"> <span>Menu</span> <div class="dropdown-content"><p align="left">Item 1<br>Item 2</br><br>Item 3</br><br>Item 4</br></p></div></div> menu.png
     
    quarinteen, Jan 25, 2017 IP
  2. malky66

    malky66 Acclaimed Member

    Messages:
    3,996
    Likes Received:
    2,248
    Best Answers:
    88
    Trophy Points:
    515
    #2
    Apart from MS Expression, the problem is the double breaks after "Item2" and "Item3":
    <div class="dropdown"> <span>Menu</span> <div class="dropdown-content"><p align="left">Item 1<br>Item 2</br><br>Item 3</br><br>Item 4</br></p></div></div>
    Code (markup):
     
    malky66, Jan 25, 2017 IP
  3. quarinteen

    quarinteen Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    OK I am retarded and it has been so long. DO you mean the </br>
     
    quarinteen, Jan 25, 2017 IP
  4. malky66

    malky66 Acclaimed Member

    Messages:
    3,996
    Likes Received:
    2,248
    Best Answers:
    88
    Trophy Points:
    515
    #4
    Correct, but really you should dump MS Expression in the trash and learn to do it properly.
     
    malky66, Jan 25, 2017 IP
  5. quarinteen

    quarinteen Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #5

    I am retarded. It is Expression was telling me to close those tags. I didn't think you had to. Thanks I appreciate it.
     
    quarinteen, Jan 25, 2017 IP
  6. quarinteen

    quarinteen Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #6
    I am using it for the editor portion and other little tools. Its been a long time just need to get it done. Thanks for the suggestion though. That doesn't look right to me. They look too close not. Is there a better way these days to do a menu? Would a list work better?
     
    quarinteen, Jan 25, 2017 IP
  7. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #7
    A menu is a list, by definition, so yes, that's how you should mark it up.

    gary
     
    kk5st, Jan 25, 2017 IP
  8. quarinteen

    quarinteen Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #8
    If you have time for another questions here is the menu portion of it. DO you have any idea how to change the length so it doesnt span the entire width of the page. Also is there a way to add a background image to the main bar? I tried to add background: url("curveleft.png"); to the following
    It didnt work. Thanks if you have some more time to teach an idiot :)

    #cssmenu {
    height: 37px;
    display: block;
    border: 1px solid;
    border-radius: 5px;
    width: auto;
    border-color: #080808;
    margin: 0;
    padding: 0;
    background: url("curveleft.png");
    background-size: cover;
    }

    ============================================================================
    Main css
    #cssmenu,
    #cssmenu ul,
    #cssmenu li,
    #cssmenu a {
    border: none;
    line-height: 1;
    margin: 0;
    padding: 0;
    }
    #cssmenu {
    height: 37px;
    display: block;
    border: 1px solid;
    border-radius: 5px;
    width: auto;
    border-color: #080808;
    margin: 0;
    padding: 0;

    }
    #cssmenu > ul {
    list-style: inside none;
    margin: 0;
    padding: 0;
    }
    #cssmenu > ul > li {
    list-style: inside none;
    float: left;
    display: inline-block;
    position: relative;
    margin: 0;
    padding: 0;
    text-align: left;
    }
    #cssmenu.align-center > ul {
    text-align: center;

    }
    #cssmenu.align-center > ul > li {
    float: none;
    margin-left: -3px;
    }
    #cssmenu.align-center ul ul {
    text-align: left;
    }
    #cssmenu.align-center > ul > li:first-child > a {
    border-radius: 0;
    }
    #cssmenu > ul > li > a {
    outline: none;
    display: block;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
    font-weight: 700;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
    border-right: 1px solid #080808;
    color: #ffffff;
    padding: 12px 20px;
    }
    #cssmenu > ul > li:first-child > a {
    border-radius: 5px 0 0 5px;
    }
    #cssmenu > ul > li > a:after {
    content: "";
    position: absolute;
    border-right: 1px solid;
    top: -1px;
    bottom: -1px;
    right: -2px;
    z-index: 99;
    border-color: #3c3c3c;
    }
    #cssmenu ul li.has-sub:hover > a:after {
    top: 0;
    bottom: 0;
    }
    #cssmenu > ul > li.has-sub > a:before {
    content: "";
    position: absolute;
    top: 18px;
    right: 6px;
    border: 5px solid transparent;
    border-top: 5px solid #ffffff;
    }
    #cssmenu > ul > li.has-sub:hover > a:before {
    top: 19px;
    }
    #cssmenu > ul > li.has-sub:hover > a {
    padding-bottom: 14px;
    z-index: 999;
    border-color: #3f3f3f;
    }
    #cssmenu ul li.has-sub:hover > ul,
    #cssmenu ul li.has-sub:hover > div {
    display: block;
    }
    #cssmenu > ul > li.has-sub > a:hover,
    #cssmenu > ul > li.has-sub:hover > a {
    background: #3f3f3f;
    border-color: #3f3f3f;
    }
    #cssmenu ul li > ul,
    #cssmenu ul li > div {
    display: none;
    width: auto;
    position: absolute;
    top: 38px;
    background: #3f3f3f;
    border-radius: 0 0 5px 5px;
    z-index: 999;
    padding: 10px 0;
    }
    #cssmenu ul li > ul {
    width: 200px;
    }
    #cssmenu ul ul ul {
    position: absolute;
    }
    #cssmenu ul ul li:hover > ul {
    left: 100%;
    top: -10px;
    border-radius: 5px;
    }
    #cssmenu ul li > ul li {
    display: block;
    list-style: inside none;
    position: relative;
    margin: 0;
    padding: 0;
    }
    #cssmenu ul li > ul li a {
    outline: none;
    display: block;
    position: relative;
    font: 10pt Arial, Helvetica, sans-serif;
    color: #ffffff;
    text-decoration: none;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
    margin: 0;
    padding: 8px 20px;
    }
    #cssmenu,
    #cssmenu ul ul > li:hover > a,
    #cssmenu ul ul li a:hover {
    background: #3c3c3c;
    background: -moz-linear-gradient(top, #3c3c3c 0%, #222222 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3c3c3c), color-stop(100%, #222222));
    background: -webkit-linear-gradient(top, #3c3c3c 0%, #222222 100%);
    background: -o-linear-gradient(top, #3c3c3c 0%, #222222 100%);
    background: -ms-linear-gradient(top, #3c3c3c 0%, #222222 100%);
    background: linear-gradient(top, #3c3c3c 0%, #222222 100%);
    }
    #cssmenu > ul > li > a:hover {
    background: #080808;
    color: #ffffff;
    }
    #cssmenu ul ul a:hover {
    color: #ffffff;
    }
    #cssmenu > ul > li.has-sub > a:hover:before {
    border-top: 5px solid #ffffff;
    }
     
    quarinteen, Jan 25, 2017 IP
  9. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #9
    What is that "curveleft" meant to do? Just make a curved border / wrapping for the list? And image would help there. Other news: in the edit-box on this page, there is a code-button (or, rather, there is an insert-button, where you can chose "code" - please, for the love of god, use it?). That CSS is a mess, and I'm pretty sure it can be condensed quite a bit - would you mind creating a jsfiddle or something like that? Makes it easier to edit and show the changes done...
     
    PoPSiCLe, Jan 26, 2017 IP
  10. quarinteen

    quarinteen Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #10
    Its just some random picture I am trying to use as a back ground image for the menu bar
     
    quarinteen, Jan 27, 2017 IP
  11. quarinteen

    quarinteen Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #11
    Sorry I wont post it like that again. Honestly its this menu below. There is just so much black space to the right I want to do something with it.

    http://cssmenumaker.com/menu/css3-drop-down-menu
     
    quarinteen, Jan 27, 2017 IP