Here is the plunker - http://plnkr.co/edit/WZ6cqCcXaLuOCXnZdCa6?p=preview
Is there a CSS way so that when I click on One or Two, it becomes class="active" for One or Two and removed from Home?
You can highlight each link with CSS alone, but not by using classes. Rather, use the :target pseudo class: http://codepen.io/pageaffairs/pen/kqoma
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
ul, li, div {margin: 0; padding: 0;}
ul {
list-style: none;
overflow: hidden;
padding: 10px;
}
li {
float: left;
margin: 0 20px 0 0;
}
li a {
display: block;
padding: 10px 20px;
text-decoration: none;
color: #08c;
border-radius: 20px;
}
li a:hover, li a:target {
background: #08c;
color: white;
}
</style>
</head>
<body>
<h1>Hello <code>:target</code>!</h1>
<div class="header">
<ul class="nav nav-pills">
<li class="active">
Home
</li>
<li>
One
</li>
<li>
Two
</li>
</ul>
</div>
</body>
</html>
You will need to edit the html somehow, css doens't have the ability to change an elements class. You could write a little function to js to do this on a click event and remove the class from the old menu item and add it to the newly selected menu item.
like this:
http://plnkr.co/edit/6B5v2KrZonuI33dJySS6?p=preview
You can so this with jQuery, following this format:
switch (window.location.pathname) {
case '/THE_URL_HERE':
$('.nav-home').addClass('active');
break;
case '//THE_URL_HERE':
$('.nav-one').addClass('active');
break;
case '//THE_URL_HERE':
$('.nav-two').addClass('active');
break;
}
And add classes to your HTML:
<h1>Hello Plunker!</h1>
<div class="header">
<ul class="nav nav-pills">
<li class="nav-home">
Home
</li>
<li class="nav-one">One</li>
<li class="nav-two">Two</li>
</ul>
</div>
Not using CSS exclusively. Behavioral features, such as linking, and modification of the DOM are outside the scope of CSS.
However, you could construct the links to modify the query string of the URL (e.g. ?item=one) and use the resulting GET values to set classes on your navigation.
Or use javascript.
use :target it's more flexible if it's to make a menu without javascript
Related
I'm trying to add padding above and below each element of a list. Here is my current code:
<html>
<head>Basic Report</head>
<body>
<p>
A<br>
<ul>
<li class="pad">B</li>
<li class="pad">C</li>
<li class="pad">D</li>
<li class="pad">E</li>
<li class="pad">F</li>
<li class="pad">G</li>
<li class="pad">H</li>
</ul>
</p>
</body>
</html>
This is my css:
p{
font-size:14;
}
* {
font-family: Calibri;
}
.pad {
padding-top:50px;
padding-bottom:10px;
}
Two questions:
The padding isn't working. Why is that?
Is there any way to add padding to all the elements with one bit of code? Or do I need to add class="pad" to each list item?
I'm a total noob at html and css btw. Thank you for your help.
There isn't any problem with your code. I recommend you select all
of the li tags just like this li {} instead of giving each of
them a class. you can also use padding-block for top and bottom and
padding-inline for right and left.
The reason why you can't see the padding might be that you haven't linked the right file or referenced the wrong address. Cause I copy pasted your code and it was working for me.
p {
font-size: 14;
}
* {
font-family: Calibri;
}
li {
/* padding-top: 50px;
padding-bottom: 10px; */
padding: 50px 0 10px 0;
/* you can also use padding-block for top and bottom and padding-inline for right and left */
}
<p>
A<br>
<ul>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
</ul>
</p>
Your code is correct and padding should work maybe your CSS file is not linked properly.
an easier method of doing what you want to do is you can give a class to its parent and do it as I did in the code below.
.list li{
padding-top:50px;
padding-bottom:10px;
}
<body>
<p>
A<br>
<ul class="list">
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
</ul>
</p>
</body>
There is no style difinition in the posted HTML markup. So I assume the CSS is in another file. You have to link it.
And by the way, <head>Basic Report</head> is not valid... It probably should be:
<head>
<title>Basic Report</title>
</head>
And then, you can add a link to the CSS file:
<head>
<title>Basic Report</title>
<link rel="stylesheet" href="mystyle.css">
</head>
do I need to add class="pad" to each list item?
You could do:
li{
padding-top:50px;
padding-bottom:10px;
}
to avoid the class addition in the HTML markup...
there is no problem with the padding it works, you can directly target the tag
CSS code:
*{
font-family: Calibri;
}
p{
font-size:14;
}
li {
padding-top:50px;
padding-bottom:10px;
}
I have an a tag and a li inside it. The a tag colors the list items innterText. How can I nullify its effects on the color of its content and also remove the underline?
Code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul>
<li>asd</li>
</ul>
</body>
</html>
It is invalid to have <a> inside <ul> tag in the way you did, and it's also won't pass the W3C validation. However, If I understand your question, you may try this:
<ul>
<li>
<a href="#">
<ul>
<li>asd</li>
</ul>
</a>
</li>
</ul>
In order to remove the underline, you can do:
ul li a {
text-decoration: none;
color: #b61c1c; /* For Example */
}
Fiddle
Try this:
a {
background-color: transparent;
}
a:hover {
text-decoration: none;
}
You can style it like this:
<a style="text-decoration: none; color: #TheColorYouWant"></a>
Use CSS. this removes underlines from a and li elements:
a, li {
text-decoration: none !important;
}
Just add your style according to your requirements inside this class "a:-webkit-any-link". for example if you want to remove underline then just add "a:-webkit-any-link{text-decoration: none;}".
Note: Here we are using '-webkit-' for Chrome browser.
I have a problem with w3css. When I add a link to a w3css navigation bar, it will come with a line break.
<link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet">
<div class="w3-bottom" style="margin-bottom: 1px">
<ul class="w3-navbar w3-red" style="float: clear;">
<li style="margin-left: 2px">
Powered by w3css and fontawesome |
</li>
</ul>
</div>
I would like everything to be on one line. I hope you can help me, thanks. :)
//Cripi
This is a snippet of code that comes from the W3 css file you've included
.w3-navbar li a, .w3-navitem, .w3-navbar li .w3-btn, .w3-navbar li .w3-input {
display: block;
padding: 8px 16px;
}
If you edit the display property on that to be inline-block then things work as you'd expect.
Here is the code and an example link
.w3-navbar > li > a {
display:inline-block !important;
}
You need the "!important" to overwrite their stylesheet which would have priority otherwise.
http://codepen.io/hoonin_hooligan/pen/Mpwqwm
You have to change the display: block behavior to display: inline behavior. (And remove the padding to make it look less weird.) I used !important to make sure the browser accepts that specific value; you should replace this with a higher specificity selector, the same specificity selector later in the pageload so it overwrites the old value or change the css file of the current selector.
.w3-navbar li a{
display:inline !important;
padding: 0px !important;
}
<link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet" />
<div class="w3-bottom" style="margin-bottom: 1px">
<ul class="w3-navbar w3-red" style="float: clear;">
<li style="margin-left: 2px">
Powered by
<a href="https://www.w3schools.com/w3css/">
w3css
</a> and
<a href="http://fontawesome.io/">
fontawesome
</a> |
</li>
</ul>
</div>
I'm learning HTML + CSS and working on a website where I need to have a vertical navigation bar on the left side which will have four elements which can be interacted with. Is it standard practice to wrap each of these four elements with a div or is there a more elegant or semantic way to solve this problem? I will want each element to have unique on-click functions associated with them, which is why I thought giving them divs and classes would make the most sense for interacting with them later.
Thanks!
JSFIDDLE DEMO
HTML structure:
There are many ways to achieve a vertical navigation.
The most common would be to use ul and li:
<div id="lnav_container">
<ul id="lnav">
<li class="lnav_item">Item 1</li>
<li class="lnav_item">Item 2</li>
<li class="lnav_item">Item 3</li>
<li class="lnav_item">Item 4</li>
</ul>
</div>
Also very common to have a tags inside li.
Styling:
You can get rid of the bullets by having list-style-type: none; for the ul.
You can give them different style on hover by using :hover selector to make it more interactive.
.lnav_item {
width: 74%;
margin-top: 10px;
}
.lnav_item:first-child {margin-top: 0px;}
.lnav_item.selected {width: 86%;}
.lnav_item a {
display: inline-block;
width: 100%;
line-height: 30px;
padding: 8px 5px 5px 0px;
background-color: yellow;
color: black;
font-weight: bold;
text-decoration: none;
border-radius: 2px 12px 12px 2px;
}
.lnav_item.selected a {
background-color: green;
color: white;
font-size: 18px;
}
.lnav_item:hover a {background-color: orange;}
To get rid of a underline use text-decoration: none; and override its default coloring if you wish.
Javascript (jQuery):
It'll be easy to bind clickListener to the items:
$('.lnav_item a').on('click', function() {
//$(this) item is clicked, do whatever you want
$('.lnav_item').removeClass('selected');
$(this).parent().addClass('selected');
});
EDIT:
If you want to give each of the navigation items a different style, etc, you can achieve it different ways:
jsfiddle DEMO
You can use CSS' nth-child() selector:
.lnav_item:nth-child(2):hover a{background-color: #252F1D;}
.lnav_item:nth-child(3):hover a{background-color: white;}
If you're doing it in jQuery, alternatively you can use the function with parameter (index) and maybe use eq if needed.
$('.lnav_item > a').each(function(index) {
if(index == 0) {
//give it a different onClick, CSS rule, etc
}
//and so on
});
index is zero-based, but nth-child starts from one.
The typical HTML5 markup for a site navigation menu would be a nav element that contains an ul element:
<nav>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</nav>
If you can get your CSS/JS to work with this markup (+ class attributes or whatever you need), great.
If you need more elements, add div and/or span elements: they are meaningless, so they don’t change the semantics of your document.
NAV elements are simply LISTS.
You don't need to wrap them in anything.
Here's an example of my own Navigation Panel (I also placed it on the left-hand side of my screen)
<nav>
<ul style="list-style: none">
<h3>Main Menu</h3>
<li style="font-size: 100%"><b>Article 1</b></li>
<ul style="list-style: none">
<br>
<dt>
<li style="font-size: 100%"><a href="Article 1.1">Article
1.1</a>
</li>
<br>
<li style="font-size: 100%"><a href="Article 1.2">Article
1.2</a>
</li>
<br>
</dt>
</ul>
<br>
</nav>
I have a NavBar in my web-app using Ruby on Rails and Twitter Bootstrap.
The NAVBAR looks well in the browser as:
But, the Navbar breaks when I look up the web-app in the browser on my Galaxy Note.
Snippet from app/views/layouts/application.html.erb
<div class="masthead">
<h3 class="active">WebsiteName</h3>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact Us</li>
<% if current_user %>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<strong><%= current_user.name %></strong>
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Sign out</li>
</ul>
<% end %>
</ul>
</div>
</div>
</div>
</div>
The CSS for the NAVBAR is borrowed primarily from:
Justified Nav Example - http://getbootstrap.com/2.3.2/examples/justified-nav.html
/* Customize the navbar links to be fill the entire space of the .navbar */
.navbar .navbar-inner {
padding: 0;
}
.navbar .nav {
margin: 0;
display: table;
width: 100%;
}
.navbar .nav li {
display: table-cell;
width: 1%;
float: none;
}
.navbar .nav li a {
font-weight: bold;
text-align: center;
border-left: 1px solid rgba(255,255,255,.75);
border-right: 1px solid rgba(0,0,0,.1);
}
.navbar .nav li:first-child a {
border-left: 0;
border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
border-right: 0;
border-radius: 0 3px 3px 0;
}
How can I fix this? I am learning Responsive CSS these days, and have no idea how to fix it.
UPDATE:
Please note that the above problem has been fixed.
But I found something wrong when this got fixed though. If I decrease the size of window too much, the navbar gets broken. The User part goes outside the navbar. The issue is also reflected in the Bootstrap example too.
I'm attaching the screenshots which showcase the issue. To see it yourself, simply decrease the window size in the Bootstrap navbar example.
The problem is that the "Contact Us" link is wrapping. Notice that, in the Bootstrap example, the navbar does not have links with multiple words.
Add white-space: nowrap; to the .navbar .nav li a class.
Here is a functioning demo. All you have to do is resize the width of the frame to test.
The demo contains 2 navbars:
The first navbar with the issue fixed.
The second reproduces the faulty behavior to isolate the cause at the "Contact us" link, by setting its style attribute to "white-space: normal;" thus overriding the fix.
Also note that you have a </li> missing before <% end %>.
define the heihgt of .navbar .nav 40px and add overflow: hidden;
Your bootstrap file loading should look like the following to make the responsive work:
<link rel="stylesheet" type="text/css" href="~/Content/bootstrap.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="~/Content/bootstrap-responsive.css" />