Placing a div element beneath some text

Here is my HTML code snippet:

<div id="backgroundH"></div>

<div id="header">
    <h2> Premium Store </h2>
</div>

This is my CSS code snippet:

#backgroundH {
    width: 100%;
    height: 50px;
    background-color: #dddddd;
}

#header {
    top:-50px;
    color:black;   
    font-family:Courier New;
}

body {
    background-color:#cccccc;
}

I have been trying to make it work, but nothing seems to be happening. Can someone please assist me in figuring out how to position the text over the div that I am using as the background?

The desired outcome should show a gray background with the text "premium store" overlayed on top of it.

Answer №1

Your div structure needs to be corrected as follows:

http://jsfiddle.net/mCGt8/

Here is the correct HTML:

<div id="backgroundH">        
    <div id="header">
        <h2> Premium Store </h2>
    </div>        
</div>

And here is the correct CSS:

#backgroundH {
  width: 100%;
  height: 50px;
  background-color: #dddddd;       
}

#header {    
  top:-50px;
  color:black;   
  font-family:Courier New;
}

body {
  background-color:#cccccc;
}

Answer №2

When utilizing top: -50px in text-div, it indicates a desire for the text-div sibling to be positioned behind background-div. However, it appears you may have overlooked adding position: relative.

#header {
    position: relative;
    top: -50px;
    color: black;   
    font-family: Courier New;
}

An issue with position: relative is that the space the div would occupy before applying top: -50px remains unchanged.

In this scenario, there are two potential solutions:

  1. CSS approach: adjust using margin-top: -50px;

  2. HTML modification: consider nesting text-div within background-div if feasible (recommended)

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

Using HTML5 data attributes as alternative configuration options in a jQuery plugin can present challenges

I am currently in the process of creating my very first jQuery plugin, and I have encountered a challenge when attempting to extend the plugin to support HTML5 data attributes. The idea is for a user to be able to initialize and adjust settings simply by u ...

Attempting to design a unique CSS ribbon but hitting a roadblock with getting the perfect curve just right

I have attempted to create a CSS shape (ribbon) using border radius, but I am struggling to achieve the desired curve. The curve I manage to create does not exactly match the curve of the div in the image. background: #008712; width: 89px; height: 22p ...

Easy steps to eliminate background color from text

https://i.sstatic.net/mKmIW.png I have encountered an issue where a white background is covering the background image in my coding project. Despite trying to add background-color: transparent;, I wasn't able to remove the white background. How can I r ...

Having trouble dividing an HTML file?

Currently, I am working on creating a very basic web page that is divided into two parts. Each part will have its own HTML file: Welcome.html & Welcome.css: <html> <head> <link rel="stylesheet" type="text/css" href="Welcom ...

Guide on syncing Bootstrap 4 sliders using a single set of controls

Is it possible to synchronize a bootstrap 4 carousel with controls to a carousel without any controls? 1) When the control arrows are clicked, both carousels will slide simultaneously. 2) Hovering over either carousel will pause both carousels from slidi ...

Adjust the parent's height to match the height of its content (CSS)

Could anyone assist me in figuring out how to adjust the height (red border) to fit the content (green border)? https://i.sstatic.net/l1p9q.png I'm struggling to determine which property to use, I'm aiming for this outcome but haven't had ...

Two scrollbars within Bootstrap-4 modal

$("div[id^='entry']").each(function(){ var currentModal = $(this); //click next currentModal.find('.btn-next').click(function(){ currentModal.modal('hide'); currentModal.closest("div[id^='entry'] ...

Set the height of the unordered list (ul) to be

I came across a design on Facebook that resembles a timeline, but I am having trouble adjusting the height of the ul element. <ul class="timeline">...</ul> I want the line in the middle to fill the height of the page even when there is less c ...

methods for retrieving an array of input values from HTML into JavaScript

I posted a question on salesforce.stackexchange.com and you can find the link below: Link to question After receiving feedback that my question is more related to JavaScript than Salesforce, I am reposting it here. Please review from an HTML and JS stand ...

Criteria for selecting table data that does not include another table

Can someone help me figure out what I'm doing wrong? I am trying to set a style for all td:hover elements that do not contain a table inside. I have tried various selectors and methods to create exceptions, but nothing seems to work. It would be reall ...

CreateJS animations in HTML5 are not compatible with iPads

I've been working on an animation project using CreateJS and spritesheet, but I'm encountering issues with it not functioning properly on iPad devices. Strangely, it works perfectly on the Chrome browser. As far as I know, the CreateJS framework ...

Prioritize loading images over loading any HTML elements

My goal is to ensure that my background images are loaded before the HTML content is displayed. However, I've noticed that certain elements such as input fields are being rendered before the background images finish loading. I've researched vari ...

Discrepant alignment of form group among the other elements in Bootstrap CSS

Currently, I'm working on an HTML horizontal form that includes buttons and text inputs. I'm using Bootstrap 3 for this project. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> <fo ...

Easiest and quickest method to retrieve metadata from a website

Currently, I am using preg_match to extract the 'title' from websites, however, it is loading very slowly. Here is what I have so far: This code sends links to a function: <?php foreach($savedLinks as $s) { echo "<div class='sa ...

CSS: Child Div Fails to Override Parent Div

My current page's content header appears as follows: However, I am aiming for something like this instead: This is the HTML snippet related to that part of the page: <div class="header">My Tools<a href="#possess" class="anchor_link">Vie ...

The issue I'm facing with Backbone.undo.js is that it is failing to track my second span and is unable to save

I have developed a small application where I can edit spans by clicking on them. An interesting issue arises when trying to edit the second span - it automatically changes the value of the first span to match the second one. Moreover, I am unable to reve ...

Utilizing dynamic IDs in JavaScript for HTML elements: A comprehensive guide

I am in the process of dynamically creating a drop-down box. While I have successfully created dynamic drop-down boxes, I now need to populate them with values from a database. To achieve this, I believe I need to use an on-click function. Despite attemp ...

What is the method for accessing an image in JavaScript?

Currently, I am developing a currency converter for a gaming marketplace and I would like the users to be able to generate images using JavaScript. While most of the work is completed, I am facing an issue where the images are not displaying properly and i ...

When static files are deleted or switched off, localhost:3000 fails to update my CSS or load at all

I've encountered a problem with my Rails project after precompiling assets for deployment on Heroku. Despite following advice to delete the static file, the app now remains stuck in a buffering state and won't load. I've attempted setting co ...

The process of manipulating the content of an HTML textarea using Selenium with Python

http://neomx.iwedding.co.kr/roundcube I attempted to change the content of a textarea, specifically the tracking number. My goal was to replace "9400111206213835724810" with "487289527385922090". However, I encountered an error message stating "ElementNot ...