Alignment Troubles with Icons

I am having trouble positioning some icons on the far right of my 960 grid template header, next to my logo which is on the far left. I have tried multiple ways but can't seem to get it right. Any assistance would be greatly appreciated.

Below is the code for the header:

<body>
  <div class="container_12">
    <header>
        <h1><a href="/">some title</a></h1>
    </header>

Here is the CSS for this section:

header,
h2 {background: url(img/header.gif) bottom left no-repeat; padding: 20px 0 10px 0;}
header{height:45px;}
h1 {background: url(img/logo.png5) top left no-repeat; width:140px; height: 31px; display:block; text-indent:-999em; font-size:0;}
.small p {font-size: 12px; }
p.success {padding: 10px; background: #adefa0; font-size: 16px;}

I am trying to add Twitter, Facebook, and LinkedIn icons from my /img/ folder to the far right of the header. However, I am struggling with alignment and everything ends up looking messy when I try. Can someone please assist me in achieving this layout?

Thank you for your help,

Philip

htmlcss960.gs

Answer №1

Have you experimented with placing them in a container that is floated to the right within your header section?

.icon_container {
   float: right;
   margin-right: 10px;
}

<body>
  <div class="container_12">
    <header>
        <div class="icon_container">
            <a href="http://example.com">Example</a> |
            <a href="http://foo.com">Foo</a> |
            <a href="http://bar.com">Bar</a>
        </div>
        <h1><a href="/">some title</a></h1>
    </header>

Answer №2

<header>
    <h1><a href="/">Discover some title</a></h1>
    <ul id='networkmenu'>
        <li><a href="twitter.com"><img src='icon/twitter.png' alt='Twitter'/></a>
        <li><a href="facebook.com"><img src='icon/facebook.png' alt='Facebook'/></a>
        <li><a href="LinkedIn.com"><img src='icon/linkedin.png' alt='LinkedIn'/></a>
    </ul>
</header>

#networkmenu{align:right}
#networkmenu li{align:left; margin:10px}
header h1{align:left}

Following these guidelines should set you in the right direction.

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

Include a link in the email body without displaying the URL

My concern revolves around displaying a shortened text instead of the full link within an email. When the recipient clicks on "Open Link," they should be redirected to the URL specified. The text "Open Link" must appear in bold. My current development fram ...

javascripthtmlangularmailto

How can I delete a date value from a td if it matches the current date value?

I'm facing an issue with duplicate date values in my table rows and trying to find a solution using JavaScript or JQuery. The problem cannot be fixed within the SQL query itself, so I need to explore alternative approaches. I want to remove repeated d ...

javascriptjqueryhtmlsql

What caused the submit button to suddenly change colors in such a peculiar manner?

In its natural state, the submit button appears in the default color, lacking any specific style when viewed in Chrome. Once the CSS rule input[type="submit"]{border-radius: 2px;} is applied, the button transforms, suddenly changing color and showing a sh ...

htmlcss

What is the process for implementing the Google Analytics tag on a Streamlit-built website?

I want to monitor my Streamlit UI in Google Analytics. To achieve this, Google Analytics requires the following code snippet to be inserted into the <head> section of the HTML file. <script async src="https://www.googletagmanager.com/gtag/js? ...

pythonhtmlgoogle-analyticsfastapistreamlit

Vue.js - Trouble with Rendering Elements

I'm facing an issue with displaying data fetched from an API using axios in Vue.js. Despite writing the code, the elements are not being rendered and don't appear in the elements console. See below for the code snippets: <div class=" ...

htmlvue.js

Top method for stacking several divs in a vertical line

In search of the most effective method for organizing numerous dynamically generated divs (all with identical widths) in a vertical stack, two potential solutions have emerged: Utilize float:left... Implement an unordered list and enclose each div within ...

javascriptjquerycsshtml

Tips for increasing the height of a div as rows are dynamically added to a table

I am facing an issue with a div main containing a table grid. Rows are dynamically added to the table, causing it to increase in height. However, the height of the div main remains unchanged, resulting in the table overlapping the footer content. What chan ...

htmlcss

looking to change the background color of a CSS element

Here is a CSS code snippet that I am struggling with: .select, .input, .schedule, .editableFields { cursor: pointer; background-color: blue; } However, the above code overrides this one: #past .layer.color { background-color: #E5D403 !import ...

jqueryhtmlcsstwitter-bootstrapbackground-color

Determine whether the child element extends beyond the boundaries of the parent element

I am currently working on determining whether a child element is visible within its parent element. To achieve this, I am comparing the width of the parent element to the position of the child element using position().left. Given that I have multiple dist ...

jquerycss

The first JSF page is not affected by the style sheet

I am facing an issue where the style sheet does not apply on my initial JSF page. The problem occurs when I have an index.jsp which forwards to my first JSF page. <html> <head></head> <body> <jsp:forward page="./start.js ...

javacssjsfjsf-2openfaces

Using AngularJS to load a custom JavaScript file within an ng-view

In my sample project, I have utilized Angular Js for the front-end. I have developed a template and implemented dynamic loading of views based on requirements. For this application, I am utilizing angular, jquery, and cusotm js. The structure of my templat ...

javascriptjqueryhtmlangularjsdynamic-loading

Fixing the issue of scrollbars not working in existing divs while creating new jscrollpane divs in jQuery

Utilizing the jquery.uploadfile.min.js plugin to upload multiple files results in creating a div of jscrollpane class each time a file is uploaded. However, there seems to be an issue where only the scrollbars in the last created div are functioning proper ...

javascriptjqueryhtmljscrollpane

Classic leading and CSS line-height traditional styling

The CSS specification dictates that line-height should be implemented by dividing the specified value by two and applying the result both above and below a line of text. This significantly differs from the traditional concept of leading, where spacing is ...

typographycss

I'm confused about what I did wrong with Node.js. The server.js is up and running, but I'm unable to view the

I have made some progress so far and I am currently running this code on Putty. var http = require('http'); var fs = require('fs'); const PORT = 8080; http.createServer(function(request, response) { var url = request.url; switc ...

javascripthtmlnode.js

Encountering a challenge in Angular 8: Unable to locate a supporting object matching '[object Object]'

I am having an issue trying to retrieve the Spotify API from the current user's playlists. While I can see it in my console, when I attempt to insert it into HTML, I encounter the following error: ERROR Error: Cannot find a differ supporting object ...

javascripthtmlangulartypescriptangular8

Inject HTML code containing a function that triggers upon button press

I am facing a challenge in inserting code through a submit button. Essentially, I am looking for this button to trigger a PHP function that adds a block of HTML code. Below is the function: function addTrainee(){ print_r('<form method="post&qu ...

phphtml

Animate a dotted border with CSS

How can I make a text block with a dotted style border move like a gif image using CSS at runtime? ...

cssborder

``Is there a way to position an image at the center in Python dash?

Can someone help me with centering an image in my Flask dash app? Here is the code I have: import dash from dash import html, dcc import dash_bootstrap_components as dbc app = dash.Dash(__name__) app.layout = html.Div([ dbc.CardImg(src=r'assets/ ...

pythoncssbootstrap-4plotly-dash

Offspring element overrides styling of its parent

#popBox{ width:100%; height:100%; position:fixed; left:0; top:0; border-collapse:collapse; background:black; opacity:0.8; display:none; } <table id="popBox"> <tr> <td></td> <td></td> ...

htmlcss

The Jquery Addclass function is not functioning properly

I have been struggling with this code as it seems to not be working in any browser, including IE, Chrome, and Firefox. I suspect that the system should add a class, so I checked the DOM using Chrome's console. I did see the class being added, but ther ...

jquerycssjquery-animateaddclass