Struggling to format boxes or display images on your WordPress website?

When working on this website, I encountered an issue with adding links to Google+ and Facebook. Despite my efforts to style the div boxes using CSS, I was unsuccessful. I also attempted to insert images using an img tag, but the pictures did not load even though they were in the correct directory like the other images. My goal is to place the two icons on the right side of the menu bar.

Here is the HTML code:

<div class="art-nav">
    <ul class="art-menu">
        <?php art_menu_items(); ?>
    </ul>
    <div id="facebooktopmarc">
        <a href="https://www.facebook.com/raadmal">
            <img src="images/facebook.png" alt="Go to Facebook!"/>
        </a>
    </div>
    <div id="googleplustopmarc">
        <a href="https://www.facebook.com/">
            <img src="images/google-plus.png" alt="Go to Google-plus!"/>
        </a>
    </div>
</div>

And here is the CSS:

#facebooktopmarc {
  background-image: url("images/facebook.png");
  background-position: right center;
  background-repeat: no-repeat;
  display: block;
  float: right;
  height: 25px;
  margin: 0 5px 0 0;
  position: relative;
  width: 25px;
}

#googleplustopmarc {
  background-image: url("images/google-plus.png");
  background-position: right center;
  background-repeat: no-repeat;
  display: block;
  float: right;
  height: 25px;
  margin: 0 5px 0 0;
  position: relative;
  width: 25px;
}

Answer №1

The placement of a CSS file in the filesystem determines how URLs within the CSS are interpreted. When using images within HTML, it's important to use paths that are relative to the HTML file or absolute paths including the domain name.

Here are the URLS for your images:

http://example.com/images/image1.png
http://example.com/images/image2.png

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

The <pre> tag is not adjusting the column width properly within the Bootstrap framework

I have utilized Bootstrap CSS to style my webpage. Interestingly, when I incorporate the <pre>...</pre> tag within the class="col", it does not adjust the width of the column as expected, and instead enlarges the entire column's ...

Activate the Bootstrap 5 responsive font sizing feature (RFS) for the base font elements

I'm attempting to utilize Bootstrap's RFS functionality in version 5.1.3 to apply font sizing globally. Within my SCSS file, I've defined some basic font sizes, imported the Bootstrap SCSS files, and configured the font size settings. Howev ...

Guide to invoking a jQuery function by clicking on each link tab

Below is a snippet of jQuery code that I am working with: <script> var init = function() { // Resize the canvases) for (i = 1; i <= 9; i++) { var s = "snowfall" + i var canvas = document.getElementById( ...

In-line Vertical Ticker Display

I attempted to use vTicker, but I found that it does not function properly when used as an inline element. <h1> <div id="vticker"><ul>...</ul></div> Some other headline text </h1> My goal is to have the vertica ...

Incorporate a Background Image, which is linked to a website URL, by utilizing an external CSS file within

I am struggling to incorporate an external CSS file (specifically a background image from a URL) into my HTML document. I have successfully applied internal CSS, so the issue is not with the website link. Despite reviewing similar posts addressing comparab ...

Displaying a Bootstrap loading spinner on the right side of a list item

I want to position a Bootstrap loading spinner on the right side of a ui li, with the text "Keywords" on the left side of the ui li. My current HTML code is as follows: <ul class="list-group" id="my-list"> <li class="l ...

Changing the color of a div element dynamically with JavaScript

Is there a way to improve the code below so that the background color of this div box changes instantly when clicked, without needing to click twice? function updateBackgroundColor(platz_id) { if(document.getElementById(platz_id).style.backgroundCol ...

Update the CSS for InputLabel

I have a drop-down list that I want to customize. The issue is illustrated below: https://i.sstatic.net/hzVtl.png I'm looking to center the text "choose format" within the field and adjust the font size. return ( <FormControl sx={{ m: 1 ...

Is there a hierarchy to be followed within the <head> element?

I have been developing websites using HTML for nearly 3 years now, but since I had to teach myself, there are still a few things I am unsure about. One question that has recently become important is whether it is possible to create groups within the <h ...

Switching Up Poster Images in Chrome with Afterglow HTML5 Video on Hover

I have been experimenting with the html5 video player from AfterGlow. In my sample video, I included a poster attribute. However, I noticed an issue when viewing the video in Chrome - whenever I hover over it, the poster image flickers, creating an undesir ...

Delay the rendering of the MUI DataGrid column until after the DataGrid is visible on the screen

Would it be feasible to asynchronously load a column of data in the MUI DataGrid after the table is displayed on the screen? Retrieving this additional data from the database is time-consuming, so I aim to have it appear once the table has fully loaded. T ...

What is the best method for creating a vertical line separator with a hover effect in CSS?

Facing an issue with creating a vertical line separator in the navigation menu. While trying to add a vertical line separator to my navigation, I noticed that it does not get covered by the hover effect when hovering over the menu items. Please refer to t ...

Arranging elements in a list according to their position on the canvas using AngularJS

I am currently working on drawing rectangles on an html5 canvas using the JSON format provided below. My goal is to sort the array based on the x and y locations of each element. { "obj0": { "outerRects": [ { "outerRectRoi": { "x1": 0, " ...

Ensure consistent switching of flexbox directional layout

I'm attempting to create a unique layout using only css3. My challenge is to achieve this without explicitly setting sizes, allowing the layout to flow freely. I am utilizing flexbox in my css for this purpose. After an automatic wrap, I want the layo ...

Executing Cross-Component Communication in Angular 7: A Quick Guide

I've encountered a challenge with a checkbox in the header component. If the checkbox is checked, I need to display an alert message when the application loads. The tricky part is that the checkbox is linked to the home component. Therefore, if I am o ...

Using CSS Flex to style text that has been transformed

I'm attempting to achieve a specific date display effect, but I'm running into some difficulties. Despite using flex and text transform, I can't seem to get rid of the extra width on the right side of the year. Here's my current outcom ...

How can I optimize Javascript and CSS that are being used on my website but are not physically hosted on my website?

On my website, I have a plugin called "Contact Us" that was created and is being operated by Dropifi. Lately, I've been working on optimizing my site for SEO/Speed using Google's PageSpeed Insights tool. I enabled compression with GZip for all el ...

Bootstrap 4 - DropDown option - Element is positioned above the navigation bar

Currently facing an issue with the DropDown menu. Whenever I add padding to the DropDown menu (class - drop_link), it ends up pushing the entire element over the <nav>. I'm unsure of how to prevent this from occurring. I attempted to disable som ...

html inserting line break using label

I am attempting to dynamically set text to a label using jQuery. However, I am having trouble getting the <br> or \n to create new lines. Instead, all the text displays on the same line and wraps around. If you want to see my code in action, ch ...

Enabling auto-expansion for textareas with every keystroke

Currently, I have implemented the following script: jQuery.each(jQuery('textarea[data-autoresize]'), function() { var offset = this.offsetHeight - this.clientHeight; var resizeTextarea = function(el) { jQuery(el).css('h ...