How to make url be under list backimage in HTML unorderedlist?

Question

3.00/5 (1 vote)

See more:

Hello, friends:

I am designing navigation bar using list and I have set a certain background image for the li tag and I've wrote a tag inside li tag as the code below.

The problem is that the text in a tag showed above the image in li, I want it to be showed under the image, how can I do it?

What I have tried:

PHP

<li style="background: ('images/nav-bar/home.png') no-repeat center 0px;">
                                                    <a href="index.php">
                                                        Home
                                                    </a>
                                                </li>

                                                <li style="background: ('images/nav-bar/products.png') no-repeat center 0px">
                                                    <a href="services.php">
                                                        Services
                                                    </a>
                                                </li>

                                                <li style="background: ('images/nav-bar/downloads.png') no-repeat center 0px">
                                                    <a href="index.php">
                                                        Downloads
                                                    </a>
                                                </li>

                                                <li style="background: ('images/nav-bar/about.png') no-repeat center 0px">
                                                    <a href="index.php">
                                                        About Us
                                                    </a>
                                                </li>

                                                <li style="background: ('images/nav-bar/faqs.png') no-repeat center 0px">
                                                    <a href="index.php">
                                                        Faqs
                                                    </a>
                                                </li>

                                                <li style="background: ('images/nav-bar/contact.png') no-repeat center 0px">
                                                    <a href="contact.php">
                                                        Contact Us
                                                    </a>
                                                </li>

and this is the css:

PHP

ul#nav{
    direction:rtl;
    float:left;
}
ul#nav li{
    display:inline-block;
    height:85px;
}

ul#nav li a:hover{
    color:orange;
    text-align:center;
}

ul#nav li a{
    vertical-align:basline;
    font-size:18px;
    font-weight:bold;
    display:block;
}

Posted 22-Jun-16 0:10am

Ma'd Saeed

Updated 20-Dec-16 3:47am

v4

Add a Solution

Comments

Kornfeld Eliyahu Peter 22-Jun-16 8:45am

What is it: background: removed('images/nav-bar/products.png')?

Richard Deeming 22-Jun-16 11:12am

The site sometimes swallows certain CSS constructs. I'm guessing that was originally:
background: url('...');

Ma'd Saeed 22-Jun-16 15:52pm

it's an error, the site automatically added 'remove' word on my code!

Ma'd Saeed 22-Jun-16 15:52pm

it's an error, the site automatically added 'remove' word on my code!

Richard Deeming 22-Jun-16 11:17am

The background image is precisely that - it puts an image in the background of the element. The content of the element will always appear above the background of the element, and there's no way to change that.

Are you trying to use the images to replace the text?

Ma'd Saeed 22-Jun-16 15:53pm

no, I am trying to make the text under the image.

Sergey Alexandrovich Kryukov 22-Jun-16 18:55pm

What does it mean, "under": in Y or Z direction? Perhaps the image should not be background, just <img> element.
—SA

Sinisa Hajnal 23-Jun-16 2:51am

You should remove background image and instead put it inside anchor tag. <a><img></img></a>. Leave the text empty, fill out title, alt, src and href properties and you're done.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Member 12656556 · Answer 1 · 2016-12-20T03:47:00

Solution 1

Add below styles your style.

CSS

ul#nav li {
    width: 85px;
    margin: 0 auto;
    position: relative;
}

CSS

ul#nav li a {
    position: absolute;
    right: 0;
    left: 0;
    width: 100%;
    bottom: 0;
    text-align: center;
}

It will appear text below image.

Posted 20-Dec-16 3:47am

Member 12656556