Making a div element shift position in response to the user resizing the window

Unique Content:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
</head>

<body>

   <div id="nav">
        <p id="welcomeLink">Welcome Message</p>
        <p id="historyLink">History & Background</p>
        <p id="valueLink">Importance of Quality</p>
        <p id="contactLink">Get in Touch</p>
    </div>
    <div id="welcomeArrow"></div>
    <div id="historyArrow"></div>
    <div id="valueArrow"></div>
    <div id="contactArrow"></div>

    <div id="wrapper">

        <div id="mainHeader">
            <img src="Carnaby_Full__Logo_1.jpg" />
        </dvi>

        <div id="content">

            <p id="welcomeP">
                Clothing defines one's image, except for hands and face. Carnaby Custom is based on this concept. Located in Midtown Manhattan, we offer top-notch custom-made suits, shirts, and sport coats in the tri-state area.
            </p>

            <p id="historyP">
               In 1971, Leonard Logsdail Sr. established his bespoke tailoring shop in London, which catered to a distinguished clientele. Later, he moved the business to New York City at the insistence of his wife. This shift made him one of the most reputable tailor in the country and beyond. <br> <br> Crafting a suit by hand demands time and resources, which inspired the creation of Carnaby Custom. Our aim is to deliver customized garments overseen by master tailor Leonard Sr., all while being more budget-friendly.
            </p>

            <p id="valueP">
            Each person has unique body proportions that demand personalized tailoring. Even if two men share exact measurements, their clothing will vary due to posture differences and other factors. At Carnaby Custom, we create made-to-measure garments ensuring a perfect fit. <br> <br>

     Clients collaborate with us in designing suits reflecting their lifestyles. With an array of fabrics, linings, and style preferences available, the design possibilities are endless. <br> <br>

     During consultations, we grasp your style and requirements fully, aiming for long-term client relationships rather than quick sales. Alongside competitive prices, our tailored garments match or surpass off-the-rack quality at retail stores. </p></a>

        </div>

    </div> 

</body>
</html>

CSS: body { background: url(navy_blue/navy_blue.png); }

#nav {
    position: absolute;
    text-align:center;
    top: 322px;
    float: left;
    left: 155px;
    padding-right: 20px;
    padding-left: 20px;
    background: #D5D5D5;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    border: black solid thin;
    border-radius: 10px;
    line-height: 16px;  
}

#nav p {
    color: #000099;
}

#nav p:hover {
    opacity: .6;
    cursor: pointer;
    -moz-transition: .3s ease-in-out;
    -webkit-transition: .3s ease-in-out;
}

#welcomeArrow {
    position: absolute;
    left: 255px;
    top: 336px;
    width: 0; 
    height: 0; 
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-left: 17px solid #D5D5D5;
}

#historyArrow {
    display: none;
    position: absolute;
    left: 256px;
    top: 364px;
    width: 0; 
    height: 0; 
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-left: 17px solid #D5D5D5;
}

#valueArrow {
    display: none;
    position: absolute;
    left: 256px;
    top: 396px;
    width: 0; 
    height: 0; 
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-left: 17px solid #D5D5D5;
}

#contactArrow {
    display: none;
    position: absolute;
    left: 256px;
    top: 430px;
    width: 0; 
    height: 0; 
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-left: 17px solid #D5D5D5;
}


#wrapper {
    background: url(billie_holiday/billie_holiday.png);
    top: auto;
    margin: auto;
    text-align: center;
    height: auto;
    width: 640px;
    font-family: 'Open Sans', sans-serif;
    padding: 30px;
    border: black solid medium;
    border-radius: 10px;
}

#wrapper p {
    padding-top: 20px;
    font-size: 14px;    
}

#mainHeader img{
    border: solid thin black;
}

#welcomeP {
    display: inline;
}

#historyP {
    display: none;
}

#valueP{
    display: none;
}

#contactP {
    display: none;
}

#welcomeH {
    font-size: 24px;
    color: #993300; 
}

Answer №1

Move the navigation box inside the wrapper container and set its positioning to relative. Apply a negative left margin to the navigation box. Make sure to readjust any arrow elements accordingly.

Answer №2

Place the #nav element within the #wrapper container. Set the position of #wrapper to relative, and the position of #nav to absolute. By doing this, the parent container with a position of 'relative' will act as a bounding box for the #nav element. Finally, assign a negative value to the 'left' property of #nav.

#wrapper{
position: relative;
}

#nav{
position:absolute;
left:-100px;
}

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

Uploading multiple files with unique IDs into a table

Currently, I am attempting to modify the code found at: This code functions perfectly with a single file input (and has been utilized in various projects without any issues). My specific requirement is to generate a table with a file input within each ro ...

The reduced motion media query prevented me from using a Bootstrap modal with animations

I'm currently working with Bootstrap 4 modals and I've encountered an issue where the fade animation and slide animation are not being displayed. After doing some research, I discovered that the problem lies within the transitions.scss file which ...

Ensuring the validity of float and non-empty values in JavaScript

Embarking on the journey of web development, I'm delving into basic applications. My current project involves creating a straightforward webpage to add two numbers and implementing preliminary validations - ensuring that the input fields are not left ...

Learn the method for printing CSS outlines and background colors in IE8 using JQuery's printElement feature

Printing my HTML calendar table in Chrome results in a perfect display. However, when I try to print it in IE8, the background colors and images are not included. Despite following steps from a helpful post on setting it as the default option, there were n ...

Position the table footer on the right side of the page

I am trying to format a table with footer items in HTML. I want the first footer item to be aligned left and the rest to be aligned right. Here is the desired layout: https://i.sstatic.net/ZRNEp.png table { width: 100% } <table class="price-list" ...

Guide on applying a filter to the items in a listbox using the input from a text box

In my HTML form, I have the following elements: 1) A list box containing filenames: s1.txt2013 s2.txt2013 s3.txt2012 s4.txt2012 2) A text box where the user enters a pattern (e.g. 2013) 3) A button By default, the list box contains the 4 file ...

Is there a way to set a default CSS background image using JavaScript in case the specified

When working with regular CSS, I can easily set a fallback image using this code in case the primary image is not available: .container { background-image: url(pics/img.webp), url(pics/img.png); } But when it comes to setting styles in JavaScript (such ...

My CSS is giving me a bit of trouble with alignment

I have been experimenting with various approaches such as adjusting the size of the divs to tiny dimensions and trying out inline-block or float left and right properties, but I am still unable to achieve the desired result of having my divs positioned s ...

The resizing and thumbnail feature is functioning properly, but there is an issue when uploading multiple files

My resize and thumbnail function seems to be working only with one file instead of multiple files. When attempting to upload more than one file, only the first file is processed correctly. It gets saved in the directory, resized, watermarked, and its path ...

issues with redirection of form validation

I am currently working on a Django project where users can add comments to posts. The information is saved directly in the database, which is functioning properly. However, I am facing an issue where after submitting the comment, the form keeps resubmittin ...

Identifying collisions or contact between HTML elements with Angular 4

I've encountered an issue that I could use some help with. I am implementing CSS animations to move p elements horizontally inside a div at varying speeds. My goal is for them to change direction once they come into contact with each other. Any sugges ...

CSS error with contrasting colors, the reason behind it is unknown

Here is the code snippet I am working on: I have set the background color to #f1f5ff and the font color to #181818. Despite thinking that the contrast is good, I am still encountering an error where the text is not visible. I have tried changing 'c ...

The elusive Ajax seems to be slipping through our grasp,

I am currently working on a website app to display the availability of PCs in my University using JSON data from the University website and AJAX. I am facing an issue where it shows all the MACs for the first room, but returns undefined for others. Since t ...

Fixing a menu hover appearance

I recently encountered a small issue with the menu on my website. When hovering over a menu item, a sub-menu should appear. However, there seems to be a slight misalignment where the submenu appears a few pixels below the actual menu item. Check out the w ...

Modifying a Sass variable using a Knockout binding or alternative method

Is it feasible to dynamically alter a sass variable using data-binding? For instance, I am seeking a way to modify the color of a variable through a button click. I am considering alternative approaches apart from relying on Knockout.js. $color: red; ...

How to extract JSON data from an HTTP request in Java

I'm seeking to scrape data from a specific link using a Java program. The initial page is not an issue, but when attempting to gather data from subsequent pages, the source code remains the same as on the first page. The vital information I require is ...

Automatically forward after submitting the form

I am utilizing the Mingle plugin on my Wordpress website to allow users to register and post on a dedicated Mingle Forum. Although the signup process is functioning correctly, I wish to enhance user experience by redirecting them to the forum page after t ...

Is the phrase "This site was built with Wix" visible on the website?

Recently, I've begun using Wix to build a website. I'm curious - does the message 'This website is created using Wix' appear at the top and bottom of the page when it's published? 'This website is created using Wix' I ...

Having several contact forms embedded within a single webpage

I am currently in the process of developing a prototype website and my objective is to have multiple forms on a single page. My goal is to have a form for each service, where users can click on the service and fill out a form to request a quote. The first ...

'Dynamic' styling in Next.js using conditional CSS

I am exploring ways to style elements based on their parameters. I have been searching for terms like "conditional css react" and "implementing conditional styles in react with css". Here is a snippet of my code: e.g. <div class="ChatComponent_ ...