CODEWITHSUNDEEP
htmlcssmenucss-floatmenubar
Samer El Gendy
Samer El Gendy

Reputation: 1683

align css menu text left besie menu image

i am having a simple csss menu, where it contains background images aligned to left, and i want text to float left of image too. html:

<div class='mmenu'><ul><li><a id="li6" class="menu-news" href= "viewNews.php" >News</a></li></ul></div>

css:

.mmenu{
    height: fit-content;
    width: fit-content;
    float: left;
    position: fixed;
}
.mmenu ul
{
    margin-top: 20px;
    margin-left: 15px;
}
.mmenu li
{
    margin-bottom: 0px;
    width: 150px;
    color: white;
}
.mmenu a {
    font-size:14px;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight:bold;
    display: block;
    padding-top:12px;
    padding-bottom: 7px;
    text-align:left;
    padding-right: 12px;
    padding-left: 15px;
    position: relative;
}
.menu-news{
    background-image:url('menu icons/css-sprite.png');
    background-repeat: no-repeat; background-position:5px 17px;
}

the problem now, is that menu text is floating above the image, so how to make space between the image and the text

Upvotes: 0

Views: 1003

Answers (4)

Christofer Eliasson
Christofer Eliasson

Reputation: 33865

If I understand you correctly, you could add padding to the menu-news class, to push the text so that it doesn't lay on top of the image in the background.

.menu-news{
    background-image:url('menu icons/css-sprite.png');
    background-repeat: no-repeat; 
    background-position:5px 17px;
    padding-left: 50px; /* Or whatever padding is appropriate */
}

Upvotes: 2

SRN
SRN

Reputation: 2455

increase the padding on the left
http://tinkerbin.com/YdDw9q3E

Upvotes: 1

RAN
RAN

Reputation: 1453

You were used background-position for your background-image once you can change image position otherwise,

Use Padding-left to your class menu-news or apply padding to .mmenu a{ }

example:

.mmenu a {
    font-size:14px;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight:bold;
    display: block;
    padding-top:12px;
    padding-bottom: 7px;
    padding-left: xx px /* added now */
    text-align:left;
    padding-right: 12px;
    padding-left: 15px;
    position: relative;
}

Upvotes: 1

Kwon
Kwon

Reputation: 390

Adjust the background position as desired or pad the text.

Upvotes: 1

Related Questions