I'm relatively new to coding. I'm playing around with a page where I have the nav bar at the very top of the page. Directly underneath I'm wanting an image with the page logo and description on top of the image.
The problem I'm having is there is a blank space between the nav bar and the image.
If I delete the words from the header (the logo, description) the image becomes flush with the nav bar like I intend it to be. But if put the words back into the header the space separates my two elements again. I'm not sure why this is consider the words are with the larger container of the header.
Can anyone help me delete this space between the elements.
By the way, this is my first time posting a question, so I'm not sure if I'm doing this correctly. Below are my html and css codes. Thanks in advance.
HTML:
<body>
<div class='top-bar'>
<nav>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Destinations</a></li>
<li><a href='#'>Languages</a></li>
<li><a href='project1-about.html'>About Us</a></li>
</ul>
</nav>
</div>
<header>
<h1><span>Project 1</span></h1>
<p class='kicker'>Traveling // Exploring // Coding</p>
</header>
CSS:
header {
height: 450px;
background: url('http://gratisography.com/pictures/17_1.jpg') center center;
background-size: cover;
margin: 0; }
header p {
font-family: Cinzel; }
.top-bar {
width: 100%;
height: 50px;
background-color: red;
margin: 0; }
nav {
float: right;
margin: 0px 30px 0 0;
height: 50px; }
nav li {
display: inline-block;
margin-left: 20px;
font-size: 16px;
font-weight: 700;
text-transform: uppercase; }
nav a {
text-decoration: none;
color: white;
font-family: Cinzel; }
nav a:hover {
color: grey; }
h1 {
text-align: center;
font-size: 72px;
font-family: Cinzel;
weight: 700;
color: white;
text-transform: uppercase;
letter-spacing: .05em;
clear: both;
padding-top: 100px; }
.kicker {
text-align: center;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5em;
color: white;
line-height: 1;
position: relative; }
span {
display: inline-block;
padding: 0.2em 0.5em;
border: white solid 10px; }
This is happening because you have not done the CSS reset. Your H1 tags and other elements still have the browser default CSS properties like margin and paddings which is causing this behaviour.
Fix:
header h1 {
margin: 0;
}
See my jsfiddle.
Please try this:
i have added margin-top: 0 to h1 .
h1 {
text-align: center;
font-size: 72px;
font-family: Cinzel;
weight: 700;
color: white;
text-transform: uppercase;
letter-spacing: .05em;
clear: both;
padding-top: 100px;
margin-top: 0
}
Add margin:0 in your h1 tag.In Markup, h1 tag take its default margin , so when you reset your css then it should be worked.Take a look in JSFIDDLE.
header {
height: 450px;
background: url('http://gratisography.com/pictures/17_1.jpg') center center;
background-size: cover;
margin: 0;
}
header p {
font-family: Cinzel;
}
.top-bar {
width: 100%;
height: 50px;
background-color: red;
margin: 0;
}
nav {
float: right;
margin: 0px 30px 0 0;
height: 50px;
}
nav li {
display: inline-block;
margin-left: 20px;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
}
nav a {
text-decoration: none;
color: white;
font-family: Cinzel;
}
nav a:hover {
color: grey;
}
h1 {
text-align: center;
font-size: 72px;
font-family: Cinzel;
weight: 700;
color: white;
text-transform: uppercase;
letter-spacing: .05em;
clear: both;
padding-top: 100px;
margin: 0
}
.kicker {
text-align: center;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5em;
color: white;
line-height: 1;
position: relative;
}
span {
display: inline-block;
padding: 0.2em 0.5em;
border: white solid 10px;
}
<div class='top-bar'>
<nav>
<ul>
<li><a href='#'>Home</a>
</li>
<li><a href='#'>Destinations</a>
</li>
<li><a href='#'>Languages</a>
</li>
<li><a href='project1-about.html'>About Us</a>
</li>
</ul>
</nav>
</div>
<header>
<h1><span>Project 1</span></h1>
<p class='kicker'>Traveling // Exploring // Coding</p>
</header>
Related
Hey I'm trying to create a web with a nav bar. However when I hover one a tag(link) all the others moves for some reason and I can't find a solution , guess some play with css which I'm still learning.... any help for what's wrong here?
.container {
width: 85%;
margin: auto;
overflow: hidden;
}
header {
background-color: #262626;
color: white;
padding-top: 20px;
min-height: 70px;
}
header a {
color: white;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
transition: color 0.3s;
display: block;
padding: 8px 16px;
}
header a:hover {
padding: 8px 16px;
border-color: #2a2a2a;
color: #D52B1E;
letter-spacing: 1.5px;
border: none;
cursor: pointer;
outline: none;
display: block;
}
header li {
display: inline;
padding: 0 20px 0 20px;
display: inline-flex;
}
header #logo {
float: left;
}
header #logo h1 {
margin: 0;
font-family: 'Dancing Script', cursive;
}
header nav {
float: right;
margin-top: 10px;
}
<header>
<div class="container">
<div id="logo">
<h1>Coupon<span style="color:#D52B1E">System</span></h1>
</div>
<nav>
<ul>
<li><a routerLink="/home">Home</a></li>
<li><a routerLink="/about">About</a></li>
<li><a routerLink="/contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
appreciate any help, thanks guys!
You should add letter-spacing: 1.5px; in your header a class not on hover thats why its moving when you hover a li.
If you really want to show a little movement on hover you can try below method.
.container {
width: 85%;
margin: auto;
overflow: hidden;
}
header {
background-color: #262626;
color: white;
padding-top: 20px;
min-height: 70px;
}
header a {
color: white;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
transition: color 0.3s;
display: block;
padding: 8px 16px;
letter-spacing: 1.5px;
position: relative;
}
header a:hover {
padding: 8px 16px;
border-color: #2a2a2a;
color: #D52B1E;
letter-spacing: 1.5px;
border: none;
cursor: pointer;
outline: none;
display: block;
right: 2px;
}
header li {
display: inline;
padding: 0 20px 0 20px;
display: inline-flex;
}
header #logo {
float: left;
}
header #logo h1 {
margin: 0;
font-family: 'Dancing Script', cursive;
}
header nav {
float: right;
margin-top: 10px;
}
<header>
<div class="container">
<div id="logo">
<h1>Coupon<span style="color:#D52B1E">System</span></h1>
</div>
<nav>
<ul>
<li><a routerLink="/home">Home</a></li>
<li><a routerLink="/about">About</a></li>
<li><a routerLink="/contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
I found a solution:
letter-spacing: 1.5px;
I forgot this line in the a tag
You're adding letting spacing to the header a:hover. This means whenever you hover over the link, letter spacing will be added.
I'm creating a child theme for WooCommerce's Storefront theme. My issue is with the navbar, where the navigation elements do not get centered horizontally. Please take a look at the code, as well as the image on the navbar. The navigation div has a background-color of red so it's easier to identify the issue.
Navbar Image
| JSFiddle with code
.navbar {
height: 70px;
width: 100%;
border-bottom: 1px solid black;
}
.logo p {
color: #000;
font-family: 'Fjalla One', sans-serif;
font-weight: 700;
font-size: 30px;
text-transform: uppercase;
height: 70px;
line-height: 70px;
letter-spacing: 1px;
width: 120px;
}
.logo {
display: inline-block;
height: 70px;
}
.navigation {
display: inline-block;
margin-left: 5px;
background-color: red;
}
.navigation li {
display: inline-block;
padding-left: 10px;
padding-right: 10px;
line-height: 70px;
font-size: 14px;
font-family: "Open Sans", sans-serif;
color: #333;
text-align: center;
text-transform: uppercase;
cursor: pointer;
}
.navigation li:hover {
color: #D4B349;
}
<div class="navbar">
<div class="logo"><p> Lorem </p></div>
<div class="navigation">
<li> Home </li>
<li> About </li>
<li> Contact </li>
</div>
</div>
Pay attention to the fact that your inline-block elements are not aligned.
So I've aligned them vertically.
Another thing, is that you don't need the height:70px, instead define line-height: 70px, on the parent, it will propagate to the children.
.navbar {
line-height: 70px;
width: 100%;
border-bottom: 1px solid black; /* Change */
}
.logo p {
color: #000;
font-family: 'Fjalla One', sans-serif;
font-weight: 700;
font-size: 30px;
text-transform: uppercase;
margin: 0;
letter-spacing: 1px;
width: 120px;
}
.logo {
display: inline-block;
vertical-align: middle;
}
.navigation {
display: inline-block;
margin-left: 5px;
background-color: red;
}
.navigation li {
display: inline-block;
padding-left: 10px;
padding-right: 10px;
line-height: 70px;
font-size: 14px;
font-family: "Open Sans", sans-serif;
color: #333;
text-align: center;
text-transform: uppercase;
cursor: pointer;
}
.navigation li:hover {
color: #D4B349;
}
<div class="navbar">
<div class="logo"><p> Lorem </p></div>
<div class="navigation">
<li> Home </li>
<li> About </li>
<li> Contact </li>
</div>
</div>
I asume that you want the logo far left and the social icons far right. To achieve this I would use:
.logo {
float:left;
}
.icons {
float: right;
}
you could also use position absolute.
Now you have two options:
aligning the navigation elements center. To do this you have to set the navigation to text-align: center and display: block:
.navigation {
display: block;
margin-left: 0px;
text-align: center;
background-color: red;
}
You could give the .navbar a text-align: center:
.navbar {
height: 70px;
width: 100%;
border-bottom: 1px solid black;
}
I am trying to place a div underneath my header that contains my main content but for some reason, the image of my logo causes the div to appear shifted to the right. I'm no expert at HTML/CSS and I feel dumb for not being able to figure it out.
Here is a screenshot of what I'm seeing (Images substituted with flowers)
Code:
body {
background-color: #fff;
color: #777;
font: normal 15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
a {
text-decoration: none;
color: #444;
}
a:hover {
color: #C0C0C0;
}
h2 {
color: #444;
font-size: 50px;
text-align: right;
line-height: 90%;
}
p {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
color: black;
font-size: 11px;
padding-bottom: 15px;
}
.wrapper {
margin: 0 auto;
padding: 0 10px;
width: 960px;
}
/* Header */
header {
height: 120px;
padding-bottom: 15px;
}
header h1 {
float: left;
margin-top: 32px;
}
header nav {
float: right;
}
header nav ul li {
float: left;
display: inline-block;
margin-top: 70px;
}
header nav ul li a {
color: #444;
text-transform: uppercase;
display: block;
font-weight: lighter;
letter-spacing: 2px;
margin-right: 25px;
}
/* About */
#about {
padding-top: 1px;
height: 500px;
margin-top: 1px;
position: relative;
}
<body>
<header>
<div class="wrapper">
<h1><img src="https://s-media-cache-ak0.pinimg.com/736x/16/48/f4/1648f4e01b50d7629559b12f42d6dbc6.jpg" alt="Logo" width="261" vspace="20"></h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<div id="about">
<img src="https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg" width="500"></div>
</div>
</body>
It seems to work if I set my logo as the background of the header, but that sharply decreases its quality and I was hoping to later turn my logo into a link. I've searched far and wide for an answer here but nothing seems to be working. Any help is very very much appreciated.
As you are using floats to position your elements, you need to clear those floats in order for the content to appear where you want it to. In the below I have added a clear to the about div as a simple demonstration:
body {
background-color: #fff;
color: #777;
font: normal 15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
a {
text-decoration: none;
color: #444;
}
a:hover {
color: #C0C0C0;
}
h2 {
color: #444;
font-size: 50px;
text-align: right;
line-height: 90%;
}
p {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
color: black;
font-size: 11px;
padding-bottom: 15px;
}
.wrapper {
margin: 0 auto;
padding: 0 10px;
width: 960px;
}
/* Header */
header {
height: 120px;
padding-bottom: 15px;
}
header h1 {
float: left;
margin-top: 32px;
}
header nav {
float: right;
}
header nav ul li {
float: left;
display: inline-block;
margin-top: 70px;
}
header nav ul li a {
color: #444;
text-transform: uppercase;
display: block;
font-weight: lighter;
letter-spacing: 2px;
margin-right: 25px;
}
/* About */
#about {
clear:both;
padding-top: 1px;
height: 500px;
margin-top: 1px;
position: relative;
}
<body>
<header>
<div class="wrapper">
<h1><img src="https://s-media-cache-ak0.pinimg.com/736x/16/48/f4/1648f4e01b50d7629559b12f42d6dbc6.jpg" alt="Logo" width="261" vspace="20"></h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<div id="about">
<img src="https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg" width="500"></div>
</div>
</body>
There are many ways to clear floats - here are a couple of useful links about clearing floats:
The How and Why of Clearing Floats
The Clearfix: Force an Element To Self-Clear its Children
I would recommend though that you move on from floats as with css3, there are now better ways to do layout - for example with display:flex
You need to clear the floated elements in your <header> so the body of your page doesn't "snag" on it. You can use what is know as a clearfix to fix this.
body {
background-color: #fff;
color: #777;
font: normal 15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
a {
text-decoration: none;
color: #444;
}
a:hover {
color: #C0C0C0;
}
h2 {
color: #444;
font-size: 50px;
text-align: right;
line-height: 90%;
}
p {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
color: black;
font-size: 11px;
padding-bottom: 15px;
}
/* Header */
header {
margin: 0 auto;
padding: 0 10px;
width: 960px;
height: 120px;
padding-bottom: 15px;
}
header h1 {
float: left;
margin-top: 32px;
}
header nav {
float: right;
}
header nav ul li {
float: left;
display: inline-block;
margin-top: 70px;
}
header nav ul li a {
color: #444;
text-transform: uppercase;
display: block;
font-weight: lighter;
letter-spacing: 2px;
margin-right: 25px;
}
/* About */
#about {
padding-top: 1px;
height: 500px;
margin-top: 1px;
position: relative;
}
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
<header>
<h1><img src="https://s-media-cache-ak0.pinimg.com/736x/16/48/f4/1648f4e01b50d7629559b12f42d6dbc6.jpg" alt="Logo" width="261" vspace="20"></h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main class="cf" id="about">
<img src="https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg" width="500"></main>
If this is a new site I would recommend using flexbox instead of floats.
align-items: center; will vertically center elements within <header>.
justify-content: space-between; will push the <h1> to the left and the <nav> to the right.
body {
background-color: #fff;
color: #777;
font: normal 15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
a {
text-decoration: none;
color: #444;
}
a:hover {
color: #C0C0C0;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 auto;
padding-bottom: 15px;
width: 960px;
}
header ul {
display: flex;
}
header ul,
header li {
margin: 0;
padding: 0;
list-style: none;
}
header nav a {
color: #444;
text-transform: uppercase;
display: block;
font-weight: lighter;
letter-spacing: 2px;
margin-right: 25px;
}
<header>
<h1><img src="https://s-media-cache-ak0.pinimg.com/736x/16/48/f4/1648f4e01b50d7629559b12f42d6dbc6.jpg" alt="Logo" width="261" vspace="20"></h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main class="cf" id="about">
<img src="https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg" width="500"></main>
CSS cleaned up and navigation items positioned.
I eliminated the floats because I believe they should be avoided if possible. Floats do not follow the natural document flow.
body {
background-color: #fff;
color: #777;
font: normal 15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
a {
text-decoration: none;
color: #444;
}
a:hover {
color: #C0C0C0;
}
.wrapper {
margin: 0 auto;
padding: 0 10px;
display: flex;
align-items: center;
}
.wrapper ul {
margin-left: auto;
}
.wrapper ul li {
display: inline-block;
list-style: none;
min-width: 70px;
}
/* Header */
header {
height: 120px;
width: 960px;
padding-bottom: 15px;
}
header ul li a {
text-transform: uppercase;
display: block;
font-weight: lighter;
letter-spacing: 2px;
margin-right: 25px;
}
/* About */
#about {
padding: 1px 0 0 10px;
height: 500px;
margin-top: 1px;
position: relative;
}
<header>
<div class="wrapper">
<img src="https://s-media-cache-ak0.pinimg.com/736x/16/48/f4/1648f4e01b50d7629559b12f42d6dbc6.jpg" alt="Logo" width="100" vspace="20">
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</header>
<div id="about">
<img src="https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg" width="500"></div>
</div>
my webpage has all of this extra white spacing after my content. If you would paste my code into your IDE and look that would be great! I have tried a few things like make a div around the whole content of the page and set some padding and margin on the bottom but I just can't get it!
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/about.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<title>Halong Bay</title>
</head>
<body>
<nav class="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Map</li>
<li>Table</li>
<li>Contact</li>
</ul>
</nav>
<section class="intro">
<div class="inner">
<div class="content">
<h1>About Halong Bay</h1>
<a class="btn" href="#link"> get started </a>
<a class="btn" href="index-bay.html"> Back to Home </a>
</div>
</div>
</section>
<article>
<h1>Halong Bay</h1>
<p id="link">
Ha Long Bay, is in Northeast Vietnam. It is known for its beatiful emerald waters and thousands of towering green limestone islands. It is topped by rainforests, junk boat tours, and sea kayak expeditions. The boat tours takes it visitors past islands named for their shapes, including Stone Dog, and Teapot island. The region is popular for scuba diving, rock climbing, and hiking. It is a really beatiful place to visit and has some most fasinating species of animals that live in this bay.
</p>
</article>
<div id="history">
<h1>History of Ha Long Bay</h1>
<p>
For hundreds of years Halong bay has been an important culture and history of Vietnam. Halong bay also known as Vinh Ha Long, means "Bay of the Descending Dragon". There are approximately 1,969 small islands in this bay. All compromised of differnt sizes and form. These islands have intrigues and amazed locals for hundreds of years. There are over 200 species of fish and over 250 species of mulluks in the water.
</p>
</div>
</body>
</html>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
background: url(http://greenhillholidays.info/files/uploads/2016/04/Vietnam-HD-Wallpapers.jpg);
background-size: cover;
display: table;
}
.intro .inner {
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content {
text-align: center;
max-width: 500px;
margin: 0 auto;
}
.content h1 {
font-family: 'Raleway';
color: #f9f3f4;
text-shadow: 0px 0px 300px #000;
font-size: 500%;
}
.btn {
border-radius: 9px;
font-family: 'Raleway';
color: white;
font-size: 135%;
padding: 10px 20px;
border: solid #036AB1;
text-transform: uppercase;
text-decoration: none;
margin-right: 20px;
font-weight: bold;
}
.btn:hover {
color: #fff;
border: solid #fff 3px;
}
p {
font-size: 160%;
line-height: 200%;
margin: 3%;
font-family: 'Raleway';
padding: 200px;
}
nav ul li {
position: relative;
color: red;
font-size: 24px;
display: inline-block;
text-align: right;
margin-right: 40px;
text-decoration: none;
text-transform: uppercase;
font-family: 'Raleway';
font-weight: 900;
}
nav ul li a {
color: black;
text-decoration: none;
}
nav ul li a:hover {
color: blue;
}
.navbar {
color: black;
text-align: center;
}
a.btn {
font-weight: 950;
}
#link {
position: relative;
bottom: 100px;
}
p:first-letter {
font-size: 200%;
}
article {
padding: 50px;
}
#top1 {
font-size: 30px;
text-align: center;
}
article h1 {
font-size: 40px;
text-align: center;
}
#history h1 {
font-size: 50px;
text-align: center;
position: relative;
bottom: 300px;
}
#history p {
position: relative;
bottom: 500px;
}
I figured out why you had that big empty space, these two things were the problem:
Using bottom w/ padding and relative positioning.
Using 200px padding.
You really shouldn't use that much padding on an element.
Here's what, I'm guessing, it should look like:
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
background: url(http://greenhillholidays.info/files/uploads/2016/04/Vietnam-HD-Wallpapers.jpg);
background-size: cover;
display: table;
}
.intro .inner {
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content {
text-align: center;
max-width: 500px;
margin: 0 auto;
}
.content h1 {
font-family: 'Raleway';
color: #f9f3f4;
text-shadow: 0px 0px 300px #000;
font-size: 500%;
}
.btn {
border-radius: 9px;
font-family: 'Raleway';
color: white;
font-size: 135%;
padding: 10px 20px;
border: solid #036AB1;
text-transform: uppercase;
text-decoration: none;
margin-right: 20px;
font-weight: bold;
}
.btn:hover {
color: #fff;
border: solid #fff 3px;
}
p {
font-size: 160%;
line-height: 200%;
margin: 3%;
font-family: 'Raleway';
padding: 20px 200px;
}
nav ul li {
position: relative;
color: red;
font-size: 24px;
display: inline-block;
text-align: right;
margin-right: 40px;
text-decoration: none;
text-transform: uppercase;
font-family: 'Raleway';
font-weight: 900;
}
nav ul li a {
color: black;
text-decoration: none;
}
nav ul li a:hover {
color: blue;
}
.navbar {
color: black;
text-align: center;
}
a.btn {
font-weight: 950;
}
#link {
position: relative;
}
p:first-letter {
font-size: 200%;
}
article {
padding: 50px;
}
#top1 {
font-size: 30px;
text-align: center;
}
article h1 {
font-size: 40px;
text-align: center;
}
#history h1 {
font-size: 50px;
text-align: center;
position: relative;
}
#history p {
position: relative;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/about.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<title>Halong Bay</title>
</head>
<body>
<nav class="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Map</li>
<li>Table</li>
<li>Contact</li>
</ul>
</nav>
<section class="intro">
<div class="inner">
<div class="content">
<h1>About Halong Bay</h1>
<a class="btn" href="#link"> get started </a>
<a class="btn" href="index-bay.html"> Back to Home </a>
</div>
</div>
</section>
<article>
<h1>Halong Bay</h1>
<p id="link">
Ha Long Bay, is in Northeast Vietnam. It is known for its beatiful emerald waters and thousands of towering green limestone islands. It is topped by rainforests, junk boat tours, and sea kayak expeditions. The boat tours takes it visitors past islands
named for their shapes, including Stone Dog, and Teapot island. The region is popular for scuba diving, rock climbing, and hiking. It is a really beatiful place to visit and has some most fasinating species of animals that live in this bay.
</p>
</article>
<div id="history">
<h1>History of Ha Long Bay</h1>
<p>
For hundreds of years Halong bay has been an important culture and history of Vietnam. Halong bay also known as Vinh Ha Long, means "Bay of the Descending Dragon". There are approximately 1,969 small islands in this bay. All compromised of differnt sizes
and form. These islands have intrigues and amazed locals for hundreds of years. There are over 200 species of fish and over 250 species of mulluks in the water.
</p>
</div>
</body>
</html>
When I have checked your code in my system, I have noticed that the issue is coming because of padding and margin settings in your CSS.
I have made few changes in your CSS. try it and still having any issue let me know.
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
background: url(http://greenhillholidays.info/files/uploads/2016/04/Vietnam-HD-Wallpapers.jpg);
background-size: cover;
display: table;
}
.intro .inner {
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content {
text-align: center;
max-width: 500px;
margin: 0 auto;
}
.content h1 {
font-family: 'Raleway';
color: #f9f3f4;
text-shadow: 0px 0px 300px #000;
font-size: 500%;
}
.btn {
border-radius: 9px;
font-family: 'Raleway';
color: white;
font-size: 135%;
padding: 10px 20px;
border: solid #036AB1;
text-transform: uppercase;
text-decoration: none;
margin-right: 20px;
font-weight: bold;
}
.btn:hover {
color: #fff;
border: solid #fff 3px;
}
p {
font-size: 160%;
line-height: 200%;
margin: 3%;
font-family: 'Raleway';
padding: 200px;
}
nav ul li {
position: relative;
color: red;
font-size: 24px;
display: inline-block;
text-align: right;
margin-right: 40px;
text-decoration: none;
text-transform: uppercase;
font-family: 'Raleway';
font-weight: 900;
}
nav ul li a {
color: black;
text-decoration: none;
}
nav ul li a:hover {
color: blue;
}
.navbar {
color: black;
text-align: center;
}
a.btn {
font-weight: 950;
}
#link {
position: relative;
bottom: 100px;
padding-bottom:0px;
margin-bottom:0px;
margin-top: 0;
padding-top: 100px;
}
p:first-letter {
font-size: 200%;
}
article {
padding-top: 50px;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 0px;
}
#top1 {
font-size: 30px;
text-align: center;
}
article h1 {
font-size: 40px;
text-align: center;
}
#history h1 {
font-size: 50px;
text-align: center;
position: relative;
}
#history p {
position: relative;
padding-bottom: 0px;
padding-top: 0px;
margin-bottom: 0;
margin-top: 0;
}
I have the following design:
Notice the signature on the bottom under the quotation. Its very nicely placed on the right aligned with the text.
Here is my html css version so far:
I'm having trouble figuring out the correct way to get the signature over to the right and aligned with the right of the quotation.
Here is my html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="header">
<div class="logo">
<img src="images/top-logo.png" alt="ProvenWord Logo">
</div>
<ul class="nav">
<li>Home</li>
<li>Proofreading</li>
<li>Editing</li>
<li>About</li>
<li>How it works</li>
<li>FAQ</li>
<li>Contact</li>
</ul>
</div> <!--close header -->
<div class="tagline">
<div class="section-container">
<h1><span>Transform your written</span> work into a <strong>masterpiece<strong></h1>
Free Quote
<p class="first-quote">"Your proofreading assistance has enabled me to successfully complete my dissertation with greater ease."</p>
<img src="images/sudthida-signature.png" alt="Sudthida's Signature">
<p class="first-quote school">Sudthida P. Ph.D in Educational Research - King's College University of London</p>
</div><!--close section-container-->
</div><!--close tagline-->
</body>
</html>
Here is my css:
html, body, h1, h2, h3, h4, p, ol, ul, li, a, div {
padding: 0px;
border: 0px;
margin: 0px;
font-size: 100%;
font: inherit;
}
/*----------------------------*/
/*----- Tag Declarations -----*/
/*--------------------------- */
body {
font-family: "Sinkin Sans", Verdana, Helvetica, sans-serif;
}
h1{
font-size: 36px;
font-weight: 400;
line-height: 1.2;
}
h2 {
font-size: 28px;
padding-bottom: 25px;
font-weight: 300;
line-height: 1.3;
letter-spacing: 1px;
}
h2 strong {
font-weight: 600;
}
p {
font-size: 15px;
line-height: 140%;
font-weight: 300;
letter-spacing: 1px;
}
.button {
display: inline-block;
line-height: 48px; /*setting this to the button height makes the text centered */
height: 48px;
width: 185px;
background: #ffd000;
border: 2px solid #b59400;
font-size: 18px;
font-weight: 100;x;
border-radius: 60px;
}
a.button {
text-decoration: none;
color: #000000;
}
a.button:hover {
background: #feef00;
}
li {
list-style: none;
margin-bottom: 0.5em;
text-indent: 1.5em;
background-image: url(images/check.png);
background-repeat: no-repeat;
letter-spacing: 1px;
font-weight: 200;
font-size: 12px;
}
.section-container {
width: 520px;
margin: 0 auto;
}
/*--------------------------*/
/*----- Header Section -----*/
/*--------------------------*/
.header {
padding: 25px 0px 32px 48px;
}
.logo img {
float: left;
padding-right: 130px;
}
.nav {
list-style-type: none;
padding-top: 32px;
}
.nav li {
display: inline;
padding-right: 10px;
font-size: 12px;
font-weight: 200;
}
/*---------------------------*/
/*----- Tagline Section -----*/
/*---------------------------*/
.tagline {
background: #abdfe8 url(images/bg-tagline.png) no-repeat;
height: 450px;
text-align: center;
}
.section-container h1 {
padding-top: 130px;
}
.section-container h1 span {
letter-spacing: 2px;
}
.section-container .button {
margin: 40px 0 40px 0;
}
.first-quote {
font-size: 13px;
line-height: 1.5;
color: white;
margin: 0 25px 10px 25px;
}
.section-container img {
display: block;
text-align: right;
}
.section-container .school {
font-size: 10px;
letter-spacing: 0.5px;
text-align: center;
}
I have used the margin property to move the image over but I thought margins were used to create space between block elements. I don't want to hack my way to the layout, I want to understand how this works and what is the correct way to use the different properties in css.
Any help much appreciated.
You can use float to align the image to the right, combined with margin to place it exactly where needed, then just clear the text below the image.
I've commented the changes in your CSS below.
html,
body,
h1,
h2,
h3,
h4,
p,
ol,
ul,
li,
a,
div {
padding: 0px;
border: 0px;
margin: 0px;
font-size: 100%;
font: inherit;
}
/*----------------------------*/
/*----- Tag Declarations -----*/
/*--------------------------- */
body {
font-family: "Sinkin Sans", Verdana, Helvetica, sans-serif;
}
h1 {
font-size: 36px;
font-weight: 400;
line-height: 1.2;
}
h2 {
font-size: 28px;
padding-bottom: 25px;
font-weight: 300;
line-height: 1.3;
letter-spacing: 1px;
}
h2 strong {
font-weight: 600;
}
p {
font-size: 15px;
line-height: 140%;
font-weight: 300;
letter-spacing: 1px;
}
.button {
display: inline-block;
line-height: 48px;
/*setting this to the button height makes the text centered */
height: 48px;
width: 185px;
background: #ffd000;
border: 2px solid #b59400;
font-size: 18px;
font-weight: 100;
x;
border-radius: 60px;
}
a.button {
text-decoration: none;
color: #000000;
}
a.button:hover {
background: #feef00;
}
li {
list-style: none;
margin-bottom: 0.5em;
text-indent: 1.5em;
background-image: url(images/check.png);
background-repeat: no-repeat;
letter-spacing: 1px;
font-weight: 200;
font-size: 12px;
}
.section-container {
width: 520px;
margin: 0 auto;
}
/*--------------------------*/
/*----- Header Section -----*/
/*--------------------------*/
.header {
padding: 25px 0px 32px 48px;
}
.logo img {
float: left;
padding-right: 130px;
}
.nav {
list-style-type: none;
padding-top: 32px;
}
.nav li {
display: inline;
padding-right: 10px;
font-size: 12px;
font-weight: 200;
}
/*---------------------------*/
/*----- Tagline Section -----*/
/*---------------------------*/
.tagline {
background: #abdfe8 url(images/bg-tagline.png) no-repeat;
height: 450px;
text-align: center;
}
.section-container h1 {
padding-top: 130px;
}
.section-container h1 span {
letter-spacing: 2px;
}
.section-container .button {
margin: 40px 0 40px 0;
}
.first-quote {
font-size: 13px;
line-height: 1.5;
color: white;
margin: 0 25px 10px 25px;
}
.section-container img {
display: block;
float: right; /* USE FLOAT */
margin-right: 1.8em; /* WITH MARGIN TO GIVE THE CORRECT POSITION */
}
.section-container .school {
clear: both; /* CLEAR THE FLOATED IMAGE */
font-size: 10px;
letter-spacing: 0.5px;
text-align: center;
}
<div class="header">
<div class="logo">
<img src="images/top-logo.png" alt="ProvenWord Logo">
</div>
<ul class="nav">
<li>Home</li>
<li>Proofreading</li>
<li>Editing</li>
<li>About</li>
<li>How it works</li>
<li>FAQ</li>
<li>Contact</li>
</ul>
</div>
<!--close header -->
<div class="tagline">
<div class="section-container">
<h1><span>Transform your written</span> work into a <strong>masterpiece<strong></h1>
Free Quote
<p class="first-quote">"Your proofreading assistance has enabled me to successfully complete my dissertation with greater ease."</p>
<img src="images/sudthida-signature.png" alt="Sudthida's Signature">
<p class="first-quote school">Sudthida P. Ph.D in Educational Research - King's College University of London</p>
</div>
<!--close section-container-->
</div>
<!--close tagline-->