How can I create 2 CSS images in this snippet without overlapping the text and links?

I have a snippet in a WordPress widget produces it:

<ul style="list-style-type: disc;">
<li><a title="Why Choose NetPrezence?" 
href="http://www.netprezence.net/choose-netprezence/">Why Choose NetPrezence?</a></li>

<li><a title="Meet the Founder of NetPrezence" href="http://www.netprezence.net/about-
me/">Meet the Founder</a></li>

<li><a title="Contact NetPrezence" href="http://www.netprezence.net/contact/">Contact 
NetPrezence</a></li>

<li><a title="Client Testimonials" href="http://www.netprezence.net/testimonials
/">Client Testimonials</a></li>

<li><a title="Porfolio" href="http://www.domain.com/portfolio
/">Portfolio</a></li>
</ul>

<p><strong>NetPrezence LLC</strong><br />12870 Farmington 
Rd.<br />Livonia, MI 48150<br />888-888-8888<br />∴ [email protected]</p>

The current output looks like this:

WordPress Widget

What I'd like to do is to add my company logo in the top-left, above everything, using CSS, as opposed to inserting an image -- without overlapping any text or links.

Also, I'd like to add an e-mail icon to the left of the e-mail address in the lower-left, where there's a ∴ symbol. But I don't want to cover up the e-mail address, of course.

Any guidance in helping me achieve this would be greatly appreciated!

Solutions

http://jsfiddle.net/TreeTree/qdX9Q/

You can use a :before on the ul to insert the logo. Unfortunately the email is just one p with no usable child elements so you may have to resort to some hardcoding like this:

ul:before {
    content:url('https://www.gravatar.com/avatar/');
}

p {
    position:relative;
}

p:before {
    display:block;
    position:absolute;
    background-image:url('https://www.gravatar.com/avatar/');
    background-size:15px 15px;
    content:'';
    width:15px;
    height:15px;
    left:0;
    bottom:0;
}

Similar questions

links overlapping one another
The links on my site (About, Gallery and Contact) overlap when you hover over them. When you have the mouse midway on the About tab the Gallery tab highlights and likewise when you have the mouse midway on the Gallery tab the Contact tab highlights. The same problem happen from the bottom tab working up. http://www.redechoevents.co.uk/
How to enlarge image without overlapping other elements?
My images in desktop view https://adsler.co.uk/find-an-event/ are flat. Want to increase their height so they look great in desktop too. However, 2 points. One, can't seem to find the correct css selector. Two, can't seem to do it without it overlapping other elements. I just want it to make it taller (proportionally of course) Html: Tried css: Not...
Randomly position images with no overlapping
I'm using Wordpress and using their code, I'm outputting the gallery uploads to a specific page as an unordered list of images. I'm wondering if there's a way to position these images absolutely within the container (which will be relative) using JS and without any overlapping? So, it must position them and then take note where that image is and ma...
Navigation with images overlapping into each other
I have to make a navigation with its elements overlapping into each other. See the picture for details. https://dl.dropbox.com/u/7551300/mock.png I have tried using ul li with display:table-row and display table-cell to ensure that all elements get equal widths in the div the ul is in. This is important because there will be several of these naviga...
Isotope images overlapping
I am having an issue with Isotope. I am using it for a filterable gallery, but sometimes (not all the time), some of the images overlap. http://www.rivka-photography.com/work/ It does not happen every time, you may have to refresh the page to see the problem. And for now I only witnessed it in Safari (latest version) on Mac. I am using imagesLoaded...
Navigation text overlapping in wordpress
Im using the whiteboard theme for wordpress. My navigation is aligned to the right hand side of my header, however the navigation text is overlapping, the two inks in the navigation overlap each other on the header. any idea why?

Also ask

We use cookies to deliver the best possible experience on our website. By continuing to use this site, accepting or closing this box, you consent to our use of cookies. To learn more, visit our privacy policy.