PythonNewb PythonNewb - 7 months ago 13
HTML Question

CSS: Move an unordered list element downwards

I have a

ul
element as part of a navigation bar at the top of my webpage, and I'd like to move it downwards slightly. Here is an image of the navigation bar currently:

image

I'd like to move it downward slightly so the text can match up with the white bar running across the top of the page.

Here is a snippet of the HTML:

<!-- Nav -->
<nav id="nav">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="#who">WHO WE ARE</a></li>
<li><a href="#what">WHAT WE DO</a></li>
<li><a href="#contact">GET IN TOUCH</a></li>
</ul>
</nav>


How can I do this using CSS?

EDIT:

Here is all the HTML code:

<!DOCTYPE HTML>
<html>
<head>
<title>Serenity</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="assets/css/main.css" />
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="assets/bootstrap-datepicker-1.5.1-dist/css/bootstrap-datepicker.css"/>
<link href="master.css" rel="stylesheet"/>
<script src="master.js"></script>
<script type="text/javascript" src="assets/bootstrap-datepicker-1.5.1-dist/js/bootstrap-datepicker.js">
$('#sandbox-container input').datepicker({
format: "dd/mm/yyyy"
});
</script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
</script>
<style type="text/css">
html, body{
margin: 0;
padding:0;
border: 0;
}
</style>
</head>

<body class="homepage">
<div id="page-wrapper">
<!-- Header -->
<div id="header">
<!-- Inner -->
<div class="inner" id="app">

</div>

<!-- Nav -->
<nav id="nav">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="#who">WHO WE ARE</a></li>
<li><a href="#what">WHAT WE DO</a></li>
<li><a href="#contact">GET IN TOUCH</a></li>
</ul>
</nav>
</div>

<!-- Who -->
<div class="wrapper style1">
<article id="who" class="container special">
<header>
<h2></h2>
<p>

</p>
</header>
<footer>
<img style='margin-bottom: 10px' src="./assets/images/mascot.png" height="200" width="170">
<div style='margin-top: 10px'>
<a href="./theteam.html" class="button">Meet the team</a>
</div>
</footer>
</article>
</div>

<!-- Main -->
<div class="wrapper style1">
<article id="what" class="container special">
<header>
<h2><a href="#">So what is Serenity?</a></h2>
<p>

</p>
</header>
<footer>
<div>
<a href="#" class="button" data-toggle="modal" data-target="#myModal">Privacy</a>
</div>
</footer>
</article>
</div>

<!-- Footer -->
<div id="footer">
<!-- Contact -->
<section id="contact" class="contact">
<header>
<h3>Drop by and say hi!</h3>
</header>
<ul class="icons">
<li><a href="#" class="icon fa-envelope"><span class="label">Email</span></a></li>
<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
</ul>
</section>

<!-- Copyright -->
<div class="copyright">
<ul class="menu">
</ul>
</div>
</div>
</div>
</body>



Answer

margin-top is most likely what you're looking for.

Here is your code with margin-top added to an internal <style>. Keep in mind that the original CSS file is missing, so I can't show you the difference based on the image. The <ul> has been highlighted to show that the margin has been applied above it.

Note that if you want to only have the margin-top applied to the main nav <ul>, you should uniquely specify it (e.g. with a class) so that it does not affect all <ul>s in the document.

<!DOCTYPE HTML>
<html>
    <head>
        <title>Serenity</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="assets/css/main.css" />
        <script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
        <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="assets/bootstrap-datepicker-1.5.1-dist/css/bootstrap-datepicker.css"/>
        <link href="master.css" rel="stylesheet"/>
        <script src="master.js"></script>
        <script type="text/javascript" src="assets/bootstrap-datepicker-1.5.1-dist/js/bootstrap-datepicker.js">
            $('#sandbox-container input').datepicker({
                format: "dd/mm/yyyy"
            });
        </script>
        <script>
            $(function () {
                $('[data-toggle="tooltip"]').tooltip()
            });
        </script>
        <style type="text/css">
            html, body{
                margin: 0;
                padding:0;
                border: 0;
            }
          ul {
            margin-top: 50px;
            background: cyan;
          }
         </style>
    </head>

<body class="homepage">
    <div id="page-wrapper">
        <!-- Header -->
        <div id="header">
            <!-- Inner -->
            <div class="inner" id="app">

            </div>

            <!-- Nav -->
            <nav id="nav">
                <ul>
                    <li><a href="index.html">HOME</a></li>
                    <li><a href="#who">WHO WE ARE</a></li>
                    <li><a href="#what">WHAT WE DO</a></li>
                    <li><a href="#contact">GET IN TOUCH</a></li>
                </ul>
            </nav>
        </div>

        <!-- Who -->
        <div class="wrapper style1">
            <article id="who" class="container special">
                <header>
                    <h2></h2>
                    <p>
                       
                    </p>
                </header>
                <footer>
                    <img style='margin-bottom: 10px' src="./assets/images/mascot.png" height="200" width="170">
                    <div style='margin-top: 10px'>
                        <a href="./theteam.html" class="button">Meet the team</a>
                    </div>
                </footer>
            </article>
        </div>

        <!-- Main -->
        <div class="wrapper style1">
            <article id="what" class="container special">
                <header>
                    <h2><a href="#">So what is Serenity?</a></h2>
                    <p>
                      
                    </p>
                </header>
                <footer>
                    <div>
                        <a href="#" class="button" data-toggle="modal" data-target="#myModal">Privacy</a>
                    </div>
                </footer>
            </article>
        </div>

        <!-- Footer -->
        <div id="footer">
            <!-- Contact -->
            <section id="contact" class="contact">
                <header>
                    <h3>Drop by and say hi!</h3>
                </header>
                <ul class="icons">
                    <li><a href="#" class="icon fa-envelope"><span class="label">Email</span></a></li>
                    <li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
                    <li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
                    <li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
                </ul>
            </section>

            <!-- Copyright -->
            <div class="copyright">
                <ul class="menu">
                </ul>
            </div>
        </div>
    </div>
</body>