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...:)
Related
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
I apologize in advance if this is answered somewhere but I've tried looking and found nothing (I think it's the way I'm wording it, I'm not sure how...) but basically how links are directed to an 'iframe'-I want mine directed to a DIV instead, is this possible? If so, how? I've tried a few ways that I thought would work but have failed...
The site is here and I basically want the links info to go into the black div box when clicked.
My code:
body{
background-color: #e2e2e2;
}
#container {
max-width: 900px;
margin: 0 auto;
padding: 10px;
}
#mainbox {
width: 100%;
height: 650px;
background-color: white;
margin: 0 auto;
margin-top: 135px;
}
#title{
font-family: 'Open Sans Condensed', sans-serif;
font-size: 35px;
position:fixed;
top: 105px;
color: #e8c8c5;
text-shadow: 2px 2px 0px rgba(0,0,0,0.2);
font-weight: bold;
}
.nav{
border:1px solid #ccc;
border-width:1px 0;
border-color: #e8c8c5;
list-style:none;
margin:0;
padding:0;
text-align:center;
text-decoration:none;
}
.nav li{
display:inline;
}
.nav a{
display:inline-block;
padding:10px;
text-decoration:none;
font-family: verdana;
font-size: 12px;
color: #e8c8c5;
}
#content{
background-color: black;
width: 860px;
height: 580px;
margin: 0 auto;
margin-top: 6px;
padding: 10px;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
</head>
<body>
<div id="container">
<div id="title">Commissions;</div>
<div id="mainbox">
<ul class="nav">
<!--nav starts here -->
<li>About</li>
<li>Information</li>
<li>Examples</li>
<li>Clients</li>
<li>Faq</li>
</ul>
<!-- nav ends here -->
<div id="content">
</div>
</div>
</div>
</body>
</html>
Hi I am a novice at coding and am learning by myself at home. I have run into a problem which I simply cannot solve.
Firstly, here is the codepen link for the site:
http://codepen.io/sheahan/pen/ygKabM
The website is working pretty much seamlessly except for one issue.
Take a look at the 'item' list on the left side of the page. I have set it up so that on a hover the font color, background color, and font size change (i had to change the padding in order to ensure that the li stayed the same size). This works fine when the screen size is above 900px.
Now I have made the page responsive and set a media query to change the layout below 900px. The item list moves to the top of the page with a new format its laid out in a grid rather than a single column. This looks to work fine except for the last item on the right of each row (item 3 and item 6). Whenever I hover over it it pushes the next item in line over two spaces to the right leaving two empty spaces. One of the HTML editors I am using shows the presence of two "ghost" li items that aren't there.
Any guesses?
I'm also open to any comments or criticisms of the site, eager to learn.
Here's the raw code
<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|Alegreya:900" 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>Products</li>
<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>About Us</li>
<li>History</li>
<li>Mission</li>
<li>Personel</li>
</ul>
</li>
</ul>
<ul class="Contact">
<li><a href="#" >Contact</a></li>
</ul>
</ul>
<div class="ProductMain">
<div class="sidebar">
<div class="logoholder">
<img src="https://c1.staticflickr.com/1/501/32498772122_9137841b84_o.png" alt="Company Logo Letters Only" height="130" width="130">
</div>
<div class="sidebarlinks">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li class="lastitem">Item 8</li>
</ul>
</div>
</div>
<div class="maincontent">
<h1 class="productname">Item Name</h1>
<img src="http://pngimg.com/upload/mango_PNG9168.png" >
<div class="Attributes">
<div class="Titles">
<ul>
<li>Country:</li>
<li>Variety:</li>
<li>Season:</li>
</ul>
</div>
<div class="Names">
<ul>
<li>Australia</li>
<li>Tastey</li>
<li>October-December</li>
</ul>
</div>
</div>
<div class="Description">
You can add a description of the item. Mention the history, the taste and other attributes of the product.
</div>
</div>
</div>
<div class="foot">
<div class="footer left">Website Designer<br>Happy Designs Inc.<br>Qatar</div>
<div class="footer center">© Food Supply Company</div>
<div class="footer right">P.O.Box 11111<br>Doha<br>Qatar</div>
</div>
</div>
</body>
</html>
CSS
*{
Margin:0;
padding:0;
border-radius:5px;
font-family: 'Verdana',sans-serif;
}
body{
background-image: url(https://c1.staticflickr.com/1/470/32498869432_082f3cf148_o.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
.container{
width: 900px;
margin:auto;
position:relative;
}
h1{
font-family: 'Alegreya:900','Verdana',sans-serif;
padding:20px 0 15px 0;
text-align: center;
font-weight: 900;
font-size:65px;
letter-spacing: 2px;
color:coral;
text-shadow: 3px 3px 1px grey;
Width: 100%;
margin:10px 0 20px 0;
}
a{
text-decoration: none;
text-align: center;
font-family: 'verdana', sans-serif;
}
p{
font-family: 'verdana', sans-serif;
}
li{
list-style-type:none;
}
.menunav{
margin:5px 0 30px 0;
overflow:auto;
font-size: 20px;
}
.menunav a{
float:left;
margin:0px 3px 5px 3px;
width:293px;
padding: 5px 0px 5px 0px;
background-color: rgba(255,127,80,0.85);
color: bisque;
box-shadow: 2px 2px 2px 0px darkgray;
}
.menunav a:hover{
background-color: bisque;
color: coral;
}
.productsnav, .aboutusnav{
position:absolute;
top:134px;
background-color:rgba(0,0,0,0);
z-index: 1;
}
.aboutusnav{
margin-left:298px;
}
.productsnav a, .aboutusnav a{
width:293px;
display: none;
background-color:coral;
}
.Products:hover .productsnav a{
display:block;
}
.AboutUs:hover .aboutusnav a{
display:block;
}
.ProductMain{
position:relative;
overflow: auto;
margin-bottom:18px;
padding-bottom:5px;
}
.sidebar{
float:left;;
width:250px;
margin-left:3px;
}
.sidebar a{
font-size: 16px;
display: block;
padding: 15px 0px;
background-color: rgba(255, 228, 196,0.85);
color:coral;
font-weight: bold;
margin-bottom:5px;
box-shadow: 2px 2px 2px 0px darkgray;
}
.sidebar a:hover{
color:lightgray;
background-color:coral;
font-size:20px;
padding:13px 0px;
}
.sidebar .logoholder a{
background-color:rgba(0,0,0,0);
box-shadow: none;
}
.sidebar .logoholder a:hover{
padding:15px 0px 13px 0px;
}
.logoholder img{
background-color: rgba(0,0,0,0);
}
.lastitem a{
margin-bottom: 0px;
}
.maincontent {
background-color:rgba(244,164,96,0.8);
position:absolute;
left: 270px;
height: 99.2%;
width: 600px;
box-shadow: 2px 2px 7px 2px darkgray;
box-sizing:border-box;
}
.productname{
font-size:35px;
margin:0;
padding: 20px 0 15px 0;
background-color: rgba(0,0,0,0);
color: bisque;
border-bottom-style:double;
border-bottom-width: 4px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-color:bisque;
box-shadow: none;
}
.maincontent img{
float:left;
width:250px;
height:240px;
background-color:rgba(0,0,0,0);
margin: 20px -5px 0px 30px;
}
.Attributes{
position:relative;
right:-8px;
top:35px;
overflow:auto;
height:auto;
padding: 0px 5px;
background-color:rgba(255, 228, 196,0.5) ;
border-style:inset;
border-width: 3px;
margin-bottom:90px;
width:270px;
}
.Titles, .Names{
display: inline-block;
line-height:3.7em;
}
.Titles li, .Names li{
border-radius: 0;
font-weight: bold;
color:chocolate;
}
.Titles li{
font-size:17px;
text-align: center;
}
.Names li{
padding-left:5px;
}
.Description{
width:500px;
height:180px;
overflow:auto;
margin:auto;
padding: 10px 15px ;
background-color:rgba(255, 228, 196,0.5);
border-style:inset;
border-width: 3px;
color:chocolate;
line-height:1.5em;
}
.foot{
width: 860px;
height:70px;
background-color: rgba(255, 228, 196,0.9);
margin: 10px 0px;
box-shadow: 2px 2px 2px 0px darkgray;
padding: 10px 20px 20px 20px;
color:coral;
}
.footer{
display:inline-block;
width:33%;
background-color: rgba(0,0,0,0);
height:100%;
padding:10px;
box-sizing:border-box;
margin:-3px;
font-size: 15px;
line-height:1.5em;
}
.right{
text-align: right;
}
.center{
text-align:center;
}
#media screen and (max-width:920px){
.container{
width: 600px;
margin:auto;
position:relative;
}
.menunav a{
float:left;
width:32%;
}
.productsnav{
position:absolute;
top: 213px;
}
.aboutusnav{
position:absolute;
top: 213px;
margin-left:198px;
}
.productsnav a, .aboutusnav a{
width:190px;
}
.ProductMain{
position: relative;
height:800px;;
margin-bottom:18px;
margin-right: 0px;
padding-bottom:5px;
width:600px;
}
.logoholder{
display:none;
}
.sidebar{
width:99%;
position:relative;
float:none;
display:inline-block;
padding-left:10px;
}
.sidebar a{
width:32%;
float:left;
margin-right:5px;
}
.maincontent
{
position:static;
margin-top:15px;
height:600px;
width:99%;
}
.foot{
width:100%;
padding:0;
height:90px;
}
.footer{
margin-top:0;
}
.left{
margin-left: 13px;
}
.center{
width:30%;
}
.sidebar a:hover{
color:lightgray;
background-color:coral;
font-size:24px;
padding:10px 0;
}
}
A shortest way to resolve the issue is to set font-size:23px; for .sidebar a:hover
.sidebar a:hover{
color:lightgray;
background-color:coral;
font-size:23px;
padding:10px 0;
}
codepen
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;
}
THis is my first time commenting on this website. I've found this site to be helpful in the past but now I can't seem to find a solution to my problem to I would like for someone to answer me directly.
I have webpage using where I have a fixed header and footer and absolute positioned panel where the content goes. My problem is, when I resize the browser the header content stays in the fixed position> Now that is obvious, none the less I would like to have it move with the scroll of the rest of the page. When I set the header to relative, it does work to my liking, but then the header nav links go under my lowerband and z-indexing wouldn't help. The same goes for the footer.
Also for the content panel, when I set the body overflow to auto or show, the content panel when I scroll, leaves a whitespace to the right.
Can anyone help me with this problem? It is very frustrating.
And one more thing, can anyone help me with code to use for css for my ux-header-upperbandcontent and lowebandcontent?. I would like to place the logo and other text in the upperband and the nav links in the lowerband but using a content wrapper.
Thanks. Here is my code for css and html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="content/style.css">
</head>
<body>
<!--BACKGROUND-->
<!--HOME-->
<div id="home">
</div>
<!--ABOUT-->
<div id="about" class="panel">
<div class="content">
<p>about content</p>
</div>
</div>
<!--SERVICES-->
<div id="services" class="panel">
<div class="content">
<p>services content</p>
</div>
</div>
<!--CONTACT-->
<div id="contact" class="panel">
<div class="content">
<p>contact content</p>
</div>
</div>
<!--HEADER-->
<div id="ux-header">
<div id="ux-header" class="upperband">
</div>
<div id="ux-header" class="lowerband">
</div>
<div id="ux-header">
<ul id="ux-header" class="dev-navigation">
<li><a id="dev-home" href="#home">HOME</a></li>
<li><a id="dev-services" href="#services">SERVICES</a></li>
<li><a id="dev-about" href="#about">ABOUT</a></li>
<li><a id="dev-contact" href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
<!--FOOTER-->
<div id="ux-footer">
</div>
</body>
</html>
body {
min-width:980px;
margin: 0px;
color: rgb(51, 51, 51);
line-height: 30px;
font-family: "Segoe UI","Helvetica",Garuda,Arial,sans-serif;
font-size: 0.81em;
cursor: default;
overflow:hidden;
}
a {
color: rgb(0, 68, 204);
text-decoration: none;
cursor: pointer;
}
img {
border:currentColor;
border-image: none;
max-width: 100%;
}
ul {
margin: 0px;
padding: 0px;
}
ol {
margin: 0px;
padding: 0px;
}
li {
margin: 0px;
padding: 0px;
}
p {
margin: 0px;
padding: 0px;
}
ul {
margin-bottom: 0px;
}
ul li {
margin-bottom: 0px;
margin-left: 15px;
}
ol li {
margin-bottom: 2px;
margin-left: 18px;
}
p {
margin-bottom: 10px;
}
h1 {
margin: 0px;
color:rgb(104, 33, 122);
font-weight: normal;
}
h2 {
margin: 0px;
color:rgb(104, 33, 122);
font-weight: normal;
}
h3 {
margin: 0px;
color:rgb(104, 33, 122);
font-weight: normal;
}
h1 {
line-height: 42px;
font-size: 2.77em;
margin-bottom: 20px;
}
h1.error {
margin-top: 50px;
}
h2 {
line-height: 34px;
font-size: 2.16em;
margin-bottom: 20px;
}
h3 {
line-height: 24px;
font-family: "Segoe UI Semibold","Segoe UI",Tahoma,"Microsoft Sans Serif",Verdana,sans-serif;
font-size: 1.39em;
margin-bottom: 20px;
}
h4 {
margin: 0px 0px 10px;
color: rgb(51, 51, 51);
line-height: 20px;
font-family: "Segoe UI Semibold","Segoe UI",Tahoma,"Microsoft Sans Serif",Verdana,sans-serif;
font-size: 1.08em;
}
#ux-header.dev-navigation {
margin-top:60px;
width:300px;
z-index:3;
left:70%;
white-space:nowrap;
}
#ux-header .dev-navigation li{
padding-right:10px;
margin:10px;
}
#ux-header ul.dev-navigation li{
display:inline;
}
#ux-header.dev-navigation li a {
text-transform:uppercase;
font-size:12px;
padding-bottom:0px;
margin-bottom:0px;
}
#ux-header.dev-navigation li a:hover {
padding-bottom:3px;
border-bottom-style:solid;
border-bottom-color:#4169E1;
border-bottom-width:10px;
}
#ux-header {
position:fixed;
top:0px;
z-index:2000;
width:100%;
overflow:hidden;
}
#ux-header a {
color:#FFF;
}
#ux-header ul {
margin:0px;
}
#ux-header li {
margin:0px;
}
#ux-header .upperband{
height:60px;
background-color:#000;
}
#ux-header.upperbandcontent {
margin:0px, auto;
padding:0px, 10px;
width:100%;
max-width:980px;
}
#ux-header .lowerband {
top:60px;
height:30px;
background-color:#F42;
}
#ux-header.lowerbandcontent {
position:absolute;
margin:0px, 0px, 5px, 0px;
padding:0px, 10px;
width:100%;
max-width:980px;
}
#ux-footer {
position:fixed;
bottom:0px;
width:100%;
height:50px;
background-color:#000;
border-top-style:solid;
border-top-width:8px;
border-top-color:#0000FF;
z-index:2000;
}
.content {
font-size:12px;
padding:3px;
line-height:10px;
color:#fff;
display:inline-block;
margin:3px 0px;
z-index:-1;
}
.content h2{
font-size: 30px;
padding: 10px 0px 20px 0px;
margin-top: 52px;
color: #fff;
color: rgba(255,255,255,0.9);
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}
.content p{
font-size: 12px;
padding: 3px;
line-height: 16px;
color: #fff;
display: inline-block;
margin: 3px 0px;
}
.panel {
position:absolute;
min-width:100%;
min-height:80%;
margin-top:90px;
right:2000px;
background-color:#FF00FF;
z-index:-2;
transition:right 2s;
overflow:hidden;
}
.panel:target {
background-color:#F6A600;
right:0;
}
#home:target ~ #ux-header .dev-navigation #dev-home,
#about:target ~ #ux-header .dev-navigation #dev-about,
#services:target ~ #ux-header .dev-navigation #dev-services,
#contact:target ~ #ux-header .dev-navigation #dev-contact,{
color:#000;
}
Is that what you are looking for?
http://jsfiddle.net/cancerian73/huawb/
#media screen and (max-width: 400px) {
/* grid4 */
.col {
width: 100% !important;
margin-left: 0 !important;
clear: none !important;
}
}