Is there a concept of negative margin "wrapping"?

I am currently working on the website . I am facing an issue where the left arrow is not appearing in the same position as the right arrow. When I try to mirror the same adjustment I made for the left arrow by using margin-left: -75px, it seems to 'wrap' it to the top.

It was functioning properly before, but then something went wrong.

The Buttons:

<div class="controls">
<a class="back" href="?page=<?php echo($_SESSION['page']-1) ?>"><i class="fui-arrow-left"></i></a>
<a class="next" style="float: right; margin-right: -75px;" href="?page=<?php echo($_SESSION['page']+1) ?>"><i class="fui-arrow-right"></i></a>
</div>

The relevant css:

.controls {
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
    font-size: 50px;
}

.container {
  width: 970px !important;
  padding-top: 25px;
  margin-top: 25px;
  z-index: -1;
}
htmlcss

Answer №1

The right arrow is defined with a margin-right of -75px.

margin-right: -75px;

If you apply the same margin for the left arrow, it ends up stretching the div too much. To fix this, try adjusting the values to be smaller.

.back {
    margin-left: -50px;
}

.next {
    margin-right: -50px;
}

Answer №2

Upon reviewing the html code, it appears that there are some issues with your website:

  1. I have noticed more than 10 id attributes named 'item'. Shouldn't each ID appear only once per page?
  2. The HTML structure seems to be off. The float is not closing properly for the class attribute 'container', resulting in the div.controls being 940 x 705px.
  3. Perhaps using CSS positioning (such as absolute/fixed) would be a simpler solution to align the arrow correctly. Why make things more complicated than necessary?

Additionally, the initial solution does not seem to be effective. Setting margin-left to -50px did not produce the desired result.

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

Steps to altering the color of a second button with a button click

My goal is to create a button click function that allows only one button to be clicked at a time. For instance, when btn1 is clicked, its background color changes from transparent to green. Then, if btn2 is clicked, btn1's background color should chan ...

javascripthtmljquerycss

What is the best way to arrange three identical boxes next to each other, all of the same size

Imagine having a container with the following dimensions: .container { width: 960px; margin: 0 auto; height: 500px; } Now, envision wanting to add three boxes in the center aligned horizontally with these specifications: .box1 { background-color ...

htmlcssalignment

Inconsistent Animation Issue with jQuery Toggle for Expanding Div and Text

My expanding div functionality is almost perfect, but I've noticed that the transition when opening abruptly on divs with text. However, the closing transition is smooth. Can anyone help me make the opening transition as smooth as the closing one? Bel ...

javascriptjqueryhtmlcss

What is the best way to rearrange Bootstrap columns for mobile devices?

I have 4 columns displayed like this on desktop, and I want them to rearrange to look like the following on mobile. Do I need custom CSS for this? (I can't post images yet, so here is the link to the image: https://i.sstatic.net/b0gUZ.jpg I've ...

cssbootstrap-4less

Textfield with autocomplete dropdown

I have a text field on my website that needs to work as an autocomplete box. I have included the following code in the "headerbar" section of my page: Find :<input type="text" class="input2" style="margin-bottom:0px;" id="customersearchfield"> < ...

css

Creating a triangle shape using Bootstrap to style a div element, similar to the image provided

Trying to achieve the look of the attached image with a few divs. I know I can use a background image like this: background:url(image.png) no-repeat left top; But I'm curious if there's another way to achieve this without using a background ima ...

javascripthtmlcsstwitter-bootstrap

Clicking on the mat-icon-button with the matSuffix in the password field will always trigger a

Seeking assistance with implementing mat-icon-button matSuffix in Angular for a login page. This is my first time working with Angular and I am facing an issue with the password field. I have used mat-icon-button matSuffix, but whenever I click on the ico ...

htmlnode.jsangular

How can a div be utilized to create a footer with two columns?

Is there a way to design a two-column footer using only divs and no tables? The dimensions of the footer are set at 980px and it needs to include... Copyright 2010 xyz.com (to be placed on the left side) About us | privacy | terms (to be placed on the r ...

cssxhtmlhtml

In my Flask Bootstrap website, the navigation bar remains unchanged by the presence of Javascript

I am currently in the process of creating a navigation bar for my Flask website using Bootstrap. However, when I implemented it into my HTML code, it is not displaying correctly which leads me to believe that the JavaScript may not be functioning properly. ...

javascripthtmlcsstwitter-bootstrapflask

Eliminating Redundant CSS Code Using PHP Storm

After upgrading to PHP Storm version 8.03, I came across an article that discussed the ability to search for duplicate CSS code using this link: . Although I have tried to find a way to automatically resolve these duplicate codes within PHP Storm, I have ...

phpcssformattingphpstorm

Code functioning properly on JS Fiddle, experiencing difficulties when running directly in browser

Hey there, I have this vertical jquery tabs example working on JSFiddle, you can check it out here: https://jsfiddle.net/tj_vantoll/nn2Qw/ I've been trying to replicate it in an HTML file but so far I haven't had any luck... Can someone help me ...

jqueryhtml

Creating a Triangle Slider Component with React and Material-UI (MUI)

Struggling with creating a price control using react js and MUI, similar to the image below: https://i.stack.imgur.com/ZP8oc.png I've searched online for libraries or solutions, but haven't found anything that works. ...

javascriptcssreactjsmaterial-uijsx

When viewing the material-ui Chip component at normal zoom, a border outlines the element, but this border disappears when zoomed in or out, regardless of

Edit I have recently discovered a solution to the unusual problem I was facing with the material-ui Chip Component. By adding the line -webkit-appearance: none; to the root div for the Chip, the issue seems to resolve itself. However, this line is being a ...

javascriptcssreactjsmaterial-ui

Struggling to align a div in the middle using react and tailwindcss

Struggling to center a div in React with Tailwind, no matter what method I try. Here is my code: "use client"; import Image from "next/image"; import React from "react"; const LoginPage = () => { return ( <div cla ...

cssreactjsnext.jstailwind-css

What is the correct way to specify an image path for a background URL?

Currently, I am setting a background image for the hr tag using the following code: <hr style="height:6px;background: url(http://ibrahimjabbari.com/english/images/hr-11.png) repeat-x 0 0;border: 0;margin:0px!important"> However, I have now saved th ...

htmlcssimageangular

Stripping away HTML tags from a JSON output

I'm attempting to retrieve a JSON result using jQuery. $.ajax({ type: "GET", url: "http://localhost:8080/App/QueryString.jsp?Query="+query, contentType:"text/html; charset=utf-8", dataType: "json", success: function(json) { if(data!="") ...

javascriptjqueryhtmljsonajax

Update overall font size to be 62% for a consistent look across the website

Recently, I developed a browser extension that adds an overlay button to the LinkedIn website. Everything was running smoothly until I discovered that LinkedIn uses a global font-size: 62,5% that completely messes up my design.. https://i.stack.imgur.com ...

javascriptcssmaterial-ui

I'm encountering an undefined JavaScript variable, how should I proceed?

$(function(){ //Location was "set". Perform actions. $("#geocodesubmit").click(function(){ var geocoder = new google.maps.Geocoder(); geocoder.geocode( { 'address': address}, function(results, status) { if (status ...

javascriptjqueryhtmlcssgoogle-maps

Easily transform a CSS file for optimal use on dark backgrounds from scratch

I've got around 200 CSS files that look like this: /** * GeSHi Dynamically Generated Stylesheet * -------------------------------------- * Dynamically generated stylesheet for bnf * CSS class: , CSS id: * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 ...

phpcssalgorithm

Utilizing HTML5 Video Autoplay with AngularJS ng-show: A Comprehensive Guide

How can I implement a video using the HTML5 video tag with autoplay in an AngularJS web application? I attempted to use the following code: <video ng-show="condition" autoplay ng-src="{{video.src}}"></video> Upon loading the web application, ...

angularjshtmlvideo