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
Related
I am trying to implement LI items horizontally as seen in the screenshot however I am not able to increase the height of the li item. I tried creating a class and assigning it to the li item and that still doesnt seem to work. Tried applying the height to the UL item and still doesnt seem to work. Could somebody tell me what the problem is ?
html
<div id="navcontainer">
<ul class="liheight">
<li class="liheight">Team Management</li>
<li class="liheight">User Management</li>
</ul>
</div>
CSS
#navcontainer ul {
display: block;
list-style-type: disc;
padding-top:40px;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
#navcontainer ul li {
display: inline;
border:5px solid #009ddc;
border-left: 5px solid #009ddc;
border-right: 5px solid #009ddc;
border-bottom:5px solid #009ddc;
border-top:5px solid #009ddc;
z-index: 0 !important;
padding: 0;
}
#navcontainer ul li a {
text-decoration: none;
padding: .1em 1em;
background: #fff;
color: #24387f !important;
}
#navcontainer ul li a:hover
{
color: #fff !important;
background-color: #009ddc;
}
.liheight {
min-height: 50px;
}
Desired height
Current implementation
Applying the solution
First answer explains it, but if you really want to keep 'inline' on li element, then just add line-height: 25px, or anything like that. It will increase line height and thus increase height of li element.
I am trying to implement LI items horizontally as seen in the
screenshot however I am not able to increase the height of the li item
This is accomplished using, display: inline-block. The reason is that when you try to increase the heigh of inline elements it has no effect, with inline-block it does.
Another way to make the li elements is to use floats: float: left
But it seems that what you are trying to accomplish is increase the height and width of the anchor tags, <a>, within the li elements and when the user hovers the pointer over it you get the blue color. This is done by making that inline element, the anchor tag, a block element and applying padding to make it grow.
Here are two possible solutions to your problem, you can choose the best one that fits your needs.
Solution one:
#navcontainer ul {
list-style-type: disc;
padding-top:40px;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
#navcontainer ul li {
display: inline-block;
border:5px solid #009ddc;
border-left: 5px solid #009ddc;
border-right: 5px solid #009ddc;
border-bottom:5px solid #009ddc;
border-top:5px solid #009ddc;
z-index: 0 !important;
}
#navcontainer ul li a {
display: block;
text-decoration: none;
padding: 0.5em 4em;
background: #fff;
color: #24387f !important;
}
#navcontainer ul li a:hover
{
color: #fff !important;
background-color: #009ddc;
}
<div id="navcontainer">
<ul>
<li>Team Management</li>
<li>User Management</li>
</ul>
</div>
Solution two (using floats):
#navcontainer ul {
list-style-type: none;
padding-top:40px;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
#navcontainer ul li {
float: left;
border:5px solid #009ddc;
border-left: 5px solid #009ddc;
border-right: 5px solid #009ddc;
border-bottom:5px solid #009ddc;
border-top:5px solid #009ddc;
z-index: 0 !important;
}
#navcontainer ul li a {
display: block;
text-decoration: none;
padding: 0.5em 4em;
background: #fff;
color: #24387f !important;
}
#navcontainer ul li a:hover
{
color: #fff !important;
background-color: #009ddc;
}
<div id="navcontainer">
<ul>
<li>Team Management</li>
<li>User Management</li>
</ul>
</div>
For further reading check out these articles:
CSS display: inline vs inline-block
https://developer.mozilla.org/en-US/docs/Web/CSS/display
https://alistapart.com/article/css-floats-101
https://developer.mozilla.org/en-US/docs/Web/CSS/float
Change #navcontainer ul li to use display: inline-block, as the use of inline is restricting its height.
Additionally:
I'd recommend you use classes rather than your very specific and non-reusable structure you're current implementing.
Do not use min-height, as this just prevents an element from going below this height, usually used when it's scalable.
Here's a js-fiddle, I've just changed the display property and added a height value. https://jsfiddle.net/g9aspo90/
EDIT:
To fix the background colour not filling out, you should set the background-color on the li tag, rather than the a tag. When you set the background-color on just the a tag, then it will only cover the a tag's area, which in our case was smaller than its parent (once we increased its size). And since in actuality all we want to do is give the li tag a white background, it makes much more sense to set it there.
Here's the fiddle: https://jsfiddle.net/g9aspo90/1/.
And these are the changes I made:
#navcontainer ul li a {
text-decoration: none;
padding: .1em 1em;
background: #fff;
color: #24387f !important;
}
#navcontainer ul li a:hover {
color: #fff !important;
background-color: #009ddc;
}
Becomes
#navcontainer ul li {
background: #fff;
color: #24387f !important;
}
#navcontainer ul li a {
text-decoration: none;
padding: .1em 1em;
color: #24387f !important;
}
#navcontainer ul li:hover {
color: #fff !important;
background-color: #009ddc;
}
Further comments:
I'd recommend you wrap the li tag in the a tag, rather than the other way around. This way the entire block will be a link, which I think is much nicer. So this:
<li class="liheight">
User Management
</li>
Would become this:
<a href="#">
<li class="liheight">
User Management
</li>
</a>
This messes up your styles a bit, but it should only take a few minutes to resolve. Good luck!
EDIT2: Here's how to resolve the styling issue, just changes the css selector #navcontainer ul li a to #navcontainer ul a li. https://jsfiddle.net/g9aspo90/3/
You can increase size of borders, your height and width will change according to that. Like this:
#navcontainer ul li {
display: inline;
border: 5px solid #009ddc;
border-left: 50px solid #009ddc;
border-right: 50px solid #009ddc;
border-bottom: 50px solid #009ddc;
border-top: 50px solid #009ddc;
z-index: 0 !important;
padding: 0;
}
My suggestion would be to use bootstrap, it has navigation class so you can group all things together and control all on same time.
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 have a ul menu inside a div .menu. The parent .menu has a top and bottom 1px solid border. When hovering over an li element another border get added but the parent border still appear above it.
I want to not display the .menu top border when hovering over an li I don't want to use js unless it's the only solution.
Here is my code and my temporary fix.
HTML:
<div class="menu">
<ul>
<li>Home</li>
<li>Fun</li>
<li>Work</li>
</ul>
</div>
CSS:
.menu{
width: 100%;
background-color: black;
/* I want this border to... ↓ */
border-top: 1px solid black;
border-bottom: 1px solid black;
box-sizing: border-box;
}
.menu ul{
list-style: none;
overflow: hidden;
margin: 0px;
height:35px;
}
.menu ul li{
display: block;
float:left;
border-left: 1px solid gray;
position: relative;
}
.menu ul a{
color: #FFF;
padding: 10px;
display: block;
}
.menu ul a:hover{
text-decoration: none;
background-color: white;
color: pink;
/* ...not be displayed above this border when hovering */
border-top: 3px solid pink;
}
I only found this inefficient solution:
.menu ul:hover{
position: relative;
top: -1px;
}
Codepen link:http://codepen.io/eldev/pen/YPYLQz?editors=110
Any thoughts ?
Edit:
backgound-color isn't the same as border-color I made it by mistake. Codepen link updated.
there are few solutions at the same time.
like this? (or i don't understand correctly) http://codepen.io/anon/pen/XJVYMW
i have added margin-top: -1px for ul
There had to be some modification don't to the CSS; to make it easier to understand, I have added all my changes to the HTML section. I have NOT modified the CSS section.
Here you go http://codepen.io/anon/pen/rapKxE
And the beautified version http://codepen.io/anon/pen/MYrXQN
< Refer to CodePen >
NOTE Check the code on codepen for the latest updates.
There are four solutions :
margin-top: -1px; ;
Javascript ;
position: relative; top: -1px; ;
transform: translateY(-1px).
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
Here's my situation:
I want to make a CSS dropdown. Normally I can do this no problem with embedded ULs. However, I want to make a multi-column dropdown. I need the dropdowns to be of dynamic width though.
I have accomplished this with tables, but Id like to see if I could do it with DIVs.
My CSS for the drop down UL/LI is:
#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
#nav ul li {
position: relative;
float:left;
margin-left:16px;
}
#nav li ul {
position: absolute;
display: none;
z-index:10;
}
#nav li:hover ul {
display:block;
}
#nav ul li a.main {
display: block;
height:47px;
text-decoration: none;
color: #fff;
padding: 0 16px 0 16px;
line-height: 48px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
border-left: 1px solid transparent;
font-weight:bold;
}
#nav ul li a.main:hover {
background:#FFF;
color:#222222;
border-top: 1px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
}
That creates the horizontal navigation with drop downs with this HTML:
<ul>
<li><a class="main">HO Scale</a>
<ul>
</ul>
</li>
</ul>
Using a table, I can put it inside the inner UL and use this CSS
.inner{
float:left;
background:#FFF;
border:1px solid #000;
border-top:0;
padding:12px 0 12px 12px;
}
By putting a Table with class of inner in those inner ULs it will work perfectly, space them out, 3 columns, all dynamic width.
I'd like to accomplish that with DIVs, but the problem is when I float (or don't float) the "inner" DIV it puts all of the links on the inside one to a line, I can't seem to make them go side by side. If I put the DIV OUTSIDE thee dropdown, it works just fine.
Any suggestions?
EDIT:
This is how it should look (and does with tables):
This is how it looks with DIVs (wrong)