What could be the reason for the excess white space at the top and bottom of the page?

Once I implemented a new div class to incorporate a background image, the top, bottom, and side menus on my page suddenly turned white. style.css

#boundless{
  background-image:url('http://thehypebr.com/wp-content/uploads/2010/09/boundless-sem-branco-2.jpg');
  background-repeat:no-repeat;
  background-attachment:fixed;
  line-height:20px;
  font-size:14px;
  font-family:"Trebuchet MS"; 
  margin:0
}

index.php

<body>
    <div id='boundless' onclick='window.location.href="http://boundlessny.com/clothing"'>
htmlcss

Answer №1

Upon inspection using Firebug, it was determined that the issue stemmed from line 16 in the style.css file:

margin:165px auto 20px;

Steps to debug similar issues:

  1. Identify potential causes and eliminate them one by one.
  2. Utilize Firebug by right-clicking on the problematic area and selecting Inspect Element.
  3. Hover over elements to pinpoint the source of the problem. In this case, suspicion fell on improper margin, padding, or width usage.
  4. Focus on the CSS properties by examining the Style tab in the right panel. Expand nodes if necessary.
  5. Experiment by disabling or modifying the CSS value to determine its impact on the issue.

Answer №2

Within your style.css file, there are multiple instances of #xxxxx with 

background-color:white; and background-color:#fff;

For example, #wrapper2 has this defined.

Therefore, it is executing the instructions you provided.

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

Customize WordPress pages by adding a variety of unique logos for a

I am currently customizing a WordPress theme (Increate themes) for a client. They are looking to have a page with different content and a unique logo. My question is, how can I change the logo specifically for this page? This is the section of code in my ...

phpwordpresshtml

Collapse dropdown menus upon clicking outside of them

As a newcomer to coding, I'm trying to figure out how to create multiple dropdown menus where each one collapses when you click outside of it. I've been struggling with the code I wrote for weeks now - I want to have 3 dropdown menus but only one ...

javascriptjqueryhtmlcss

use jquery to increase margin on card upon collapse displaying

I'm currently using an accordion from a bootstrap 4 website. <div class="accordion" id="accordionExample"> <div class="card m-0"> <div class="card-header bg-white" id="headingOne"> <h5 class="mb-0"> <but ...

jquerycssbootstrap-4accordion

Learn how to smoothly scroll to the top of a div by clicking on a team name

CSS Code .hover-div { position:absolute; margin-top:-150px; visibility:hidden; transition:all 0.5s linear 0s; } .team_hover:hover + .hover-div { margin-top:0px; visibility:visible; } .hover-div:hover { margin-top:0px; visi ...

angularjscss

Unveiling the Technique: Adjusting Field Visibility When Dropdown is Altered

I tried to find a solution on Stackoverflow for displaying/hiding a field based on dropdown selection using either jQuery or inline JavaScript. However, I am facing difficulties when implementing this within a table. Let's start with an easy approach ...

javascriptjqueryhtmlcss

Is there a jQuery function that can produce repeated output and append content with each successive click?

Attempting to implement a dynamic searchbar with various parameters has led me to explore using jQuery to load and clone the searchbar file in order to append it to the body dynamically. I have made several attempts to modify selectors without achieving t ...

javascriptjqueryhtmlajax

Using jQuery's toggle function with a double click event to change the display to none

A div I created has the ability to expand to full screen upon double click, and I now wish to implement a toggle function so it can return to its original size when double clicked again. Initially, the code successfully increased the size of the div. Howe ...

javascriptjquerycss

Incorporate the Bootstrap classes to arrange the divs side by side, ensuring that any surplus space is utilized effectively

Having implemented a layout with two images and two paragraphs side by side, everything seemed to be working fine until I encountered an issue when setting both images' height to 400px. The goal was for the paragraph to adjust its size based on conten ...

htmlcssbootstrap-5

What techniques can be employed to create a fully operational web application using AngularJS?

I have taken on the challenge of understanding AngularJS by creating a webapp. Within my Eclipse environment, I am working with 4 files: main.js, index.html, view1.js, and view2.html. Currently, I can get index.html to load when Tomcat is running. Embedd ...

javascripthtmlangularjseclipseweb-applications

Issue with Ajax when attempting to load new content into a div after submitting a form

After implementing the code below to submit a form and use ajax to load the action page into a div on the same page, I am encountering an issue where clicking submit results in a duplicate copy of the form appearing again. <script src="//ajax.googleapi ...

jqueryhtmlajax

Having an issue with deleting a table row using jQuery when the button is clicked

I am facing an issue where clicking on a button does not delete the table row despite both the tr id and button id having the same value. Can someone please guide me on what might be going wrong? <tr id="<?php echo $result->id;?>"> <t ...

phpjqueryhtml

Simplifying HTML/CSS tasks with effective tools

Looking to create a user-friendly web interface for company employees without spending too much time on design and markup. The end result doesn't have to be fancy, just clean HTML/CSS. Any suggestions for tools or techniques to streamline this proces ...

htmlcssinterface

Tips on enlarging a webpage without showing the scroll bar on the main component

My goal is to create a webpage that resembles a window application. However, I've encountered an issue where zooming in on the page results in a scroll bar appearing on the main page. The parameters for the main page (the parent) are set as follows: w ...

cssreactjsflexboxmaterial-uiscrollbar

Setting dynamic image dimensions within a div element

Is there a way to display the div width in percentage even when the image is not loaded? The image sizes are mentioned in percentage and they load dynamically, making it impossible to fix their size. How can we ensure that the div maintains the correct wid ...

htmlimagecss

Tips for showcasing an image on an HTML page

I am encountering an issue with my HTML page that includes a Button. When clicked, it is supposed to display an image using an Ajax call. The functionality works properly in Postman Rest Client. However, when accessed through a browser, it only shows raw ...

javascriptjqueryhtmlajaximage

Listen for the chosen choice

What is the best way to display a chosen option in PHP? I have set up an HTML menu list with options for "Buy" and "Sell". I need to output 'I want to buy the book' if someone selects "buy", or 'I want to sell the book' if someone pick ...

phphtml

The JavaScript function modifies the value stored in the local storage

I'm in the process of developing a website that requires updating the value of my local storage when certain JavaScript functions are executed. Currently, I have this code snippet: localStorage.setItem('colorvar', '#EBDBC2'); I&ap ...

javascripthtmlcssfrontendstorage

Best practices for making an AJAX call to fetch information from a database

I have a database containing a single table. The table includes columns for Company and Time, among others, with Company and Time being crucial. Users can make appointments by filling out a form. Within the form, there are 2 <select> elements - one ...

javascriptc#jqueryhtmlajax

Delete the designated column from the table

I am having difficulty with hiding and showing table columns using checkboxes. I need to eliminate the Mars column (in bold) along with its corresponding data (also in bold). Once the Mars column is removed, I want the Venus column and its data values to ...

javascriptcss

Adding an image to a two-column layout with text

Seeking assistance with my website creation using HTML, CSS, and jQuery. Currently, I have a text layout formatted in two columns with an image placed before the text as shown below: <div> <div style="float:right"> <img src="ima ...

jqueryhtmlcss