Issue with the overall HTML design

The placement of the banner is exactly where I want it to be, however, the boxes using jQuery masonry are overlapping it. I'm not sure what I did wrong here. Any suggestions or insights on how to fix this issue?

Example HTML Code:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="masonry.js"></script>
<script>
$(function () {
      $('#container').masonry({
          columnWidth: 1,
          itemSelector: 'div'
      });
});
</script>

<div id="banner">
    <img src="images/banner.png"/>
</div>

<div id="logo">
</div>

<div id="imagetrans">
<div id="container" class="clearfix masonry">

<div class="box1"> 
    <img class="bottom" src="images/eventbox2.png"/>
    <img class="top" src="images/eventbox.png"/>
</img></div>

<div class="box2">
    <img class="bottom" src="images/forumbox2.png"/>
    <img class="top" src="images/forumbox.png"/>
</img></div>    

<div class="box1"> 
    <img class="bottom" src="images/eventbox2.png"/>
    <img class="top" src="images/eventbox.png"/>
</img></div>

<div class="box1"> 
    <img class="bottom" src="images/eventbox2.png"/>
    <img class="top" src="images/eventbox.png"/>
</img></div>

<div class="box3">
    <img class="bottom" src="images/top10box2.png"/>
    <img class="top" src="images/top10box.png"/>
</img></div>

<div class="box1"> 
    <img class="bottom" src="images/eventbox2.png"/>
    <img class="top" src="images/eventbox.png"/>
</img></div>
</div>
</div>
</div>

Corresponding CSS:

body {
  width:900px;
  height:100%;
  margin:0 auto;
  background-image: url(images/gridbg.png);
}

#banner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0px;
}

#container > div {
  margin: 5px;
}
.box1 {
  width:350px;
  height:250px;
}

.box2 {
  width:150px;
  height:150px;
}

.box3 {
  width:150px;
  height:350px;
}

#imagetrans {
  position:relative;
  margin:0 auto;
}

#imagetrans img.top:hover,
#container > div img.top:hover {
  opacity:0;
}

#imagetrans img,
#container > div img {
  position:absolute;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}

I'm open to suggestions as I'm able to move the banner to the bottom by changing the code, but my preference is to keep it at the top. Any insights on what might be causing this issue?

Answer №1

Consider trying this adjustment:

#header {
  position: absolute;
  left: 0;
  right: 0;
  top: 0px;
}

Instead of the above, you could test:

#header {
   height: 80px; // adjust according to your header height.
}

Alternatively:

#header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0px;
}

If you opt for the fixed position method, make sure to include a top margin or spacer to push the page content down by the height of the header.

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

Expansion issue with Bootstrap panel

I am currently using Bootstrap 3 for the development of a social networking site. The issue I'm encountering involves displaying comments within a panel footer on toggle. However, the comments are extending beyond the footer area. Can anyone provide g ...

Iterating through the Bootstrap grid

https://i.sstatic.net/XMIzT.jpg I'm attempting to create a layout similar to the image provided. Currently, I am utilizing WordPress and WooCommerce and aiming to showcase products in this manner. The following HTML code is what I have been working ...

What is the best way to delete the onclick event of an anchor element?

Struggling to remove the onclick attribute using jQuery? Here's my code: function getBusinesses(page){ if(page==0){ alert("you are already on First Page"); $("#previous a").removeAttr("onclick ...

Utilizing jQueryUI dialog along with gridview and updatepanel for a seamless user

Currently, I am utilizing jQuery to transform a column of hyperlinks within a gridview into UI dialogs. The gridview is housed in an updatepanel. When I click on one of the dialog's buttons, I trigger a __dopostback on the updatepanel to refresh the ...

Whenever I nest my div tags within another div element in an HTML document

Whenever I try to position a div inside another div using float, I encounter problems. <div id="main"> <div id="anotherDiv"> <h1>Test</h1> </div> </div> Here is the corresponding style sheet: #main{ ba ...

Error message: "An issue occurred: Unable to access undefined properties (specifically, borderRadius) in MUI react."

I recently created a navigation bar with an integrated search bar component. The styling for my search component was done using MUI styled from @emotion/styled in MUI library, where I applied a borderRadius: theme.shape.borderRadius. However, I encountere ...

Troubleshooting Date Problems in Angular

When using the HTML5 date picker, I have encountered an issue where after choosing a date, the ng-model displays an older date instead of the current one selected. <input type="date" ng-model="dateModel" /> For example, when selecting the current d ...

What are the steps to activate code suggestion with codemirror?

My goal is to implement CodeMirror for enabling users to input code in various languages like CSS, HTML, and JavaScript. One specific requirement is to provide hints to the user when typing code in CSS mode. div { padding- } The system should prompt th ...

Utilizing jQuery to Execute a Function Upon Addition or Removal of Class Names

Currently, I am working on a function that includes a conditional statement to display an alert when a specific class name is removed from a div layer. Below is the code snippet: <div class="ui-tabs-panel ui-tabs-hide">panel</div> <div>& ...

Struggling to construct a binary tree as my descendants are not arranged in the right sequence

I am currently working on building a binary tree using PHP, MySQL, and a jQuery plugin developed by Frank-Mich. Here is the progress I have made so far... DATABASE STRUCTURE CREATE TABLE IF NOT EXISTS `members` ( `id` int(11) NOT NULL AUTO_INCREMENT, ...

CSS - Revealing an element on the backface post flip animation

I encountered an issue while working on a CSS flip card project. Despite using backface-visibility: hidden;, one element remains visible from the other side. In the simplified snippet provided, if you click on more in the bottom right corner, the card fli ...

Leveraging `var` in combination with jQuery selectors

I've encountered some difficulties when trying to use variables as selectors in jQuery. Is there a way to select the last td using the variable $t? <table id="mytable"> <tr> <td>a</td> <td>b</td> </tr> </ ...

What is the purpose of text-indent when using image replacement techniques?

I've implemented the code below for my primary menu a links: #sliding-navigation #filter-regista a { width: 75px; height: 29px; background: transparent url("images/directors.png") no-repeat 0 0; text-indent: -9999px; } Appreciate any ...

Modifying an image's src using JavaScript is not possible

I'm attempting to modify the source of an image using a JavaScript function, but it doesn't seem to be working. The function is being executed within a mounted() method in Framework7. Here is my current setup: HTML: <div> <span> &l ...

Creating a dynamic full-width background image that adjusts its height according to the content: a step-by-step guide

Currently, I'm attempting to apply a background image to a webpage that spans 100% width in order to adjust to the viewport size. The method I am using involves placing an image directly after the body tag with the subsequent styling: img#background ...

How can I display real-time streams from multiple IP cameras on an HTML page using Flask and Python?

I am currently dealing with a collection of cameras and the corresponding URLs in RTSP format. I managed to create a simple script that extracts the camera URL from the camera_config JSON file, but now I'm facing the challenge of embedding these video ...

Loading Java Script files in real-time

Is there a method to dynamically load JS files before "$(document).ready" is triggered, while still having them available in the ready event handler? Is there a feature in jQuery that allows for this process? The challenge I am facing involves loading di ...

Transferring information via Ajax causes backslashes to be generated in SQL queries

I haven't been able to find any similar issues. My form is populated with values from a SQL database. When I edit the input fields and save changes, an ajax call is triggered. In this particular case, I'm only updating one field, 'email&ap ...

How to ensure that a div element occupies the entire height of the webpage

After developing a small app in Angular, I'm looking to make the container element expand to the full height of the page, even when the content doesn't fill the entire space. On larger screens, the page doesn't stretch as desired. Here' ...

Retrieving a variable value from an AJAX call for external use

Looking for a solution to pass the generated JSON response from an ASMX web service accessed via AJAX to an outside variable in another function. Below is the code snippet for reference: function setJsonSer() { var strWsUrl = &apo ...