Need Help Centering Menu - ImgShot..

Status
Not open for further replies.

Porney

Banned
Banned
209
2013
37
0
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
Code:
<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

Code:
<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!
 
11 comments
Check your CSS files for div with the tag of menu and post it here.

Here's the menu
Code:
/* 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
Code:
#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.
 
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; }
 
Last edited:
Do this,

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

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

Code:
#menu_links{
    width:800px;
}
with
Code:
#menu_links{
    width:100%;
}
 
Last edited:
Do this,

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

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

Code:
#menu_links{
    width:800px;
}
with
Code:
#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.

51e2f94f9ce0f.png


Do you know how I can fix that?

Thank you so much btw. It looks way better already.
 
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.
 
Status
Not open for further replies.
Back
Top