MyBB Community Forums

Full Version: Center in CSS
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
I'm pulling my teeth out here one by one.
I've been working on this since last night.

What I have going on is the jQuery Dropdown Nav from this thread:
http://community.mybb.com/thread-119435.html

I GIVE UP!
I have been customizing and working on it since damn near 12am last night. It's now 4:54pm.
No matter what I've tried, I just cannot get it centered. I solver all of my other problems. Which were it not fitting correctly if you minimized/panned your browser or are on a lower resolution display.

I did that with  min-width:1300px

But I for the life of me cannot get this thing centered, so it's in the same location on every single browser..
I am not a fan of CSS, it is my weakness. Please, I'm begging someone to help me out here.

You might find some uesless portions in here, when I said I've been trying everything I've really been trying everything.
I want the buttons to stay exactly the size they are as well as the text. But hell, if you can even implement my thead_bg into the buttons instead of a solid color, I would forever be in your debt for that as well, I tried already.
thead_bg: http://www.whiteyslair.com/images/MyRed/thead_bg.png
Index: http://www.whiteyslair.com

Please! Help me center this thing universally.
I will not be adding new buttons than what is already there, only more dropdown options.

CSS Section

/* remove the list style */
#menu {
	margin: auto;
	text-align: center;
}

#menu li {
	border: 3px solid #000;
    font-size:15px;
	font-family: 'Roboto Condensed', sans-serif;
  	border-radius: 5px;
    display:inline; 
    width:110px; 
      float:left; 
    background:#880303; 
    position:relative;
    z-index:500; 
    margin:0;
}

/* this is the parent menu */
#menu li a {
    display:block; 
    padding:8px 5px 0 5px; 
    font-weight:700;  
  font-size:15px;
    height:30px; 
    text-decoration:none; 
    color:#fff; 
    text-align:center; 
    color:#fff;
}

#menu li a:hover {
   background:#424242; 
    color:#fff;
}

/* submenu, it's hidden by default */
#menu ul {
    position:absolute; 
    left:0; 
  font-size:15px;
    display:none; 
    margin:0 0 0 -1px; 
    padding:0;
}

#menu ul li {
    width:110px; 
    font-size:15px;
	font-family: 'Roboto Condensed', sans-serif;
    float:left; 
  border-radius: 5px;
    border-top:2px solid #fff;
}

#menu ul a {
    display:block;  
    height:20px;
font-size:15px;
  	font-family: 'Roboto Condensed', sans-serif;
    padding: 8px 5px; 
    color:#fff;
}

#menu ul a:hover {
    text-decoration:underline;   
  	font-family: 'Roboto Condensed', sans-serif;
font-size:15px;
}

*html #menu ul {
    margin:0 0 0 -2px;
}

HTML in Header
<ul id="menu">
    <li><a href="http://www.whiteyslair.com"><img src="http://www.whiteyslair.com/images/icons/index.png"> Home</a></li>
    <li><a href="#"><img src="http://www.whiteyslair.com/images/icons/lightbulb.png"> Community</a>
        <ul>
            <li><a href="http://www.whiteyslair.com/index.php">Forums</a></li>
            <li><a href="http://www.whiteyslair.com/search.php">Search</a></li>
            <li><a href="http://www.whiteyslair.com/memberlist.php">Member List</a></li>
          <li><a href="http://www.whiteyslair.com/calendar.php">Calendar</a></li>
        </ul>
        <div class="clear"></div>
    </li>
    <li><a href="#"><img src="http://www.whiteyslair.com/images/icons/servers.png"> Servers</a>
    <ul>
        <li><a href="http://www.whiteyslair.com/portal.php?pages=servers">Server List</a></li>
        <li><a href="http://www.whiteyslair.com/showthread.php?tid=6">Ban Request</a></li>
        <li><a href="http://www.whiteyslair.com/showthread.php?tid=7">Ban Appeal</a></li>
    </ul>            
        <div class="clear"></div>
    </li>
  <li><a href="http://www.whiteyslair.com/subscription.php"><img src="http://www.whiteyslair.com/images/icons/subscriptions.png"><font color="yellow"> Subscribe</font></a></li>
  <li><a href="#"><img src="http://www.whiteyslair.com/images/icons/servers.png"> Tokens</a>
    <ul>
        <li><a href="http://www.whiteyslair.com/newpoints.php">Information</a></li>
        <li><a href="http://www.whiteyslair.com/newpoints.php?action=stats">Statistics</a></li>
        <li><a href="http://www.whiteyslair.com/newpoints.php?action=donate">Donate</a></li>
      <li><a href="http://www.whiteyslair.com/newpoints.php?action=shop">Shop</a></li>
    </ul>            
<li><a href="#"><img src="http://www.whiteyslair.com/images/icons/support.png"> Support</a>
   <ul>
         <li><a href="http://www.whiteyslair.com/misc.php?action=help">Help Documents</a></li>
     <li><a href="http://www.whiteyslair.com/showteam.php">Staff List</a></li>
        <li><a href="http://www.whiteyslair.com/contact.php">Contact Us</a></li>
      </ul>
        <div class="clear"></div>
    </li>
            </ul> 
if I am not mistaken about your requirement, it is similar to the solution suggested for this
suggestion is to add a fixed width for the menu - eg. #menu {width: 62%;}
(01-23-2015, 02:05 AM).m. Wrote: [ -> ]if I am not mistaken about your requirement, it is similar to the solution suggested for this
suggestion is to add a fixed width for the menu - eg. #menu {width: 62%;}

This worked a bit - but then it broke the min-width of the site.

It's okay now, though -- I couldn't take it anymore. I had to find a different one.
Even ditched the icons, looks 10x better then the blobby large buttons.
^ well, I do prefer css menu than the js menu Smile