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;
}
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 want to center the list inside the top-menu div.
I don't know where the problem is.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Joshua Brown</title>
<style>
* {
padding: 0;
margin: 0;
}
.top-menu {
width: 100%;
height: 80px;
background-color: #3f3535;
}
p {
font-size: 42px;
font-weight: lighter;
font-family: sans-serif;
color: #2991d9;
padding-left: 100px;
padding-top: 10px;
}
li {
display: inline-block;
float: right;
color: #FFF;
text-transform: uppercase;
border-style: 1px #6f6767 solid;
flex: auto;
text-align: center;
list-style-type: none;
border-right: 1px #6f6767 solid;
}
li:first-child {
border-style: none;
}
ul {
display: flex;
margin-bottom: 0;
}
.li {
padding-left: 50%
}
</style>
</head>
<body>
<div class="top-menu">
<p>JOSHUA BROWN</p>
<div class="li">
<ul>
<li>contact</li>
<li>news</li>
<li>concerts</li>
<li>videos</li>
<li>photos</li>
<li>bio</li>
<li>home</li>
</ul>
</div>
</div>
</body>
</html>
The problem is that you've given your .li element padding-left: 50%, which will offset it by 50%, not center it. That is to say, the left-hand edge will be exactly in the middle. It's actually already centered; this padding is just throwing you off. However, you may also want to look into restricting it with a max-width at certain breakpoints, so that it doesn't take up the full width of the row.
You also given your heading <p> tag a padding-left of 100px, which won't work for mobile devices.... and it's a rather generic selector. I recommend removing your <p> padding then changing your <p> to a <h1>. To center your heading, you just need text-align: center on your .top-menu.
Finally, you've given your <ul> elements display: flex, but your <li> elements display: inline-block. The <li> items should be changed to inline-flex, and given justify-content: center to center them horizontally.
I've fixed all of this up, which can be seen in the following example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Joshua Brown</title>
<style>
* {
padding: 0;
margin: 0;
}
.top-menu {
width: 100%;
height: 80px;
background-color: #3f3535;
text-align: center;
}
h1 {
font-size: 42px;
font-weight: lighter;
font-family: sans-serif;
color: #2991d9;
/*
padding-left: 100px;
padding-top: 10px;
*/
}
li {
/*display: inline-block;*/
display: inline-flex;
justify-content: center;
float: right;
color: #FFF;
text-transform: uppercase;
border-style: 1px #6f6767 solid;
flex: auto;
text-align: center;
list-style-type: none;
border-right: 1px #6f6767 solid;
}
li:first-child {
border-style: none;
}
ul {
display: flex;
/*margin-bottom: 0;*/
margin: 0 auto;
}
.li {
/*padding-left: 50%*/
}
</style>
</head>
<body>
<div class="top-menu">
<h1>JOSHUA BROWN</h1>
<div class="li">
<ul>
<li>contact</li>
<li>news</li>
<li>concerts</li>
<li>videos</li>
<li>photos</li>
<li>bio</li>
<li>home</li>
</ul>
</div>
</div>
</body>
</html>
First of all, never use a known name such as 'li' for a class name. The solution is to just use text-align:center and remove the li class; Here is a snippet.
* {
padding: 0;
margin: 0;
}
.top-menu {
width: 100%;
height: 80px;
background-color: #3f3535;
}
p {
font-size: 42px;
font-weight: lighter;
font-family: sans-serif;
color: #2991d9;
padding-left: 100px;
padding-top: 10px;
}
li {
display: inline-block;
float: right;
color: #FFF;
text-transform: uppercase;
border-style: 1px #6f6767 solid;
flex: auto;
text-align: center;
list-style-type: none;
border-right: 1px #6f6767 solid;
}
li:first-child {
border-style: none;
}
ul {
display: flex;
margin-bottom: 0;
text-align:center;
}
.li {
padding-left: 50%
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Joshua Brown</title>
</head>
<body>
<div class="top-menu">
<p>JOSHUA BROWN</p>
<ul>
<li>contact</li>
<li>news</li>
<li>concerts</li>
<li>videos</li>
<li>photos</li>
<li>bio</li>
<li>home</li>
</ul>
</div>
</body>
</html>
Remove this line in the stylesheet:
.li{ padding-left: 50% }
See fiddle here
I'm currently learning HTML and CSS and I tried making my very first webpage but got stuck when I realized my h2 is not appearing anywhere on the page. Sorry Im a noob and have no idea what I did wrong. Please help! Thank you!
*{
margin: 0;
padding: 0;
border: 0;
}
header{
position: fixed;
background-color: black;
width: 100%;
}
ul{
float: right;
padding-right: 15px;
text-align: center;
}
ul li{
list-style: none;
display: inline-block;
padding: 15px;
padding-bottom: 20px;
}
ul li a{
text-decoration: none;
color:white
}
a:hover{
font-size: 20px;
color: green;
}
header h1{
color: red;
text-align: center;
padding-top: 20px;
}
body{
background-color: red;
}
nav{
margin-right: 38%;
}
h2{
color: blue;
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>TryOne</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>My Portfolio</h1>
<nav>
<ul>
<li>Home</li>
<li>Work</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div>
<h2>Hello!</h2>
</div>
</body>
</html>
Your header is fixed ... You need to move your div down with margin ..FIDDLE
<header>
<h1>My Portfolio</h1>
<nav>
<ul>
<li>Home</li>
<li>Work</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div id="DIV">
<h2>Hello!</h2>
</div>
--
*{
margin: 0;
padding: 0;
border: 0;
}
header{
position: fixed;
background-color: black;
width: 100%;
}
ul{
float: right;
padding-right: 15px;
text-align: center;
}
ul li{
list-style: none;
display: inline-block;
padding: 15px;
padding-bottom: 20px;
}
ul li a{
text-decoration: none;
color:white
}
a:hover{
font-size: 20px;
color: green;
}
header h1{
color: red;
text-align: center;
padding-top: 20px;
}
body{
background-color: red;
}
nav{
margin-right: 38%;
}
h2{
color: blue;
background-color: white;
}
#DIV{
position:absolute;
margin-top: 125px;
}
The issue here is related to your use of a fixed header.
Take a look at this:
http://codepen.io/anon/pen/XXpggN
All I did was put some padding on the top of the div with the h2 in it, which brought it out from underneath the header. For future reference, a fixed position header will float above the rest of the contents, so the next elements that you add are going to begin appearing right at the very top of the body because the header div floating up top there is not occupying any space on the main body page.
If you ever want to organize your divs in a manner such as this, you just need to specify the z-index values of the divs. In this case though, all you needed was to push the first element (h2 div) down a bit.
position:inherit; padding-top:110px;
your header overwrite other tag.
*{
margin: 0;
padding: 0;
border: 0;
}
header{
position: relative;
padding-bottom: 50px;
background-color: black;
width: 100%;
}
ul{
float: right;
padding-right: 15px;
text-align: center;
}
ul li{
list-style: none;
display: inline-block;
padding: 15px;
padding-bottom: 20px;
}
ul li a{
text-decoration: none;
color:white
}
a:hover{
font-size: 20px;
color: green;
}
header h1{
color: red;
text-align: center;
padding-top: 20px;
}
body{
background-color: back;
}
nav{
margin-right: 38%;
}
h2{
color: blue;
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>TryOne</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>My Portfolio</h1>
<nav>
<ul>
<li>Home</li>
<li>Work</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div>
<h2>Hello!</h2>
</div>
</body>
</html>
CSS:
h2 {
color: blue;
background-color: white;
text-align: center;
}
header {
background-color: black;
width: 100%;
height: 100px;
}
Hope this work :)
I have a menu bar and i want to drop the profile tag so I put an <ul>
<html>
<head>
<title><?php $title; ?></title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<meta charset="utf-8">
<div class="centrado-fluid">
<div class="loginregister"></div>
<div class="espacio"></div>
<div class="menu">
<p class="menuleft">Home</p>
<p class="menuleft">Películas</p>
<p class="menuleft">Series</p>
<input class="buscador" type="text" placeholder="Busca">
<p class="menuright">Añadir Serie</p>
<p class="menuright">Añadir Película</p>
<ul><p class="menuright">Profile</p></ul>
</div>
<hr class="linea">
</div>
</head>
<body>
When I put the <ul> the <p> profile comes down
This is the css
.centrado-fluid {
height: 100%;
width: 80%;
background-color: #ffffff;
margin: 0 auto;
}
.menu {
height: 44px;
width: auto;
/*background-color: blue;*/
background: url("../img/slash-layer.png") repeat scroll 0% 0% rgb(99, 99, 130);
border-radius: 15px;
padding-top: 10px;
}
.espacio {
height: 10px;
}
.menuleft {
width: 100px;
height: auto;
margin-top: -2px;
margin-left: 15px;
text-align: center;
background-color: yellow;
border-radius: 10px;
font-family: hasa;
font-size: 20px;
padding-top: 5px;
display: inline;
}
.buscador {
height: auto;
margin-top: -2px;
margin-left: 7%;
text-align: center;
background-color: whitesmoke;
border-radius: 10px;
font-family: hasa;
font-size: 20px;
padding-top: 5px;
display: inline;
}
.menuright {
height: auto;
margin-top: -2px;
float: right;
margin-right: 15px;
text-align: center;
background-color: yellow;
border-radius: 10px;
font-family: hasa;
font-size: 20px;
padding-top: 5px;
display: inline;
}
How I can return it up?
To markup your menu, you can do something like this - JSFiddle Demo
HTML
<ul class="menu">
<li>link</li>
<li>link</li>
<li>link</li>
<li class="right">link</li>
<li class="right">link</li>
</ul>
CSS
* { margin:0; padding:0; }
ul.menu { float:left; width:100%; }
ul.menu li { float:left; margin:0 10px; list-style: none;}
ul.menu a { display:inline-block; padding:5px 10px; background:yellow; }
ul.menu .right { float:right;}
<ul> tag has default margin and space like paragraph. So don't use UL tag. Simple use <p> tag
Your HTML has some problems with validity. Try using http://validator.w3.org/#validate_by_input for checking your code:
You are closing <head> too late; starting from <div class="centrado-fluid"> you have to wrap everything inside a <body>
<p> is not allowed inside of <a>, but the other way round.
The only element allowed as children of <ul> is <li>
The best way to fix your problem would be to fix your HTML before going for the original problem.
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>