spry menu in dreamweaver

  • 1
  • Question
  • Updated 9 years ago
  • Answered
hey guys..u all know i was looking for a drop down menu,,Boomer got it for me (thanx by the way boomer)

but now i decided to edit my yola page with dreamweaver
and the problem is that i cant put n the drop down menu for some reason..could someone explain it to me how to do it?
Photo of Damager

Damager

  • 122 Posts
  • 0 Reply Likes
  • excited

Posted 9 years ago

  • 1
Photo of Damager

Damager

  • 122 Posts
  • 0 Reply Likes
doesnt matter i found it out..but theres another problem..its left aligned
how to put it in in center?
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
whats the code html?
try this <!--
<center> CODE </center>

-->
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
also if you see anything like <div aligned left -- remove it.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hey Damager

I had this problem too! What you actually need to do is is changed the padding. The center code didn't work for me. It

Look for this code, it should be at the very top:
#sddm {margin: 0; padding: 0; }

Change the padding:0 to padding-left: 3px

You are going to have to eyeball it. So, increase or decrease the number, preview the page and when it gets to the center, then you've got it.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
i didnt realise it was in this language - i would reccommend:
adding this to the head (or the top html widget in Yola :)

<!--
<style type="text/css">
.centerdiv{ /*IE method of centering a relative div*/
text-align: center;
}

.centerdiv>div{ /*Proper way to center a relative div*/
margin: 0 auto;
}
</style>

then add this to the page code

<div class="centerdiv"> CODE GOES HERE </div>

-->
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
ohh.. thanks Duke.. I'm going to try this out!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
it didn't seem to work. I'm not sure if I'm putting it in the right spot? Do you want to try? It's on the Yola Code site, index2 page. You have the login and password, right? If not, let me know and I'll send it to you as you are allowed access.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
it does work - i tested it on the side menu to see for sure if it worked.

I didnt publish the site - you can see it in the editor. (index2)

Lee.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
It's not the side menu that's the problem.. it's the top navigation menu. If you have time, take a look at that one. Thanks. =) In the meantime, the padding-left seems to do the trick.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
i'ts already removed Lee... i put in the code that you gave. I may have just simply put it in the wrong spot.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
well then its working - or not? its not aligned to the left, for sure and if you have removed the left padding that means its working?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
no.. the code does not seem to be working. There is no left alignment though. I tried just using the div align thing, but no go. It's really strange. That's why I had to add in the padding-left to make the nav bar align under the banner on the original index page (not the index2). So, the index2 page is the original code with no left padding. I added in your code on that page to see if it would work, but it doesn't. As I said, I may have just put the code in the wrong spot?
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
i dont know littleus -
so the index page has padding to the left but index2 does not.
there is only a slight difference for me. Maybe the banners not centered :)

The code works as you can see on the side menu in index2 (remove that if you like next time your in) .. but granted it doesnt seem to do anything to the postion of the main nav.

Lee.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Sorry Lee... I must be really confusing you!

I did put in that padding left in the index page because I didn't know how else to center it.

When you posted that code above, I decided to try it on the index2 to see if it would work and I used the original navigation menu which was without the padding-left. I've never had a problem centering the side menu, just the top horizontal navigation menu. I was just trying to see if there was another option besides my padding-left to center it.

Thanks for trying. So, it appears that padding-left is the only way to center the horizontal menu for now.
Photo of Damager

Damager

  • 122 Posts
  • 0 Reply Likes
guys thnx for the answers,but i DONT want to make it in yola..im makin it with dreamweaver
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Shouldn't it still work in dreamweaver? It's the same code isn't it? I'm a little confused. =(
Photo of Damager

Damager

  • 122 Posts
  • 0 Reply Likes
hmm..so am i..i ve put the code Boomer gave me in dreamweaver-its workin

the code is:









.horizontalcssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline;
float: left;

}

/*Top level menu link items style*/
.horizontalcssmenu ul li a{
display: block;
width: 105px; /*Width of top level menu link items*/
padding: 8px 8px;
border: 1px solid #202020;
border-left-width: 0;
text-decoration: none;
background: url(http://i39.tinypic.com/k50jn5.jpg) center center repeat-x;
color: #ffffff;
font: bold 12px verdana;
}

/*Sub level menu*/
.horizontalcssmenu ul li ul{
left: 0;
top: 0;
border-top: 1px solid #202020;
position: absolute;
display: block;
visibility: hidden;
z-index: 100;
}

/*Sub level menu list items*/
.horizontalcssmenu ul li ul li{
display: inline;
float: none;
}

/* Sub level menu links style */
.horizontalcssmenu ul li ul li a{
width: 110px; /*width of sub menu levels*/
font-weight: normal;
padding: 2px 5px;
background: #707073;
border-width: 0 1px 1px 1px;
}

.horizontalcssmenu ul li a:hover{
background: url(http://i43.tinypic.com/ajtn6g.jpg) center center repeat-x;
}

.horizontalcssmenu ul li ul li a:hover{
background: #000000;
}

* html p#iepara{ /*For a paragraph (if any) that immediately follows menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}

/* Holly Hack for IE \*/
* html .horizontalcssmenu ul li { float: left; height: 1%; }
* html .horizontalcssmenu ul li a { height: 1%; }
/* End */





  • Home

  • Replay
  • Results


  • Photos




  • thats the code of the mennu

    my problem is that its left aligned..
    Photo of Sanja

    Sanja, Official Rep

    • 10698 Posts
    • 495 Reply Likes
    yep.. I understand. so what you have to do is replace the padding:0px to padding-left: 3px or whatever number you need to make it move over so that it centers.
    Photo of Damager

    Damager

    • 122 Posts
    • 0 Reply Likes
    ok thanx..by the way check out my new problem lol (only if ya want)

    http://getsatisfaction.com/yola/topic...
    Photo of Damager

    Damager

    • 122 Posts
    • 0 Reply Likes
    thanx man its working like a dream :)
    Photo of Sanja

    Sanja, Official Rep

    • 10698 Posts
    • 495 Reply Likes
    Great! Glad to hear it worked for you! =)
    Photo of Damager

    Damager

    • 122 Posts
    • 0 Reply Likes
    yes..but there is still this one:

    http://getsatisfaction.com/yola/topic... :)
    Photo of Damager

    Damager

    • 122 Posts
    • 0 Reply Likes





    .horizontalcssmenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    }

    /*Top level list items*/
    .horizontalcssmenu ul li{
    position: relative;
    display: inline;
    float: left;

    }

    /*Top level menu link items style*/
    .horizontalcssmenu ul li a{
    display: block;
    width: 105px; /*Width of top level menu link items*/
    padding: 8px 8px;
    border: 1px solid #202020;
    border-left-width: 0;
    text-decoration: none;
    background: url(http://i39.tinypic.com/k50jn5.jpg) center center repeat-x;
    color: #ffffff;
    font: bold 12px verdana;
    }

    /*Sub level menu*/
    .horizontalcssmenu ul li ul{
    left: 0;
    top: 0;
    border-top: 1px solid #202020;
    position: absolute;
    display: block;
    visibility: hidden;
    z-index: 100;
    }

    /*Sub level menu list items*/
    .horizontalcssmenu ul li ul li{
    display: inline;
    float: none;
    }

    /* Sub level menu links style */
    .horizontalcssmenu ul li ul li a{
    width: 110px; /*width of sub menu levels*/
    font-weight: normal;
    padding: 2px 5px;
    background: #707073;
    border-width: 0 1px 1px 1px;
    }

    .horizontalcssmenu ul li a:hover{
    background: url(http://i43.tinypic.com/ajtn6g.jpg) center center repeat-x;
    }

    .horizontalcssmenu ul li ul li a:hover{
    background: #000000;
    }

    * html p#iepara{ /*For a paragraph (if any) that immediately follows menu, add 1em top spacing between the two in IE*/
    padding-top: 1em;
    }

    /* Holly Hack for IE \*/
    * html .horizontalcssmenu ul li { float: left; height: 1%; }
    * html .horizontalcssmenu ul li a { height: 1%; }
    /* End */