Issue with displaying website monitors

I am facing an issue with my website where it displays differently on various monitors. Below is the HTML and CSS code snippets: HTML

<body>
<div id="Links">
<a href="About.html"><img src="Slideshow/About.png" width="140em" /></a> 
<br /><br />
<a href="Contact.html"><img src="Slideshow/Contact.fw.png"  width="140em" /></a>
<br /><br />
<a href="Services.html"><img src="Slideshow/Services.fw.png"  width="140em" /></a>
</div>

<div id="mainText">
<h1>Contact</h1>
<p>If you want to contact me please call at <b>1.800.SUCCESS</b> or use the form below to sned me an email!</p>
</div>

...

CSS</p>

<pre><code>body {
    background-image:url(Pictures/background.jpg);
    background-repeat:no-repeat;
    background-size:100%;
}

#mainText {
    position: absolute;
    width: 70%;
    float: left;
    left: 14em;
}
#conTable {
    left:14em;
    top:8em;
    position:absolute;
}

#Banner {
    position:absolute;
    padding-left:40%;
}
#Links {
    position:absolute;
    float:left;
    width:50px;
}

I need help understanding why there are differences in display between my laptop and desktop screens, particularly everything being shifted to the left on my laptop screen. Any advice on how to resolve this issue would be greatly appreciated.

htmlcsslayout

Answer №1

Consider placing a "Relative" #container around all your "absolute" divs. I've made some adjustments to your code below:

<body>
<div id="container">
<div id="Links">
<a href="About.html"><img src="Slideshow/About.png" width="140em" /></a> 
<br /><br />
<a href="Contact.html"><img src="Slideshow/Contact.fw.png"  width="140em" /></a>
<br /><br />
<a href="Services.html"><img src="Slideshow/Services.fw.png"  width="140em" /></a>
</div>

<div id="mainText">
<h1>Contact</h1>
<p>If you want to contact me please call at <b>1.800.SUCCESS</b> or use the form below to send me an email!</p>
</div>


<form name="contactform" method="post" action="send_form_email.php">
<table id="conTable">
<tr>
 <td valign="top">
  <label for="first_name">First Name *</label>
 </td>
 <td valign="top">
  <input  type="text" name="first_name" maxlength="50" size="30">
 </td>
</tr>
<tr>
 <td valign="top"">
  <label for="last_name">Last Name *</label>
 </td>
 <td valign="top">
  <input  type="text" name="last_name" maxlength="50" size="30">
 </td>
</tr>
<tr>
 <td valign="top">
  <label for="email">Email Address *</label>
 </td>
 <td valign="top">
  <input  type="text" name="email" maxlength="80" size="30">
 </td>
</tr>
<tr>
 <td valign="top">
  <label for="telephone">Telephone Number</label>
 </td>
 <td valign="top">
  <input  type="text" name="telephone" maxlength="30" size="30">
 </td>
</tr>
<tr>
 <td valign="top">
  <label for="comments">Comments *</label>
 </td>
 <td valign="top">
  <textarea  name="comments" maxlength="1000" cols="25" rows="6"></textarea>
 </td>
</tr>
<tr>
 <td colspan="2" style="text-align:center">
  <input type="submit" value="Submit">
 </td>
</tr>
</table>
</form>
</div>
</body>

CSS:

body
{

        background-image:url(Pictures/background.jpg);
        background-repeat:no-repeat;
        background-size:100%;

}
    #mainText
    {

    position: absolute;
    width: 70%;
    left: 14em;

}
#conTable
{

    left:14em;
    top:8em;
    position:absolute;
}

#Banner
    {
            position:absolute;
            padding-left:40%;
    }
#Links
    {
            position:absolute;
            top: 0;
            left: 0;
            width:50px;

    }
    #container {position: relative; width: 100%}

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

Is it possible to target the sibling of the currently selected or focused element with CSS?

I'm attempting to add button functionality to show and hide errors using CSS. By clicking the CSS button or link, I can target the siblings of the focused element as shown below. This method is only effective in IE8+ browsers. #ShowErrors:focus + a ...

cssinternet-explorerdombrowser

Retrieve the current height of the iFrame and then set that height to the parent div

Within a div, I have an iFrame that needs to have an absolute position for some reason. The issue is that when the iFrame's position is set to absolute, its content overlaps with the content below it. Is there a way to automatically adjust the height ...

javascriptjqueryhtmlcssiframe

Combining PHP and HTML: Utilizing nested foreach loops with interspersed HTML code

Attempting to create a layout of items using an Accordion arrangement (from Bootstrap) has led me to retrieve data from a pgsql db. Fortunately, the data retrieval process is successful. The challenge lies in displaying this data, as I am encountering an ...

phphtmlpostgresqltwitter-bootstrap-3

JavaScript problem with hovering action causing additional buttons to appear

Currently, I am developing a user interface where, upon hovering over an LI element, 2 buttons appear to provide additional functionality - "edit" and "remove". However, I am facing challenges with the mouse hit zones. The mouseover function works effect ...

javascripthtmlcsshovermouseover

Establish a buffering system for the <video> element

Currently, I am facing an issue with playing videos from a remote server as they take an extended amount of time to start. It appears that the entire video must be downloaded before playback begins. Is there a way to configure the videos so they can begi ...

javascripthtmlvideowebhtml5-video

What could be causing the overflow of the div element within my header?

I recently embarked on a personal project to create my own portfolio website using HTML, CSS, and JavaScript. As I was working on styling the header section with bright colors for visualization purposes, I encountered an issue where the green box was overf ...

htmlcss

Can we set a restriction on the maximum number of children a particular div can contain?

I'm trying to find a way to restrict the number of children in a div. The concept is that there is a selected commands div where you can drag and drop available commands (essentially buttons) from another div called available commands. However, I wan ...

javascriptjquerycssdrag-and-drop

The sluggish rendering speed of AngularJS is causing a delay in displaying the loader

Within my application, I have tabs that load a form in each tab with varying numbers of controls. Some tabs may contain a large number of controls while others may have fewer. My goal is to display a loader while the contents are being rendered into the HT ...

javascriptjqueryhtmlangularjs

Why is it that the edit or delete button is not functioning when I attempt to click on the next page?

Having an issue with my script. It works fine for editing and deleting on the first page, but when I navigate to the next page, those functionalities stop working. Can anyone help me troubleshoot this problem? <script> $(function(){ $(&ap ...

javascriptphphtml

Creating tables in HTML is a useful skill to have. Follow these steps

I am looking to create a simple HTML table, and I have provided my code below: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=" ...

htmlhtml-table

The HTML anchor tag paired with the italic tag is a powerful combination for

Here is some example code: <a href="#"> <i class="some-bg" /> Some Text </a> Along with some Javascript: $("a").bind("touchstart", function (e) { e.preventDefault(); console.log("Tag: " + e.target); console.log("Tag Nam ...

javascriptjqueryhtml

Can you guide me on how to programmatically set an option in an Angular 5 Material Select dropdown (mat-select) using typescript code?

I am currently working on implementing an Angular 5 Material Data Table with two filter options. One filter is a text input, while the other is a dropdown selection to filter based on a specific field value. The dropdown is implemented using a "mat-select" ...

javascripthtmlangulartypescript

Adding query strings to the end of a URL in order to redirect to a new destination

After successfully capturing a query string at the start of my survey with PHP syntax, I now have it stored in a variable. My next challenge is to redirect to a different URL at the end of the survey, while also including that same query string. For insta ...

phpjqueryhtmlajax

Using CSS to select a specific class within an attribute

Having trouble targeting a specific navigation item in a div using an attribute value in CSS. Here's the code I have so far: My goal is to target the navDepts class. HTML <div class="primary-nav" data-name="about"> <div class="sub ...

css

Align a div vertically in a responsive design layout

How can I get the text inside "grid2" and "section2" to vertically align in the middle? Is this issue related to my HTML or is it a problem with the CSS? Can someone guide me in the right direction? I have searched for similar questions but the answers h ...

csshtmlvertical-alignment

I'm attempting to create a dropdown menu, but I'm struggling to keep it open when I hover over an option

Seeking assistance as a beginner in coding. I am struggling with creating a dropdown menu option on my website. The issue is that the menu closes whenever I attempt to move my mouse to select other options. It seems to work fine when using the run option h ...

htmlcss

Tips for getting my navigation bar menu button functioning properly?

I am struggling to make my button show the menu when clicked. I have tried various methods but still can't pinpoint the issue. I utilized the "checkbox" trick to display the hamburger button when the site width is under 500px for a responsive menu, ye ...

htmlcss

Show the user's username on their profile page by retrieving the name from the database

Upon successful login/signup with various services, I want to display the username on the profile page. However, my database stores user data in different fields depending on the service used - user.twitter.name for Twitter logins, user.google.name for Goo ...

javascriptnode.jshtmlexpress

Responsive HTML5 audio player adjusts size when viewed on mobile devices

I am facing a challenge with an HTML5 Audio player. It looks fine on desktop but behaves strangely on mobile devices. While the width remains intact, it repositions itself and floats over the element it is contained within. How can I prevent this repositio ...

htmlcssmobile-safarihtml5-audioaudio-player

Search Bar on the Website for Google Search

I am currently working on a basic website and I'm looking to incorporate Google Search functionality into it. I've managed to create a simple search box that redirects users to the Google Search Results page when they input their query. However, ...

htmlcss