CODEWITHSUNDEEP
htmlcss
nmart
nmart

Reputation: 65

How do I move the text up in CSS?

I'm trying to move my text up so that it's not in the center of the page. I would like to move the text "GET YOUR LICENSE & PERMIT BONDS FAST & EASY" up a little bit on my split-screen. I tried top and bottom px but that isn't working. I just would like it to move up a little bit. Any help will be greatly appreciated!

body {
    margin:0;
    padding: 0;
    font-family: "Open+Sans", sans-serif;
 }

 .navbar {
    border-bottom: 2px solid #0C133C;
 }
 
 
 #nav {
     background-color: #fff; 
     color: white;
     width: 100%;
 
 }
 .nav {
   float: right;
     text-align: left;
   margin: 0;
 }
 .nav > li {                                                             
     display:Inline-block;
     padding: 20px 50px 10px 9px;                              
 }
 
.nav > li a {                                               
    text-decoration: none;
    color: #0C133C;
    font-size: 18px;
    border-bottom: 3px solid transparent;

}
.clearer {
    clear:both;
}

.subnav class{
  margin: 0;
position:relative;
}

 .subnav > div a {                                               
     text-decoration: none;
     color: #0C133C;
     font-size: 18px;
padding: 20px 30px 10px 9px;
}
  
.logo {
margin-top: 1rem;
}

.subnav {
display: flex;
justify-content: space-between;
align-items: center;
margin-right: 1rem; 

}

.split {
  height: 70%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: -50;
  overflow-x: hidden;
  padding-top: 20px;
}


.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.left {
  left: 0;
  background-color: #282C41;
color: white;
margin-top: .5rem;
 font-size: 15px;
}
h1 {
line-height: 1.2;
font-size: 40px;
bottom: 20px;
}
 
.right {
  right: 0;
  background-color: #CDCDCD;
margin-top: .5rem;
font-size: 18px;
}


input[type=text], select {
position: relative;
left: 140px;
  width: 50%;
  padding: 12px 20px;
  margin: 3px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.button: {
position: relative;
left: 140px;

}
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Navbar</title>
    <link rel="stylesheet" href="styles.css"
    

</head>

<body>

<div class="navbar">
            <ul class="nav">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Contact Us</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Sign In</a>
                </li>
            </ul>
            <div class="clearer"></div>
        </div>
        

<subnav class="subnav subnav-light bg-light">
<img src="universallogo.jpg" class="logo"/>
<div class="container-fluid">
<a class="subnav=brand" href="#">
 <a class="nav-link active" aria-current="page" href="#">Bonds</a>
</a>
 <a class="nav-link active" aria-current="page" href="#">Report a Claim</a>
 <a class="nav-link active" aria-current="page" href="#">About Us</a>
<a class="nav-link active" aria-current="page" href="#">Search</a>
</div>
</subnav>
 

<div class="split left">
  <div class="centered">
    <h1>GET YOUR LICENSE & PERMIT BONDS FAST & EASY</h1>
    <p>We provide our Customers with a fast, easy, and secure way to get bonded. Get your Free Quote in minutes.
</p>
  </div>
</div>

<div class="split right">


<form name="form1" id="form1" action="/action_page.php">
  <select name="subject" id="subject">
    <option value="" selected="selected">Select Your State</option>
      <option value="California">California</option>
      <option value="California">Illinois</option>
      <option value="California">Michigan</option>
      <option value="California">Ohio</option>
    </select>
  <br><br>
  <select name="topic" id="topic">
    <option value="" selected="selected">Who is requring the bond</option>
  </select>
  <br><br>
  <select name="chapter" id="chapter">
    <option value="" selected="selected">What jurisdiction is requring the bond</option>
  </select>
  <br><br>
     <select name="chapter" id="chapter">
    <option value="" selected="selected">Select Your Bond</option>
  </select>
<br><br>

</form>

 <form action="/action_page.php">
  <input type="text" id="date" name="startdate" placeholder="Effective Start Date">

<br><br>
  <input type="text" id="email" name="typeemail" placeholder=" Type E-mail">
</form>

<button type="button">Click Me!</button>
</div>

</body>
</html>

My text that I want to move up a little bit

Upvotes: 0

Views: 1295

Answers (1)

Sercan
Sercan

Reputation: 5101

You are having this issue because of the top: 50% style applied to the centered class style applied to the parent container of the <h1> element. I've applied the following changes to avoid this issue and allow you to apply the manual margin-top style.

enter image description here

.centered{
   position: absolute;
  
   /* I disabled the style below. */
   /* top: 50%; */
   
   /* Added the following style for spacing from above. */
   margin-top: 125px;

   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
}

Change the margin-top value defined in the centered class style to set the position of the corresponding <h1> element. Below is the executable snippet.

body {
  margin: 0;
  padding: 0;
  font-family: "Open+Sans", sans-serif;
}

.navbar {
  border-bottom: 2px solid #0C133C;
}

#nav {
  background-color: #fff;
  color: white;
  width: 100%;
}

.nav {
  float: right;
  text-align: left;
  margin: 0;
}

.nav>li {
  display: Inline-block;
  padding: 20px 50px 10px 9px;
}

.nav>li a {
  text-decoration: none;
  color: #0C133C;
  font-size: 18px;
  border-bottom: 3px solid transparent;

}

.clearer {
  clear: both;
}

.subnav class {
  margin: 0;
  position: relative;
}

.subnav>div a {
  text-decoration: none;
  color: #0C133C;
  font-size: 18px;
  padding: 20px 30px 10px 9px;
}

.logo {
  margin-top: 1rem;
}

.subnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 1rem;

}

.split {
  height: 70%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: -50;
  overflow-x: hidden;
  padding-top: 20px;
}

.centered{
   position: absolute;

   /* I disabled the style below. */
   /* top: 50%; */

   /* Added the following style for spacing from above. */
   margin-top: 125px;

   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
}

.left {
  left: 0;
  background-color: #282C41;
  color: white;
  margin-top: .5rem;
  font-size: 15px;
}

h1 {
  line-height: 1.2;
  font-size: 40px;
  bottom: 20px;
}

.right {
  right: 0;
  background-color: #CDCDCD;
  margin-top: .5rem;
  font-size: 18px;
}

input[type=text],
select {
  position: relative;
  left: 140px;
  width: 50%;
  padding: 12px 20px;
  margin: 3px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.button: {
  position: relative;
  left: 140px;
}
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Navbar</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="navbar">
      <ul class="nav">
        <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Contact Us</a></li>
        <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Sign In</a></li>
      </ul>
      <div class="clearer"></div>
    </div>
    <subnav class="subnav subnav-light bg-light"><img src="universallogo.jpg" class="logo" />
      <div class="container-fluid"><a class="subnav=brand" href="#"><a class="nav-link active" aria-current="page" href="#">Bonds</a></a><a class="nav-link active" aria-current="page" href="#">Report a Claim</a><a class="nav-link active" aria-current="page" href="#">About Us</a><a class="nav-link active" aria-current="page" href="#">Search</a></div>
    </subnav>
    <div class="split left">
      <div class="centered">
        <h1>GET YOUR LICENSE & PERMIT BONDS FAST & EASY</h1>
        <p>We provide our Customers with a fast, easy, and secure way to get bonded. Get your Free Quote in minutes. </p>
      </div>
    </div>
    <div class="split right">
      <form name="form1" id="form1" action="/action_page.php"><select name="subject" id="subject">
          <option value="" selected="selected">Select Your State</option>
          <option value="California">California</option>
          <option value="California">Illinois</option>
          <option value="California">Michigan</option>
          <option value="California">Ohio</option>
        </select><br><br><select name="topic" id="topic">
          <option value="" selected="selected">Who is requring the bond</option>
        </select><br><br><select name="chapter" id="chapter">
          <option value="" selected="selected">What jurisdiction is requring the bond</option>
        </select><br><br><select name="chapter" id="chapter">
          <option value="" selected="selected">Select Your Bond</option>
        </select><br><br></form>
      <form action="/action_page.php"><input type="text" id="date" name="startdate" placeholder="Effective Start Date"><br><br><input type="text" id="email" name="typeemail" placeholder=" Type E-mail"></form><button type="button">Click Me!</button>
    </div>
  </body>
</html>

Upvotes: 1

Related Questions