CODEWITHSUNDEEP
cssimage
vishal
vishal

Reputation: 207

Image and Text overlapping

I have an anchor tag and i want to set the background of the anchor tag with an icon depending on the situation.

So i have the following classes:-

/* Folder Icons CSS */
.FolderOpen {
  width: 150px;
  height: 50px;
  background-image: url(../images/icon_folder_24x24.png);
  background-repeat:no-repeat;
  overflow: hidden;
}

.FolderClose {
  width: 150px;
  height: 50px;
  background-image: url(../images/icon_folder_24x24_closed.png);
  background-repeat:no-repeat;
  overflow: hidden;
}

The image sizes are 24x24

I have my achor tag as following:-

<a class="showFilesForFolder FolderClose" data-folderid="@folder.FolderId" data-personid="@Model.PersonId" style="cursor:pointer; text-decoration:none;"> <span>@folder.FolderName</span></a><br />

The image is not displaying to the full height and width.

Can you please help me so that the text doenot overlaps the image and image displays nicely?

Thanks in advance

Upvotes: 0

Views: 1942

Answers (6)

emerson.marini
emerson.marini

Reputation: 9348

You can play with padding (in this case, left), and the background image position, to give space for the anchor text not to overlap.

HTML

<a class="showFilesForFolder FolderOpen"><span>Folder open</span></a>
<br />
<br />
<a class="showFilesForFolder FolderClose"><span>Folder close</span></a>

CSS

a {
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    // The trick is here:
    padding-left: 30px;
}

/* Folder Icons CSS */
 .FolderOpen {
    width: 150px;
    height: 50px;
    // Position your background image
    background: url("http://www.thenetadvantage.co.uk/wp-content/themes/netadvantage/images/icon-linkedin.png") no-repeat top left;

}
.FolderClose {
    width: 150px;
    height: 50px;
    // Position your background image
    background: url("http://computer-forensics.sans.org/images/design/custom/icons/twitter-icon.png") no-repeat top left;
}

Working example: http://jsfiddle.net/qg7Ns/2/

Upvotes: 0

rajeshpanwar
rajeshpanwar

Reputation: 1233

you should use image tag inside your anchor tag. Then you can set css to get the right position of text and image.

Upvotes: 2

noob
noob

Reputation: 641

Use this : 

.folderClose {
    display:inline-block;
    width:40%;
    height:50px;
    text-align:center;
  background-image: url('../images/icon_folder_24x24_closed.png');
  background-repeat:no-repeat;
  overflow: hidden;
}

This works I hope.

Upvotes: 0

NinjaOnSafari
NinjaOnSafari

Reputation: 1016

try to use display: block on the anchor tag.

Upvotes: 0

Daan
Daan

Reputation: 31

Use padding and/or text-indent, fiddle the padding to fit your needs, 

padding: 5px 5px 5px 10px;

Padding goes from top clockwise to left, so top, right and bottom padding in the example are set to 5 px, the left padding to 10.

Upvotes: 0

Jon
Jon

Reputation: 6541

do you have a jsfiddle to see clearly?

Why dont you just float the text around an image?

Upvotes: 0

Related Questions