-
Jan 2nd, 2014, 01:52 AM
#1
Thread Starter
New Member
Help centering an HTML drop-down menu
Hello, I hope I've found the right place for help. I have a sports blog at www.phins-spotlight.com and as you can see I have an HTML menu near the top. (I did not write the code for this, someone helped me.) However, I'd like to either do one of two things: 1) center it horizontally; or 2) have it stretch to be 100% of the page width for any viewer.
Here is the relevant code. If someone could please help me I'd greatly appreciate it!
Code:
#jsddm {
margin: 0;
padding: 0px;
z-index:1000000000;
position:relative;
}
#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}
#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #FFFFFF;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#008e97), to(#005878));
background: -moz-linear-gradient(top, #008e97, #005878);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #000000 1px 0;
color: #FFFFFF;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
font-weight:bold;
text-decoration: none;
vertical-align: middle;
}
#jsddm li a:hover {
background: #008e97;
}
#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}
#jsddm li ul li {
float: none;
display: inline;
}
#jsddm li ul li a {
width: auto;
background: #008e97;
}
#jsddm li ul li a:hover {
background: #005878;
-
Jan 2nd, 2014, 05:16 AM
#2
Re: Help centering an HTML drop-down menu
Hi there ChrisJNelson,
and a warm welcome to these forums.
Making the highlighted additions to your code...
Code:
#jsddm {
float:right;
right:50%;
margin: 0;
padding: 0px;
z-index:1000000000;
position:relative;
}
#jsddm li {
position:relative;
left:50%;
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}
...will, hopefully, center your menu.
~ the original bald headed old fart ~
-
Jan 2nd, 2014, 02:07 PM
#3
Thread Starter
New Member
Re: Help centering an HTML drop-down menu
Originally Posted by coothead
Hi there ChrisJNelson,
and a warm welcome to these forums.
Making the highlighted additions to your code...
Code:
#jsddm {
float:right;
right:50%;
margin: 0;
padding: 0px;
z-index:1000000000;
position:relative;
}
#jsddm li {
position:relative;
left:50%;
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}
...will, hopefully, center your menu.
That did center it, thank you!
-
Jan 2nd, 2014, 02:27 PM
#4
Re: Help centering an HTML drop-down menu
No problem, you're very welcome.
~ the original bald headed old fart ~
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|