Jump to content

Problems aligning dropdown menu


Recommended Posts

Hello. I have some problems aligning a new dropdown menu here: http://byvejen.dk/lb/transport The dropdown menu will show if you hover your mouse over the name in the top right corner.. Here's the code: Header:

#header {width:100%; height:45px; background-color:#20558a; margin:0; padding:0;}			#header .container {width:960px; height:45px; padding:0; margin:0px auto 0px auto;}			#header .container .columns {height:45px; text-align:left; padding:0; margin:0;}					#header .container .columns .logo {float:left; width:210px;}					#header .container .columns .nav {float:left; width:200px; height:45px;}							#header .container .columns .search {float:left; width:380px;}					#header .container .columns .profile {float:left; width:168px; height:45px; border-right:1px #f7f8f9 solid; border-right:1px #f7f8f9 solid;}		

Dropdown menu:

#jsddm {width:auto; padding:0; margin:0px auto 0px auto; text-align:center;} 	#jsddm li {list-style:none; font-size:14px; margin:0; padding:0;}		#jsddm li a {background:#20558a; text-decoration:none; color:#FFF; font-weight:bolder; white-space:nowrap; margin:0; padding:0;}		#jsddm li ul {float:right; width:168px; position:absolute; margin:9px 0px 0px 770px; padding:10px; visibility:hidden; border-right:1px #1b4875 solid; border-bottom:1px #1b4875 solid; border-left:1px #1b4875 solid; z-index:2; text-align:left; background: #9bafc2;}				#jsddm li ul li	{display:inline; float:none; z-index:2; font-size:14px; font-weight:lighter; background-repeat:no-repeat; padding-left:22px; background-color:#9bafc2;}				#jsddm li ul li a {background-color:inherit;}				#jsddm li ul li a:hover {color:#20558a;}				#jsddm li ul li.min_profil {float:left; font-size:18px; background-image:url(../images/16x16_icons/user.png); background-position:0px 3px; padding-bottom:10px;}				#jsddm li ul li.rediger_profil {background-image:url(../images/16x16_icons/user_edit.png);}				#jsddm li ul li.rediger_annoncer {background-image:url(../images/16x16_icons/application_edit.png);}				#jsddm li ul li.mine_udlejninger {background-image:url(../images/16x16_icons/application_side_expand.png);}				#jsddm li ul li.mine_bookinger {background-image:url(../images/16x16_icons/application_side_contract.png);}

And the HTML:

<div id="header">	<div class="container">		<div class="columns">			<div class="logo">				<h1><a href="http://byvejen.dk/lb/">LejeBasen.dk</a></h1>			</div>			<div class="nav">				<--content-->			</div>			<div class="search">				<--content-->			</div>			<div class="profile">				<ul id="jsddm">					<li><a href="#">Casper Strømgren</a>						<ul>							<li class="min_profil"><a href="#">Min profil</a></li>							<li class="rediger_profil"><a href="#">Rediger profil</a></li>							<li class="rediger_annoncer"><a href="#">Rediger annoncer</a></li>							<li class="mine_udlejninger"><a href="#">Mine udlejninger</a></li>							<li class="mine_bookinger"><a href="#">Mine bookinger</a></li>						</ul>					</li>				</ul>				</div>		</div>	</div></div>

Now theres two problems.. First of all the two borders to the right and the left on the "profile" div wont show up in the header. And secondly, the name (Here its Casper Strømgren) isn't centered right in the div. I really hope someone can help, this has been driving me crazy for hours now..

Link to post
Share on other sites

(1)The short-hand declaration for border should be in this order:

  • width
  • type
  • color

The .profile selecector should be:

.profile{border-right: width type color} //There are even two border declarations there, remove one 

(2) add

text-align:center

to '#jsddm li a' selector. Give those a shot!

Edited by eTianbun
Link to post
Share on other sites

Thanks eTianbun It seems the name i centered right now.. But the border still wont show.I changed the .profile selector properties to this:

#header .container .columns .profile {float:left; width:168px; height:45px; border-right:1px solid #f7f8f9; border-left:1px solid #f7f8f9;} 

I need a border on both sides.

Link to post
Share on other sites

The profile container is in a different location compared to website location, and remove jquery script from top of page and place between <head>...</head>, placing it there forces it into Quirks mode, causing IE especially to freak out, and go all over the place, more than it normal does. Now you have corrected declaration, and set it for RIGHT and LEFT it should work, clear cache and reload.

  • Like 1
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...