This is what I am trying to do
I was wondering how to make something like this. I know how to make the navigation bar by making an unordered list ect. But I was wondering how to make something like this? At least could you please explain me what's the concept? I've been looking around w3 and stackoverflow but didn't manage to find a solution....
body{
background-color:#ffffff;
margin:0;
}
.mainBar ul{
list-style: none;
margin:0;
margin-left: 150px;
padding:0;
overflow: hidden;
background-color: #fff;
}
.mainBar li {
float: left;
}
.mainBar li a{
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: monospace;
font-weight: bold;
font-size: 16px;
margin-top: 20px;
}
.mainBar li a:hover{
color:#5293D5;
}
.mainBar li a:active{
background-color:#fff;
}
.mainBar-pullRight{
margin-left: 800px;
}
.barTitle{
font-size: 35px;
color: #2ecc71;
margin-top:30px;
padding:0;
margin-bottom: 0;
}
.userBar ul{
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #2ecc71;
height: 70px;
}
.userBar li a{
display: block;
color: #ffffff;
text-align: center;
padding: 24px 26px;
text-decoration: none;
font-family: monospace;
font-size: 12px;
}
.userBar li{
float: left;
}
.d{
float: right;
font-size: 18px;
}
.userName{
color: #ffffff;
padding:24px 26px;
text-align: center;
font-family:"Courier New", Courier, monospace;
font-weight: bold;
font-size: 15px;
}
.profileShadow {
width: 100px;
height: 100px;
margin-left: 150px;
margin-top:5px;
margin-bottom:5px;
padding: 0;
overflow: hidden;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Instagram</title>
<link rel="stylesheet" href="style.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<div class="wrapper">
<div class="mainBar">
<ul>
<li class="barTitle"><i class="fa fa-instagram" aria-hidden="true"> Instagram</i></li>
<li class="mainBar-pullRight">ABOUT</li>
<li>TERMS</li>
<li>GUIDES</li>
<li>SUPPORT</li>
</ul>
</div>
<div class="userBar">
<ul>
<li class="profileShadow"><i class="fa fa-user fa-3x" aria-hidden="true"></i></li>
<li class="userName">tomislav</li>
<li>Change account</li>
<li>Set email</li>
<li>Log Out</li>
<div style="float:right;" class="d">
<li>Activity</li>
<li>Profile</li>
<li>Likes</li>
</div>
</ul>
</div>
</div>
</body>
</html>
Check This one made now. Concept is setting image position absolute.
It's not responsive.
https://codepen.io/shafikul-islam/pen/XaEgmZ
Related
I'm not quite sure what I'm doing wrong here. I want a standard dropdown navigation block when someone hovers over a nav item (in this case the "Products" Link). I haven't used an unordered list, just links. I manage to get all the elements in the right place with the right formatting looks great. The only issue is that I can't get the sub menu to show up when I hover over the main menu button? Can't figure out why, it looks fine to me. I'm previewing in google chrome
<!DOCTYPE html>
<html>
<head>
<title>Food Supply Company</title>
<link href="FoodSupplyStyle.css" rel="stylesheet" text="text/css">
<link href="https://fonts.googleapis.com/css?family=Volkhov:700" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="title">
<h1>Food Supply Company</h1>
</div>
<div class="menunav">
Products
About Us
Contacts
</div>
<div class="productsnav">
Fruits
Vegetables
Dry Foods
Spices
</div>
</div>
</body>
</html>
The CSS Style Sheet
*{
Margin:0;
background-color: aliceblue;
padding:0
}
.container{
width: 900px;
margin:auto;
height:900px;
}
h1{
padding:20px 0px 10px 0px;
background-color:bisque;
text-align: center;
font-family: 'Verdana',sans-serif;
font-weight: 700;
font-size:50px;
letter-spacing: 2px;
color:coral;
text-shadow: 2px 2px brown;
Width: 100%;
background-color:bisque;
}
a{
text-decoration: none;
text-align: center;
font-family: 'verdana', sans-serif;
width:33%;
text-align: center;
list-style: none;
padding: 5px 0px 5px 0px;
background-color: coral;
color: bisque;
box-shadow: 2px 2px 2px rgb(40,0,0);
}
a:hover{
font-family: 'verdana', sans-serif;
background-color: bisque;
color: coral;
}
.menunav a{
display:inline-block;
margin-top:5px
}
.productsnav{
width:33%;
margin-bottom:3px;
}
.productsnav a{
width:100%;
display: none;
margin-top: 5px;
}
.Products:hover .productsnav a{
display:block;
}
The last few in the CSS code is what seems to be wrong, but I cannot figure out what exactly is amiss. I have watched a number of videos on this and have formatted the css code to display the submenu in a few different ways but I could not figure it out.
Thanks
You should really consider using unordered lists to make it easier to display your sub-menus.
I did a quick plunk of your problem without the other menu items.
https://plnkr.co/edit/pBtp39zKpRL5YqCZvxK0?p=preview
I changed your html and css to the following:
HTML
<html>
<head>
<title>Food Supply Company</title>
<link href="style.css" rel="stylesheet" text="text/css">
<link href="https://fonts.googleapis.com/css?family=Volkhov:700" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="title">
<h1>Food Supply Company</h1>
</div>
<div class="menunav">
<ul>
<li class="products">
Products
<ul class="productsnav">
<li>Fruits</li>
<li>Vgetables</li>
<li>Dry Foods</li>
<li>Spices</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
CSS
*{
Margin:0;
background-color: aliceblue;
padding:0
}
.container{
width: 900px;
margin:auto;
height:900px;
}
h1{
padding:20px 0px 10px 0px;
background-color:bisque;
text-align: center;
font-family: 'Verdana',sans-serif;
font-weight: 700;
font-size:50px;
letter-spacing: 2px;
color:coral;
text-shadow: 2px 2px brown;
Width: 100%;
background-color:bisque;
}
a{
text-decoration: none;
text-align: center;
font-family: 'verdana', sans-serif;
width:33%;
text-align: center;
list-style: none;
padding: 5px 0px 5px 0px;
background-color: coral;
color: bisque;
box-shadow: 2px 2px 2px rgb(40,0,0);
}
ul {
display: inline-block;
}
ul li a{
width: 100%;
}
a:hover{
font-family: 'verdana', sans-serif;
background-color: bisque;
color: coral;
}
.menunav a{
display:inline-block;
margin-top:5px
}
.productsnav{
width:33%;
margin-bottom:3px;
display: none;
}
.productsnav a{
width:100%;
margin-top: 5px;
}
.products:hover .productsnav{
display:block;
position: absolute;
}
Please change it to the desired style.
Yes thanks, I've done that now it looks much better. The issue I have now is that when the sub menu pops up the next main menu item gets pushed to the bottom of the sub menu. And also after the sub menu appears when I try to hover over it quickly disappears as soon as my mouse is removed off from the main nav item.
<!DOCTYPE html>
<html>
<head>
<title>Food Supply Company</title>
<link href="FoodSupplyStyle.css" rel="stylesheet" text="text/css">
<link href="https://fonts.googleapis.com/css?family=Volkhov:700" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="title">
<h1>Food Supply Company</h1>
</div>
<ul class="menunav">
<ul class="Products">
<li><a href="#" >Products</a>
<ul class="productsnav">
<li>Fruits</li>
<li>Vegetables</li>
<li>Dry Foods</li>
<li>Spices</li>
</ul></li></ul>
<ul class="AboutUs">
<li><a href="#" >About Us</a>
<ul class="aboutusnav">
<li>History</li>
<li>Mission</li>
<li>Personel</li>
</ul></li></ul>
<ul class="Contact">
<li><a href="#" >Contact</a>
</li></ul>
</ul>
</div>
</body>
</html>
CSS
*{
Margin:0;
background-color: aliceblue;
padding:0
}
.container{
width: 900px;
margin:auto;
height:900px;
}
h1{
padding:20px 0px 10px 0px;
background-color:bisque;
text-align: center;
font-family: 'Verdana',sans-serif;
font-weight: 700;
font-size:50px;
letter-spacing: 2px;
color:coral;
text-shadow: 2px 2px brown;
Width: 100%;
background-color:bisque;
}
a{
text-decoration: none;
text-align: center;
font-family: 'verdana', sans-serif;
width:33%;
text-align: center;
list-style: none;
padding: 5px 0px 5px 0px;
background-color: coral;
color: bisque;
box-shadow: 2px 2px 2px rgb(40,0,0);
}
a:hover{
font-family: 'verdana', sans-serif;
background-color: bisque;
color: coral;
}
li{
list-style-type:none;
}
.menunav{
margin-bottom:3px;
}
.menunav a{
float:left;
margin-top:5px;
margin-right:3px;
}
.productsnav, .aboutusnav{
width:33%;
margin-bottom:3px;
}
.productsnav a, .aboutusnav a{
width:100%;
display: none;
margin-top: 5px;
}
.Products:hover .productsnav a{
display:block;
}
.aboutusnav{
margin-left:33.3%;
}
.AboutUs:hover .aboutusnav a{
display:block;
}
If you want to use CSS hover style for your drop-down menu then it must be a child item of hovered element.
Otherwise, you can use jQuery/javascript for this drop-down menu.
I have another idea to solve this problem. Please check this link:
*{
Margin:0;
background-color: aliceblue;
padding:0
}
.container{
width: 900px;
margin:auto;
height:900px;
}
h1{
padding:20px 0px 10px 0px;
background-color:bisque;
text-align: center;
font-family: 'Verdana',sans-serif;
font-weight: 700;
font-size:50px;
letter-spacing: 2px;
color:coral;
text-shadow: 2px 2px brown;
Width: 100%;
background-color:bisque;
}
a{
text-decoration: none;
text-align: center;
font-family: 'verdana', sans-serif;
width:33%;
text-align: center;
list-style: none;
padding: 5px 0px 5px 0px;
background-color: coral;
color: bisque;
box-shadow: 2px 2px 2px rgb(40,0,0);
}
a:hover{
font-family: 'verdana', sans-serif;
background-color: bisque;
color: coral;
}
.menunav a{
display:inline-block;
margin-top:5px
}
.productsnav{
width:100%;
margin-bottom:3px;
display: none;
position:absolute;
}
.Products{
display:inline-block;
width:33%;
position:relative;
}
.Products a{
display:block;
width:100%;
}
.Products:hover .productsnav{
display:block;
}
<html>
<head>
<title>Food Supply Company</title>
<link href="FoodSupplyStyle.css" rel="stylesheet" text="text/css">
<link href="https://fonts.googleapis.com/css?family=Volkhov:700" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="title">
<h1>Food Supply Company</h1>
</div>
<div class="menunav">
<div class="Products">
Products
<div class="productsnav">
Fruits
Vegetables
Dry Foods
Spices
</div>
</div>
About Us
Contacts
</div>
</div>
</body>
http://codepen.io/shiplo_R/pen/VPyMzp
Also, you can add some animation to show your drop-down menu smoothly instant of "display:none".
You can try this
https://jsfiddle.net/uhg84d8d/
HTML:
<html>
<head>
<title>Food Supply Company</title>
<link href="style.css" rel="stylesheet" text="text/css">
<link href="https://fonts.googleapis.com/css?family=Volkhov:700" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="title">
<h1>Food Supply Company</h1>
</div>
<div class="menunav">
<ul>
<li class="products">
Products
<ul class="productsnav">
<li>Fruits</li>
<li>Vgetables</li>
<li>Dry Foods</li>
<li>Spices</li>
</ul>
</li>
<li>
About Us
</li>
<li>
Contacts
</li>
</ul>
</div>
</div>
</body>
</html>
CSS
*{
Margin:0;
background-color: aliceblue;
padding:0
}
.container{
width: 900px;
margin:auto;
height:900px;
}
h1{
padding:20px 0px 10px 0px;
background-color:bisque;
text-align: center;
font-family: 'Verdana',sans-serif;
font-weight: 700;
font-size:50px;
letter-spacing: 2px;
color:coral;
text-shadow: 2px 2px brown;
Width: 100%;
background-color:bisque;
}
a{
text-decoration: none;
text-align: center;
font-family: 'verdana', sans-serif;
width:33%;
text-align: center;
list-style: none;
padding: 5px 0px 5px 0px;
background-color: coral;
color: bisque;
box-shadow: 2px 2px 2px rgb(40,0,0);
}
.menunav {
width: 100%;
float: left;
}
.menunav ul {
width:100%;
float: left;
margin: 0px;
}
.menunav ul li{
list-style: none;
float:left;
width: 33.3%;
}
.menunav ul li a{
width: 100%;
}
.menunav ul li a:hover{
font-family: 'verdana', sans-serif;
background-color: bisque;
color: coral;
}
.menunav ul li a{
display:inline-block;
margin-top:5px
}
.menunav ul li .productsnav{
width:33%;
margin-bottom:3px;
display: none;
}
.menunav ul li .productsnav li{
width:100%;
margin-top: 5px;
float: left;
}
.menunav ul li .productsnav li a{
width:100%;
margin-top: 5px;
float: left;
}
.menunav ul li.products:hover .productsnav{
display:block;
position: absolute;
width: 300px;
}
Then it will work...:)
I wonder why can't i say hi in the beggining of the message? It's being auto removed. Anyway i'm trying to make a css only slide out menu following this lesson:
https://www.youtube.com/watch?v=d4P8s-mkMvs&list=PLqGj3iMvMa4L8L9p0bCpBn6A5lwKxqwqR
But for some reason it doesn't work for me. The idea is - when menu icon is clicked the checkbox is checked and menu should change it's margin-left from -200 to 0. But it doesn't.
Any help?
body {
padding: 0;
margin: 0;
font-family: 'Open Sans', sans-serif;
-webkit-font-smoothing: antialiased;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}
nav {
height: 100%;
position: fixed;
margin-left: -200px;
}
nav ul {
list-style: none;
background-color: #333;
padding-top: 30px;
width: 150px;
height: 100%;
margin: 0;
}
nav ul li {
margin-top: 5px;
}
nav ul li a {
margin-left: 17px;
text-decoration: none;
color: #A0A0A0;
font-size: 19px;
text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
nav ul li a:hover {
color: #FFF;
}
.menuicon {
font-size: 20px;
margin-top: 30px;
margin-left: 30px;
color: #333;
text-decoration: none;
cursor: pointer;
}
#menustate {
margin-left: 400px;
}
#menustate:checked + .page-wrap .sidebar{
margin-left: 0px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css-1.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="javascript-1.js"></script>
<title>Slide nav</title>
</head>
<body>
<div class="page-wrap">
<nav class="sidebar">
<ul>
<li>Home</li>
<li>Products</li>
<li>Cities</li>
<li>Contacts</li>
</ul>
</nav>
<label for="menustate"><p class="menuicon" href="">☰</p></label>
<div class="check">
<input type="checkbox" id="menustate" value="">
</div>
</div>
</body>
</html>
Css + operator
When using the css + operator. It needs to be a sibling directly next
to one an other.
Added transition, makes it look better.
body {
padding: 0;
margin: 0;
font-family: 'Open Sans', sans-serif;
-webkit-font-smoothing: antialiased;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
}
nav {
height: 100%;
position: fixed;
}
nav ul {
list-style: none;
background-color: #333;
padding-top: 30px;
width: 150px;
height: 100%;
margin: 0;
}
nav ul li {
margin-top: 5px;
}
nav ul li a {
margin-left: 17px;
text-decoration: none;
color: #A0A0A0;
font-size: 19px;
text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
}
nav ul li a:hover {
color: #FFF;
}
.menuicon {
font-size: 20px;
margin-top: 30px;
margin-left: 30px;
color: #333;
text-decoration: none;
cursor: pointer;
}
.sidebar {
margin-left: -200px;
transition: margin-left 1s;
}
#menustate:checked + .sidebar {
margin-left: 0px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css-1.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="javascript-1.js"></script>
<title>Slide nav</title>
</head>
<body>
<div class="page-wrap">
<label for="menustate">
<p class="menuicon" href="">☰</p>
</label>
<input type="checkbox" id="menustate" value="">
<nav class="sidebar">
<ul>
<li>Home
</li>
<li>Products
</li>
<li>Cities
</li>
<li>Contacts
</li>
</ul>
</nav>
</div>
</body>
</html>
The problem is that your selector, which should be "doing the magic" is incorrect.
#menustate:checked + .page-wrap .sidebar
This will target a .sidebar element, inside a .page-wrap element which is ADJACENT to a checked #menustate element. This means that not only do the #menustate and .page-wrap need to be siblings, the former needs to be placed RIGHT before the latter. So something like this.
<input id="menustate" type="checkbox">
<div class=".page-wrap>
<div class="sidebar"></div>
</div>
I'm new to HTML and CSS and am trying to make a menu bar. I placed a navigation bar inside a div assuming that it would kind of be in the center. Instead, it appears to sit on the bottom. Also, how could I position the navigation bar so it's not just floating to the left or the right.
Side question, how can I have it so the menu bar completely extends to the edge of the screen. Like the one at the top of this site.
Here's the code:
body {
font-family: "Open Sans", sans-serif;
}
#nav {
background-color: white;
height: 300px;
width: auto;
height: 55px;
box-shadow: 1px 3px 2px #888888;
}
h1 {
color: #35e3c1;
display: inline;
font-size: 36px;
font-weight: 900;
margin-left: 15px;
}
ul {
list-style-type: none;
padding: 0;
overflow: hidden;
display: inline-block;
float: right;
}
li {
float: left;
}
li a {
display: block;
color: #1fe0ba;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 18px;
}
li a:hover {
color: #1abc9c;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Soycial</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="nav">
<h1>Soycial</h1>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
Is this what you want?
I have added margin:0; to the ul.
body {
font-family: "Open Sans", sans-serif;
}
#nav {
background-color: white;
height: 300px;
width: auto;
height: 55px;
box-shadow: 1px 3px 2px #888888;
}
h1 {
color: #35e3c1;
display: inline;
font-size: 36px;
font-weight: 900;
margin-left: 15px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
overflow: hidden;
display: inline-block;
float: right;
}
li {
float: left;
}
li a {
display: block;
color: #1fe0ba;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 18px;
}
li a:hover {
color: #1abc9c;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Soycial</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="nav">
<h1>Soycial</h1>
<ul>
<li>Home
</li>
<li>Portfolio
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</body>
</html>
Other ways this could have been done would have by messing with top and bottom margins(depending on what specific ratios you want). Using this way will get you specifically what alignment you want vertically.
I've finished coding my website for a 1024x768 resolution and now want to add #media queries to my code so that the sidebar disappears when the screen is at a width of 980px and then stays like that all the way down from there. I have tried adding the #media max-width 980 myself but it does not seem to be working at all. I've also tried in various places on the page but again, no luck. It's so frustrating! Code Below (Sorry if it's really long, I'm gonna leave it all in there to avoid any questions regarding code).
HTML:
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<title>Lakeside Books</title>
<link rel="stylesheet" type="text/css" href="masterstyle.css">
<meta name="viewsize" content="width-device-width,initial-scale=1.0">
<!--[if IE]>
<script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<nav id="nav">
<h3 id="welcometext">Welcome To<br>Lakeside Books</h3>
<div id="searchbar">
<form action="http://www.example.com/search.php">
<input type="text" name="search" placeholder=" ...Search Book Title" class="searchstyle"/>
</form>
</div>
<ul>
<li style="background-color: #333">
<a href="1Index.html" class="link">
<span style="color: #ed786a">Home</span>
</a>
</li>
<li>
<a href="2Catgeories.html" class="link">
Categories
</a>
</li>
<li>
<a href="http://example.com" class="link">
Bestsellers
</a>
</li>
<li>
<a href="http://example.com" class="link">
Find Us
</a>
</li>
<li>
<a href="http://example.com" class="link">
Contact
</a>
</li>
</ul>
</nav>
</div>
CSS:
html, body { /* ### */
margin:0;
padding:0;
height:100%;
width:100%;
}
body {
background-color: #fdfdfd;
font-family: Arial, "Open Sans", sans-serif-light, sans-serif, "Segoe UI";
}
#wrapper {
width: 100%;
height: 100%;
margin:0 0 0 20%; /* ### */
}
#sidebar {
background-color: #212528;
position: fixed;
width: 20%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
text-shadow: 0.1em 0.1em 0 rgba(0, 0, 0, 0.1);
}
#nav {
color: #DADADA;
display: block;
max-width: 100%;
}
#nav ul {
padding-left: 0;
}
#nav li {
list-style-type: none;
margin: 0;
padding: 0.75em 0 0.75em 0;
text-align: center;
max-width: 100%;
}
#nav li:hover {
background:#333;
}
#nav li a {
display: block;
padding: 0.5em 0;
}
.link {
text-align: right;
margin-right: 25%;
letter-spacing: 1px;
display: block;
}
#nav li a:link{
color: #DADADA;
text-decoration: none;
}
#nav li a:visited{
color: #DADADA;
text-decoration: none;
}
#nav li a:hover{
color: #DADADA;
text-decoration: none;
}
#nav li a:active{
color: #DADADA;
text-decoration: none;
}
#welcometext {
text-align: center;
/*font-style: italic;*/
text-transform: uppercase;
font-size: 1em;
margin-top: 2em;
}
#searchbar {
width: 70%;
margin-left: auto;
margin-right: auto;
padding: 1em 1em 0.5em 1em;
text-align: right;
}
#searchbar .searchstyle{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#searchbar input {
max-width: 95%;
}
/*-------Media Styles-------*/
#media all and (max-width: 980px){
#sidebar{
float: none;
}
}
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;
}