<!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>
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'm trying to make scroll nav like youtube nav
I want to make the scroll-horizontal div get the width of the inline-block elemtns which is <li>
I want someway to make the scroll-horizontal div get the current width automatically even if I added more <li> elements to the nav later
<body>
<nav>
<div class="scroll-horizontal">
<li class=" menu-item"><a class="active" href="">Home</a></li>
<li class=" menu-item">Models</li>
<li class="menu-item">Photos</li>
<li class="menu-item">Videos</li>
<li class="menu-item">Youtube</li>
<li class="menu-item">Links</li>
</div>
</nav>
<style type="text/css">
*{
margin: 0;
padding: 0
}
/*NAV*/
nav{
width: 100% !important;
background: red;
overflow: auto;
}
.scroll-horizontal{
min-width: 300%;
}
nav li{
list-style: none;
display: inline-block;
}
nav a{
text-align: center;
text-decoration: none;
color: #444;
display: block;
padding: 0 20px;
width: 100px;
}
</style>
</body>
the nav that youtube has:
youtube nav
you can see that the nav that they had don't have empty space at the end of the nav like what I have
this might partly answer your question:
As I understand it, the horizontal scroll arrows for the tab menu on youtube are shown, depending on the window width. So I would use the css '#media' rule to specify the width, when the arrows should be displayed. Here is a solution that displays both left and right arrows as soon as the window gets too narrow to display the complete menu:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
margin: 0;
padding: 0;
}
body {
font-family: Arial;
background-color: #eee;
}
div.scrollmenu {
padding: 0 38px 0 38px;
overflow: hidden;
white-space: nowrap;
background-color: #fff;
}
div.scrollmenu a {
display: inline-block;
color: #000;
text-align: center;
padding: 14px;
text-decoration: none;
background-color: #fff;
}
div.scrollmenu a:hover {
background-color: #aaa;
}
#btn-scroll-lft {
position: absolute;
top: 0;
left: 0;
background-color: #fff;
padding: 15px;
border: 0px;
height: 46px;
font-weight: bold;
display: none;
}
#btn-scroll-rgt {
position: absolute;
top: 0;
right: 0;
background-color: #fff;
padding: 15px;
border: 0px;
height: 46px;
font-weight: bold;
display: none;
}
#media only screen and (max-width: 600px) {
#btn-scroll-lft {
display: block;
}
#btn-scroll-rgt {
display: block;
}
}
</style>
</head>
<body>
<button id="btn-scroll-lft" onclick="scrollWinLeft()"><</button>
<div class="scrollmenu" id="scrollmenu">
one
two
three
four
five
six
seven
eight
nine
</div>
<button id="btn-scroll-rgt" onclick="scrollWinRight()">></button>
<script>
function scrollWinLeft() {
document.getElementById('scrollmenu').scrollBy(-100,0);
}
function scrollWinRight() {
document.getElementById('scrollmenu').scrollBy(100, 0);
}
</script>
</body>
</html>
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
So I'm trying to fill in the header part above the border fully in colour. But there seems to be like 3px of white space that's just bordering the entire page. I made the margin and padding for the entire page 0 so I'm a little confused. Here's the page code:
<DOCTYPE html?>
<head>
<title> Brittany Corl - Web Developer</title>
<link rel="stylesheet" href="CSSCoding.css">
<div id="MainHeader"><img id="HeaderPhoto" src="HeaderPhoto.png" height="100 px" width="100 px">
<center><h1>Brittany Corl - Web Developer/Graphic Designer</h1></center></div>
</head>
<body>
<ul>
<li>Home</li>
<li>About Me</li>
<li>Skills</li>
<li>Work</li>
<li>Resume</li>
<li>Contact</li>
</ul>
</body>
here's the CSS:
html {
width: 100%;
margin: 0;
padding: 0;
}
h1 {
font-family: tahoma;
font-size: 40px;
padding-top: 30px;
padding-bottom: 29px;
border-bottom: medium solid black;
}
#HeaderPhoto {
float: left;
padding-right: 20px;
}
#MainHeader {
background-color: #e0ffff;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
font-family: verdana;
font-size: 20px;
}
a:link, a:visited {
display: block;
width: 120px;
color: white;
background-color: #99C0F2;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #5FA0F5;
}
Add the following to your css.
body {
margin: 0px;
padding: 0px;
}
Try setting the margin and padding to zero for the body of the page.
body
{
width: 100%;
margin: 0;
padding: 0;
}
or just add ,body after HTML
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