Follow us text placed in front of social sprite images all aligned on the same line

Is there a way to align the Follow Us text with sprite images?

Check out this jsfiddle link for more details!

<ul class="social_Emp">&nbsp;&nbsp;&nbsp;Follow us:
  <li class="Emp_twitter"><a href="{if $userInfo.TwitterPage} {$userInfo.TwitterPage}{else}#{/if}" alt="Twitter"></a></li>
  <li class="Emp_facebook"><a href="{if $userInfo.FBPage}{$userInfo.FBPage}{else}#{/if}" alt="Facebook"></a></li>
  <li class="Emp_google"><a href="{if $userInfo.GooglePage}{$userInfo.GooglePage}{else}#{/if}" alt="Google"></a></li>
</ul>
css

Answer №1

To ensure semantic correctness, it is recommended to move the Follow us: text outside of the ul block. Simply add display: inline-block; to the .social_Emp class to align the ul with other text elements:

http://jsfiddle.net/qeYQ4/

If you need to align the text with the icons, consider wrapping the text in a span with styles such as position: relative and top: 5px (adjust pixel value to suit your design):

http://jsfiddle.net/qeYQ4/1/

Answer №2

HTML

<ul class="social_Emp"><li>Join our community:</li>
              <li class="Emp_twitter"><a href="{if $userInfo.TwitterPage}{$userInfo.TwitterPage}{else}#{/if}" alt="Twitter link"></a></li>
              <li class="Emp_facebook"><a href="{if $userInfo.FBPage}{$userInfo.FBPage}{else}#{/if}" alt="Facebook link"></a></li>
              <li class="Emp_google"><a href="{if $userInfo.GooglePage}{$userInfo.GooglePage}{else}#{/if}" alt="Google link"></a></li>
            </ul>

CSS

.social_Emp {position: relative;margin: 10px auto;}
.social_Emp li {background: url(http://www.bestjob.my/mod/CSS/sprites/Sprite_vertical.png) no-repeat;
position: absolute;display: block;list-style: none;}
.social_Emp a {height:24px;display: block;}
.social_Emp .Emp_twitter {left:76px;background-position: 0 -600px;width:24px;height:24px;}
.social_Emp .Emp_facebook {left:106px;background-position: 0 -645px;width:24px;height:24px;}
.social_Emp .Emp_google {left:136px;background-position: 0 -844px;width:24px;height:24px;}

Live Example

Answer №3

.social_Emp {position: absolute;margin: 10px}
.social_Emp li {background-image: url(http://www.bestjob.my/mod/CSS/sprites/Sprite_vertical.png); background-repeat: no-repeat;}
.social_Emp a {height:24px;display: block;}
.social_Emp .Emp_twitter {left:20px;background-position: 0 -600px;width:24px;height:24px;float:left}
.social_Emp .Emp_facebook {left:50px;background-position: 0 -645px;width:24px;height:24px;float:left}
.social_Emp .Emp_google {left:80px;background-position: 0 -844px;width:24px;height:24px;float:left}

Feel free to give this a try!

Answer №4

Your use of absolute positioning for the li elements is causing them to be taken out of the regular document flow, preventing them from aligning inline. To fix this issue, you can set the position property to relative and display property to inline-block for the .social_Emp li CSS rule.

To see the corrected code in action, check out this JS Fiddle:

http://jsfiddle.net/e2ScF/68/

Below are the changes that were made to address the problem:

.social_Emp li {
    display: inline-block;
    position: relative;

}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling to keep navbar fixed with a blur effect without it colliding with body content as you scroll?

I'm looking to create a sticky navbar with a blur effect similar to the one seen on (try scrolling to see the blur effect on the nav). I want it to have the following structure: My HTML code is as follows: <header class="sticky z-10 top-10"> ...

htmlcsstailwind-css

Ensure the HTML table's <td> cell width automatically adjusts to accommodate the image, regardless of its dimensions

Has anyone encountered a strange issue while building an HTML table for an HTML email? Whenever I insert an image into a <td>, it causes the cell to expand to its maximum width, affecting all the columns to the right by resizing them to their minimum ...

htmlcsshtml-table

How to align a Bootstrap form to the center

Struggling to center the opt-in form on my website, I've created a "center" class with margin properties but it's not working as expected. .center { margin-left: auto; margin-right: auto; width: 100% } I suspect that one of Bootstrap's cla ...

csstwitter-bootstrap

The aesthetic of react-bootstrap and material ui aesthetics is distinctive and visually appealing

As I develop my web application, I have incorporated react-bootstrap for its React components based on Bootstrap. However, wanting to give my project a customized look inspired by Material design, I came across bootstrap-material-design. I am curious if I ...

cssreactjsmaterial-designmaterial-uireact-bootstrap

I'm having trouble getting my modal to open, it just displays the information on my page instead

I am encountering some difficulties with my model window. I would like it to open a modal that shows a larger version of the photo and description when the thumbnail is clicked. However, I have not been able to get it to work properly. The only time it pop ...

htmlcsspopupmodal-dialog

CSS transitions/transforms are failing to impact the necessary elements

I'm currently grappling with advanced transitions and transforms, and encountering some challenges with a section I'm developing. I've managed to get everything working as needed, except for the fact that there is an h5 element positioned ov ...

htmlcsscss-transitionscss-transforms

What is the best method for decreasing the space between ordered list elements?

Help with removing unwanted top margin space I have been experiencing an issue where I am getting extra space above the list items when using a ul before an ol. The result is that only the unwanted space appears above the circle and number 1. I attempted ...

htmlcss

Can the current website navigation be integrated into the blog script?

People might see me as a spoil sport for not using Wordpress, but I prefer a flatfile blog system for my small site. Currently, I am using the ozjournals-3.2 blog system. I need assistance in installing a header and site navigation on top of the blog page ...

cssheadernavigationblogs

Bottom section of a multi-level website with horizontal dividers

I was struggling with aligning divs next to each other, but I managed to find a solution. The only issue is that the text now aligns to the right instead of going below as it should. Typically this wouldn't be an issue since all content is within the ...

htmlcss

What could be causing the overlap of my input box with its parent container?

Here is the code snippet I am working with: <section className="createTodo-box"> // parent <div className="createTodo-inside"> // child <Input value={this.state.text} style={{ width: '200px' }} ...

htmlcss

Interactive CSS Video Gallery Slideshow

Is there a way to create a slideshow video gallery using CSS? I've looked everywhere but all I find are slideshow image galleries. If anyone has any resources or tips on how to do this, please share! This is the kind of video gallery I'm looking ...

htmlcssslideshowvideo-gallery

How can I implement two unique custom scrollbars on a single webpage?

I'm attempting to customize the scrollbar for a scrollable div separately from the scrollbar for the entire window. Despite my efforts, I haven't been successful in achieving two different colored scrollbars. *{ margin: 0; padding: 0; font-fam ...

htmlcsscss-selectors

The Art of Checkbox Design

Seeking help in replacing the default check mark on a checkbox with an image. Here is the code snippet I am currently using: <html> <head> <style> .bl { background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #175899), c ...

javascripthtmlcss

Tips for concealing labels until the submit button is activated

I am currently handling a project involving a Spring Controller and JSP. Within a JSP page, I have included a button labeled Process. Upon clicking this button, two radio buttons are displayed below it along with a Submit button. After tapping the Submit ...

javascriptjqueryhtmlcssjsp

The stunning fade effect of Magnific Popup enhances the visual appeal of the inline gallery

I'm currently using magnific popup for an inline gallery, but I'm not seeing any effects. I would like to have a fade effect when opening/closing the popup. Can someone assist me with achieving this? https://jsfiddle.net/gbp31r8n/3/ [Check o ...

javascriptjqueryhtmlcssmagnific-popup

What is the best way to change the color behind the SVG to black?

I'm having some trouble creating a signup form with SVG logos. The colors seem to clash and no matter what I do, the color doesn't change from white. My goal is to have the actual SVG logo remain white while the background behind it is black. He ...

htmlcsssvgfrontendbootstrap-5

The navigation bar extends beyond the container

First time diving into bootstrap and struggling with my items overflowing the container. Here's a snippet of my code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equi ...

htmlcssbootstrap-5

Creating customized JQuery UI tabs to perfectly accommodate the available horizontal space

Can JQuery UI Tabs be modified to fill the horizontal space and stack to the left? In order to achieve this, could we consider using a markup like the one below: <table width="100%"> <tr> <td> ...content... </td> ...

cssjquery-ui

The value entered is displaying as not defined

As a newcomer to the world of javascript, I am diving into creating a simple To Do list. The basic functionality is there, but I'm scratching my head trying to figure out why the input value in my code keeps returning undefined. The remove button is ...

javascripthtmlcsssass

How do I alter the color of a Vue 3 font awesome icon?

I am currently using Vue version 3.2.1 and have followed the official Font Awesome documentation for Vue 3 found at https://github.com/FortAwesome/vue-fontawesome. I also referenced a helpful video tutorial: https://www.youtube.com/watch?v=MoDIpTuRWfM Des ...

cssvue.jsfont-awesomevuejs3