"Creating a user-friendly interface design with two separate divs, each showcasing a

I am looking to create a UI/UX design that includes a logo and two menus, one for language change and one for navigation.

https://i.sstatic.net/Tb6zc.png

My current approach involves two div elements:

1. The first div contains the image and language menu ul.

2. The second div contains the menu ul.

However, I am facing an issue where the image in the first div is being covered by the second div.

Could my approach be wrong?

Check out what I've implemented in HTML & CSS below:

Any help or advice on improving my approach would be greatly appreciated.

html css

Answer №1

To accomplish your desired outcome, I made changes to the #nav-language by setting it to position: relative; and adjusted the CSS properties for the #logo div such as z-index, top, and bottom. You can view the updated code on this jsfiddle:

Note that adjusting the values for top and bottom may be necessary based on the size of your image. In the example provided, a random image was used.

Additionally, I want to point out that the property align: right; applied to your #nav-language div is not valid in CSS. To achieve the desired alignment, you should set the width of the header to 100% and apply float: right; to the language ul. I have updated the jsfiddle with the corrected CSS:

Check out the updated version here

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

Grabbing numerous selections from a dropdown menu

I am looking to extract multiple options from a dropdown menu and then send them via email. I have attempted the given code below: HTML: <select name="thelist[]" multiple="multiple"> <option value="Value 1">Value 1</option> <option v ...

php html arrays drop-down-menu

What is the reason for the continual appearance of the *ngIf validation message?

Currently, I am working with Angular and HTML. I have implemented pattern validation for the first name field, which should not accept only numbers. <fieldset class="six"> <input id="firstName" ng-pattern="^[a-zA-Z]+$" type="text" ...

html css angular

Reveal concealed content when a responsive table becomes scrollable on a mobile device

I recently completed a project that was overloaded with tables. I made all the tables responsive, but they still take vertical scroll if they don't fit on certain devices due to their varying widths. For instance, Table A requires vertical scroll o ...

javascript jquery html css html-table

Using makeStyles() in MUI for conditional rendering

Trying to dynamically change the value of backgroundColor under the property "& + $track" using props.disabled but it seems that MUI does not recognize it. Why could that be? const useStyles = makeStyles((theme) => ({ root: { overflow: "vis ...

javascript css reactjs material-ui

Having trouble getting the Vue.js framework to function properly on a basic HTML page with a CDN implementation

I recently delved into learning vue.js and decided to focus on forms. However, when I tried to open the file using a live server or XAMPP, it didn't work as expected. It had worked fine before, but now I seem to be encountering some issues. Could anyo ...

javascript html vue.js

Use XMLHttpRequest to load and display a PDF file within the web browser

Can XMLHttpRequest be used to send the filename by POST method and open a PDF in the browser? xmlhttp.open("POST","pdf.php",true); //CHANGE xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("file="+input); ...

php html ajax pdf xmlhttprequest

Steps to create a hover effect that alters the appearance of another chosen "element"

For instance, I have two classes named A and B. I want to be able to change the appearance of B when I hover over it, such as its color or size. I am unsure if this can be achieved using CSS and the onmouseover event. I am including a snippet of code that ...

javascript jquery css jqgrid

Once the form has been submitted, proceed to open a new page following processing

Trying to remove an entry or offer from the database and then return to the page with all entries/offers. Attempted using Javascript, but it successfully deletes the item without redirecting to the overview page. Is this the correct approach with Javascri ...

javascript php html

In JavaScript, is it possible to dynamically alter and showcase the value of a select tag?

My code snippet in the HTML file contains Javascript: <script> $(document).ready(function(){ $("#sub").click(function(){ var user_issue = $("#issue").val(); ...

javascript jquery html ajax

File not being successfully sent through form submission using Jquery

I have created a form setup like this: <label for="pdffile">Please Upload File</label> <form class="form-horizontal" role="form" method="POST" name="upload" id="upload" enctype="multipart/form-data"> {{ csrf_fi ...

php jquery html laravel

Sending JSON data from the primary window to the secondary window in Electron - A step-by-step guide

I am currently working with a set of 3 files. index.html: ... <a href="#" onclick="fetch(function(data) {console.log(data); subWindow(data)})">subWindow</a> ... The fetch() function retrieves a callback in JSON format. subWindows.js: let m ...

javascript html node.js json electron

jQuery not functioning properly when attempting to add values from two input boxes within multiple input fields

I am facing an issue with a form on my website that contains input fields as shown below. I am trying to add two input boxes to calculate the values of the third input box, but it is only working correctly for the first set and not for the rest. How can ...

javascript html jquery input

The content within a div block is having trouble aligning vertically

I need help with centering the content inside my fixed-top navigation bar vertically. I am using bootstrap to design my page, and the navigation bar consists of an image as the nav header and a container with links. The container surrounding these element ...

html css twitter-bootstrap

Leveraging AJAX to assist in PHP for data parsing

I am currently exploring the world of AJAX and grappling with a unique situation. I am in the process of developing an HTML app that will be integrated into a mobile application using PhoneGap. The main objective of my project is for the HTML page to con ...

javascript jquery ajax html cordova

Modify the CSS styles of inner elements dynamically

Within my code, I have implemented a SplitPane and included a CSS file that contains the following styling rules: .split-pane > .split-pane-divider { -fx-padding: 0 0 0 1; -fx-background-color:-fx-background; } However, during runtime, I e ...

java css javafx

A clock for counting down on statically produced websites

It seems that I have encountered a limitation of statically generated sites. Currently, I am utilizing Gatsby to generate pages in a static manner. The process involves: Pulling data from the CMS where we set an end time for a countdown timer, such as two ...

javascript html reactjs static-site-generation

CSSer Q&A