Trying to build somthing unique at least for me. this is what i have so far i am having some issues getting the layout to be right.
What i am trying to do is create an H1 title that will link back to the home page. Underneath the Navbar will be 4 links evenly spaced across the page. Then 3 social media icons under the nav bar. I have all the items there, just confused as i cannot get anything to go right. the nav bar will seemingly fit fine, then i put the social media there and it bunches up on one of the sides. or the nav bar will be center but not spread out evenly even when i put into CSS to spread.
<header>
<div>
<h1>Amazing restaurant</h1>
<!-- nav -->
<nav>
Menu
Reservations
Special Offers
Contact
</nav>
</div>
</header>
header {
width: 100%;
height: 100vh;
background-image: url("../img/home-header.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
text-align: center;
}
nav {
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
width: 25%;
text-align: center;
}
Here is a solution to your problem but I advice spending some time learning about flex
header {
width: 100%;
height: 100vh;
background-image: url("../img/home-header.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
header .headerTitle {
text-decoration: none;
color: black;
margin-bottom: 25px;
}
header .navLinks {
padding: 12px;
display: flex;
justify-content: space-evenly;
align-items: center;
width: 100%;
}
header .navLinks a {
color: black;
text-decoration: none;
font-size: 17px;
margin-bottom: 15px;
}
header .socialLinks a {
color: black;
text-decoration: none;
font-size: 14px;
margin: 7px 20px;
}
<header>
<a class="headerTitle" href="index.html">
<h1>Amazing restaurant</h1>
</a>
<div class="navLinks">
Menu
Reservations
Special Offers
Contact
</div>
<div class="socialLinks">
<a href="#">
<i class="fa fa-facebook"></i>
</a>
<a href="#">
<i class="fa fa-twitter"></i>
</a>
<a href="#" class="fa fa-instagram">
<i class="fa fa-instagram"></i>
</a>
</div>
</header>
Hi I´m also starting at this and also want to show you the way that could solve the issue that you´re having. Understanding display options is very useful.
html {
box-sizing: border-box;
}
a,
a:before,
a:after {
box-sizing: inherit;
}
header {
width: 100%;
height: 100vh;
background-image: url("../img/home-header.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
text-align: center;
}
.main-nav {
background-color: lightseagreen;
}
.main-nav li {
padding: 0.5rem;
color: white;
text-decoration: none;
font-size: 1rem;
text-align: center;
display: inline-block;
}
.lis {
text-decoration: none;
color: white;
font-size: 1.5rem;
}
.title {
color: lightseagreen;
font-size: 3rem;
}
<body>
<header>
<div>
<h1 class="title">Amazing restaurant</h1>
<!-- nav -->
<nav class="main-nav">
<li><a class="lis" href="#Menu">Menu</a></li>
<li><a class="lis" href="#Reservations">Reservations</a></li>
<li><a class="lis" href="#Special Offers">Special Offers</a></li>
<li><a class="lis" href="#Contact">Contact</a></li>
</nav>
</div>
</header>
</body>
Here is how you can achieve what you are looking for and also make it responsive at the same time. CSS Flexbox and Grid is where CSS starts to get tough and its wise to research multiple frontend instructors who teach it well. I like Wes Bos - he has a CSS Grid and a Flexbox course. They are both free.
If you can afford to spend some money, I really like Front End Masters and I actually learned how to code this NavBar from Jen Kramer in her CSS class. I find creating the NavBar in CodePen or a sandbox like that really helps. Just a couple of pointers of what worked for me.
Now, also to clarify - I have Google fonts for Oxygen and Oxygen mono linked in my header, as well as Font Awesome 5.
/* variables declared here - these are the colors for our pages, as well as the font stacks and sizes. */
:root {
--black: #171321;
--dkblue: #0d314b;
--plum: #4b0d49;
--hotmag: #ff17e4;
--magenta: #e310cb;
--aqua: #86fbfb;
--white: #f7f8fa;
--font-size: 1.3rem;
--mono: "Oxygen mono", monospace;
--sans: Oxygen, sans-serif;
}
/* border box model: https://css-tricks.com/box-sizing/ */
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
/* generic styles for the page */
body {
padding: 0;
margin: 0;
font-family: var(--sans);
background-color: var(--black);
color: var(--white);
font-size: var(--font-size);
}
h1,
h2,
h3 {
margin: 0;
}
a {
color: var(--magenta);
}
a:hover {
color: var(--hotmag);
text-decoration: none;
}
/* intro styles */
#intro {
padding-bottom: 10rem;
}
#intro p {
font-size: 1rem;
line-height: 1.5;
}
#intro .name {
font-family: var(--mono);
font-size: 1rem;
}
.name span {
font-family: var(--sans);
font-size: 4rem;
color: var(--aqua);
display: block;
font-weight: 300;
}
#intro h2 {
font-size: 4rem;
}
/* contact section */
#contact {
width: 400px;
text-align: center;
margin: 0 auto;
padding: 3rem 0;
}
#contact p:last-child {
margin-top: 3rem;
}
/* navigation */
nav {
font-family: var(--mono);
font-size: 80%;
padding: 1rem;
}
nav h1 a {
font-family: var(--sans);
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: 2rem;
}
nav li:first-child {
flex-basis: 100%;
text-align: center;
}
nav [class*="fa-"] {
font-size: 150%;
color: var(--aqua);
}
nav h1 [class*="fa-"] {
font-size: 100%;
color: var(--aqua);
}
nav a {
color: white;
text-decoration: none;
display: block;
}
nav a:hover,
nav [class*="fa-"]:hover {
color: var(--magenta);
}
#media (min-width: 850px) {
nav {
max-width: 1200px;
margin: 0 auto;
}
nav li:first-child {
flex-basis: auto;
text-align: left;
margin-right: auto;
}
}
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Oxygen&family=Oxygen+Mono&display=swap" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
</head>
<!-- instructions in JavaScript block -->
<nav>
<ul>
<li>
<h1>
<a href="index.html">
<span class="navHeader" aria-hidden="true"></span>
<span>Amazing Restaurant</span>
</a>
</h1>
</li>
<li>Menu</li>
<li>Reservations</li>
<li>Special Offers</li>
<li>Contact</li>
<li>
<a href="#Facebook" target="_blank">
<span class="fab fa-facebook" aria-hidden="true"></span>
<span class="sr-only">Facebook</span>
</a>
</li>
<li>
<a href="#Twitter" target="_blank">
<span class="fab fa-twitter" aria-hidden="true"></span>
<span class="sr-only">Twitter</span>
</a>
</li>
<a href="#Instagram" target="_blank">
<span class="fab fa-instagram" aria-hidden="true"></span>
<span class="sr-only">Instagram</span>
</a>
</ul>
</nav>
Keep playing with the code. Change the colors and margins and play around to see what happens in CodePen or your text editor. The next part is getting it to work with the rest of the page.
Related
I want to make a website and through this website I want its look to be compatible with all small, large and medium screens
I want to make a sidebar, but when I add an icon it doesn't appear as shown in the picture.
index.html:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="with=device-width, initial-scale=1.0">
<title>
University Website Design
</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.4/css/fontawesome.min.css">
</head>
<body>
<section class="header">
<nav>
<a href="index.html">
<img src="images/TP-Link-Logo.wine.svg">
</a>
<div class="nav-links">
<i class="fa fa-times"></i>
<ul>
<li>
<a href="">
HOME
</a>
</li>
<li>
<a href="">
ABOUT
</a>
</li>
<li>
<a href="">
COURSE
</a>
</li>
<li>
<a href="">
BLOG
</a>
</li>
<li>
<a href="">
CONTACT
</a>
</li>
</ul>
</div>
<i class="fa fa-bars"></i>
</nav>
<div class="text-box">
<h1>
World's Biggest University
</h1>
<p>
Make Website is now one of the easiest thing in the world.
you just need to learn HTML,CSS , <br> Javascript and you are good to go.
</p>
<a class="hero-btn">
Visit Us to Know More
</a>
</div>
</section>
</body>
</html>
And this is the CSS code through which I design the interface with the sidebar, and I want the icon to appear only in the small interfaces.
style.css:
*{
padding: 0;
margin: 0;
}
.header{
min-height: 100vh;
width: 100%;
background-image: linear-gradient(rgba(4,9,30,0.7) , rgba(4,9,30,0.7)),
url("images/b.png");
/*background-size: 100%; This line will make the background responsive*/
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
/*padding: 20em;*/
/*background-image: url("images/b.png");*/
/*background-repeat: no-repeat;*/
/*background-size: 100%;*/
/*background-position: center center;*/
/*background-position: 0 0; This statement like center value*/
}
nav{
display: flex;
/*padding: 1-top bottom 2-right left*/
padding: 1% 4%;
justify-content: space-between;
align-items: center;
}
nav img{
width: 150px;
}
.nav-links{
text-align: right;
}
.nav-links ul li{
list-style: none;
display: inline-block;
position: relative;
padding: 8px 12px;
}
.nav-links ul li a{
text-decoration: none;
color: white;
font-size: 0.813rem;
font-weight: 200;
}
.nav-links ul li::after{
content: '';
width: 0;
height: 2px;
background: #4accd5;
display: block;
margin: auto;
transition: 0.3s;
}
.nav-links ul li:hover::after{
width: 100%;
}
.text-box{
color: #fff;
width: 90%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.text-box h1{
font-size: 3rem;
}
.text-box p{
font-size: 1rem;
margin-top: 0.8rem;
margin-bottom: 1.8rem;
}
.hero-btn{
display: inline-block;
text-decoration: none;
color: #fff;
border: 1px solid #fff;
padding: 12px 34px;
font-size: 13px;
background: transparent;
position: relative;
cursor: pointer;
}
.hero-btn:hover{
border: 1px solid #f44336;
background: #f44336;
transition: 1s;
}
nav .fa{
display: none;
}
#media(max-width: 700px) {
.text-box h1{
font-size: 1.8rem;
}
.nav-links ul li{
display: block;
}
.nav-links{
position: absolute;
background: #f44336;
height: 100vh;
width: 200px;
top: 0;
right: 0;
text-align: left;
z-index: 2;
}
nav .fa{
display: block;
color: white;
margin: 10px;
font-size: 22px;
cursor: pointer;
}
}
you are missing Fontawesome JS file in your project. Add in your <head> link to all.min.js from Fontawesome and your icons will be working.
You are missing the FontAwesome JavaScript file in your project. Add a link to this file in the <head> section in your HTML file. Your link should lead to the all.min.js file from FontAwesome. Doing so should make your icons work.
<head>
<script type="text/javascript" src="all.min.js"></script> <!-- Make sure to change `all.min.js` with your actual file location -->
</head>
I think it has to do with the link of the image itself. Is it the right format/ folder etc. Maybe try to copy the link you have in your code and apply it on your website link.
If the link is correct the image should be shown via your browser. Otherwise it's a problem with the link itself
I have tried applying a Overflow: hidden/auto to varios classes of CSS.
I have tried applying a Clear: both to various CSS sections as well, so far no go.
I am just unsure on how to fix this.
https://codepen.io/Tsukiyono/pen/KXLZbP
If you change the Codepen to a mobile size, the hamburger menu pops up, when clicked there is a small grey box that should cover the whole screen, but it only goes about 50px down or so. It used to work correctly, but I made a change at some point and something broke and now I cant seem to fix it.
If one of the above options is the correct fix, could someone help me figure out the correct CSS (or combination of CSS) that I can add it to to fix my issue?
//Variables
var overlay = document.querySelector(".fa-bars");
var times = document.querySelector(".fa-times");
var menuSelect = document.querySelector("#hiddenNav")
var quoteFade = document.querySelector(".toggleOff")
var navScroll = document.querySelector("#navbar");
//Hamburger Menu Display Overlay
overlay.addEventListener("click", function(){
if (times.classList.contains("closed")){
//toggle Display property for hiddenNav
menuSelect.classList.add("toggle");
//FadeOut Hamburger
overlay.classList.add("closed");
//FadeIn X Menu
times.classList.remove("closed");
}
})
//Closes Out Overlay Display Menu
times.addEventListener("click", function(){
if (overlay.classList.contains("closed")){
//toggle Display Property for hiddenNav
menuSelect.classList.remove("toggle");
//FadeIn Hamburger
overlay.classList.remove("closed");
//FadOut X Menu
times.classList.add("closed");
}
})
//Loads text after the page loads with transition
function onStart() {
quoteFade.classList.add("toggleOn");
quoteFade.classList.remove("toggleOff");
}
window.onload = onStart;
//Change Navbar Opacity on Scroll
window.onscroll = function (){
if (document.body.scrollTop >= 100){
navScroll.classList.add("colored");
navScroll.classList.remove("transparent");
alert("working");
}
else {
navScroll.classList.add("transparent");
navScroll.classList.remove("colored");
}
};
/* Simple Resets */
html, body {
background-color: #fff;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: 'Raleway', sans-serif;
}
/*------------------------------------------------------------------
[1. NavBar - Primary]
*/
div.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 30px;
}
nav {
float: left;
width: 100%;
outline: none;
position: fixed;
}
/* used to make Navbar change color on Scroll */
nav.transparent {
background-color: transparent;
}
nav.colored {
background-color: white;
transition: 1s;
}
nav h1 {
padding-left: .5em;
color: #000;
text-transform: uppercase;
float: left;
font-size: 1.5em;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 10px;
float: right;
}
nav ul li {
display: inline-block;
}
nav ul li:hover {
font-weight: bold;
text-decoration: underline;
transition: .7s;
}
nav ul li a {
padding: 1em;
color: #000;
display: block;
text-transform: uppercase;
text-decoration: none;
}
i.fa-bars {
color: blue;
float: right;
font-size: 28px;
padding: 5px;
margin-top: 20px;
display: none;
}
/*------------------------------------------------------------------
[1.5 NavBar - Hidden Overlay]
*/
div.overlay {
background-color: rgba(0,0,0,0.7);
position: absolute;
width: 100%;
height: 100%;
display: none;
transition: .7s;
}
/* Allows Hidden Nav to be displayed */
div.overlay.toggle {
display: block;
}
i.fa-times {
color: #fff;
font-size: 2.5em;
padding: 5px;
position: absolute;
right: 30px;
top: 20px;
display: block;
}
/* Shuts down the FA Icons on click with JS */
i.fa-bars.closed,
i.fa-times.closed {
display: none;
transition: .7s;
}
div.overlay ul{
padding: 0;
margin: 100px 0 0 0;
display: block;
width: 100%;
text-align: center;
}
div.overlay ul li {
display: block;
}
div.overlay ul li a {
font-size: 1.25em;
padding: 1em;
color: #fff;
display: block;
text-transform: uppercase;
text-decoration: none;
}
/*------------------------------------------------------------------
[2 Hero Image]
*/
.hero-section {
width: 100%;
height: 50em;
margin: auto;
background: url("img/alexandru-tudorache-17852.jpg") no-repeat 50% 50%;
display: table;
top: 0;
background-size: cover;
}
/*------------------------------------------------------------------
[2.5 Quote Text]
*/
#quoteBox .container-fluid {
padding-top: 9em;
text-align: center;
}
.toggleOn {
opacity: 1;
transition: 3s;
}
.toggleOff{
opacity: 0;
}
#content {
height: 35em;
}
p#quote {
max-width: 25em;
color: white;
text-shadow: 0 0 3px #000;
font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
letter-spacing: 0.1em;
text-align: center;
margin: 40px auto;
text-transform: lowercase;
line-height: 145%;
font-size: 2.1em;
font-variant: small-caps;
}
/*------------------------------------------------------------------
[9 Footer]
*/
footer {
background-color: #000;
height: 6em;
width: 100%;
margin: 0;
padding: 0;
}
footer p {
margin-bottom: .5em;
}
.social-media-contact {
color: white;
text-align: center;
}
.social-media-contact i {
padding: 0 .5em;
margin: 0px 10px;
}
.social-media-contact .fa {
font-size: 1.5em;
}
.footerNav ul {
text-transform: uppercase;
list-style-type: none;
margin-right: 3em;
}
.footerNav ul li {
display: inline;
color: #fff;
}
.footerNav ul li a {
color: #fff;
padding: .4em;
text-decoration: none;
}
.footerNav li:not(:first-child):before {
content: "|";
padding: .3em;
}
/*------------------------------------------------------------------
[10 Media Queries]
*/
/* Navbar */
#media all and (max-width: 768px){
nav ul {
display: none;
}
i.fa-bars {
display: block;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Marlee Branding Site</title>
<!-- Google Fonts - RaleWay -->
<link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">
<!--Font Awesome -->
<link rel="stylesheet" href="assets/fa/css/font-awesome.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Navbar -->
<nav class="transparent" id="navbar">
<!-- Collapsed Navbar -->
<div class="overlay" id="hiddenNav">
<div class="container">
<i class="fa fa-times closed" aria-hidden="true"></i>
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Now</li>
<li>Blog</li>
<li>Contact</li>
</ul> <!-- End Collapse Nav -->
</div>
</div>
<!-- Standard Navbar -->
<div class="container" id="navbar">
<h1>Logo</h1>
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Now</li>
<li>Blog</li>
<li>Contact</li>
</ul> <!-- End Nav -->
<i class="fa fa-bars" aria-hidden="true"></i>
</div> <!-- End Container -->
</nav><!-- End Nav -->
<!-- Hero Image and Quote -->
<section class="hero-section">
<div class="hero-image">
<div id="quoteBox">
<div class="container-fluid full toggleOff">
<div id="content">
<p id="quote">"Action is the foundational key to all success"
<br> — Pablo Picasso</p>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="social-media-contact container">
<p>Connect With Me</p>
<i class="fa fa-facebook-official" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
<i class="fa fa-envelope" aria-hidden="true"></i>
<div class="footerNav">
<ul>
<li>Home</li>
<li>About</li>
<li>Now</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</footer>
<!-- Custom JS -->
<script src="scripts.js"></script>
</body>
</html>
This is because of this CSS rule:
div.overlay {
height: 100%;
}
Removing this makes it work:
Note: It's not because of overflow, but just limited in height.
A better alternative would be using min-height (thanks to G-Cyr):
div.overlay {
min-height: 100%;
}
Having trouble making the nav bar responsive. Due to the desired design I used two ul's with an image in between. This causes the breakpoints to happen at a large size because of the li padding. I would like to move the logo to the left and add a dropdown button to display the navbar options, along with removing the topbar at a mobile display width. Any help would be much appreciated, Thank you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scalisi Skincare</title>
<link rel="stylesheet" type="text/css" href="build/css/styles.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<header>
<div class="topbar">
GIVE $10, GET $10
FREE SHIPPING AND FREE RETURNS ON ORDERS OVER $50+
<a class="right" href="#">MY ACCOUNT</a>
</div>
<nav>
<ul class="firstNavSection">
<li>BOB'S CREAM</li>
<li>SCALISI SKINCARE</li>
<li>TINTED</li>
</ul>
<img src="assets/logo.PNG" alt="SCALISI">
<ul class="secondNavSection">
<li>REVIEW</li>
<li>ABOUT</li>
<li>BLOG</li>
<li><i class="fa fa-search fa-2x" aria-hidden="true"></i></li>
<li><i class="fa fa-shopping-bag fa-2x" aria-hidden="true"></i></li>
</ul>
</nav>
</header>
</body>
</html>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
header {
.topbar {
display: flex;
justify-content: space-between;
background: #7C8DC0;
padding: 8px 100px;
a {
text-decoration: none;
color: white;
flex: 1;
font-family: calibri;
font-size: 1em;
}
.right {
text-align: right;
}
}
nav {
border: 1px solid #dae3e5;
.firstNavSection {
display: inline-block;
position: relative;
top: -10px;
li {
display: inline-block;
list-style: none;
padding: 0 60px;
a {
font-family: calibri;
font-size: 1.5em;
text-decoration: none;
color: black;
}
}
}
a {
img {
display: inline-block;
position: relative;
top: 10px;
}
}
.secondNavSection {
display: inline-block;
position: relative;
top: -10px;
li{
display: inline-block;
list-style: none;
padding: 0 60px;
a {
font-family: calibri;
font-size: 1.5em;
text-decoration: none;
color: black;
i {
color: #7C8DC0;
}
}
}
}
}
}
Maybe you should follow the Bootstrap's boilerplate and don't forget to add it's resources.
/*==================this is the part that is causing me headaches, I can't get the Header to stay flush with the top without losing the layout*/
header {
background-image: url("images/song.png");
background-color: #00020e;
height: 210px;
width: 1050px;
margin: auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
top: 180;
width: 100%;
height: 40px;
}
li {
float: left;
}
li a {
display: block;
color: #620000;
text-align: center;
padding: 10px 10px;
text-decoration: none;
font-family: 'oswald', sans-serif;
font-weight: 600;
}
li a:hover {
color: white;
}
li a:active {
color: white;
}
body {
background-image: url(images/v_bkgd.png);
Background-repeat: no-repeat;
background-position: center;
background-color: #00020e;
}
P {
font-family: 'roboto condensed', sans-serif;
font-size: 16px;
font-weight: 400;
}
#logo {
float: left;
padding: 5px 30px;
}
#nav_title {
color: #620000;
height: 170px;
line-height: 170px;
}
#nav_title p {
display: inline;
font-size: 36px;
font-family: 'oswald', sans-serif;
}
section {
width: 700px;
background-color: #d1d1d1;
height: 600px;
float: left
}
aside {
width: 300px;
background-color: #d1d1d1;
height: 600px;
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#import url('https://fonts.googleapis.com/css?family=Oswald:200,400,600|Roboto+Condensed:400,400i,700');
</style>
<!-- Index.html -->
<meta charset="UTF-8">
<link rel="stylesheet" href="stylesheet.css" />
<title>Lilydale Football Club</title>
</head>
<body>
<header>
<div id="fixed_header">
<a id="logo" href="index.html">
<img src="images/logo.png" alt="Lilydale Demons Logo" width="142" height="150" class="align-center" />
</a>
<div id="nav_title">
<p style="font-weight:400;">LILYDALE</p>
<p style="font-weight:200;">FOOTBALL CLUB</p>
</div>
<nav>
<ul>
<li> Home
</li>
<li> History
</li>
<li> Players
</li>
<li> Sponsors
</li>
<li> News
</li>
<li> Contact
</li>
</ul>
</nav>
</div>
</header>
<div id="content">
<section></section>
<aside></aside>
</div>
</body>
</html>
So basically, I can't seem to get the header flush with the top of the page. I can see the background image at the top behind the header, I don't want that. I am clearly new to all of this and this is my first attempt at coding a website.
Here is a screenshot
The reason there is a small gap here is because the standard element styling in many browsers includes automatic value for things like padding and margin. It's a good idea to initialize these CSS values for all elements when starting new projects.
Learn more about CSS resets here.
Adding padding:0 and margin:0 to your body solves the issue. I changed the styling of your header to better illustrate that it is indeed flush with the top of the page now. There is still a small gap between your logo and the top of the page however because of the padding on your logo.
/*==================this is the part that is causing me headaches, I can't get the Header tostay flush with the top without losing the layout it self*/
header {
background-image: url("images/song.png");
background-color: white;
border:1px solid red;
height: 210px;
width: 1050px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
top: 180;
width: 100%;
height: 40px;
}
li {
float: left;
}
li a {
display: block;
color: #620000;
text-align: center;
padding: 10px 10px;
text-decoration: none;
font-family: 'oswald', sans-serif;
font-weight: 600;
}
li a:hover {
color: white;
}
li a:active {
color: white;
}
body {
padding:0;
margin:0;
background-image: url(images/v_bkgd.png);
Background-repeat: no-repeat;
background-position: center;
background-color: #00020e;
}
P {
font-family: 'roboto condensed', sans-serif;
font-size: 16px;
font-weight: 400;
}
#logo {
float: left;
padding: 5px 30px;
}
#nav_title {
color: #620000;
height: 170px;
line-height: 170px;
}
#nav_title p {
display: inline;
font-size: 36px;
font-family: 'oswald', sans-serif;
}
section {
width: 700px;
background-color: #d1d1d1;
height: 600px;
float: left
}
aside {
width: 300px;
background-color: #d1d1d1;
height: 600px;
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#import url('https://fonts.googleapis.com/css?family=Oswald:200,400,600|Roboto+Condensed:400,400i,700');
</style>
<!-- Index.html -->
<meta charset="UTF-8">
<link rel="stylesheet" href="stylesheet.css" />
<title>Lilydale Football Club</title>
</head>
<body>
<header>
<div id="fixed_header">
<a id="logo" href="index.html">
<img src="images/logo.png" alt="Lilydale Demons Logo" width="142" height="150" class="align-center" />
</a>
<div id="nav_title">
<p style="font-weight:400;">LILYDALE</p>
<p style="font-weight:200;">FOOTBALL CLUB</p>
</div>
<nav>
<ul>
<li> Home
</li>
<li> History
</li>
<li> Players
</li>
<li> Sponsors
</li>
<li> News
</li>
<li> Contact
</li>
</ul>
</nav>
</div>
</header>
<div id="content">
<section></section>
<aside></aside>
</div>
</body>
</html>
write following on the top of your CSS file (before any other code)
*
{
margin:0;
padding:0;
}
Every browser has some default padding and margin. By writing the above lines on the top your css file you are saying that every element (denoted by *) should have margin and padding as 0 when the page loads. I hope this helps
I want to make a fixed navbar at the bottom of the viewport with two sections. On the left, links for the rest of the site, and on the right, links to outside sources. I want to have everything both horizontally and vertically centered and to be responsive. For every solution I've tried, the height, alignment or size of the navbar is slightly off.
If I set the content div to 90% and the navbar div to 10%, then it "works" and things are aligned correctly, but I want the navbar to be slightly thinner.
As you can see with the border I styled the nav div with, its basically floating, and I have no idea why.
I've seen some similar questions, but a lot of the answers seem to point to outdated solutions using floats, etc.
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
.page {
height: 100%;
}
.main-content {
height: 90%;
max-width: 70%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.main-left {
text-align: center;
padding: 20px;
}
.nav {
border: 1px solid blue;
height: 5%;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.nav-left {
display: flex;
width: 50%;
height: 100%;
justify-content: center;
font-size: 3vh;
line-height: 10vh;
}
.nav-right {
display: flex;
width: 50%;
height: 100%;
justify-content: center;
font-size: 3vh;
line-height: 10vh;
}
.nav ul {
padding: 0;
margin: 0;
display: inline-block;
}
.nav li {
display: inline-block;
text-align: center;
}
.nav a {
color: black;
}
.nav a:link {
text-decoration: none;
}
.nav a:visited {
text-decoration: none;
}
.nav a:hover {
text-decoration: none;
color: gray;
}
.nav a:active {
text-decoration: none;
}
img {
border-radius: 50%;
}
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<script src="https://use.fontawesome.com/383177a704.js"></script>
<title>Alex Wilson - Man, Web Designer, Legend</title>
</head>
<body>
<div class="page">
<div class="main-content">
<div class="main-left">
<img src="http://i.imgur.com/IMIKhWA.jpg"></img>
</div>
<div class="main-right">
<h1>About me</h1>
<p>These are words about how awesome I am. I'm pretty much the best. Scratch that, I am the best. Everything I say is right and everything I do is great. My friends love me and my enemies want to be me. People can't imagine any way I could possibly
be improved. I'm a shining example of humanity and more specifically, manhood. I'm the pinnacle of excellence. I piss glory and shit greatness. You mad? Get at me. Get rekt.</p>
</div>
</div>
<div class="nav">
<div class="nav-left">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Work
</li>
</ul>
</div>
<div class="nav-right">
<ul class="list-right">
<li><i class="fa fa-linkedin" aria-hidden="true"></i>
</li>
<li><i class="fa fa-github" aria-hidden="true"></i>
</li>
<li><i class="fa fa-twitter" aria-hidden="true"></i>
</li>
<li><i class="fa fa-facebook" aria-hidden="true"></i>
</li>
<li><i class="fa fa-envelope" aria-hidden="true"></i>
</li>
</ul>
</div>
</div>
</div>
</body>
Here's a CodePen.
So I did a few things to your code:
Made your page element a flexbox too:
.page {
height: 100%;
display: flex;
flex-direction: column;
}
And removed the heights for the main-content and nav, and the max-width for the main-content(better to set it in pixels according to content rather than percentages I guess).
For making the navbar slightly thinner perhaps you can reduce the line-height for the nav-left or nav-right.
Also added flex: 0 0 auto so that the the nav doesn't shrink too much when the height of the viewport is small (because line-height of nav is in viewport pixels).
See demo below:
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
.page {
height: 100%;
display: flex;
flex-direction: column;
}
.main-content {
/*height: 90%;*/
/*max-width: 70%;*/
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.main-left {
text-align: center;
padding: 20px;
}
.nav {
border: 1px solid blue;
/*height: 10%;*/
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex: 0 0 auto; /* addded */
}
.nav-left {
display: flex;
width: 50%;
height: 100%;
justify-content: center;
font-size: 3vh;
line-height: 5vh;
}
.nav-right {
display: flex;
width: 50%;
height: 100%;
justify-content: center;
font-size: 3vh;
line-height: 5vh;
}
.nav ul {
padding: 0;
margin: 0;
display: inline-block;
}
.nav li {
display: inline-block;
text-align: center;
}
.nav a {
color: black;
}
.nav a:link {
text-decoration: none;
}
.nav a:visited {
text-decoration: none;
}
.nav a:hover {
text-decoration: none;
color: gray;
}
.nav a:active {
text-decoration: none;
}
img {
border-radius: 50%;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<script src="https://use.fontawesome.com/383177a704.js"></script>
<div class="page">
<div class="main-content">
<div class="main-left">
<img src="http://i.imgur.com/IMIKhWA.jpg"></img>
</div>
<div class="main-right">
<h1>About me</h1>
<p>These are words about how awesome I am. I'm pretty much the best. Scratch that, I am the best. Everything I say is right and everything I do is great. My friends love me and my enemies want to be me. People can't imagine any way I could possibly
be improved. I'm a shining example of humanity and more specifically, manhood. I'm the pinnacle of excellence. I piss glory and shit greatness. You mad? Get at me. Get rekt.</p>
</div>
</div>
<div class="nav">
<div class="nav-left">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Work
</li>
</ul>
</div>
<div class="nav-right">
<ul class="list-right">
<li><i class="fa fa-linkedin" aria-hidden="true"></i>
</li>
<li><i class="fa fa-github" aria-hidden="true"></i>
</li>
<li><i class="fa fa-twitter" aria-hidden="true"></i>
</li>
<li><i class="fa fa-facebook" aria-hidden="true"></i>
</li>
<li><i class="fa fa-envelope" aria-hidden="true"></i>
</li>
</ul>
</div>
</div>