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>
Related
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" />
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
Hopefully you can see what the problem is, I want the links to go side by side not on top of each other?
Can you please see what the problem is on JS Fiddle: http://jsfiddle.net/pky7X/
Thank you for any help
At first, you forgot the <ul></ul>
<style>
ul {
list-style-type: none;
}
li {
float: left;
border: 1px solid #ff9900;
}
</style>
<ul>
<li>Home</li>
<li>About</li>
</ul>
First: You're missing <ul> around your <li> tags (don't think that's valid in HTML5; it wasn't before).
Second: Why even using list items and then removing the list-style and adding float?
Just use <span> or the <a> directly...
HomeAbout
... and then use CSS to set their padding, style, dividers, etc.
Remove the <br /> and place <li> tags inside a <ul> like so:
<ul>
<li>Home</li>
<li>About</li>
</ul>
Remove margin: -35px 220px; from CSS and remove the <br /> from HTML.
I'm having huge difficulties in removing the gap between list items in IE7.
The problem with gap between the list-items occurs when I am floating elements inside the li:s.
A simple test case is here (with 2 different possible solutions that didn't work):
http://jsfiddle.net/UJMr8/1/
...And here is the HTML from the test:
<ul>
<li class="even">
<span class="left">left</span>
<span class="right">right</span>
</li>
<li class="odd">
<span class="left">left</span>
<span class="right">right</span>
</li>
<li class="even">
<span class="left">left</span>
<span class="right">right</span>
</li>
<li class="odd">
<span class="left">left</span>
<span class="right">right</span>
</li>
</ul>
With the following css:
li { height: 30px; line-height: 30px; padding: 0 10px; }
.even { background: #ccc; }
.odd { background: #eee; }
.left { float: left; }
.right { float: right; }
Any suggestions or thoughts on this? Thanks!
Edit: Thanks for the comment, I hadn't test it in other browsers. So, you can use conditional comments, to target internet explorer only like this
<!--[if IE 7 ]>
li {height:0px;}
<![endif]-->
Or you can use an external css, to target internet explorer 7 for any other problem you may have and you can't find a cross browser solution:
<!--[if IE 7 ]>
<link type="text/css" rel="stylesheet" href="ie7.css"/>
<![endif]-->
Another option is to use an internet explorer hack, like asterisk *. An example is
*height:0px;
The hack must be below the height:30px to be able to override it.
I suggest you to use conditional comments, instead the hack.
Have you tried using Eric Meyers CSS Reset?
http://www.cssreset.com/downloads/css-resets/eric-meyer-reset-css/eric-meyer-reset.css
It sets all browser default margin and padding to 0
You will have a lot of problems with styling list items if you don't change their display to block and reset them properly.
Add this to the top of your css:
ul li, ul {
list-style:None;
margin:0;
padding: 0;
display:block;
}