I am looking to create a CSS horizontal menu that is centered within the header element and stays in the middle even when the browser window is resized. I have attempted using margin: auto;, but it has not produced the desired result.
header .center {
background: url(../images/header-center.png) no-repeat;
width: 510px;
height: 100%;
/*margin: auto;*/
}
Aside from setting margin: 0 auto;, you must also make changes to the #navigation by removing position: absolute; and left: 260px;
Additionally, it's important to note that you are giving a larger size to the menu #navigation and a smaller size to the header containing it with the .center class.
header .center {
background: url("https://dl.dropbox.com/sh/1mp20mw7izrycq2/fUbLOQUbN0/pingdom-theme/images/header-center.png") no-repeat;
width: 510px;
height: 100%;
margin: 0 auto;
}
#navigation {
width: 705px;
height: 50px;
overflow: visible;
}
Your previous code was not functioning correctly because you were only using margin: auto. Although this should technically work as it assigns margins of auto to all sides, the position properties in your #navigation were preventing proper centering.
When declaring properties like margin, padding, or border, you have two shorthand options to apply them to all sides efficiently.
margin: 0 auto means: Margin top and bottom will be 0, while left and right will be set to auto.
Here is the solution:
header .center {background: url("https://dl.dropbox.com/sh/1mp20mw7izrycq2/fUbLOQUbN0/pingdom-theme/images/header-center.png") no-repeat; width: 510px; height: 100%; margin: 0 auto;}
#navigation {width: 705px;height: 50px; left: 50%; overflow: visible; margin-left: -255px;}
This value should always be half of the parent container's width, which is set to 510px
I have customized the notices/success.php template file by modifying the content as shown below: <?php foreach ( $messages as $message ) : ?> <div class="woocommerce-message" role="alert"> <span> <?php ...
I have a span and select in my view Here is the code snippet: <li> <select name="search[adults]" id="search_adults" class="custom" style="display: none;"> <option selected="selected" value="1">1 adult</option> <option ...
Currently, I am implementing a basic mathematical method to crop an image. My approach involves utilizing the jQuery plugin called imageareaselect.js to overlay an adjustable layer on top of an image. By resizing this layer with the cursor and clicking a b ...
I am currently working on a text field and button setup where I have implemented a popover feature using Bootstrap. This is the code snippet I am using: function displayPopover() { $("#text").popover("show"); } The popover appear ...
I have a dynamic web page and I am looking for a way to reorder the tab order of two elements within the content without having to set the tab index for every preceding element. Is there a way to assign a tab index relative to an element's position in ...
Is there a way to shift the cropped image down by 100 pixels and left by 50 pixels within the canvas? View the code snippet below. Javascript // Grab the Canvas and Drawing Context var canvas = document.getElementById('c'); var ctx = canvas.get ...
Just starting out with JavaScript and feeling a bit lost with this homework assignment - "I need to modify the page so that all images are hidden until the “start” button is clicked. After clicking the start button, it should change to a stop button d ...
<div id="video-player" data-src="http://www.youtube.com/embed..."></div> Inspect Element - Browser Developer Tools: Error: Access to property 'toString' denied I scanned the entire page (Ctrl+F) and could not find any reference t ...
Currently in my vue application, I have a loop set up like this: <div class="grid grid-cols-3 gap-14"> <article-card v-for="(article, index) in articles" :key="index" :content="article" /> </div> ...
I am trying to create a rollover effect that displays text when the user hovers over an image. Despite researching numerous tutorials, I have found limited resources on incorporating text or captions using jQuery. Most of the available tutorials focus on C ...
I have a list of names that I need to sort by their first letter. To achieve this, I created buttons representing each letter of the alphabet. When a letter is clicked, only the names starting with that letter should be displayed using ngIf. <button *n ...
Here is the HTML code snippet in isolation: <span style="position: relative; width: 100%; display: inline-block;"> <select id="0ac88542d16d6200fb983d094f655c76_select" class="form-control"> <option value="display_value">Numbe ...
I'm trying to change the background color of my navbar section on scroll, but I've had no luck so far. Below is the code I have been using: const [colorChange, setColorChange] = useState(false); const changeColor = () => { if (window.scro ...
My Eloqua account is set up to capture form submission data. Currently, I have a simple form with just one user input field. Following Eloqua's guidelines, I have successfully posted data to their server using the following code: <body> &l ...
After selecting a value from the dropdown selection, I am attempting to make a PUT call in AngularJS. Although I have successfully retrieved the value from the selection, I am encountering difficulty in generating the response for the PUT call. Below is t ...
Having some trouble creating a new UI mockup using Angular and Material design elements. I can't seem to get the area below my toolbar to fill the remaining vertical height of the page. Check out my code example here Despite setting html, body { hei ...
I'm encountering an issue with setting the default value for a toggle button group. The code is simple and the toggle buttons are correctly fetching values from the index, but I can't seem to get one of them to be default selected. I tried settin ...
My challenge is displaying information from the Django third model (class Jenkinsjobsinformation) in the template. I've been successful in showcasing data from the first and second models (Projectname and Jenkinsjobsname). See below for a snippet of m ...
While working with jQuery DataTables, I have successfully managed to access row data and apply styling to the entire row. Below is the code snippet used to initialize the datatable: var $dataTable = $('#example1').DataTable({ "data": data, ...
Here is my code that I've been struggling with. I am trying to change the image on page refresh, but it's not working as expected. <SCRIPT LANGUAGE="JavaScript"> var theImages = new Array() theImages[0] = 'images/1.png' ...