I'm trying to use the pseudo class ( img:nth-child) in this project but I can't make it work (it's the last line in the css-part). Right now I'm just using the a simple function just to see how it works. The plan is to implement this pseudo class to add a right-border every 5th item. You can see the working code here: jsFiddle
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>module e2</title>
<link href="css/e2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class"main">
<ul class="nav">
<li><a class="mainNav" id="car_1" href="#"><p><img class="mainMenuImg" src="img/singel_car.png" />singelCars<img class="arrowMargin" src="img/maiNav_arrowDown.png" /></p></a>
<ul >
<li class="borders"><img class="" src="http://placehold.it/178x108/" /> <p class=""> Megane coupe cabriolet</p></li>
<li> <img class=""src="http://placehold.it/179x108/" /><p class=""> Megane </p></li>
<li> <img src="http://placehold.it/179x108/" /><p class=""> Megane cabriolet</p></li>
<li> <img src="http://placehold.it/179x108/" /><p class=""> Megane cabriolet</p></li>
<li> <img src="http://placehold.it/179x108/" /><p class=""> Megane coupe </p></li>
</ul>
</li>
<li><a class="mainNav" id="car_2" href=" #"><p><img class="mainMenuImg" src="img/items_car.png" />varebilder<img class="arrowMargin" src="img/maiNav_arrowDown.png" /></p></a>
</li>
<li><a class="mainNav" id="car_3" href="#"><p><img class="mainMenuImg" src="img/ze.png" />z.e<img class="arrowMargin" src="img/maiNav_arrowDown.png" /></p></a>
</li>
<li><a class="mainNav" id="security" href="#"><p>security </p></a>
</li>
<li><a class="mainNav" id="services" href="#"><p>service</p></a>
</li>
<li><a class="mainNav" id="aboutRenault" href="#"><p>about</p></a>
</li>
<li><a class="mainNav" id="more" href="#"><p>more<img class="arrowMargin" src="img/maiNav_arrowDown.png" /></p></a>
</li>
</ul> <!-- ends #nav -->
</div> <!-- ends main -->
</body>
</html>
-------------------------------------
body { margin: 0; font-size: 12px; line-height: 1.231; font-family:Arial, Helvetica, sans-serif;}
/*
* 1. Improve image quality when scaled in IE7: h5bp.com/d
* 2. Remove the gap between images and borders on image containers: h5bp.com/e
*/
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
/* =============================================================================
main
========================================================================== */
.main img{ margin: 0;}
.main{ margin: auto; width: 900px;/* background:url(http://placehold.it/900x500/e67c78);*/}
.nav{ margin:auto; padding:0; list-style-type:none; list-style-position:outside; float: left; background: #CCC; }
.nav li a, .nav li{ float: left;}
.nav li{ position:relative; list-style: none;}
.nav li p{ margin-top: 12px; }
.nav li a{ text-decoration: none; background: #2a2a2a; color: #FFF; }
/*.main #nav .centerText img{ border-left: 1px solid black; border-bottom: 1px solid black; }*/
/*=====================================================================*/
.main a.mainNav, a.mainNav:link, a.mainNav:visited {display: block; height: 49px; background: #282828; border-right: 1px solid #797979; margin-top:0px; text-align:center; color: #fff; text-transform: uppercase; line-height:25px; overflow:hidden; float: left;}
.nav #car_1{ width: 190px; margin-left: 0px; }
.nav #car_2{ width: 190px; }
.nav #car_3{ width: 106px; color: #1f8b95; }
.nav #security{ width: 147px; }
.nav #services{ width: 69px; }
.nav #aboutRenault{ width: 100px; }
.nav #more{ width: 92px; border-right: none; background:#f7b100; }
.nav li .arrowMargin { margin-left: 5px;}
/*main menu images/cars*/
.nav li p .mainMenuImg{ margin-right: 12px; }
/*centering text on images*/
.main .nav .centerText p{ position: absolute; top: 70px; margin-left: 20px; display: solid; font-family: 'Yanone Kaffeesatz', Arial; font-size: 1.2em; text-transform: uppercase; letter-spacing: 0.5px; color: black;}
/*main a-tags*/
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }
a.mainNav:hover {color:#000; background:#fff;}
a #more:hover{color:#000; background:#f7b100;}
/*==================UNDER LEVELS======================================*/
.nav li ul{ display: none;/** switch: on/off to show the underlevel*/ position:absolute; left:0; top: 100%; margin: 0; padding: 0; width: 900px;}
.nav li:hover ul{ display: block;}
.main .nav li ul li, .nav li ul li a{ float: left; display: inline-block; border-left: 1px solid black; border-bottom:1px solid black; }
.nav li ul li .centerText img:nth-child(5){ border: 1px solid red; !important; } /* THIS LINE DOEST WORK ? DONT KNOW WHY? */
/*==================styling images (li-elements)===========================*/
Right now, your selector is selecting the fifth img inside the .nav li ul li .centerText element. There is only one image in each, so this won't select anything at all. You need to change it to .nav li ul li:nth-child(5n+1) .centerText img. This will select every fifth li in that nav menu, and then add your border to the image within it.
Related
I am having difficulty changing the font color on my Nav bar heres the HTML.
<div id="nav" class = "menu">
<ul>
<li>Home</li>
<li>Team members
<ul class ="sub-menu">
<li>F.E.A.R Ballard</li>
<li>F.E.A.R Snakeshit</li>
<li>Redi</li>
</ul>
</li>
<li>Cool Stuff</li>
<li>Gallery
<ul class ="sub-menu">
<li>Squad</li>
<li>Dayz</li>
<li>Arma III</li>
</ul>
</li>
<li>Contact
<ul class ="sub-menu">
<li>Teamspeak</li>
<li>E-mail</li>
</ul>
</li>
<li>Facebook</li>
<li>Steam</li>
</ul>
</div><!-- links -->
And the CSS
.menu {
margin: 0px;
width: auto;
}
.menu li {
margin: 0px;
}
/*----- Top Level -----*/
.menu ul li {
display: inline-block;
position: relative;
font-size: 15px;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index: 1;
opacity: 1;
}
.sub-menu {
width: 100%;
border-top: none;
border-left: 1px solid green;
border-right: 1px solid green;
margin: 0px;
position: absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
}
.sub-menu li {
display: block;
font-size: 10px;
margin-top: 5px;
padding-bottom: 2px;
border-bottom: 1px solid green;
}
.sub-menu li a {
padding:10px 30px;
margin: 5px;
display:block;
}
#nav {
display: inline;
width: 100%;
height: 150px;
background-color: #879396;
}
#nav ul {
text-align: center;
padding: 0px;
background-color: #9C9898;
}
#nav li {
width: 105px;
background-color: #9C9898;
}
#nav li a {
padding: 0px;
margin: 1px;
}
#nav li a:link
{
text-decoration: none;
font-color: #000;
font-weight: bold;
}
I have tried multiple things i just cant seem to get the font color to change at the moment. Please Note i just want the font to change color, it is currently red and blue which looks horrible.
I have been out the game too long, Please advise.
Try this
#nav li a { color: green; }
Remember it's color:value in CSS and not font-color. Also adding :link to an a tag is not necessary. Just use a instead of a:link unless you really need to target links with actual hrefs
You have to provide color for the anchor tag because it don't inherit the color
check this fiddle
a {color: #fff;}
https://jsfiddle.net/Med7at/j4fxj7gw
I've coded a css dropdown menu and cant seem to get the name "LOGOS" to stay within the green box when I hover over the word "Illustration". I've made the word 5em so I can see it. Cant get it to stay in the box...no control of it's position. Can you help?
Thanks,
T.
<div id="nav-bar-sm-cont">
<ul id="sm-nav">
<li id="home">HOME</li>
<li id="about">PROFILE</li>
<li id="illustration">ILLUSTRATION
<ul>
<li id="logos">LOGOS</li>
</ul>
</li>
<li id="billboards">BILLBOARDS</li>
<li id="six-mo">6 MO BREAKFAST</li>
<li id="cal">ARTSHOW</li>
<li id="church">CHURCH</li>
<li id="contact">CONTACT</li>
<li id="cat-ill">CAT ILLUSTRATION</li>
<li id="contact-cat">CONTACT CAT</li>
</ul>
</div>
<!--end nav bar sm container -->
/* START small NAV bar **************************/
#nav-bar-sm-cont { position: absolute;
width: 1000px;
height: 100px;
}
#sm-nav li { position: relative;
top: 30px;
left: 35px;
font-size: .6em;
line-height: 250%;
letter-spacing: 0.3em;
list-style-type: none;
float: left;
}
#sm-nav a:link{ text-decoration:none;
color:silver;
background-color:transparent;
padding: 5px 5px;
}
#sm-nav a:visited {text-decoration:none;
color: #9781B7;
padding: 5px 5px;
background-color: transparent;
}
#sm-nav a:hover {text-decoration:none;
color: #fff;
background-color:#a7d6d5;
padding: 5px 5px;
}
#sm-nav a:active {text-decoration:none;
color:#fff;
background-color: green;
padding: 5px 5px;
}
/*start drop down************************************/
#sm-nav li ul { position:relative;
list-style-type: none;
display: none;
}
#sm-nav li:hover ul { position: absolute;
background: green;
padding: 5px 5px;
display:block;
font-size: 5em;
width: 103px;
height: 10px;
}
/*end drop down*****************************************/
/* END small NAV BAR *****************************/
The problem is that your CSS for the li is affecting both the parent li and the child. To fix that just change:
#sm-nav li {
to
#sm-nav > li {
Now that CSS will only affect the parent li and you're free to adjust the CSS for the child however you want like this:
#sm-nav li:hover ul li { }
JSFiddle
I'm using position:relative; for parent ul and position:absolute; for child ul(.submenu) but still z-index isn't working for me. What's wrong with my css?
I want .submenu to hide behind main menu(.mynav).
HTML
<div class="mynav">
<ul>
<li><span>About</span></li>
<li><span>Contact</span></li>
<li>
<span>Home</span>
<ul class="submenu">
<li><span>Menu Item</span></li>
<li><span>Menu Item</span></li>
<li><span>Menu Item</span></li>
<li><span>Menu Item</span></li>
</ul>
</li>
<li><span>Social</span></li>
<li><span>Promote</span></li>
</ul>
</div>
<div class="content">
Lorem ipsum
</div>
CSS:
.mynav{
background: #202020;
text-transform: uppercase;
font-family: 'Yanone Kaffeesatz', sans-serif;
width: 100%;
text-align:center;
z-index:9999;
}
a{
text-decoration:none;
color: #f91d65;
color: #fff;
padding: 15px 30px;
display:block;
}
.mynav ul{
z-index:999;
}
.mynav ul li{
border-left: 1px solid rgba(255, 255, 255, 0.50);
display: inline-block;
margin-right: -4px;
position: relative;
}
.mynav ul li a span{
display: block;
}
.mynav .submenu{
position: absolute;
white-space: nowrap;
left:0;
top:50%;
z-index:99;
}
.mynav .submenu > li{
display: inline-block;
background: #999;
}
.mynav .submenu > li a span{
display: block;
}
Demo:
http://codepen.io/sonu/pen/gbpmbj
You can make the submenu appear under the main one by adding the following code:
.mynav .submenu{
z-index:-1;
}
If you add this:
.mynav ul li a {
position: relative;
z-index:999;
background: black;
}
And a lower z-index on .mynav .submenu > li a
Hi I am trying to keep my top navigation menu centered while left aligning the submenus that come out. What do i have to change in order to accomplish this? THanks!
<div id="container">
<ul id="nav">
<li>Home</li>
<li>Services <img src="images/tri2.gif">
<ul>
<li>Massages</li>
<li>Body Treatments</li>
<li>Facials & Waxing</li>
<li>Hair & Nails</li>
</ul>
</li>
<li>Packages <img src="images/tri2.gif">
<ul>
<li>Linky</li>
<li>Linky</li>
<li>Linky</li>
<li>Linky</li>
<li>Linky</li>
<li>Linky</li>
</ul>
</li>
<li>Specials</li>
<li>Contacts</li>
</ul>
</div>
Here is the CSS:
#container {
width: 740px;
margin: -16px auto;
padding: 0 0 0 0px;
font: 100% Helvetica, Arial sans-serif;
font-size:14px;
}
ul#nav {
line-height: 23px;
padding: 0;
}
ul#nav li {
float: left;
position: relative;
list-style: none;
background: #006666;
}
ul#nav li a {
width: 146px;
display: block;
border: 1px solid #000;
text-align: center;
text-decoration: none;
color: #fff;
}
ul#nav li:hover {background: #990000;}
ul#nav ul {
position: absolute;
padding: 0;
left: 0;
top: 23px;
visibility: hidden;
}
ul#nav li:hover ul {visibility: visible;}
ul#nav a:hover {color: yellow;}
http://jsfiddle.net/chuckie365/5LuCA/
what you need here is an additional CSS targeting that a elements:
ul#nav ul li a {
text-align:left;
}
Heres is the demo http://jsfiddle.net/5LuCA/10/
In the following example - Is it possible to retain the border on the top level navigation when hovering on the sub elements? I would like to retain the black border on 'About Us' when hovering on its sub items. Example: http://jsfiddle.net/6zKRC/2/
HTML
<div class="navigation">
<ul class="navigation fc">
<li>
Home
</li>
<li class="">
About
<ul>
<li>
Sub Navigation 1
</li>
<li>
Sub Navigation 2
</li>
</ul>
</li>
</ul>
</div>
CSS
.navigation ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
.navigation ul li {
display: block;
position: relative;
float: left;
}
.navigation li ul {
display: none;
}
.navigation ul li a {
display: block;
text-decoration: none;
color: #000;
font-weight:bold;
padding: 5px 15px 5px 15px;
white-space: nowrap;
}
.navigation ul li a:hover {
background: #CCC;
color:black;
border:solid 1px black;
border-bottom:0;
}
.navigation li:hover ul {
display: block;
position: absolute;
border:solid 1px black;
border-top:0;
}
.navigation li:hover li {
float: none;
font-size: 11px;
}
.navigation li:hover a {
background: #CCC;
}
.navigation li:hover li a:hover {
background: #CCC;
border:0;
}
Hi i have made some changes in your css please check your updated css :-
CSS
.navigation ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
.navigation ul li {
display: block;
position: relative;
float: left;
}
.navigation li ul {
display: none;
}
.navigation ul li a {
display: block;
text-decoration: none;
color: #000;
font-weight:bold;
padding: 5px 15px 5px 15px;
white-space: nowrap;
}
.navigation ul li:hover {
background: #CCC;
color:black;
border:solid 1px black;
border-bottom:0;
}
.navigation li:hover ul {
display: block;
position: absolute;
border:solid 1px black;
border-top:0;
left:-1px;
}
.navigation li:hover ul li {
float: none;
font-size: 11px;
background: #CCC;
}
.navigation li:hover li:hover {
background:#e6e6e6;
border:0;
}
HTML
<div class="navigation">
<ul class="navigation fc">
<li>
Home
</li>
<li class="">
About
<ul>
<li>
Sub Navigation 1
</li>
<li>
Sub Navigation 2
</li>
</ul>
</li>
</ul>
</div>
I hope you looking this one:- http://jsbin.com/uwemuy/5/edit
change in css as follow
.navigation li:hover a {
background: #CCC;
border:solid 1px black;
}
see http://jsfiddle.net/6zKRC/2/