Please tell me why the four nav items are not centering. I want the space between the middle two nav elements to line up with the center marking.
https://jsfiddle.net/yerc52px/
.mainHeader nav {
background: #383838;
font-size: 1.143em;
height: 40px;
width: 100vw;
line-height: 30px;
margin: 0px 0px 0px 0px;
padding: 0;
text-align: center;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainHeader nav ul {margin: 0px 0px 0px 0px;}
.mainHeader nav ul li {display: inline;}
.mainHeader nav a:link, .mainHeader nav a:visited {
padding: 5px;
color: #fff;
display: inline-block;
height: 30px;
width: 18%;
}
.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited {
background: #727272;
color: #fff;
text-shadow: none !important;
}
.mainHeader nav li a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
Your .mainHeader nav has a width of 100vw when you should probably be using 100%. 100vw wont take into account the margin being applied by the body tag, so it actually spills over 100% to be something like 100% + 20px.
https://jsfiddle.net/yerc52px/3/
.mainHeader nav {
width: 100%;
also your .mainHeader nav ul has default padding being applied to it. Use this to fix that issue:
.mainHeader nav ul {
margin: 0px 0px 0px 0px;
padding: 0;
}
Now to fix the paragraph tag... remove this:
p {
margin-left: auto;
margin-right: auto;
width: 10px;
}
and replace it with:
p {
text-align: center;
}
I'll introduce you to FLEX!
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
Overwrite your syntax on the following.
.mainHeader nav ul {
display:flex;
justify-content:space-between;
// or if you want equal spaces between menu options
// use justify-content:space-around
}
.mainHeader nav a:link, .mainHeader nav a:visited {
padding: 5px;
color: #fff;
display: inline-block;
height: 30px;
// Removed width
}
But bewary, you should always put prefix like -webkit-, -moz-, -ms-, etc... But some browsers aren't supported like our favorite IE.
Here's your updated JSFIDDLE
https://jsfiddle.net/yerc52px/6/
You Have to remove width from your code . Edit this section.
.mainHeader nav a:link, .mainHeader nav a:visited {
padding: 5px;
color: #fff;
display: inline-block;
height: 30px;
/* width: 18%; */
}
https://jsfiddle.net/lemonkazi/yerc52px/5/
Related
<head>
<title>HTML5/CSS3 Responsive Theme</title>
<meta charset="UTF-8">
<link href="main.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width-device-width, initial-scale=1">
</head>
<body class="body">
<header class="mainheader">
<img src="img.jpg">
<nav>
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</header>
body {
background-image: url(img1.jpg);
color: #000305;
font-size: 87.5%;
font-family: Arial, "Lucida Sans Unicode";
line-height: 1.5;
text-align: left;
}
a {
text-decoration: none;
}
a:link, a:visited; {
}
a:hover, a:active; {
}
.body {
margin: 0 auto;
width: 70%;
clear: both;
}
.mainheader img {
width: 30%;
height: auto;
margin: 2% 0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainheader nav {
background-color: #666;
height: 48px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainheader nav ul {
list-style: none;
margin: 0 auto;
}
.mainheader nav ul li {
float: left;
display: inline;
}
.mainheader nav a:link, .mainheader nav a:visited, {
color: #FFF;
display: inline-block;
padding: 10px 25px;
height: 20px;
}
.mainheader nav a:hover, .mainheader nav a:active,
.mainheader nav .active a:link, .mainheader nav a:visited {
background-color: #CF5C3F;
text-shadow: none;
}
.mainheader nav ul li a{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
All the attributes you see here are working except those within .mainheader nav a:link , .mainheader nav a:visited. (color: #FFF; display: inline-block; padding: 10px 25px; height: 20px;) You asked to see more code, here it is. Thanks
Of course it will not apply. Why?
You have a syntax error , comma after the selector.
Try changing this to:
.mainheader nav a:link, .mainheader nav a:visited,
to:
.mainheader nav a:link, .mainheader nav a:visited
Try this
.mainheader nav a:link, .mainheader nav a:visited {
color: #FFF;
display: inline-block;
padding: 10px 25px;
height: 20px;
}
I want to make my navigation have bottom border while in hover, but then it moves all my content 3px down. How do I make it work without moving all content down.
CSS of navigation :
nav {
width: 80%;
margin: 0 auto;
}
nav ul {
list-style-type: none;
}
nav ul li {
float: left;
width: 19.7%;
background-color: #e88610;
text-align: center;
border-right: 3px solid gray;
border-top: 1px solid gray;
}
nav ul li:last-child {
border-right: none;
border-bottom-right-radius: 5px;
}
nav ul li:first-child {
border-bottom-left-radius: 5px;
}
nav ul li a {
text-decoration:none;
display: block;
padding: 10px 0px;
color: white;
}
nav ul li a:visited {
color: white;
}
nav ul li a:hover{
background-color: orange;
border-bottom: 3px solid gray;
}
CSS of content below :
#novi_clanak {
background-color: rgba(255, 255, 255, 0.65);
width: 100%;
padding-bottom: 40px;
margin-top:35px;
}
Essentially by adding a border, you're extending the nav by 3px. Have a look at the box-sizing property of CSS at http://www.w3schools.com/css/css3_box-sizing.asp. You want your nav ul li a:hover to have box-sizing: border-box;. That will take the bottom border's 3px into account for the element height.
Alternatively, shorten the nav ul li a:hover height by 3px (set it to 39px).
add to nav css
position: fixed;
On oxfordmakespace.com i have two boxes that you can see when you put your browser into portrait by making it thinner than taller.
as you can see one is higher than the other, it is .nav2 i cannot get it back in place. Can some one help please?
This is the CSS for desktop view
/* navbar desktop */
.nav {
float:right;
width: 40%;
background-color: #612;
height: 30px;
border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
}
.nav ul {
list-style: none;
margin: 0 auto;
padding: 0 0 0 10px; //reset default padding
}
.nav li {
float: right;
display: inline;
}
.nav a, .nav a:link, .nav a:visited {
float: left;
padding: 5px 5px 5px 5px;
color: white;
display: inline-block;
height: 20px;
}
.nav a:active, a:visited {
color: Black;
}
.nav .current a {
background: #499;
color: black; /*this changes the desktop view current link*/
border-radius: 5px;
}
.nav a:hover, .nav a:active, .nav .active a:link, .nav .active a:visited {
background: #253;
}
/*<!----------------------------------------------------------------->*/
.nav2 {
float:left; /*desktopbackground*/
width: 40%;
background-color: #612;
height: 30px;
border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
}
.nav2 ul {
list-style: none;
margin: 0 auto;
padding: 0 0 0 10px; //reset default padding
}
.nav2 li {
float: left;
display: inline;
}
.nav2 a, .nav2 a:link, .nav2 a:visited {
float: right;
padding: 5px 5px 5px 5px;
color: white;
display: inline-block;
height: 20px;
}
.nav2 a:active, a:visited {
color: Black;
}
.nav2 .current a {
background: #499;
color: black; /*this changes the desktop view current link*/
border-radius: 5px;
}
.nav2 a:hover, .nav2 a:active, .nav2 .active a:link, .nav2 .active a:visited {
background: #253;
}
This is the css for portrait mode
.nav {
width: 100%;
position: relative;
min-height: 40px;
background-color: #999;
margin: 0px 0;
}
/*a {
color: Black;
height: 20px;
display: block;
}*/ /*No longer used*/
.nav ul {
width: 50%;
padding: 2% 2% 2% 2%; /*this controls the displayed word padding*/
position: absolute;
top: 0; /*physical position of box holding links*/
left: 46%; /*physical position of box holding links*/
border: solid 0px #aaa;
background: #fff url(Images/topright.png) no-repeat ; /*background color for links*/
background-size: 15% 75%; /*changes for image*/
background-position: 90% 50%;
}
.nav li {
width: 100%;
text-align: left;
float: left;
display: none; /* hide all <li> items */
margin: 0;
}
.nav .current {
padding: 0 0 10px 0 ;
Background: none;
pointer-events: none; /*allows you to click on the menu usinga touch screen and not make the page load*/
display: block; /* show only current <li> item */
}
.nav .current a {
background: none;
color: Black; /* changes current links color when not active*/
}
/*-----------------------------------------------------*/
.nav a {
display: block;
padding: 3% 5% 3% 10%;
text-align: Left;
color: black; /*changes every text item in mobile menu*/
font-size: 150%;
font-style: Arial,serif-sans;
}
.nav a:link {
color: black;
}
.nav a:hover { /*changes the moused over or selected link in nav bar*/
border-radius: 5px;
color: black;
background: lightgreen;
}
/*-------------------------------------------------------*/
/* on nav hover */
.nav ul:hover {
background-image: none;/*hides the background image when the navbar exands to stop it stretching*/
}
.nav ul:hover li {
display: block;
margin: 0 0 15px; /*space between each menu item*/
}
/*NAVBAR--------------------------*/
.nav2 ul {
width: 35%;
padding: 2% 2% 2% 2%; /*this controls the displayed word padding*/
position: absolute;
top: 00%; /*physical position of box holding links*/
left: 2.5%; /*physical position of box holding links*/
border: solid 0px #aaa;
background: #fff url(Images/topright.png) no-repeat ; /*background color for links*/
background-size: 15% 70%; /*changes for image*/
background-position: 10% 50%;
}
.nav2 li {
width: 100%;
text-align: left;
float: left;
display: none; /* hide all <li> items */
margin: 0;
}
.nav2 .current {
padding: 0 0 10px 0 ;
Background: none;
pointer-events: none; /*allows you to click on the menu usinga touch screen and not make the page load*/
display: block; /* show only current <li> item */
}
.nav2 .current a {
background: none;
color: Black; /* changes current links color when not active*/
}
/*-----------------------------------------------------*/
.nav2 a {
display: block;
padding: 3% 5% 3% 10%;
text-align: Left;
color: black; /*changes every text item in mobile menu*/
font-size: 150%;
font-style: Arial,serif-sans;
}
.nav2 a:link {
color: black;
}
.nav2 a:hover { /*changes the moused over or selected link in nav bar*/
border-radius: 5px;
color: black;
background: lightgreen;
}
/*-------------------------------------------------------*/
/* on nav hover */
.nav2 ul:hover {
background-image: none;/*hides the background image when the navbar exands to stop it stretching*/
}
.nav2 ul:hover li {
display: block;
margin: 0 0 15px; /*space between each menu item*/
}
/*-------------------------------------------------------*/
} /*media query end--------------------------*/
I need it to be in the same position as the other one.
When your media query hits that break point remove position: relative; from .nav or set it to position: static if you're using media queries to just overwrite your desktop css
#media only screen and (max-width: 600px) and (min-width: 150px), (orientation: portrait)
.nav {
width: 100%;
/*position: relative;*/ //remove or set to position: static
min-height: 40px;
background-color: #999;
margin: 0px 0;
top: 0;
}
That will cause your header to just align to the top of the document instead of be contained within its parent
working on a simple nav bar. so far its working perfectly for me minus one minor detail. when it drops down i want the middle sections to remain a rectangle and the bottom section to always be curvy on the bottom. right now I have it so the bottom section is curvy, though when I hover over it the regular rectangle shows back up. I tried to fix it myself, but all I could get to work was it would change all sections to curvy
here is a jsFiddle of what I am working on: http://jsfiddle.net/7mjEC/
and here is the css:
#charset "utf-8";
#topMenu {
padding: 0px;
width: 760px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
top: 80px;
}
#topMenu ul {
margin: 0px;
padding: 0px;
}
#topMenu ul li {
background-color: #666;
float: left;
border: 1px solid #999999;
position: relative;
list-style-type: none;
}
#topMenu ul li a {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 30px;
color: #FFF;
text-decoration: none;
text-align: center;
display: block;
height: 30px;
width: 150px;
}
#topMenu ul ul {
position: absolute;
visibility: hidden;
top: 31px;
}
#topMenu ul li ul li a:hover {
background-color: #39F;
}
#topMenu ul li:hover ul {
visibility: visible;
}
#topMenu ul li:hover {
background-color: #919191;
}
#topMenu .topleftmenuitem {
border-radius: 20px 0 0 20px;
}
#topMenu .toprightmenuitem {
border-radius: 0 20px 20px 0;
}
#topMenu .topleftmenuitem:hover {
border-radius: 20px 0 0 0;
}
and #topMenu .toprightmenuitem:hover {
border-radius: 0 20px 0 0;
}
#topMenu ul ul li:last-child {
border-radius: 0 0 20px 20px;
}
see when you hover over the last child it turns from curved to rectangle, I just want to keep it always curved.
You need to use :last-of-type or :last-child pseudo
#topMenu > ul > li > ul > li:last-of-type a:hover {
border-radius: 0 0 20px 20px;
background: #f00; /* You can remove this, its just for a demo */
}
Demo
The above selector means, select direct child ul to element having an id of #topMenu, than select direct li to that ul, moving further applies the same and at the end, we select the last li child which is nested under level 2 ul and we apply the styles on a:hover
I have updated your fiddle. You DO NOT need to break all of the ul's up like this. Please see my Fiddle for much simpler code:
http://jsfiddle.net/7mjEC/2/
The only css change you really need is to add ONE selector in:
ul ul li:last-child,
ul ul li:last-child a {
border-radius: 0 0 20px 20px;
}
I seem to be running into a strange issue with IE7.
If you visit the following URL, http://tinyurl.com/3qrbhn4, and hover over the main navigation at the top, right above the header image in Chrome, Firefox, and IE8, the sub nav that displays once you hover over a nav element (for example, hover over Meetings) appears to line up correctly with the parent LI. However, if you try hovering over the main nav in IE7, the subnav appears one pixel off.
If you inspect the nested UL, which is #mainNav ul ul, you'll notice that it's being positioned absolutely inside of the parent UL with a left vale of 0.
If I give it a left value of left:1px, however, it lines up correctly in IE7, but breaks in Chrome/FF/IE8.
I'm not sure why this is happening, and I currently have the parent UL (#mainNav ul) positioned relatively, so I'm not sure why there would be a difference in how IE7 displays the subnav UL. I know I can "fix" this with an IE hack and just force IE7 to display the subnav ul with a left value of 1px, but I'd like to avoid that route if possible.
Can anyone help? Please let me know if I've provided enough information! I'm listing the CSS for the nav elements in question:
/* NAVIGATION *********************************************************************************************** */
#mainNav { position: relative; width: 951px; margin: 0 auto; padding: 15px 0; z-index: 3; }
#mainNav ul { line-height: 100%; height: 35px; margin: 0; padding: 0; font-size: 20px; width: 951px; }
#mainNav ul li { line-height: 100%; list-style: none; float: left; text-transform: uppercase; height: 100%; position: relative; display: block; }
#mainNav ul li a { line-height: 0; height: 22px; border: 1px solid transparent; text-decoration: none; padding: 7px 15px 5px; position:relative; display: block; }
#mainNav ul li a:hover { }
#mainNav ul li.hover a { }
#mainNav ul li a.current { }
#mainNav ul li.lastItem { }
#mainNav ul ul { display: none; z-index:2; position: absolute; top: 35px; left: 0px; padding: 5px 0 10px; width: 200px; height: auto; -moz-box-shadow: 3px 3px 3px #444; -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.5); }
#mainNav ul li.current ul { left: 1px; }
#mainNav ul li.hover ul li { background-position: 10px 8px; background-repeat: no-repeat; }
#mainNav ul li.hover ul li.hover { background-color: #baceda; background-position: 10px -20px; }
#mainNav ul li ul li { float: none; }
#mainNav ul li ul li a { background: none; line-height: 1; font-size: 15px; padding: 3px 30px 0; }
#mainNav ul li ul li.hover a { }
#mainNav ul li ul li a.current { }
Try changing #mainNav ul ul from left:1px to left:auto.