css/html error

Umbreon

Paragon
Joined
Jul 22, 2009
Messages
1,551
Reaction score
2
FP$
1,032
I need help, look at this:

http://promote-my-web.info/forum

see the top, the image is stuck at the top. It doesn't show the logo completely. How do I fix that?

CSS:
Code:
/* Misc */

#linkslogo  {
    background-image: url("{T_THEME_PATH}/images/headerlinks.png");
    background-repeat: no-repeat;
    background-position: left;
}

#linkslogo li  {
        list-style-type:none;
	display:inline;
        padding:0px;
}

HTML:
Code:
<div id="linkslogo">
<li id="linkslogo">
<!-- IF S_USER_LOGGED_IN -->
                <li<!-- IF $CA_PAGE == 'ucp' --> class="current"<!-- ENDIF -->>
                    <a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="u">{L_PROFILE}</a>
                    <span>&bull;</span> 
                </li>
                <!-- IF S_DISPLAY_PM -->
                <li<!-- IF $CA_PAGE == 'pm' --> class="current"<!-- ENDIF -->>
                    <a href="{U_PRIVATEMSGS}" title="{L_PRIVATE_MESSAGES}">{PRIVATE_MESSAGE_INFO}</a>
                    <span>&bull;</span>
                </li>
                <!-- ENDIF --> 
                <!-- IF U_RESTORE_PERMISSIONS -->
                <li>
                    <a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a>
                    <span>&bull;</span>
                </li>
                <!-- ENDIF -->
            <!-- ENDIF -->
            <li<!-- IF $CA_PAGE == 'faq' --> class="current"<!-- ENDIF -->>
                <a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a>
            </li>
            <li<!-- IF $CA_PAGE == 'search' --> class="current"<!-- ENDIF -->>
                <span>&bull;</span>
                <a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH}</a>
            </li>
            <!-- IF S_USER_LOGGED_IN and S_DISPLAY_MEMBERLIST -->
                <li<!-- IF $CA_PAGE == 'users' --> class="current"<!-- ENDIF -->>
                    <span>&bull;</span>
                    <a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a>
                </li>
            <!-- ENDIF -->
            <!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) -->
                <li<!-- IF $CA_PAGE == 'register' --> class="current"<!-- ENDIF -->>
                    <span>&bull;</span>
                    <a href="{U_REGISTER}">{L_REGISTER}</a>
                </li>
            <!-- ENDIF -->
            <li<!-- IF $CA_PAGE == 'login' --> class="current"<!-- ENDIF -->>
                <span>&bull;</span>
                <a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="l">{L_LOGIN_LOGOUT}</a>
            </li>
        </ul>
    </div>
<!-- ENDIF -->
 
Code:
/* Misc */

#linkslogo  {
    background-image: url("{T_THEME_PATH}/images/headerlinks.png");
    background-repeat: no-repeat;
    background-position: left;
    width:123px;
    height:123px;
}

#linkslogo li  {
        list-style-type:none;
   display:inline;
        padding:0px;
}

Change the width and height i added. Should work, atleast it does when i have problems like this.
 
Thanks man 😀 Ill rep ya soon...

another problem is, how do I put that link in the center of that space of the image.
 
This text?

# FAQ
# • Search
# • Register
# • Login

I am not 100% sure, but try changing the padding on

Code:
#linkslogo li  {
        list-style-type:none;
   display:inline;
        padding:0px;
}

Start off with say 20px padding to see if it moves this links, if it does just keep adding more until you get it to the place you want the links to be.
 
Antarctic said:
Code:
/* Misc */

#linkslogo  {
    background-image: url("{T_THEME_PATH}/images/headerlinks.png");
    background-repeat: no-repeat;
    background-position: left;
    width:123px;
    height:123px;
}

#linkslogo li  {
        list-style-type:none;
   display:inline;
        padding:0px;
}

Change the width and height i added. Should work, atleast it does when i have problems like this.

Antarctic, this wont fix it, adding width and height to it wont make it centered.

It's because you have it set to have a background position of 'left'. Use this...

Code:
/* Misc */

#linkslogo  {
    background-image: url("{T_THEME_PATH}/images/headerlinks.png");
    background-repeat: no-repeat;
    background-position: center;
}

#linkslogo li  {
   list-style-type: none;
   display: inline;
   padding: 0;
}
 
fixed... but im still stuck on how to put the links in the center of that free space
 
Back
Top Bottom