Hello and thank you for every answer.
How can I remove that clickable space that always shows to me as extra to my navbar?
Thank you!
https://codepen.io/danctes/pen/YzZWGZO
* {
padding: 0;
margin: 0;
}
body {
background-color: antiquewhite;
}
nav {
background-image: linear-gradient(to right, darkgreen, limegreen);
border-top: 5px solid darkgreen;
margin-top: 30px;
height: 50px;
position: relative;
width: 100vw;
}
a {
text-decoration: none;
color: AntiqueWhite;
font-family: arial;
font-weight: bold;
}
nav .danctes {
position: absolute;
left: 20%;
top: 50%;
transform: translate(-50%, -50%);
}
ul {
float: right;
list-style-type: none;
position: absolute;
right: 10%;
top: 50%;
transform: translate(-50%, -50%);
}
li {
display: inline-block;
}
.danctes {
font-size: 1.75em;
}
ul a {
text-transform: uppercase;
margin: 0 5px;
font-size: 1.25em;
border: 1px solid red;
}
<!doctype html>
<html>
<head>
<title>
My first navbar
</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<nav>
<div class="danctes">
<a href="#">danctes
</a>
</div>
<ul>
<li><a href="https://www.digisport.ro/">Home</li>
<li><a href="https://www.reddit.com/">Reddit</li>
<li><a href="https://9gag.com/">9gag</li>
<li><a href="https://www.facebook.com/">Facebook</li>
<li><a href="https://www.instagram.com/">Instagram</li>
</ul>
</nav>
</body>
</html>
You forgot to close the tag.
<ul>
<li>Home</li> <!-- </a> missing in your code -->
<li>Reddit</li>
<li>9gag</li>
<li>Facebook</li>
<li>Instagram</li>
</ul>
For more information:
https://www.w3schools.com/tags/tag_a.asp
Related
-i set the background on black
-i set an image and changed the opacity so that it will blend in with the background.
-tried to create a text above the image but it wont show.
Here is a preview of the website:
and the following are the code that i did :)
/* Unfortunately the "---Greetings" text cant be seen in the preview and i tried finding it by changing colors just in case it was just misplaced but it didnt.
I tested another picture without the opacity, it worked but when i tried lessening it it disappears again :( */
body {
background-color: black;
}
.container img {
position: absolute;
top: 430px;
left: 670px;
right: 0;
bottom: 0;
margin: auto;
width: 101%;
min-height: 50%;
}
.container {
display: inline-block;
opacity: 0.8;
position: relative;
top: -50%;
left: -50%;
width: 100%;
height: 100%;
color: red;
}
.mid-left h1 {
position: absolute;
left: 25px;
top: 10px;
}
.navbar {
text-align: center;
width: 100%;
overflow: hidden;
position: fixed;
bottom: 5px;
right: 0px;
background-color: black;
}
.navbar a {
text-decoration: none;
color: white;
font-family: "montserrat-extrabold", sans-serif;
font-size: 15px;
letter-spacing: 3px;
}
.navbar ul {
display: inline-block;
list-style: none;
padding: 10px;
margin: 20px;
}
.navbar li {
float: left;
}
.navbar li+li {
margin-left: 20px;
}
/*changing of color when hover*/
.navbar a:hover {
text-decoration: underline;
color: red;
transition: 0.6s;
}
/*add color to the selective link*/
.navbar a:active {
background-color: transparent;
}
<!DOCTYPE html>
<html>
<head>
<title> R E S U M E</title>
<link rel="stylesheet" href="home.css">
<link rel="stylesheet" type="text/css" href="font.css">
<meta charset="utf-8">
</head>
<body>
<!-- <div id="bg">
<img src="Cover1.jpg" alt="">
</div>
-->
<div class="container">
<img src="Cover1.jpg" alt="Me">
<div class="mid-left">
<h1>----- Greetings!</h1>
</div>
</div>
<header class="flex flex-vertical-center">
<div class="navbar flex flex-horizontal-center">
<ul>
<li class="navitem"> Home </li>
<li class="navitem"> Personal</li>
<li class="navitem"> Education</li>
<li class="navitem"> Experience</li>
s
</ul>
</div>
</header>
</body>
</html>
You don't see .mid-left because
.container {
...
top: -50%;
left: -50%;
}
You have to remove top and left with these value. Furthermore I suggest to you to use background-image: url('Cover1.jpg') on .container and remove <img src="Cover.jpg" alt="Me">
Here's the problem: the navbar looks like it's floating down the page.
Why does the nav-bar look like this? I'm still new to css and I've tried everything but nothing works. I've re-written the code again but the issue wasn't resolved. Here's what the nav should look like.
this tutorial is from this udemy course
https://www.udemy.com/design-and-develop-a-killer-website-with-html5-and-css3/#%2F
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
background-color: #fff;
color: #555;
font-family: 'Lato', 'Arial', sans-serif;
font-weight: 300;
font-size: 20px;%);
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
/*-------------------------------------------------*/
/*reusable componment*/
/*-------------------------------------------------*/%);
.row {
max-width: 1140px;
margin: 0 auto;
}
/*-----------*/
/*headings*/
/*-----------*/
h1 {
margin: 0;
margin-bottom: 20px;
margin-top: 0;
color: #fff;
font-size: 240%;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
word-spacing: 4px;
}
/*-----------*/
/*buttons*/
/*-----------*/
.btn:link,
.btn:visited {
display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border-radius: 200px;
transition: background-color 0.2s,border 0.2s ,color 0.2s;
}
.btn-1:link,
.btn-1:visited {
background-color: #e67e22;
color: #fff;
margin-right: 15px;
}
.btn-2:link,
.btn-2:visited {
border: 1px solid #e67e22;
color: #e67e22
}
.btn-1:hover,
.btn-1:active {
background-color: #b05d14;
}
.btn-2:hover,
.btn-2:active {
background-color: #b05d14;
color: #fff;
}
/*-------------------------------------------------*/
/*HEADER*/
/*-------------------------------------------------*/
.hero-text-box{
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
header {
background-image: -webkit%);-linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(assets/images/hero.jpg);
background-size: cover;
background-position: center;
height: 100vh;
background-attachment: fixed;
}
.logo{
height: 100px;
width: auto;
float: left;
margin-top: 20px;
}
.main-nav {
float: right;
list-style: none;
margin-top: 55px;
}
.main-nav li {
display: inline-block;
margin-left: 40px;
}
.main-nav li a:link,
.main-nav li a:visited {
padding: 8px 0;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
border-bottom: 2px solid transparent;
-webkit-transition: border-bottom 0.3s, color 0.3s;
transition: border-bottom 0.3s, color 0.3s;
}
.main-nav li a:hover,
.main-nav li a:active {
border-bottom: 2px solid #BF55EC;
<!DOCTYPE html>
<html>
<head>
<title>omni food</title>
<link rel="stylesheet" type="text/css" href="normalize.css">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="grid.css">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400" rel="stylesheet">
</head>
<body>
<header>
<nav>
<div class="row">
<img src="assets/images/logo-white.png" alt="omni-food" class="logo">
</div>
<div class="main-nav">
<ul>
<li> Food delivery </li>
<li> How it works </li>
<li> Our cities </li>
<li> Sign up </li>
</ul>
</div>
</nav>
<div class="hero-text-box">
<h1>Goodbye junk food.<br>hello super healthy meals</h1>
<a class="btn btn-1" href="#">I'm hungry</a>
<a class="btn btn-2" href="#">show me more</a>
</div>
</header>
</body>
</html>
please help me
The is defined so that it takes up the entire row on screen. This forces onto a new row making it appear lower. If you still want the functionality of the row class, it should enclose both the img & UL. You can get rid of that div entirely and apply the class row to the Nav element.
<nav class="row">
<img src="assets/images/logo-white.png" alt="omni-food" class="logo">
<div class="main-nav">
<ul>
<li> Food delivery </li>
<li> How it works </li>
<li> Our cities </li>
<li> Sign up </li>
</ul>
</div>
</nav>
Don't use entire row for only logo . you have used
.row{ max.width: 1180px; }
put this .row class in nav element or
remove row class from div for logo .
<nav class("row")>
I've made a website for a school project and want to improve the design a little more. I think the logo makes the header a little bit to big. So I want to move my navbar from under the header to inside the header, to make it look smaller. That's all. I'll post the code and photos underneath.
This is how it looks now
How I want it to be
/* -----------------------
Layout
------------------------*/
.container {
max-width: 70em;
margin: 0 auto;
}
.header {
font-family: 'Handlee', cursive;
color: #fff;
background: #7eabac;
padding: 0.5em 0em;
}
.header-heading {
margin: 0;
max-width: 300px;
margin-left: 400px;
max-height: 300px;
}
.nav-bar {
background: #e9f1f1;
padding: 0;
}
.content {
overflow: hidden;
padding: 1em 1.25em;
background-color: #fff;
}
.main,
.zijkant {
margin-bottom: 1em;
}
.footer {
color: #fff;
background: #656565;
padding: 1em 1.25em;
}
/* -----------------------
Navbar
------------------------*/
.nav {
margin: 0;
padding: 0;
list-style: none;
font-family: 'Open Sans Condensed', sans-serif;
}
.nav li {
display: inline;
margin: 0;
}
.nav a {
display: block;
padding: .7em 1.25em;
color: #black;
text-decoration: none;
border-bottom: 1px solid gray;
}
.nav a:link {
color: black;
}
.nav a:visited {
color: black;
}
.nav a:focus {
color: black;
background-color: white;
}
.nav a:hover {
color: black;
background-color: #eededb;
}
.nav a:active {
color: white;
background-color: #f4ebe9;
}
<!DOCTYPE html>
<html lang="nl">
<head>
<link rel="stylesheet" href="etc/css/styles.css">
</head>
<script type="text/javascript">
function zoom() {
document.body.style.zoom = "-20%"
}
</script>
<body onload="zoom()">
<div class="header">
<div class="container">
<img src="etc/img/logo-wec.png" class="header-heading"></img>
</div>
</div>
<div class="nav-bar">
<div class="container">
<ul class="nav">
<li><a class="active" href="index.html">Home</a>
</li>
<li>Nieuws
</li>
<li>Producten
</li>
<li>ROC
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</body>
</html>
Put the image container and navbar in the same container:
<div class="header">
<div class="container">
<img src="etc/img/logo-wec.png" class="header-heading"></img>
</div>
<div class="nav-bar">
<div class="container">
<ul class="nav">
<li><a class="active" href="index.html">Home</a>
</li>
<li>Nieuws
</li>
<li>Producten
</li>
<li>ROC
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</div>
Give the header position relative and the position the navbar using absolute positioning:
.header {
font-family: 'Handlee', cursive;
color: #fff;
background: #7eabac;
padding: 0.5em 0em;
position: relative;
}
.nav-bar{
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto;
height: 50px;//adjust to center vertically
width: 300px;//adjust to your liking
}
You have to set a height to nav-bar in order to make sure it is centered vertically
So I'm building a website with a top menu but I ran into a problem. Basicly I want to have my menu centered but now its aligned to the left. Also the menu has a background color with would have to expand the whole width. I've tryed the answers describes here: How do I center the navigation menu?. But to no succes.
My CSS/HTML code is:
body {
font-family: FuturaLight;
background: white;
color: #333;
align-content: top;
margin: 0;
margin-bottom: 5em;
padding: 0;
}
.margin {
margin-left: 300px;
margin-right: 300px;
}
ul {
font-family: Futura;
font-size: 25px;
list-style-type: none;
position: fixed;
top: 61px;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
border-right: 1px solid yellowgreen;
border-top: 1px solid yellowgreen;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #333;
}
.active {
background-color: white;
color: green
}
.spacer {
width: 100%;
height: 95px;
}
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Scouts Permeke</TITLE>
<link rel="stylesheet" type="text/css" href="siteStyle.css">
</HEAD>
<BODY>
<H1>Scouts Permeke</H1>
<ul>
<li><a class="active" href="scouts_permeke_site.html">Home</a>
</li>
<li>Nieuws
</li>
<li>Contact
</li>
<li>Over
</li>
<li>Foto's
</li>
<li>Activiteiten
</li>
<li>Papierwerk
</li>
<li>Afspraken
</li>
<li>Uniform
</li>
<li>Technieken
</li>
<li>Jaarthema
</li>
<li>Rituelen
</li>
<li>Verhuur
</li>
<li>Inschrijvingen
</li>
</ul>
<div class="spacer">
</div>
<img src="groepsfoto.jpg" width="100%" " >
<div style="font-family: Futura ">
<H2>Welkom op onze vernieuwde site!</H2>
<H2>Kijk gerust even rond.</H2>
</div>
</BODY>
</HTML>
Many thanks in advance.
Add to your ul in your Stylesheet this:
text-align: center;
and replace from li
float: left;
with this
display: inline-block;
That could do it.
Hope this helps.
Have you considered flexbox as it will work depending on screen size and you can set it to be centre alligned.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Just note it wont work in older versions of ie
BODY {
font-family: FuturaLight;
background: white; color: #333;
align-content: top;
margin: 0;
margin-bottom: 5em;
padding: 0;
}
.margin {
margin-left: 300px;
margin-right: 300px;
}
ul {
font-family: Futura;
font-size: 25px;
list-style-type: none;
position: fixed;
top: 61px;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
display: flex;
justify-content:center;
flex-wrap: wrap
}
li {
float: left;
border-right:1px solid yellowgreen;
border-top:1px solid yellowgreen;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #333;
}
.active {
background-color: white;
color: green
}
.spacer
{
width: 100%;
height: 95px;
}
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Scouts Permeke</TITLE>
<link rel="stylesheet" type="text/css" href="siteStyle.css">
</HEAD>
<BODY>
<H1>Scouts Permeke</H1>
<ul>
<li><a class="active" href="scouts_permeke_site.html">Home</a></li>
<li>Nieuws</li>
<li>Contact</li>
<li>Over</li>
<li>Foto's</li>
<li>Activiteiten</li>
<li>Papierwerk</li>
<li>Afspraken</li>
<li>Uniform</li>
<li>Technieken</li>
<li>Jaarthema</li>
<li>Rituelen</li>
<li>Verhuur</li>
<li>Inschrijvingen</li>
</ul>
<div class="spacer">
</div>
<img src="groepsfoto.jpg" width="100%"" >
<div style="font-family: Futura">
<H2>Welkom op onze vernieuwde site!</H2>
<H2>Kijk gerust even rond.</H2>
</div>
</BODY>
</HTML>
I am making a website for my friend, and I am currently having two problems that I can't seem to solve:
I can't seem to get rid of the white space that exists between the main container and the footer. There is a small strip of white that runs from the bottom of the background image to the footer.
When the browser window is shrunk (especially to half the width of the screen) white space appears after the footer.
Can anyone help me please? Thanks!
body {
margin: 0px;
font-size: 62.5%;
padding: 0px;
}
header {
width: 100%;
height: 90px;
background-color: #000000;
}
#logo_home {
position: relative;
float: left;
left: 5%;
width: 20%;
top: 7.5px;
}
#logo {
height: 75px;
width: 300px;
}
nav {
position: relative;
float: right;
right: 5%;
width: 35%;
height: 50px;
top: 20px;
}
ul {
margin-top: 0px;
margin-bottom: 0px;
position: relative;
top: 6.5px;
}
li {
display: inline-block;
margin-left: 2.5%;
margin-right: 2.5%;
position: relative;
list-style-type: none;
padding-top: 0px;
}
.nav_link {
font-family: 'PT-Sans', sans-serif;
color: #FFFFFF;
font-size: 1.2em;
text-transform: uppercase;
line-height: 37px !important;
text-decoration: none;
}
.nav_link:link {
color: #ffffff;
}
.nav_link:visited {
color: #ffffff;
}
.nav_link:hover {
color: #dddddd;
}
#video_container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
#video_container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 100px;
left: 17.5%;
width: 65%;
height: 65%;
}
#main_container {
background-image: url("../images/background.jpg");
background-size: cover;
margin: 0px;
}
footer {
background-color: #000000;
height: 50px;
width: 100%;
margin: 0px;
}
.copyright {
color: white;
font-family: 'PT-Sans', sans-serif;
font-size: 1.2em;
position: relative;
text-align: center;
top: 15px;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta name="robots" content="noindex, nofollow, noarchive" />
<link href="css/stylesheet.css" type="text/css" rel="stylesheet" />
<title>Hyperdog Productions</title>
</head>
<body>
<header>
<div id="logo_home">
<a href="index.html" title="Home">
<img id="logo" src="images/logo.jpg" alt="logo">
</a>
</div>
<nav>
<ul>
<li><a class="nav_link" id="about" href="about.html" title="About">About</a>
</li>
<li><a class="nav_link" id="short_films" href="short_films.html" title="Short Films">Short Films</a>
</li>
<li><a class="nav_link" id="cast_crew" href="cast_crew.html" title="Cast/Crew">Cast/Crew</a>
</li>
<li><a class="nav_link" id="gallery" href="gallery.html" title="Gallery">Gallery</a>
</li>
<li><a class="nav_link" id="links" href="links.html" title="Links">Links</a>
</li>
<li><a class="nav_link" id="contact_us" href="contact_us.html" title="Contact Us">Contact Us</a>
</li>
</ul>
</nav>
</header>
<div id="main_container">
<div id="video_container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/EuIXJIp8f6U" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<footer>
<p class="copyright">Copyright © 2016. All Rights Reserved.</p>
</footer>
</body>
</html>
It's probably the default top and bottom margin on the <p> in the footer, reset that and see.
.copyright {
margin: 0;
}