How to Position Elements Below Another Element Without Any Spacing

I have a CodePen project located at https://codepen.io/dannyrb/pen/ORqvZy. My goal is to insert additional elements, such as a divider line and extra text, right below the title "FULL STACK." However, when I try to add something like

<h1 class="title">Full Stack</h1>
<p style="color:white;"> Sample Text. Sample Text. Sample Text.</p>

The sample text ends up appearing below the container (beneath the mountains). Is there a way for me to position this directly under the title without having to manually use absolute positioning?

htmlcss

Answer №1

To properly structure your text within a container, enclose it all in a div and position that div accordingly. Here is an example:

<div class="container-text">
  <h1 class="title">Full Stack</h1>
  <p>HI</p>
</div>

Then, apply the following CSS style:

.title {
  font-family: 'Megrim', Georgia, serif;
  font-size: 50px;
  line-height: 50px;
  letter-spacing: .3em;

  /* Make the font smoother */
  text-transform: uppercase;
  text-shadow: 1px 2px 1px rgba(black, .2);
   -webkit-font-smoothing: antialiased;

  margin: 0; padding: 0;
}

.container-text{
  position:absolute;
  text-align:center;
  top:20%;
  width:100%;
  color:white;
  z-index: 100;
}

Answer №2

element, I concur with the response provided earlier. By experimenting with the .title class in your codepen, I modified it to a DIV and nested H2 and P elements within. Additionally, I adjusted the font-size and line-height of the div.title element to utilize EMs, enabling you to customize the styling of the H2 and P elements according to your preferences.

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 ngIf in Angular and eliminating components in Angular 6

Currently, I am faced with the challenge of removing the header and footer components in one specific component, but I'm unsure about how to proceed. In my approach, I consider the app component as the index.html component. Whenever I create a new com ...

htmlangular

What is the method for turning off Bootstrap for viewport width below a specific threshold?

I'm currently utilizing bootstrap for my website design. However, there's a particular CSS rule causing some frustration on one specific page: @media (min-width: 576px) .col-sm-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-w ...

htmlcsstwitter-bootstrap

Concealing a hyperlink within a DIV by removing or hiding it

I am looking to temporarily hide or remove a specific link (team.aspx) within a drop-down menu, with the intention of adding it back in later. Here is my current code: <div id="nav_menu"> <ul id="nav"> <li class="current"><a href= ...

jqueryhtmlcss

Creating a Dynamic Navigation Bar with HTML and CSS

I've been exploring the code on w3schools.com, and while there are some great examples, I'm struggling to understand it all. Unfortunately, there aren't any instructions on customizing the code for a third level of menus. Can someone simplif ...

htmlcssnavigationhoverdropdown

Guide to switching a button using JavaScript

I am trying to create a button that will toggle the font size between 16px and 14px when clicked. The button text should also change from "Increase Font" to "Decrease Font" accordingly. UPDATE: I managed to get it working, but it only toggles twice and th ...

javascripthtmlcss

What could be causing the search function of the datatable to be hidden?

I am experiencing some difficulties with the code I have. My goal is to incorporate search functionality and pagination into my table. Unfortunately, it does not seem to be working as expected. Below is a snippet of the script located in the header section ...

htmljqueryhtml-tabledatatables

Creating a Full Height Background Image with a Responsive Width Using Jquery

I am facing an issue with my background image dimensions of 1400 in height and 1000 in width. When using any full-screen background jQuery plugin or code, the image crops from either the top or bottom to fit the entire screen. However, I am looking for a s ...

javascriptjqueryhtmlcss

The border feature functions correctly in Google Chrome, however, it does not work in Internet Explorer

I recently created a GridView using asp.net with a black border color. However, I encountered an issue where certain lines were showing up in white which I didn't want to see. It seems there may be a problem when working with child elements, particula ...

cssasp.netinternet-explorergridview

Adjusting the dimensions of the image to fit within the header box

I need help resizing the image to fit my website header. The background-image I am using is url("image/header\header.jpg") with a background-size set to cover. Any assistance would be greatly appreciated. Please note that the picture is not my own wor ...

css

Guide to ensuring only one Accordion opens at a time in Elementor

I created a custom accordion in elementor with CSS and JavaScript, but I'm facing an issue where the tabs stay open when others are opened. How can I modify the code to make sure only one tab is open at a time? Below is the CSS code snippet: body ...

javascriptjquerycsswordpresselementor

Variations in spacing due to line breaks

Looking for a solution to my code formatting issue in HTML. Here is an example of my CSS: span{height:200px;width:200px;border-width:1px;border-color:black;border-style:solid;display:inline-block} This is how my HTML code looks before changes: <span& ...

html

What is the best way to assign an array from a text input field to a JavaScript variable?

How can I input an array like [1, 2, 3] into a text input on an HTML page and then apply it to the var array in a function named inputArray() when a button is clicked? I attempted to do this with: var array=document.querySelector("#inputNumber" ...

javascripthtmlarraysdom

`Issue with Firefox's rendering of HTML tables`

I have noticed that the table appears differently in Firefox compared to IE8/Chrome. You can view the website here: I would like the table to look more like it does in IE8/Chrome, where the lines are a light gray color instead of completely black. Any s ...

htmlfirefox

Having trouble with the CSS `not` selector?

Below is the code snippet I experimented with XHTML <div> <span>Span1</span> <span>Span12</span> <span>Span13</span> </div> <div> <span>Span1</span> <span> ...

javascripthtmlcss

Break free from Instagram's in-app browser and open in Safari instead

One of the features on my website is a link that redirects users to Instagram login to access photos. Unfortunately, when using the in-app browser on an iOS device, this page does not function properly. I am considering adding a link that will redirect use ...

javascripthtmliossafariinstagram

Ways to troubleshoot and resolve the jQuery error with the message "TypeError: 'click' called"

I am currently developing a project for managing Minecraft servers, focusing on a configuration panel. I have set up a form that users need to fill out in order to configure the settings and send the values using Ajax. However, I encountered an error: Type ...

javascriptphpjqueryajaxhtml

Simple ways to personalize scrollbar in Material UI

Recently, I have been incorporating Material-UI into my React project to enhance its functionality. However, I encountered an issue where I was unable to customize the scrollbars within the Material-UI components. Here is the CSS code that I was using prio ...

javascriptcssreactjsmaterial-uiscrollbar

Is there a way to prevent cards in a carousel slide from wrapping onto two lines?

Currently, I am utilizing Bootstrap 5 to develop a website and an accompanying carousel. My objective is to align all the items in the carousel vertically. Unfortunately, I am encountering some difficulties in achieving this layout. Can anyone provide assi ...

htmlcssvisual-studiofrontendbootstrap-5

What's the deal with the Cordova Splash Screen?

I am currently developing an app with Cordova and I am facing some challenges with implementing the splash screen for Android. The splash screen is working perfectly fine on iOS, but I am unsure of how to proceed on Android. Do I need to install a plug-in ...

androidioshtmlcordovasplash-screen

What is the technique for moving a slider-like checkbox slider to one of its labels when they are clicked on?

Is there a way to make the switch slider move to the word the user clicked on (medium or large)? I'm not sure if I can track the movement of the switch slider with JavaScript or if it's possible to do with CSS. Right now, I have only created a si ...

javascripthtmlcss