Adjusting screen size to match different resolutions

After uploading mrandmrsmagic .com website, a few issues were noticed. The site appears fine when maximized, but only half is shown when minimized. The absence of a scroll bar could be causing this display problem. Five different background images were used by slicing them in Photoshop for the site. However, since it has been a while since building a site from scratch, the coding might be messy. Presented below is the CSS code for the five body divs.

#body {
width: 1024px;
height: 583px;
marin: 0;
padding: 0;
position: relative;
left: 448px;
top: -128px;
background: url(../images/body_02.jpg) no-repeat left top;
}

#body2 {
width: 1024px;
height: 583px;
position: relative;
left: 448px;
top: -128px;
background: url(../images/body2_02.jpg) no-repeat left top;
}

#body3 {
width: 1024px;
height: 583px;
position: relative;
left: 448px;
top: -128px;
background: url(../images/body3_02.jpg) no-repeat left top;
}

#body4 {
width: 1024px;
height: 583px;
position: relative;
left: 448px;
top: -128px;
background: url(../images/body4_02.jpg) no-repeat left top;
}

#body5 {
width: 1024px;
height: 583px;
position: relative;
left: 448px;
top: -128px;
background: url(../images/body5_02.jpg)  no-repeat left top;
}

#body6 {
width: 1024px;
height: 583px;
position: relative;
left: 448px;
top: -128px;
background: url(../images/body6_02.jpg)
}

An attempt to fix the issue was made by removing the height and setting the width at 100%, which did not solve the problem. In fact, it may have worsened it. Is there a way to rearrange the CSS to address this issue while still keeping the five divs? Possibly creating one initial div tag and then defining five class tags for the bodies could be a solution. Any suggestions or assistance are welcome. Thank you.

csshtml

Answer №1

There is a more effective way to approach the use of images as backgrounds in your <div> elements, without relying on unnecessary positioning. Here's an alternative method:

CSS

<style>
    /* Ensure consistency in width for main components and center them within the<body>. Heights will adjust accordingly */
    #header, #cssmenu, #content { width:1024px; margin:0 auto }
    #cssmenu { ... } /* Your existing code should suffice here */
    /* #body1/2/3/4....can be omitted */
</style>

HTML

<body>
    <div id="header">...</div>
    <div id="cssmenu">...</div>
    <!-- Let's embrace the purpose of img elements - don't hesitate to use them -->
    <div id="content"><img src="body2.jpg"></div>
</body>

Answer №2

Wow, diving into the world of website building can be overwhelming at first. Your initial effort is commendable! One thing to note is that you have positioned elements using absolute pixel values, which may cause alignment issues on various screen sizes. Instead of listing all the areas for improvement, I recommend checking out this helpful resource.

Check out this jsFiddle example

This example layout is similar to yours but simplified and vertically centered. It's a great starting point for experimenting with different CSS properties and understanding how they affect the design. Don't forget to explore HTML and CSS tutorials as well!

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

Having trouble locating specific elements on Yahoo News with Selenium in Python?

I am currently facing some challenges with extracting comments from Yahoo News using Selenium. I have successfully clicked on the comments button to open it, but now I am struggling to locate the text of the comments section. from selenium import webdriver ...

pythonhtmlselenium-webdriverweb-crawler

The issue arises when attempting to reopen the jQuery UI dialog box after a div has been loaded

I am facing an issue with my survey results table where I have an EDIT button for each entry. Clicking on the EDIT button opens a dialog box with the survey results loaded from the database. After editing the answers, I want to save them in the database an ...

jqueryhtmlajaxdialogreload

Dim the brightness of an image on Internet Explorer

I discovered this code on another site and it functions flawlessly in Chrome and FF, however, IE (version 11.0.9) doesn't seem to like it. -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -o-filter: grayscale(0%); filter: grayscale(0%); fil ...

javascripthtmlcss

Implementing input overflow scroll feature on iOS Safari version 8

Encountering an issue with form fields on mobile Safari, version 8.1 that seems to be persisting across all versions of Safari 8 on mobile devices. Typing text into an input field longer than the visible width causes the cursor to move right as expected. ...

htmlioscsssafarimobile-safari

Enhance user experience with JQUERY - MouseEnter, Focus, Hover, and Blur

Here is the current code snippet for showing and hiding a footer banner. Everything seems to be working fine except for an issue with MouseOver functionality. The MouseOver feature works as expected, but when a user clicks within the area, the highlight d ...

jqueryhtmlcss

Include a nested input field and corresponding label within a div element

Using JavaScript, I am attempting to dynamically add a div containing an input and label within another div in the body. The color variable inside the JavaScript code will eventually be relocated within the file, but for clarity, it is included here. Essen ...

javascripthtmlcssappendchild

Utilize CSS Module class names through direct DOM access

I have a unique situation involving a component that utilizes CSS-Modules through the babel-plugin-react-css-modules plugin. During certain points in the component's lifecycle, I need to calculate new dimensions by directly accessing the DOM. Within ...

cssreactjscss-modulesreact-css-modulesbabel-plugin-react-css-modules

Move divs that are currently not visible on the screen to a new position using CSS animations

Upon entering the site, I would like certain divs to animate from an offscreen position. I came across this code snippet: $( document ).ready(function() { $('.box-wrapper').each(function(index, element) { setTimeout(function(){ ...

javascriptjqueryhtmlcssanimation

JQuery's Add/Remove Class Functionality Fails to Execute

After mastering the use of JQuery to manipulate CSS properties with buttons, I am now attempting to create buttons that can add or remove CSS classes. I found a helpful tutorial on this topic at http://www.w3schools.com/jquery/jquery_css_classes.asp Unfor ...

jquerycss

The SubMenu icon in Android disappears when creating a menu dynamically

I'm currently working on creating a dynamic menu list, and I've managed to create the menu options successfully. However, every time I run my code, the icon for the main item disappears. Below is a snippet of my code: private static final int SU ...

javaandroidhtmlandroid-layoutandroid-studio

The ModalPopupExtender has the ability to automatically close

I implemented a ModalPopupExtender to display a panel with a textbox inside. I added some code for the textbox's textchanged event, but every time the focus leaves the textbox, the popup closes automatically. Can anyone suggest a solution to this prob ...

c#jqueryhtmlasp.netajax

The alignment of inline-block elements is not being maintained on the same line

Here's a question I have about my embedded form. Why does the display property of inline-block make the "submit" and "terms" elements appear higher than the email field? And more importantly, how can I fix this issue? I've attempted to use the t ...

htmlcss

Customize CSS styling

When it comes to the styling of my first line, I have a specific style in mind: * { text-align:left; } This style works well across most parts of the site as they are predominantly left aligned. However, there are few areas where I need the text alig ...

cssoverriding

Exploring the relationship between Delphi and CSS in terms of the box model concept

I am currently working with a Delphi program on Windows to create HTML content. The challenge I am facing is achieving pixel-perfect WYSIWYG while dealing with text-wrap issues. When I generate the HTML from Delphi, the layout looks like this: -- ------- ...

htmlcssdelphiwysiwygcss-position

jQuery function failing to produce the intended results

I am trying to apply the active class to the last img element using HTML and jQuery Below is my code in HTML and jQuery: function initialSteps() { $(".row").find("column:last").find("img:first").className += " active"; // this does not work either ...

jqueryhtmlcss

What is the best way to compare input to 2 distinct patterns in order to produce 2 separate error messages accordingly?

Is there a way to use HTML and angular to validate input against two patterns and generate two different inline error messages? The "pattern" attribute in the input tag doesn't seem to work for this. For instance, I need to validate if the input star ...

htmlangular

Issues with hover functionality in Javascript, CSS, and HTML

Seeking assistance with my JavaScript, HTML, and CSS development, I ran into an issue while trying to create a hovering function for my webpage. Despite my efforts, the links are not displaying anything when hovered over, and the divs meant for specific ho ...

javascriptjqueryhtmlcsshover

Not all Angular Material2 styles are being fully applied

One issue I am encountering is that styles for components such as <mat-chip> or <button mat-raised-button> (the only ones I have found) are not working properly and appear gray by default. However, styles do apply correctly to the <mat-card& ...

cssangularangular-material2

Adjust the positioning of divs to account for changes in scale caused

I have 3 div blocks arranged on a web page, with the first one bigger and located on the left side while the other two smaller ones are positioned on the right side. I want their relative positioning to remain fixed across all browsers and zoom levels. Cur ...

csshtml

Struggling with aligning two divs side by side on an HTML page

Recently, I've been experimenting with Electron and attempting to create 2 divs side by side. Despite trying various alignment options found here, nothing seems to be working for me. Here's the code I have so far: Code body, html { hei ...

htmlcss