The href buttons will not go on the header, I have no clue why, please help me out on this. I've tried around with margin-top, but the minimum on that is -14px which isnt enough. I have no clue what other code to use. I am a beginner in css and am still learning.
I want the buttons to be in the middle height of the header, forgot to mention that, sorry.
styles.css
body {
margin: 0;
padding: 0;
}
header div, main {
max-width: 100%;
margin: 0 auto;
padding: 0 1em 0 1em;
}
header {
background: #d000c2;
width: 100%;
height: 40px;
position: absolute;
-webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
-moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
}
header h1 {
float: left;
margin-top: 0px;
}
main {
padding: 21;
}
header a {
margin-top: -14px;
text-decoration: none;
color: white;
}
header li {
text-transform: uppercase;
display: inline;
margin-right: -14 px;
margin-top: 0 px;
font-family: Helvetica;
font-size: 24px;
z-index: 11;
}
header a:hover {
border-top: 3px cyan;
border-style: solid;
border-bottom: 0px white;
border-right: 0px white;
border-left: 0px white;
}
header li a:hover {
color: cyan;
}
header ul {
float: right;
list-style-type: none;
padding-top: 1em;
}
#vid{
position:fixed;
right:0;
bottom:0;
min-width:100%;
min-height:100%;
background-size:cover;
z-index: -1;
}
#media only screen and (max-width: 520px) {
header {
text-align: center;
position: relative;
}
main {
padding: 14 px;
}
header h1 {
float: none;
margin: 0;
}
header ul {
float: none;
margin: 0;
}
}
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link href="./css/styles.css" rel="stylesheet">
</head>
<body>
<header>
<div>
<h1><img src=""></h1>
<ul>
<li>home</li>
<li> </li>
<li>log-in</li>
<li> </li>
<li>contact</li>
<li> </li>
<li>test</li>
</ul>
</div>
</header>
<main>
<video autoplay loop id="vid">
<source src="./videos/background.mp4" type="video/webm">
</video>
</main>
</body>
See the fiddle
The reason why the <li> tags will not go on the header is because of the 1em padding-top applied for header ul.
Thus, the new CSS for header ul would be like this
header ul {
float: right;
list-style-type: none;
/* padding-top: 1em; */
}
UPDATE
To centralize, the links vertically inside the header, you may use flexbox.
Please see the fiddle that uses
Related
I just created a nav-bar and a little main section in the page but the issue here is that there is a space between the nav-bar and the main section without any margins or padding existing between them.
/*this is a universal selector to clear the padding and margin*/
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
font-family:Verdana, Geneva, Tahoma, sans-serif;
}
/*[starting the style of the nav bar]*/
/*this is the style fot the whole nav bar*/
nav{
background-color: black;
box-shadow: 5px 5px 20px;
position: fixed;
top: 0;
width: 100%;
height: 8%;
outline: auto;
}
/*this is the containing block for all the list items in the nav*/
nav ul{
margin: auto;
text-align: center;
outline: solid rgb(247, 5, 5) 4px;
}
/*this is the style for the each one of the list items*/
nav li{
display: inline;
padding: 20px;
margin: 30px;
outline: solid green 4px;
}
/*the style for the text in the list items of the nav*/
nav a{
display: inline-block;
padding: 20px;
font-weight: 900;
color: white;
text-decoration: none;
outline: solid yellow 7px;
}
/*[starting the style of the main section]*/
main{
text-align: center;
background-image: url(code1.jpg);
background-repeat: no-repeat;
background-size: cover;
outline: solid black 7px;
width: 100%;
/*height: 600px;*/
color: white;
/*border: solid blue 1px;*/
}
main > h1 {
font-size: 60px;
margin: 160px;
}
main > h2{
font-size: 50px;
}
<!DOCTYPE html>
<html>
<head>
<title>
ammar eneen
</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--this is the horizontal nav bar at the top of the page-->
<nav>
<ul>
<li>HOME</li>
<li>HOW IT WORKS</li>
<li>ORDER</li>
<li>GALLERY</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</nav>
<!--this is the main section at the home page right under the nav bar-->
<main>
<h1>
welcome to <br><span style="text-shadow: 3px 3px rgb(221, 8, 8)">EYD</span>
</h1>
<h2>best web-developing service</h2>
<p>order your own service now <span>ORDER</span></p>
<p>if this is your first time here check <span>HOW IT WORKS</span></p>
</main>
<section>
</section>
</body>
</html>
You said you don't have any margin. But you have
main > h1 {
font-size: 60px;
margin: 160px;
}
That 160px margin is the one you see as a 'space' between nav and main. Change it to margin: 0 160px 160px 160px to remove it from 'top'.
If you want to add a 'space' to the top of your main , use padding-top:160px on main
Added a red bck color to main for example purposes.
/*this is a universal selector to clear the padding and margin*/
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
font-family:Verdana, Geneva, Tahoma, sans-serif;
}
/*[starting the style of the nav bar]*/
/*this is the style fot the whole nav bar*/
nav{
background-color: black;
box-shadow: 5px 5px 20px;
position: fixed;
top: 0;
width: 100%;
height: 8%;
outline: auto;
}
/*this is the containing block for all the list items in the nav*/
nav ul{
margin: auto;
text-align: center;
outline: solid rgb(247, 5, 5) 4px;
}
/*this is the style for the each one of the list items*/
nav li{
display: inline;
padding: 20px;
margin: 30px;
outline: solid green 4px;
}
/*the style for the text in the list items of the nav*/
nav a{
display: inline-block;
padding: 20px;
font-weight: 900;
color: white;
text-decoration: none;
outline: solid yellow 7px;
}
/*[starting the style of the main section]*/
main{
text-align: center;
background-color:red; /* added for example purposes */
background-image: url(code1.jpg);
background-repeat: no-repeat;
background-size: cover;
outline: solid black 7px;
width: 100%;
/*height: 600px;*/
color: white;
/*border: solid blue 1px;*/
}
main {
padding-top:160px; /* add this*/
}
main > h1 {
font-size: 60px;
margin: 0 160px 160px 160px; /* change this*/
}
main > h2{
font-size: 50px;
}
<html>
<head>
<title>
ammar eneen
</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--this is the horizontal nav bar at the top of the page-->
<nav>
<ul>
<li>HOME</li>
<li>HOW IT WORKS</li>
<li>ORDER</li>
<li>GALLERY</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</nav>
<!--this is the main section at the home page right under the nav bar-->
<main>
<h1>
welcome to <br><span style="text-shadow: 3px 3px rgb(221, 8, 8)">EYD</span>
</h1>
<h2>best web-developing service</h2>
<p>order your own service now <span>ORDER</span></p>
<p>if this is your first time here check <span>HOW IT WORKS</span></p>
</main>
<section>
</section>
</body>
</html>
Set the nav height to auto, and you can play with the padding to add spacing....
nav{
background-color: black;
box-shadow: 5px 5px 20px;
position: fixed;
top: 0;
width: 100%;
padding: 10px;
height: auto;
outline: auto;
}
https://jsfiddle.net/c8woj40v/
I am having problems with my code only filling up half the screen. It will fill the left half but not the right. I tried setting html height and width to 100% but it did not fix the problem. I also could not click on my href's to other pages after doing this. Any help would be great.
html {
margin: 0;
height: 100%;
width: 100%;
}
body {
background: #B2906F;
font-family: arial;
margin: 0;
height: 100%;
}
.picture{
display: inline;
margin: 0;
padding: 0;
position: fixed;
z-index: -1;
background-size: 100%
}
.button{
padding: 10px 15px;
text-decoration: none;
border-radius: 5px;
background-color: #05280c
}
.button-primary:hover {
background-color: #05370c
}
h1 {
display: inline;
margin: 0;
background-color: #2c421f;
padding: 5px;
position: absolute;
}
ul{
margin: 0;
display: inline;
padding: 0px 0px 0px 250px;
}
ul li {
display: inline-block;
list-style-type: none;
padding: 15px 10px;
color: #050c0c;
margin: 0;
}
ul li a {
color: black;
}
footer{
clear: both;
}
nav {
color:
height: 40px;
margin: 0;
background-color: #2c421f;
}
<!doctype html>
<html>
<head>
<title>NWWolfPack</title>
<link href="main.css" rel="stylesheet" />
</head>
<body>
<h1>NW Wolf Pack</h1>
<div class="picture"><img src="camo.jpg" width="1000" height="150">
<header>
<nav>
<ul>
<li class="button"><strong>Home</strong></li>
<li><strong>Records</strong></li>
<li><strong>Membership</strong></li>
<li><strong>Contact Us</strong></li>
</ul>
</nav>
</header>
</body>
<footer>2017 Dillan Hall</footer>
</html>
Add your code in a main div and add a width width margin: 0 auto
.mainContainer{
width:990px;
margin: 0 auto;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
body {
background-image: url("http://technozed.com/wp-content/uploads/2016/03/firewatch-wallpaper-13.jpg");
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-color: #black;
background-size: cover;
padding-left: 11em;
font-family: Lucida Handwriting, Monotype Corsiva, Times, serif;
color: white;
background-color: black
}
#bg {
z-index: -1;
}
ul {
text-align: center;
box-shadow: 10px 10px 20px black;
background-color: #131b28;
top: 0em;
left: 0em;
list-style-type: none;
margin: 0;
padding: 0;
width: 11%;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
margin: 0 0;
display: block;
color: #FF6C40;
padding: 100%;
text-decoration: none;
}
li a.active {
background-color: #2C112B;
color: #FF6C40;
}
li a:hover:not(.active) {
background-color: #2C112B;
color: #FF6C40;
}
h1 {
border-bottom: thin dotted;
margin: 0 0;
padding: 8px 0px;
}
address {
border-top: thin dotted;
margin 0px 0px;
padding: 8px 0px;
}
</style>
</head>
<body>
<!-- Site navigation menu -->
<ul class="navbar">
<li>Wildlife Sanctions</li>
<li>Photos</li>
<li>Camping Sites</li>
<li>Donations</li></ul>
<!-- Main content -->
<h1>My first styled page</h1>
<p>Welcome to my styled page!</p>
<p>It lacks images, but at least it has style. And it has links, even if they don't go anywhere…</p>
<p>There should be more here, but I don't know what yet.</p>
<!-- Sign and date the page, it's only polite! -->
<address>Made 5 April 2004<br> by myself.</address>
</body>
</html>
I've made a webpage but when I run the code, the navbar located at the left side of the screen, doesn't look quite right and the contents of it, instead of covering the total area of the navbar. I made an effort to correct this mistake by adjusting the percentage of the padding of the li a {} part of the style sheet but when the code runs on a monitor of different aspect ratios, the problem returns again. How can I fix this?
<style type="text/css">
body {
background-image: url("http://technozed.com/wp-content/uploads/2016/03/firewatch-wallpaper-13.jpg");
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-color: #black;
background-size: cover;
padding-left: 11em;
font-family: Lucida Handwriting, Monotype Corsiva, Times, serif;
color: white;
background-color: black
}
#bg {
z-index: -1;
}
ul {
text-align: center;
box-shadow: 10px 10px 20px black;
background-color: #131b28;
top: 0em;
left: 0em;
list-style-type: none;
margin: 0;
padding: 0;
width: 11%;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
margin: 0 0;
display: block;
color: #FF6C40;
padding: 100%;
text-decoration: none;
}
li a.active {
background-color: #2C112B;
color: #FF6C40;
}
li a:hover:not(.active) {
background-color: #2C112B;
color: #FF6C40;
}
h1 {
border-bottom: thin dotted;
margin: 0 0;
padding: 8px 0px;
}
address {
border-top: thin dotted;
margin 0px 0px;
padding: 8px 0px;
}
</style>
And here is a "snippet" of my HTML code;
<body>
<!-- Site navigation menu -->
<ul class="navbar">
<li>Wildlife Sanctions</li>
<li>Photos</li>
<li>Camping Sites</li>
<li>Donations</li></ul>
<!-- Main content -->
<h1>My first styled page</h1>
<p>Welcome to my styled page!</p>
<p>It lacks images, but at least it has style. And it has links, even if they don't go anywhere…</p>
<p>There should be more here, but I don't know what yet.</p>
<!-- Sign and date the page, it's only polite! --><address>Made 5 April 2004<br> by myself.</address>
your syntax for ul closing is wrong. Please update the last line.
<li>Donations</li></ul>
So I'm at a loss here. I know I have the proper src code for my image, when I view the page in Chrome, without the use of Brackets, the image will show. But when I use Brackets Live preview, it does not show the image in the browser, it does create a box for it, but its empty. The funny thing is, when I hover over the code in the text editor in Brackets, I get a preview of the image. Any help will be greatly appreciated!
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Bevan' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Libre+Baskerville' rel='stylesheet' type='text/css'>
<title>Here goes #1</title>
</head>
<body>
<header class="main-header">
<ul class="nav bv">
<li><h1>My Favortie Artists</h1></li>
<li>About</li>
<li>Podcasts</li>
<li>Books</li>
<li>Ideas</li>
<li>Blog</li>
</ul>
</header>
<div class="main-content">
<div class="content1">
<ul clas="imgs">
<li class="afr"><img src="c:web projects/art/img/afr1.jpg">Afremov</li>
</ul>
<p></p>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding; 0;
box-sizing: border-box;
width: 100%;
}
body li {
list-style-type: none;
}
ul {
padding: 0;
}
.nav {
text-align: center;
background-color: beige;
box-shadow: 0 1px 10px black;
height: 230px;
}
.nav h1 {
text-shadow: 5px 7px 4px white, 2px 2px 10px beige;
line-height: .8em;
padding: 10px 0;
}
/*COMMON FONTS*/
.bv {
font-family: 'Bevan', cursive;
}
/*SMALL SCREEN STYLE*/
.nav li {
font-size: 1.25em;
text-shadow: 2px 3px 10px white;
}
/*LINK STYLES*/
.nav a {
text-decoration: none;
list-style-type: none;
border-bottom: 2px solid grey;
padding: 0 15px;
color: black;
border-radius: 10%;
}
.nav a:hover {
background-color: bisque;
padding: 0 5%;
font-size: 1.5em;
border-radius: 25%;
transition: background-color .6s, padding .8s; font-size 3s, border-radius .8s;
}
/*LARGE SCREEN*/
#media (min-width: 769px) {
.nav {
display: flex;
height: 150px;
}
.nav li {
flex-grow: 1;
align-self: center;
}
.nav:not(:first-child) {
flex-flow: wrap;
justify-content: flex-end;
}
.nav h1 {
padding-right: 50%;
flex-grow: 2;
margin-left: 10px;
}
.nav a:hover {
background-color: bisque;
padding: 0 20%;
font-size: 1.5em;
border-radius: 25%;
transition: all 1s;
}
/*Image Links*/
What is this "c:web" in src="c:web projects/art/img/afr1.jpg".
Did you mean c:/web/projects/art/img/afr1.jpg?
If so try to set a relative path something like src="art/img/afr1.jpg".
Always copy your supporting files like images and js, css on the working directory with respective folder names, then refer the relative paths to refer the files inside your code.
I'm just getting back into Web Development and so I'm working on stretching those muscles again. What I wanted to achieve was a Header on top of my vertical menu with the Initials in the background and the full name in the middle of those initials. I was able to do that with the code in codepen, however it quickly becomes broken when resizing the window. I know that is due in part to the position absolute. Is there another way to achieve this effect and have it be scalable, but stay within the lines of the nav?
http://codepen.io/anon/pen/OPPKmq
<html>
<head>
<title>Scottish Arts</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="body">
<aside>
</aside>
<nav>
<h1 id="navSA">SA<h1>
<h1 id="sa">Socttish Arts</h1>
<ul>
<li><h3></h3></li>
<li>Home</li>
<li>Scottish Arts</li>
<li>Bagpipes</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</body>
</html>
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
h1,h2,h3 {
padding: 0;
margin: 0;
}
#body {
display: flex;
height: 100%;
}
aside {
width: 25px;
height: 100%;
background: url("img/nhtar.gif");
background-repeat: repeat;
border-right: 2px #000 solid;
}
nav {
height: 100%;
width: 15%;
background-color: #7E717A;
border-right: 4px #A2969E solid;
overflow: hidden;
}
nav #navSA {
font-weight: bolder;
text-align: center;
padding: 0;
margin: 0;
font-size: 8em;
color: #A2969E;
}
nav #sa {
padding: 0;
margin: 0;
position: absolute;
top: 60px;
left: 40px;
font-size: 2em;
text-shadow: 2px 2px #7E717A;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
text-align: right;
}
nav ul li a {
display: block;
padding: 5px;
background-color: #A2969E;
text-decoration: none;
font-size: 1.5em;
font-family: "Verdana";
font-weight: bold;
color: #fff;
border-bottom: 4px #7E717A solid;
}
nav ul li a:hover {
background-color: #372E34;
}
Giving absolute Position to a child that does not have relative parent , will set it's position relating to BODY .
add position:relative; to nav in css , and everything will be OK ;)
http://codepen.io/anon/pen/LEEwOd