Xcode Question posted in
Whether you're new to Xcode or an experienced developer, our archive has everything you need to know about this integrated development environment (IDE). From basic functionalities to advanced features, our archive covers a wide range of Xcode-related questions and answers. Browse our archive now and find solutions to your Xcode questions, and take your app development skills to the next level

Xcode – How do I get the text body lower but not make it a footer?

HTML

<!DOCTYPE html>
<html lang="en">
    <head> 
    <link rel="stylesheet" href="NWC.css">
    <meta charset="utf-8">
    <!--Font Import Links-->
    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&display=swap" rel="stylesheet">
    <!---JS File Imports-->
    <script src="NWC.js">
    </script>
    <!--HTML Code Starts Below-->
    </head>
    <body>
    <section>
        <div class="header">
            <div class="logo_container">
                <h1>N W C</h1>
            </div>
        </div>
    </section>
    <!--Cover Section-->
    <section>
        <div class="coverpic">
            <img src="file:///C:/Users/jakes/Desktop/NWC/nwcgfrey.png" alt="NWC LOGO" width="60%" height="40%">
        </div>
    </section>
    <!--About Section-->
    <section>
        <div class="about-section">
            <h1>About NWC</h1>
            <p>New World Coding is a startup teaching kids to program. Coding is an essential skill to learn because it is our future. All of our technology today whether it's using a computer to making a pot of coffee is run by the code engineers write. Here at NWC, we have group lessons for you and a friend, or 1:1 lessons! For more information about NWC, our lessons, or any other questions, please fill click the button below.</p>
        </div>
    </section>
    </body>
    </html>

CSS

*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}

body {
    background-image: url(file:///C:/Users/jakes/nwcWebsitecity.png);
    background-size: cover;
}

.header {
    display: block;
    background-color: #1E1E1E;
    background-size: 1000px;
    width: 100%;
    height: 80px;    
}
/*
.inner_header {
    width: 1000px;
    height: 100%;
    display: table-cell;
    margin: 0 auto;
}
*/
.logo_container {
    height: 100%;
    display: table;
    float: left;
}

.logo_container h1{
    color: white;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    font-family: 'Josefin Sans', sans-serif;
    padding-left: 10px;
    
}


.coverpic {
    bottom: 750px;
    vertical-align: middle;
    text-align: center;
    display: table-cell;
}



.about-section {
    background-image:       
    url(file:///C:/Users/jakes/nwcWebsitecity.png);
    height: auto;
    width: 100%;
    position: fixed;
    color: white;
    font-family: 'Josefin Sans', sans-serif;
    color: white;
    text-align: center;
    transform: rotate(180);
  }
[What site looks like now, I just want to move the body section lower1

Basically, I want the text body to move down lower so that you don’t see it when you first load into the site, I want the .coverpic to be centered when you first load into the site and when you start scrolling you see the about section.

Tags:

2

Answers


  1. 0

    Add a class to your text (p tag):

    <p class= "sample">

    and then adjust the margin in your CSS:

    .sample {
  margin-top: 50px;
}

    adjust the margin-top accordingly for how low you want the text to go.

    edit: change the "color" in your about-section to black for example. Basically you have white on white right now.

    You’ll also notice that I added margin-top: 50px on both about-section and sample classes. The first margin-top brings the title down and the second brings the text down.

        .about-section {
    background-image:       
    url(file:///C:/Users/jakes/nwcWebsitecity.png);
    height: auto;
    width: 100%;
    position: relative;
    font-family: 'Josefin Sans', sans-serif;
    color: black;
    text-align: center;
    transform: rotate(180);
    margin-top: 50px;
  }



 .sample {
      margin-top: 50px;
    };
    Login or Signup to reply.
  2. 0

    U can use margine-top in css.
    which text u want to lower just write in css margine-top: and how px u want.
    Like example

        h1 {
margine-top: 50%;}

    to be in the middle screen or just lower or more high % to make it in the right position

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search