How can I use HTML/CSS to adjust the margin-top of text without affecting the background

Looking for a solution to move specific text downwards within its container without affecting the entire layout.

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300");
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body
{
    font-family: 'Open Sans';
    background-color: lightgray;
}

a
{
    text-decoration: none;
    color: #fff;
}

div#header
{
    background-image: url("header_img.png");
    background-size: cover;
    background-repeat: no-repeat;
    width: 80%;
    height: 220px;
    margin: 0 auto;
    margin-top: 50;
    color: #fff;
    font-size: 22px;
}

div#header span
{   
    font-weight: 300;
}


div#header h3
{
    text-align: center;
    padding-top: 85px;
}
div#header h4
{
    text-align: center;
}


/*
#222222 - top nav
#F5F5F5 - sidebar background color
#FFF - sidebar link hover background color
#63B7E8 - sidebar nav link hover text color
#D8D8D8 - sidebar nav text color

50px top margin
50px bottom margin
*/


/* Navigation */

/* Nav Title */
.nav
{
    background-color: dimgray;
    width: 80%;
    height: 40px;
    margin: 0 auto;
}

/* Remove bullet points on list */
.nav ul
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: dimgray;
}

.nav ul li
{
    float: left;
}

.nav ul li a
{
    display: block;
    color: #fff;
    text-align: center;
    padding: 14px; 16px;
    text-decoration: none;
}

.nav ul li a:hover
{
    color: #099;
    background-color: #fff;
}

.home-content
{
    width: 80%;
    height: 350px;
    margin: 0 auto;
    margin-top: 30px;
    text-align: center;
    font-size: 22px;
    background-color: #fff;
}

.home-content span
{
    font-weight: 300;
}

/* The text I am looking to reposition further down within its container. */
.title
{
    margin-top: 15px;
}

/* I also experimented with: 

.home-content h3
{
  margin-top: 15px; 
}

 */
<html>
<head>
    <title>Dashboard</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

    <div class="container">
        <div id="header">
            <h3>Sample<span> Text</span></h3>
            <h4>Sample. Text. Here.</h4>
        </div>
    </div>
    
    <div class="container">
        <!-- Navigation -->
        <div class="nav">
                <ul>
                    <li><a class="active" href="#">Home</a></li>
                    <li><a href="#">Menu1</a></li>
                    <li><a href="#">Menu2</a></li>
                    <li><a href="#">Menu3</a></li>
                </ul>
        </div>
        
        <div class="home-content">
            <div class="title">
            <h3>Default<span> Text</span></h3>
            </div>
        
        </div>
        
    </div>
    
</body>
</html>

Any suggestions on how to isolate and move just the desired text downwards? Your help would be greatly appreciated. Thank you. I have also attempted using padding, but it seems to yield the same outcome.

htmlcss

Answer №1

To adjust the alignment of .title, set its position to relative and utilize the top property instead of margin-top.

Here is an example:

https://jsfiddle.net/kbgb0qvr/

Answer №2

I managed to achieve it by adding padding to the parent container and removing margin from the child element. Although this method worked for me, I'm not sure if it's the most optimal approach.

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300");
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body
{
    font-family: 'Open Sans';
    background-color: lightgray;
}

a
{
    text-decoration: none;
    color: #fff;
}

div#header
{
    background-image: url("header_img.png");
    background-size: cover;
    background-repeat: no-repeat;
    width: 80%;
    height: 220px;
    margin: 0 auto;
    margin-top: 50;
    color: #fff;
    font-size: 22px;
}

div#header span
{   
    font-weight: 300;
}


div#header h3
{
    text-align: center;
    padding-top: 85px;
}
div#header h4
{
    text-align: center;
}


/*
#222222 - top nav
#F5F5F5 - sidebar background color
#FFF - sidebar link hover background color
#63B7E8 - sidebar nav link hover text color
#D8D8D8 - sidebar nav text color

50px top margin
50px bottom margin
*/


/* Navigation */

/* Nav Title */
.nav
{
    background-color: dimgray;
    width: 80%;
    height: 40px;
    margin: 0 auto;
}

/* Remove bullet points on list */
.nav ul
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: dimgray;
}

.nav ul li
{
    float: left;
}

.nav ul li a
{
    display: block;
    color: #fff;
    text-align: center;
    padding: 14px; 16px;
    text-decoration: none;
}

.nav ul li a:hover
{
    color: #099;
    background-color: #fff;
}

.home-content
{
    width: 80%;
    height: 350px;
    margin: 0 auto;
    margin-top: 30px;
    text-align: center;
    font-size: 22px;
    background-color: #fff;

    padding-top: 15px;
}

.home-content span
{
    font-weight: 300;
}

/* This is the Text I want to push down from the top of it's container.*/
.title
{
    /*margin-top: 15px;*/
}

/* I also tried this:

.home-content h3
{
  margin-top: 15px; 
}
<div class="container">
        <div id="header">
            <h3>Sample<span> Text</span></h3>
            <h4>Sample. Text. Here.</h4>
        </div>
    </div>

    <div class="container">
        <!-- Navigation -->
        <div class="nav">
                <ul>
                    <li><a class="active" href="#">Home</a></li>
                    <li><a href="#">Menu1</a></li>
                    <li><a href="#">Menu2</a></li>
                    <li><a href="#">Menu3</a></li>
                </ul>
        </div>

        <div class="home-content">
            <div class="title">
            <h3>Default<span> Text</span></h3>
            </div>

        </div>

    </div>

Answer №3

Give this a shot-

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300");
 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Open Sans';
  background-color: lightgray;
}
a {
  text-decoration: none;
  color: #fff;
}
div#header {
  background-image: url("header_img.png");
  background-size: cover;
  background-repeat: no-repeat;
  width: 80%;
  height: 220px;
  margin: 0 auto;
  margin-top: 50;
  color: #fff;
  font-size: 22px;
}
div#header span {
  font-weight: 300;
}
div#header h3 {
  text-align: center;
  padding-top: 85px;
}
div#header h4 {
  text-align: center;
}

/* Navigation */

.nav {
  background-color: dimgray;
  width: 80%;
  height: 40px;
  margin: 0 auto;
}

.nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: dimgray;
}
.nav ul li {
  float: left;
}
.nav ul li a {
  display: block;
  color: #fff;
  text-align: center;
  padding: 14px;
  16px;
  text-decoration: none;
}
.nav ul li a:hover {
  color: #099;
  background-color: #fff;
}
.home-content {
  width: 80%;
  height: 350px;
  margin: 0 auto;
  margin-top: 30px;
  text-align: center;
  font-size: 22px;
  background-color: #fff;
}
.home-content span {
  font-weight: 300;
}

.title {
  position: relative;
  top: 15px;
}


<body>

  <div class="container">
    <div id="header">
      <h3>Sample<span> Text</span></h3>
      <h4>Sample. Text. Here.</h4>
    </div>
  </div>

  <div class="container">

    <div class="nav">
      <ul>
        <li><a class="active" href="#">Home</a>
        </li>
        <li><a href="#">Menu1</a>
        </li>
        <li><a href="#">Menu2</a>
        </li>
        <li><a href="#">Menu3</a>
        </li>
      </ul>
    </div>

    <div class="home-content">
      <div class="title">
        <h3>Default<span> Text</span></h3>
      </div>

    </div>

  </div>

</body>

Instead of relying on padding or margin, experiment with the position and top properties within .title, as demonstrated in the snippet above.

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

Create a dynamic HTML table as the page loads

Customize for vhinn This is the desired output: I am currently attempting to dynamically create an HTML table on pageload using variables retrieved from a database. Here is a simple example of HTML code: http://jsfiddle.net/jdv590/daCum/1/ Code snippet ...

asp.nethtmlloopsdynamic

What exactly does original-title refer to in HTML coding?

I have been searching extensively, but I cannot find any information that explains the meaning and proper usage of the original-title in HTML code. I am unsure if original-title is a Tag or Attribute in HTML, and if it is the same as title? I came across ...

html

Tips for maintaining position when refreshing a web page within a scrolling table

Recently, I came across a helpful tutorial on how to create a table with a fixed header and scrollable body. You can find it here. While the tutorial worked perfectly for me, I encountered an issue when trying to refresh the webpage and maintain my positio ...

javascriptphphtmlcss

text box with an immobile header

As the browser window size decreases, the layout changes. However, when scrolling down, the search text box moves up and is no longer visible due to its lack of fixation. How can I make the search text box stay fixed as I scroll down? I tried implementing ...

javascriptjqueryhtmlcss

Is there a way to identify the presence of a mouse on a website?

In the process of developing a website, I encountered a dilemma with navigation buttons. They needed to be large for aesthetic reasons and ease of use but had to be small when not in use. To address this, I decided to shrink the buttons into thumbnails on ...

javascriptjqueryhtmlweb-applications

The functionality of Responsive CSS seems to be inconsistent, as it only works partially

Hey everyone, I'm struggling with my responsive CSS code. It seems to be working fine with max-width: 321px but not when I try max-width: 500px. I'm trying to figure out what I'm doing wrong and would really appreciate some help. /*/Mobile ...

csshtmlresponsive-design

What are the advantages of going the extra mile to ensure cross-browser compatibility?

It's fascinating how much effort is required to ensure web applications work seamlessly across all browsers. Despite global standards like those set by W3C, the development and testing process can be quite laborious. I'm curious why all browsers ...

javascripthtmlcsscross-browsercross-platform

Enhance your website with a stylish CSS jQuery menu that lets you toggle, slide

If you're curious about the code, take a look here! Here are some of the issues I'm facing: The div doesn't toggle to hide when clicked on itself, only when another one is clicked. (UPDATE: it actually won't toggle at all) When t ...

jqueryhtmlcssipad

Tips for creating a left-floating element with a horizontal scrolling area

I am trying to make this outer <div> scroll only in the x-axis, but it doesn't seem to be working properly. .wrapper { width: 98%; height: 320px; padding-left:1%; padding-right:1%; white-space: nowrap; overflow-y: hidden; over ...

htmlcss

The Bootstrap datetimepicker is malfunctioning, displaying an error in the console stating that '$' is not defined

I'm currently using the bootstrap datetimepicker but it doesn't seem to be working correctly. Can someone please point out what I might be doing wrong? Here are the links that I have provided: <script src="{{ asset ('css/sidebar/p ...

javascriptjqueryhtml

Bottom section goes haywire in Chrome when clearfix is applied to a div above

When I remove the clearfix div above the footer, the text aligns correctly on Firefox. However, this causes issues with other elements on the page. It's puzzling how the clearfix is impacting the footer in this way... Here is a link to my page: ...

cssfooterclearfix

Display and view .dwg files using Javascript, HTML, and Angular

Looking for a way to upload and preview .dwg format images on a page created using js/HTML/angularjs or Angular 2+? I've attempted to use a CAD viewer js library, but the lack of documentation has made it challenging. Has anyone successfully implement ...

javascripthtmlangularjsangular

Accelerate website loading

After testing the speed of my site's loading, I discovered that the reason for its slow speed is... Some proxy caching servers do not cache resources with a "?" in the URL. To address this issue, it is recommended to remove the query string and enc ...

htmlcssweb-development-server

The loading of Bootstrap was halted by WAMP

Hi there, I'm encountering some issues with my WAMP setup. Previously, my pages were loading fine on WAMP, but a few months back, I attempted to use a keyboard shortcut to refresh a tab on Chrome. After that, my Bootstrap stopped loading. Everything w ...

htmlcssbootstrap-4wampserver

What is the regular expression pattern for capturing all option tags in HTML?

My message is presented below. <OPTION / value/3D70>Airport</OPTION> <OPTION value/3D81>Akuressa</OPTION> <OPTION value/3D32>Ambalangoda</OPTION> <OPTION value/3D65>Ambalantota</OPTION> In order to extract ...

htmlregexeclipse

Steps for displaying a div when clicking a link in the navigation

Hello there, I'm from the Netherlands so please excuse any mistakes in my English. I will do my best to explain my question clearly.... Objective The goal is to have a navigation bar where each item, when clicked on, will display a div with content ...

htmlcssnavigationhover

Ensure that the central section of the slider remains illuminated

Looking for help with customizing my "product" slider, lightSlider. I want the middle div to always be highlighted when navigating through the slider. Here's what it looks like currently: Link to screenshot - current. My goal is to achieve this look: ...

javascriptjqueryhtmlcsswordpress

How to retrieve Checkbox label text using Selenium and C#

Trying to extract the text value of a checkbox label. Check out this HTML code snippet <div id="content" class="large-12 columns"> <div class="example"> <h3>Checkboxes</h3> <form id='checkboxes'> &l ...

c#htmlseleniumxpathcheckbox

Leveraging jQuery for dynamically populating <select> elements within an HTML document using JSON data

My goal is to populate my <select> element with country names from a JSON file using jQuery/ajax. <div id="navbar"> <label for="countrySelect">Select a country from the list:</label> <select id="count ...

htmljqueryjsonajaxcurl

Does a DOM API exist specifically for querying comment nodes within the document?

My document contains a debugging comment that appears as follows: <!--SERVER_TRACE {...}--> Is there a method to search the DOM and access this specific node? I would prefer a vanilla JavaScript solution, without relying on any external libraries. ...

javascripthtmldom