I'm attempting to program my website's navigation bar so when that page is selected the sprite index changes to highlight the background behind it like a button.
The sprite is tiled vertically so the first button is highlighted in the first tile and the second in the next etc.
However I'm also using weebly and am trying to program more and more of it myself to learn, so the navigation code was automatically done thus I'm not sure how to implement it so when a page is selected the button behind is highlighted.
In theory I understand how to do it, I'm just unsure of what functions to use as I'm completely new to CSS. How I would do it is:
1. Work out which code returns the current webpage as a variable
2. Calculate the new position for the tiled background by using: (webpage position) * sprite height, or typing out: if webpage = menu sprite_position = 1 * sprite_height
The current code regarding to the navigation is:
#navigation {
font-family: Ethnocentric, arial, sans-serif;
position: relative;
width: 1082px; /*For adjusting the navigation's usable width*/
height: 29px;
z-index: 2;
padding: 11px 0px 0px 45px; /*Fourth argument changes the starting navigation postion*/
background: url(Ngbck.png) no-repeat;
_bbbackground: none;
_fffilter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='files/theme/navigationbg.png', sizingMethod='crop');
}
#navigation ul li {
float: left;
font-size: 16px;
text-transform: uppercase;
padding: 0px;
margin: 4px 0px 0px 40px;
}
#navigation ul li a {
color: #0bf;
}
#navigation ul li a:hover, #navigation ul li#active a {
color: #f00;
}
#weebly-menus .weebly-menu-wrap { z-index: 5000; margin: 13px 0px 0px 0px; }
#weebly-menus .weebly-menu { padding: 0; margin: 0; list-style: none; }
#weebly-menus .weebly-menu li { float: left; clear: left; width: 168px; text-align: left; }
#weebly-menus .weebly-menu li a { position: relative; display: block; width: 148px; background: #001020; border-top: none; border-bottom: 1px solid #404a51; border-right: 1px solid #404a51; border-left: 1px solid #404a51; text-decoration: none; font-size: 12px; font-weight: normal; line-height:1; padding: 8px 6px 8px 12px; color: #0bf; }
#weebly-menus .weebly-menu li a:hover { background: #131f28; color: #c00; }
Weebly's engine adds
#active
identifier to LI element of currently selected menu. This identifier is applied to list element in menu and this changes depending on what page you are at the moment.
So I think in order to modify look of such menu you will need to add selector like #navigation ul li#active or #navigation ul li#active a (depending on effect) at the end of CSS file in template editor - so your custom style is picked.
One has not much access to code that renders Weebly's page yet - but there are some specific rules - so people design customer template for Weebly's already (Penguins' templates?)
Peter
Related
I feel like this question shouldn't exist anymore, but I can't seem to find a solution. So here goes.
ul {
list-style-type: none;
width:150px;
}
ul.nav_sub_menu > li {
width: 100%;
}
ul.nav_sub_menu > li a {
display: inline-block;
width: 100%;
padding: 2.5px 0px 2.5px 5px;
background: #213059;
color: white;
text-decoration: none;
border-bottom: 5px solid #253767;
}
ul.nav_sub_menu > li a:hover {
text-decoration: underline;
background-color: #253767;
}
<div class="nav_sub_menu_wrapper">
<ul class="nav_sub_menu">
<li>
About me</li><li>
Goals</li><li>
Realizations</li><li>
Future plans</li>
</ul>
</div>
This example generates a styles list with display:inline-block anchor tags
You might notice from the start that each list-item is separated by a horizontal white line between them. If not, try zooming the browser in or out (visible at 110% for me).
The white space isn't visible at all zoom levels and it only happens in Chrome, that's why I am at a loss.
How does one begin to troubleshoot this?
FYI, I have found this link to be useful but it didn't help. My chrome version:
Chrome Version 56.0.2924.87 (64-bit)
That is a weird issue. I think it might be something to do with the pixel resolution or density perhaps. However I managed to fix it with the below code.
ul {
list-style-type: none;
width:150px;
}
ul.nav_sub_menu > li {
width: 100%;
}
ul.nav_sub_menu > li a {
display: inline-block;
width: 100%;
padding: 2.5px 0px 2.5px 5px;
background: #213059;
color: white;
text-decoration: none;
border-bottom: 5px solid #253767;
float: left;
}
ul.nav_sub_menu > li a:hover {
text-decoration: underline;
background-color: #253767;
}
All I added was float: left; to the anchor property and it removed the white line between the list items. Try it and see what it does for different zoom levels. Although it does work for 110% zoom for me.
I would like add a border-bottom that displays when I hover over it with the mouse. I want it to override the border underneath so it looks like it changes colour. An example of this can be found here http://www.formaplex.com/services (in the nav bar)
Here is a jsfiddle https://jsfiddle.net/ey006ftg/
Also, a small question: does anyone know why there is a small gap in-between the the links (can be seen when hovering from link to link) and how to get rid of it.
Thanks
Just add this to your css:
nav a {
border-bottom: solid transparent 3px;
}
Here's a jsfiddle with the above code: https://jsfiddle.net/AndrewL32/ey006ftg/1/
You can use a negative margin to overlay the border below, as shown:
nav {
border-top: 1px solid grey;
border-bottom: 3px solid black;
width: 100%;
font-size:0;
}
nav ul {
width: 1056px;
margin: 0 auto;
text-align: center;
width: 1056px;
}
nav ul li {
display: inline-block;
width: 17%;
}
nav ul li a {
display: block;
padding: 21px 0;
font-size: 18px;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
}
nav a:hover {
color: orange;
transition: 0.2s;
border-bottom: solid orange 3px;
margin-bottom: -10px;
}
a {
color: black;
text-decoration: none;
outline: 0;
}
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>About</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</nav>
As for fighting the inline gap, seeing as you defined a font-size later for the a tag, I would just add a font-size:0, which I added to nav in the above Snippet.
fiddle demo
Simply set your default border to transparent - change color on hover
nav ul li a {
display: block;
padding: 21px 0;
font-size: 18px;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
border-bottom: solid transparent 3px; /* add this! */
transition:0.3s; /* or even this :) */
}
Try this fiddle
To set border-bottom the way you want, you have to add border to anchor tag like this:
nav ul li a {
display: block;
padding: 21px 0;
font-size: 18px;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
border-bottom: 3px solid black;
}
and to make sure the space between menu items is gone use a little fix adding negative margin to your li tags inside menu like this:
nav ul li {
display: inline-block;
width: 17%;
margin-right: -4px;
}
I have this http://jsfiddle.net/wfhmtx8c/ so it works in jsfiddle?
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
opacity: 0.8;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc; }
#nav li {
float: left; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li a:hover {
color: #c00;
background-color: #fff;
border-bottom: black; }
<ul id="nav">
<li>Taal/Languague:</li>
<li>Nederlands</li>
<li>English</li>
</ul>
But when I put it on my website: http://ub3rhd.nl it doesn't work?
The code is really the same?
Your page is working perfectly fine for me. On hover, it changes color, and on click it redirects me to #.
Also, opacity on elements containing text is not exactly appealing. If i were you, i would get the opacity back at 100%. Language is spelled wrong, too. (: Good luck!
They seem to work, but the style isn't as the one in the jsfiddle.
Edit: They look fine now.
Also, as another user said, the transparency on the menu-bar doesn't look good. :)
I need some help. I am trying to make a horizontal navigation using only CSS and HTML. I don't want to have the menu labels as images, in case they change in the future. I have most of it working, but the issue is when I try to include an icon (image) for one of the LI. I want the icon to swap out as well. Here's my code so far:
CSS:
body {
padding: 50px;
margin: 0;
}
ul {
padding: 5px;
margin: 10px 0;
list-style: none;
background-color: #fff;
float: left;
clear: left;
}
ul li {
float: left;
display: inline; /*For ignore double margin in IE6*/
margin: 0 9px;
}
ul li a {
text-decoration: none;
float:left;
color: #111;
cursor: pointer;
font: 14px/22px "Segoe UI", Arial, Helvetica, sans-serif;
}
ul li a span {
margin: 0px 10px 0px -10px;
padding: 1px 4px 1px 14px;
position: relative; /*To fix IE6 problem (not displaying)*/
float:left;
}
ul.green li a:hover {
color: #fff;
background: url(images/green.png) no-repeat top right;
}
ul.green li a:hover span {
background: url(images/green.png) no-repeat top left;
}
ul.green li.home {
color: #111;
background: url(images/home-idle.png) no-repeat;
background-position: -1px;
padding-left: 18px;
}
ul.green li.home a:hover {
background: url(images/home-over.png) no-repeat -10px;
}
HTML:
<ul class="green">
<li class="home"><span class="home">Home</span></li>
<li><span>Archives</span></li>
<li><span>Rooms & Resources</span></li>
<li><span>Productivity</span></li>
<li><span>Get Training</span></li>
<li><span>FAQs</span></li>
</ul>
Like I said, here's what I am attempting do have happen:
Use CSS for the navigation (aside from the icon & background)
Change the background to a green, rounded corner rectangle (I used a
.png image for the background)
Change the Home icon from blue to white
Please let me know if anyone can help.
I am writing custom tabs using HTML and CSS only, and I have come up with this so far:
http://jsfiddle.net/ae4j8/
index.html:
...
<ul>
<li>Products</li>
<li>Loans</li>
<li>Deals</li>
</ul>
...
index.css:
ul { margin-top: 10px;}
ul li {
border-bottom: 28px solid #3f3f3f;
border-left: 28px solid transparent;
border-right: 28px solid transparent;
height: 0;
display: inline-block;
margin: 0 -35px 0 0;
padding: 0;
}
ul li:hover { border-bottom: 28px solid #7f7f7f; }
ul li a {
color: #fff;
display: block;
float: left;
margin: 0;
padding: 5px;
text-decoration: none;
}
I want the first tab to appear infront of the second one and the second one infront of the third one.
Currently its first tab behind second tab behind third tab,which looks like the top-most tab.
Any ideas on how I can get the tabs reversed?
As mentioned, you could put your links in reversed order (so your 'first' link 'Products' gets rendered last and therefore on top of the other ones.) To put them with CSS back in the original order you use float: right.
Fiddle
Try to add for li position:relative and z-index:0. And for :hover - z-index:20:
CSS:
ul li {
...
position:relative;
z-index:0;
}
ul li:hover { border-bottom: 28px solid #7f7f7f;z-index:1; }
http://jsfiddle.net/ae4j8/8/
I think it will be better