Need Help Centering Menu - ImgShot..

[Porney]

So i'm working on my image hosting website. However I need some help centering my menu.



I know a lot of you work with imgshot so you may be able to help me.

I went into
inc/menu.php as well as inc/user_menu.php and tried adding <center> tags.

But it did not center it.

Here's what is in the files.

inc/menu.php

<div id="menu">

    <div id="menu_links">

        <ul>
            <li><a href="index.php">Home</a></li>
            <li><a href="page-contact.html">Contact</a></li>
            <li><a href="page-DMCA.html">DMCA</a></li>

            <?php if(isset($_SESSION['user_name'])) {
            ?>
            <li><a href="myaccount.php">My Account</a></li>
            <li><a href="logout.php">Log out</a></li>
            <?php
             } else {
            ?>
            <li><a href="register.php">Register</a></li>
            <li><a href="login.php">Login</a></li>
            <?php } ?>

            <?php
            if(isset($_SESSION['user_level']) && $_SESSION['user_level'] == 5){
                echo "<li><a href='admin'>Admin Panel</a></li>";
            }
            ?>
        </ul>

    </div>
</div>

and here is inc/user_menu.php

<div id="content_menu">


    <div id="menu_links">
        <ul>

            <li><a href="myaccount.php"><img border="0" style="position:absolute; margin-top:-5px;" src="css/img/home.png" alt="H" /><span class="invisible">Home</span></a></li>
            <li><a href="mysettings.php">My Settings</a></li>
            <li><a href="my_images.php">Images</a></li>
            <li><a href="galleries.php">Galleries</a></li>
            <li><a href="support.php">Support</a></li>
            
            
        </ul>
    </div>
</div>

So obviously
inc/menu.php is for the top header and inc/user_menu.php is for the bottom one.

I tried adding center tags into both files. It did not work.

Can someone who's familiar with this help me out?
Thank you!

 

[ahmmob]

send me you code in pm. I will fix it and please make sure that it should only contain html not php

 

[Porney]

The code in the thread is the code for the menu. What am I supposed to send?

 

[deeTrix]

Check your CSS files for div with the tag of menu and post it here.

 

[MR.KiDO]

Use padding in css

 

[Porney]

Check your CSS files for div with the tag of menu and post it here.

Here's the menu

/* Menu */
#menu{
    background-image: url("img/menu_background.png");
    background-repeat: repeat-x;
    height:40px;
    width: 100%;
    margin:0px;
    
}
#menu_links{
    width:800px;
}
#menu_links ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
#menu_links li{
    float: left;
    margin-left:1px;
    margin-top:13px;
}
#menu_links a{
    background-color: #322f32;
    padding:10px;
    margin-top:5px;
    font-size:14px;
    color: white;
    text-decoration:none;
    font-weight:bold;
}
#menu_links a:hover{
    background-color:#514c52;
}
#menubutton{
    width:700px;
    height:40px;
    margin:auto;
    cursor: pointer;
}
#menubutton img{
    float:right;
}

/* End menu */

And here's the content menu

#content_menu{
    width:780px;
    height:50px;
    margin:auto;
}

I tried messing with it a little bit, I tried changing values etc. I was able to move it, but I couldn't get it in the center.

 

[D4rk]

PM RT , he's a mod here

he will help u

PS: try to add this at the bottom of the menu content

text-align:center;

 

[Porney]

Tried adding the float align center. Didn't work.

I did manage to move the top menu.



It's almost in the center.

All I did was change the align to the right. When I tried center it was way off.

I boded what I changed in the CSS



#menu_links li{ float: left; margin-left:1px; margin-top:13px; }

 

[MR.KiDO]

Do this,

Replace

#menu_links ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

with

#menu_links ul{
    list-style: none;
    margin: 0;
    padding: 0 0 0 40%;
}

then

#menu_links{
    width:800px;
}

with

#menu_links{
    width:100%;
}

 

[Porney]

Do this,

Replace

#menu_links ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

with

#menu_links ul{
    list-style: none;
    margin: 0;
    padding: 0 0 0 40%;
}

then

#menu_links{
    width:800px;
}

with

#menu_links{
    width:100%;
}

wow nice! The top menu is in the center now.



But the other menu got moved as well, it seems to be off a little bit.

Do you know how I can fix that?

Thank you so much btw. It looks way better already.

 

[MR.KiDO]

That would require a new tag to be added.

 

[Porney]

Thank you to everyone who replied and helped keep this thread active. I finally got both menus centered.



I'm very happy with the results.


If an admin or mod comes by, feel free to close this thread.