Having difficulty including text in the website header

I'm struggling to add text on the right side of my header. I have placed small images on the right side of the header, slightly below, and now I want to insert some text above them but I can't seem to get it to work.

This is what I'm trying to achieve:

Is this a padding or margin issue? 

<body>    
<div class="container">
    <div class="header"><b style="font-size:20px; float: right">'RAASHFC' to 56161</b>
    <a href="#Raas"><img src="img/Raas.png" class="logo"></img></a>
    <a href="#insta"><img src="img/insta.png" class="social"></img></a>
    <a href="#tw"><img src="img/twitter.png" class="social"></img></a>
    <a href="#fb"><img src="img/facebook.png" class="social"></img></a>
</div>

.css source

.social {
 float: right;
 width: 50px;
 height: 25px;
 margin-left: 10px;
 margin-top: 75px;
 text-decoration: none;
}

Can anyone assist me with this?

csshtml

Answer №1

 .header > B
 {
    text-align: right;
    font-size: 20px;
 }
 .social {
    position: absolute; 
    right:0;
    top: 0;
    text-align: right;
    }
<div class="container">
        <div class="header">
          <a href="#Raas"><img src="img/Raas.png" class="logo"></img></a>
          <div class="social">
             <b>'RAASHFC' to 56161</b>
             <div>
             <a href="#insta"><img src="img/insta.png"></img></a>
             <a href="#tw"><img src="img/twitter.png"></img></a>
             <a href="#fb"><img src="img/facebook.png"></img></a>
             </div>
           </div>
        </div>
    </div>

Hope this code snippet serves your needs!

Answer №2

By applying the float:right property to your images without including their containing element (the anchor tag), they may not align properly. Consider relocating your "social" class to the anchor tags, or even creating a new container for all these anchors and assigning it there instead.

Answer №3

I've included three variations of code snippets, so take a look and see which one suits your needs best: 

.social {
width: 50px;
height: 25px;
text-decoration: none;
}

#icons{
float:right;
}
<body>
<div class="container">
    <div class="header">
        <a href="#Raas"><img src="img/Raas.png" class="logo"></a>
       <b style="font-size:20px; float: right">'RAASHFC' to 56161</b>
       </div>
      <div id="icons">
      <a href="#insta"><img src="img/insta.png" class="social"></a>
      <a href="#tw"><img src="img/twitter.png" class="social"></a>
      <a href="#fb"><img src="img/facebook.png" class="social"></a>
        </div>
  </div>
   

    .social {
    width: 50px;
    height: 50px;
    text-decoration: none;
      }
    #icons{
         float:right;
     }
#insta,#fb,#twit{
display:inline-block;
}
label{
font-weight:bold;
}
     <body>
    <div class="container">
        <div class="header">
            <a href="#Raas"><img src="img/Raas.png" class="logo"style="float: left"></a>
           <b style="font-size:20px; float: right">'RAASHFC' to 56161</b>
           </div>
      <br/>


      <br/>
      <div id="icons">
          <div id="insta">
               <label>Instagram</label><br/>
                <a href="#insta"><img src="https://5a5a57ff32a328601212-ee0df397c56b146e91fe14be42fa361d.ssl.cf1.rackcdn.com/icon/instagram_logos_glyph/03H5cHNMt-Jni4pe9u+7/glyph-logo_May2016_200.png" class="social"></a>
                    </div>
        <div id="fb">
               <label>Facebook</label><br/>
                <a href="#insta"><img src="https://cdn3.iconfinder.com/data/icons/inside/PNG/256x256/icontexto-inside-facebook.png" class="social"></a>
                    </div>
        <div id="twit">
               <label>Twitter</label><br/>
                <a href="#insta"><img src="http://vignette4.wikia.nocookie.net/simpsons/images/1/11/Twitter_bird_icon.png/revision/latest?cb=20111228065136" class="social"></a>
                    </div>
        </div>
      </div>
       

.social {
    width: 50px;
    height: 50px;
    text-decoration: none;
      }
    #icons{
         float:right;
      margin-right:30%;
     }
#insta,#fb,#twit{
display:inline-block;
}
label{
font-weight:bold;
}
<body>
    <div class="container">
        <div class="header">
            <a href="#Raas"><img src="img/Raas.png" class="logo"style="float: left"></a>
           <b style="font-size:20px; float: right">'RAASHFC' to 56161</b>
           </div>
      <br/>

               
      <br/>
      <div id="icons">
          <div id="insta">
               <label>Instagram</label><br/>
                <a href="#insta"><img src="https://5a5a57ff32a328601212-ee0df397c56b146e91fe14be42fa361d.ssl.cf1.rackcdn.com/icon/instagram_logos_glyph/03H5cHNMt-Jni4pe9u+7/glyph-logo_May2016_200.png" class="social"></a>
                    </div>
        <div id="fb">
               <label>Facebook</label><br/>
                <a href="#insta"><img src="https://cdn3.iconfinder.com/data/icons/inside/PNG/256x256/icontexto-inside-facebook.png" class="social"></a>
                    </div>
        <div id="twit">
               <label>Twitter</label><br/>
                <a href="#insta"><img src="http://vignette4.wikia.nocookie.net/simpsons/images/1/11/Twitter_bird_icon.png/revision/latest?cb=20111228065136" class="social"></a>
                    </div>
        </div>
      </div>

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

Center align a font-awesome icon vertically next to a paragraph of text

Is there a way to align a font-awesome icon on the left side of a text paragraph while keeping the text on the right side, even if it's longer and wraps underneath the icon? I've tried various code snippets but haven't found a solution yet. ...

htmlcss

I am unable to retrieve data using JavaScript

I am struggling to fetch data with JavaScript and display it in the console. Can anyone point out what I might be doing incorrectly? main.js // ADD TO CART $("#addToCartBtn").on('click',function(){ var _qty=$("#productQty") ...

javascripthtmldjangodjango-templates

Is it possible to automatically refresh a webpage with the same URL when accessed on the same server?

Is there a way to trigger a URL page refresh using JS code located on the same server? For example, I have a URL page open on multiple devices connected to the same server. How can I ensure that when I click 'Update,' the page refreshes simultan ...

javascriptphpjqueryhtml

Emphasizing hyperlinks according to the user's scrolling location

Currently, I am attempting to create a feature where links are highlighted when the user scrolls over the corresponding section on the page. However, there seems to be an issue with the functionality as Link 2 is highlighting instead of Link 1 as intende ...

javascriptjqueryhtmlcss

What is the best way to create a blurred effect on an image during loading, and then transition to a sharp image once it is fully loaded?

I'm currently working on a project where I want the images to display as a blurred preview initially, and then become clear once fully loaded. This is similar to the feature seen on Instagram, where the app shows a blurred image before displaying the ...

javascripthtmljquerycss

Issues with footers in IE 10/11 and Edge when using Grid layout

In the latest versions of Chrome, Firefox, Opera, IE 10/11 and Edge, the Grid layout below works perfectly fine. The only issue is with the Microsoft browsers where the footer fails to start scrolling when the content exceeds the screen size, leaving it fi ...

htmlcssflexboxcss-grid

Redirecting a CSS link on a website

I have a webpage with a "read more" option that redirects to the About Us page. When I click on "read more", the About Us page opens at the top, but I want it to redirect to the bottom of the About Us page. How can I achieve this? ...

css

The calendar on the Datetimepicker is not appearing in the proper position

I have encountered an issue while using Eonasdan bootstrap datetimepicker in a paramquery grid. Whenever I open the datetimepicker, the calendar appears hidden inside the grid. To tackle this problem, I added the following CSS condition: .dr ...

jqueryhtmlcsstwitter-bootstrapcalendar

Switch up the font style of the title element

Is it possible to modify the font-family of the title attribute in an input field using either JavaScript or jQuery? <input type="text" title="Enter Your Name" id="txtName" /> ...

javascriptjqueryhtmlcss

Tips for keeping the footer consistently at the bottom of the page without using a fixed position (to avoid overlapping with the main content)

I've been struggling to keep the footer at the bottom of my webpage. I came across a solution online suggesting to use fixed CSS positioning. However, when I applied this fix, the footer ended up overlapping with the actual content on the page. Is the ...

htmlcsstwitter-bootstrapbootstrap-4

What is the best way to pass an array to PHP and then display it in HTML?

After setting up a form with 3 select tags in my HTML, I attempted to create an array using jQuery and send it to PHP. The goal is to retrieve data from PHP and display it on my HTML page. Below is the code snippet: HTML code <form name="myform"> ...

phpjqueryhtmlajax

Having difficulty in closing Sticky Notes with JavaScript

Sticky Notes My fiddle code showcases a functionality where clicking on a comment will make a sticky note appear. However, there seems to be an issue with the Close Button click event not being fired when clicked on the right-hand side of the note. I have ...

javascriptjqueryhtmlcssckeditor

Align elements vertically in flexbox container using Bootstrap 3 on Internet Explorer 10 and 11

Encountering a problem in IE10+11 when trying to vertically center two Bootstrap columns within a row using flexbox. The dynamic content in the columns requires the row to have a minimum height of 65px. However, if the content expands and spans multiple l ...

htmlcsstwitter-bootstrapflexbox

Storing dropdown selection as a variable in a PHP Ajax form

I have created a PHP form that allows the user to select an option from a dropdown menu in order to view a specific data set. The data is refreshed on the screen using an AJAX call and I am utilizing the 'html' datatype to update the output withi ...

phphtmlajax

Setting the title of the master page body dynamically

Looking for a solution similar to the one discussed below, I am attempting to extract the title entered in the title tag on each page and use it to update an asp label dynamically to display the title on each page. My goal is to achieve this using only C# ...

c#htmlasp.net

CSS is effective when styling table elements such as 'tr' and 'td', but encounters issues when trying to include 'th'

I have a variety of tables on my website, most of them without borders. However, I want to add borders to some of them. In my CSS, I am using a specific class for those tables: table { padding: 2px; border-collapse: collapse; table-layout: auto; te ...

htmlcss

Unable to retrieve the value of ng-model using $scope

Having some trouble getting the ng-model value when clicking a button that triggers a function to add each ng-model value to an object. Interestingly, when trying to get the value of $scope.shipNameFirst, it shows up as undefined in the second example. I& ...

javascripthtmlangularjsangularjs-scope

Incorporating AngularJS to show sections of a webpage in real-time

, I am working on an angular js application in which I'm using rest services to retrieve http response data. My goal is to display different parts of the webpage conditionally based on the response data. For example, if the data in angular indicates " ...

htmlangularjsrest

Problem encountered during the transfer of JSON data from PHP to JavaScript

Currently, I am working on a PHP file that extracts data from a database to display it on a chart using the Chart.js library. The chart is functioning properly, but I am facing an issue where I need to use the json_encode() function to pass the array value ...

javascriptphphtmljsonajax

unassigned variables in a PHP email submission form

My PHP email form is not sending emails because my variables are coming up as null. I have an echo statement after my code to check if the variables have values, but they are not being printed. Only 'done' and 'email $to' are showing up ...

phphtml