4 {{ upvoteCount | shortNum }}
4 {{ upvoteCount | shortNum }}

Strange issue centering menu ul

by PHPSpaZ
3 replies
  • WEB DESIGN
    • |
I have a bit of a problem centering this ul. I dont claim to be an awesome designer as I focus on programming, but alas the time has come for me to learn...
SCHOOL ME!
I have tried putting the following ul construct into centered divs, tables, and even trying to center the ul construct itself ie: <ul align="center"> but to no avail. You can see it live at
Web development: programming: marketing, New media printing, and video production
The header is setting right where I want it but the menu should be directly below the header and I cannot get it to center there. The following are my index and home.css pages:

***INDEX***
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Web development: programming: marketing, New media printing, and video production</title>

<link href="home.css" rel="stylesheet" type="text/css" />

</head>

<body>

<table class="page">

<table align="center" id="header">

</table><!-- header -->

<!--

<center><th id="home"><ul><li class="">About Us</li><li>Contact Us</li></ul></th><th id="web_design"></th><th id="web_programming"></th><th id="web_marketing"></th><th id="examples"></th></center>

</table><!-- main_menu_bar -->

<ul id="jsddm">
<li class="jsddm_li_invis" onmouseover="this.className='jsddm_li';" onmouseout="this.className='jsddm_li_invis';"><a href="#">JavaScript</a>
<ul >
<li><a href="#">Drop Down Menu</a></li>
<li><a href="#">jQuery Plugin</a></li>
<li><a href="#">Ajax Navigation</a></li>
</ul>
</li>
<li class="jsddm_li_invis" onmouseover="this.className='jsddm_li';" onmouseout="this.className='jsddm_li_invis';"><a href="#">Effect</a>
<ul>
<li><a href="#">Slide Effect</a></li>
<li><a href="#">Fade Effect</a></li>
<li><a href="#">Opacity Mode</a></li>
<li><a href="#">Drop Shadow</a></li>
<li><a href="#">Semitransparent</a></li>
</ul>
</li>
<li class="jsddm_li_invis" onmouseover="this.className='jsddm_li';" onmouseout="this.className='jsddm_li_invis';"><a href="#">Navigation</a></li>
<li class="jsddm_li_invis" onmouseover="this.className='jsddm_li';" onmouseout="this.className='jsddm_li_invis';"><a href="#">HTML/CSS</a></li>
<li class="jsddm_li_invis" onmouseover="this.className='jsddm_li';" onmouseout="this.className='jsddm_li_invis';"><a href="#">Help</a></li>
</ul>

</table><!-- page -->

</body>

</html>


**/INDEX**

**HOME.CSS**

@charset "utf-8";

/* CSS Document */

.page{

width:850px;

height:100%;

}

table#header{

width:830px;

height:140px;

background-image:url(IMAGES/header.png);

}

#jsddm
{ margin: 0;
padding: 0;}

.jsddm_li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial;}

.jsddm_li a
{ display: block;
background: #20548E;
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
color: #EAFFED;
white-space: nowrap;}

.jsddm_li a:hover
{ background: #1A4473;}

.jsddm_li_invis
{ float: left;
list-style: none;
font: 12px Tahoma, Arial;}

.jsddm_li_invis a
{ display: block;
background: #20548E;
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
color: #EAFFED;
white-space: nowrap;}

.jsddm_li_invis a:hover
{ background: #1A4473;}

.jsddm_li_invis ul
{ margin: 0;
padding: 0;
position: absolute;
visibility:hidden;
border-top: 1px solid white;}


.jsddm_li ul
{ margin: 0;
padding: 0;
position: absolute;
visibility:visible;
border-top: 1px solid white;}

.jsddm_li ul li
{ float: none;
display: inline;}

.jsddm_li ul li a
{ width: auto;
background: #9F1B1B;}

.jsddm_li ul li a:hover
{ background: #7F1616;}

.jsddm_li_invis ul li
{ float: none;
display: inline;}

.jsddm_li_invis ul li a
{ width: auto;
background: #9F1B1B;}

.jsddm_li_invis ul li a:hover
{ background: #7F1616;}

**/HOME.CSS**

So does anyone have any ideas on why my code went cooky?
#centering #issue #menu #strange
  • Profile picture of the author rhinocl
    I think your problem is here in the css
    .jsddm_li
    { float: left;
    list-style: none;
    font: 12px Tahoma, Arial;}
    Signature
    cheap search engine optimization
    {{ DiscussionBoard.errors[6316840].message }}
    • Profile picture of the author Karen Blundell
      try changing

      #jsddm
      { margin: 0;
      padding: 0;}

      to this:

      #jsddm
      { margin: 0 auto;
      padding: 0;}

      if that doesn't work put your list in it's own div and then use margin: 0 auto; to center it.
      Signature
      ---------------
      {{ DiscussionBoard.errors[6317110].message }}
  • Profile picture of the author htmlthis
    Hello, the solution is simple. Remove the 30% padding from the div that wraps around the ul. Set text-align:center; to it and then set display:inline-block; to the ul. You will have to set display:inline for IE6 and IE7 for that to work there too.
    The other solution will be to remove the padding 30% (never try to center anythin gwith paddings) and add this to your ul { margin: 0 auto;width: 485px; } The width can be anything, but in this case it's just about the size of your menu. The better solution is the first one since it will work with any width . Good luck!
    Oh and, don't forget that you can always get somebody to code your HTML and CSS for you. It's always best that you let experts handle these, chances are that they will do a better job at it, and you can use your time for your own area of expertise.
    Signature

    Convert your PSD to HTML
    Convert your Image to Code
    Convert PSD to HTML
    Web Design Gallery

    {{ DiscussionBoard.errors[6318730].message }}

Trending Topics