Drop down menu align to right

Discussion in 'CSS' started by amitdar, Dec 19, 2009.

  1. #1
    Hi everyone,
    This is my first post. hope to find some answers here :)

    Recently i have added javascript drop down menu to my site. My site is aligned to the right by dir="rtl" in the head.
    The drop down menu in aligned too to the right because the page direction in rtl.
    The problem is that i need to put the drop down menu inside a designed div (text-align: center) and for some weird reason if the div have any kind of design the drop down menu alignment is changed to the left.

    Please help me to get the drop down menu align to the right inside the designed div.

    To demonstrate the problem i have made a simple example found here:
    http://www.2shared.com/file/10092260/6f975bf9/dropdownmenu.html
     
    amitdar, Dec 19, 2009 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    So mistake #1, using javascript to do CSS' job.

    Gah, they suck. Took me a minute to find the blasted 'click here' to actually get the file. Great download service when the smallest link on the page is the one you want. (talk about sleazeball advertising bull, makes megaupload look legit)

    You example's code is not left aligining on the centered one here in Opera or FF... Or in IE - or are you referring to the alignment of the dropdown BOX being left justified to it's parent element? I'm going to assume that's what you mean.

    The reason that is happening is that the dropdown is absolute positioned off of it's parent. This positioning is done via left:0; - change that to right:0 and you should be ok... testing... wierd, it's ignoring the CSS declarations. I can only assume it's that scripting dicking with you.

    Which is just one of many reasons why javascript shouldn't be used to do CSS' job. Peeking into the javascript - christ, what a disaster. Lemme guess? Dynamic Drive? Do yourself a HUGE favor and forget that site even EXISTS. I fell into that same trap a decade ago, and their 'gee aint it neat' scripted nonsense is as bad today as it was then - worse since they are still advocating using javascript for *** like menus and rollovers.

    Ok, I see what's happening. The script like most javascripts is pulling the positioning info manually, and that's what's borking your positioning... You could rewrite the script to change that, but honestly I'd throw ALL of that javascripted asshattery away, use CSS, and only throw scripting at the one browser that needs it, IE6/earlier. The alignment problem has nothing to do with CSS, and everything to do with using javascript for something that can be done better with CSS.

    So my advice, throw away the javascript, use a CSS menu, and throw something like peterned's hover-anywhere at it for IE 6/earlier. You've got a link to CSS drive, look in there - or research suckerfish. (though I use neither and just write flat). Since people without javascript won't even get your menu, since the links in your menus will be invisible to search engines resulting in your site's sub-pages not getting indexed, and every other problem associated with them, javascript for menus is a giant steaming pile of /FAIL/ - it was a bad idea a decade ago, and has no place on a modern site.
     
    deathshadow, Dec 19, 2009 IP