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/
Related
I'm creating a website as i'm trying to learn HTML.
I have created a few very basic websites, so I am no master.
My horizontal(top) navigation bar is underneath my header, however I cant center the tabs for some reason.
How do I get the tabs text to be centered with the nav bar?
<!--Header-->
<header>
<img id="pumpkin" src="pumpkin.gif" alt="Pumpkin">
<h2 id="halloween">The Halloween Store</h2>
<h3 id="goblin">For the little Goblin in all of us!</h3>
</header>
<!--Main Body With Drop Down Navigation-->
<body>
<nav class="topNav">
<ul id="topNav">
<li>Home</li>
<li>Product List</li>
<li>Personal</li>
<li>Decorating Ideas</li>
<li>Join Email</li>
</ul>
</nav>
</body>
CSS
#topNav {
width: 790px;
height: 35px;
font-size: 15px;
text-align: center;
background-color: black;}
#topNav li {
display: inline-block;}
#topNav a {
padding: 10px 30px 10px 30px;
font-weight: bold;
text-decoration: none;
color: White; }
#topNav a:hover {
background-color: lightgray}
#body{
width: 800px;
background: white;
border: 5px solid black;
box-shadow: 0px 0px 10px 10px;
margin: auto;}
In your CSS file you should do like that:
.topNav {
width: 790px;
height: 35px;
font-size: 15px;
text-align: center;
background-color: black;}
.topNav li {
display: inline-block;}
.topNav a {
padding: 10px 30px 10px 30px;
font-weight: bold;
text-decoration: none;
color: White; }
.topNav a:hover {
background-color: lightgray}
body{
width: 800px;
background: white;
border: 5px solid black;
box-shadow: 0px 0px 10px 10px;
margin: auto;
}
also <header> should go inside <body> tag.
If you are trying to center the tabs(li) aligned inside the Nav(ul), Add the FLOAT: LEFT; CSS to "#topNav a" element in your CSS file.
#topNav a{float:left;padding: 9px 30px 9px 30px !important;}
Refer to the below URL.
https://jsfiddle.net/rajeevRF/m1bu4fnr/1/
<!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>
I can't seem to remove the first nav menu separator (small-black-heart-md.png) from the navigation. All the images are showing up in the right place except the first one. It's showing up before the first list item, "Our Story". I've tried using the pseudo element nav li:first-child:before {display:none;} but I did not get any results. Help is greatly appreciated. This issue has me perplexed and I can't seem to find a clear answer on the web. Thanks for helping out a noob! :)
Here is my CSS:
.banner {
background-image: url("images/navimages/topimage.jpg");
padding: 108px 200px;
}
* {
padding:0;
margin:0;
}
body {
width: 1000px;
margin-left: auto;
margin-right: auto;
background-color: #C4EDFF;
font-family: 'Tangerine', serif;
text-align: center;
}
p {
font-family: Arial;
font-size: 14px;
text-shadow: 1px 1px 1px #aaa;
text-align: left;
}
nav li {
text-shadow: 5px 5px 5px #aaa;
background-image: url(images/navimages/small-black-heart-md.png);
background-repeat: no-repeat;
padding-left: 40;
padding-right: 40;
font-size: 40px;
font-weight: bold;
display: inline;
}
li a {
color: gray;
text-decoration: none;
}
audio {
width: 640px;
}
a:hover {
color: black;
}
Here is my HTML:
<head>
<head>
<title>The Big Day</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<body>
<header class="banner"></header>
<nav>
<ul>
<li>Our Story</li>
<li>Photos</li>
<li>Details</li>
<li>Wish List</li>
<li>Home</li>
</ul>
</nav>
<BR><BR><BR>
<div style="
padding: 60px;
margin-left: auto;
margin-right: auto;
height: 400px;
width: 620px;
border: 10px double;
text-align: left;
box-shadow: 10px 10px 5px #888888;">
<p>Content here...</p></div>
</body>
</head>
</html>
Just use:
nav li:first-child{
background:none;
}
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
I want to center (automatically) the navbar on this site. Also, I need to have a 1px border-top and 1px border-bottom that extends roughly 70% of the nav area.
It should look like this mockup once it's done:
Remove the floats on your li tags, and on your #navigation, add text-align: center;. Your floats are making your parent have a height of 0, which will in turn not allow you to have your borders. This fixes both those issues. From there, just add border-top: 1px solid white; border-bottom: 1px solid white; to your ul to get your lines.
Take a look at this fiddle http://jsfiddle.net/qZTAt/
The key there is this piece of code:
nav {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
margin: 0 15%;
text-align: center;
}
Try using margin:0 auto; padding:0;
Right I'm going to come in late to this party (with an already answered question!) just to add what I would have done. It's based on this technique here
http://jsfiddle.net/rabmcnab/GSSQx/
<body>
<header>
<h1 class="font"> Heading</h1>
<nav>
<ul>
<style> body {
font-family: 'Poiret One', cursive;
font-weight: bold;
font-size: 20px;
}
.font {
font-family: 'Poiret One', cursive;
}
header {
background-color: aqua;
padding: 40px 0px;
}
ul {
list-style-type: none;
}
li {
display: inline-block;
padding: 0 40px;
margin: 0 auto;
text-align: center;
}
nav {
border-top: thin solid white;
border-bottom: thin solid white;
width: 50%;
margin: 0 auto;
}
h1 {
text-align: center;
margin-top: -10px;
color: white;
font: 40px/0 arial;
padding: 40px 0;
}
li:hover {
color: #fff;
cursor: pointer;
}
</style>
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
<body>
<header>
<h1 class="font"> Heading</h1>
<nav>
<ul>
<li>Wedding</li>
<li>Engagement</li>
<li>Services</li>
</ul>
</nav>
</header>
</body>
</html>
<li>Wedding</li>
<li>Engagement</li>
<li>Services</li>
</ul>
</nav>