After adding link_to block, I now see a black line when I hover over the box -- see attached pic. Tried changing many CSS properties but couldn't resolve the issue. My view and CSS code are below. Any ideas how to remove this black line?
**View Code**
<div class="categories">
<ul>
<%= link_to nqdc_user_path do %>
<li>Sample Box</li>
<% end %>
</ul>
</div>
**CSS Code**
div.categories {
margin-top: 25px;
margin-left: 50px;
}
ul {
padding: 10px;
color: white;
list-style: none;
text-align: center;
}
li {
background-color: #4d4dff;
padding: 25px;
margin: 15px;
display: inline-block;
border-radius: 8px;
font-size: 18px;
color: white;
}
li:hover {
background: #b3b3ff;
color: black;
text-decoration: none;
}
Source Code
<div class= "categories">
<ul>
<a href="/users/1/nqdc">
<li>Sample Box</li>
</a>
</ul>
</div>
Link a element should go inside li element
<li>
<a href="">
Sample Box
</a>
</li>
codepem
Related
I've been working on a design with three links spanning the width of the device on mobile. I can't figure out why I can't get the spacing right. What looks off?
Here's the design :
And here's what the coded version is looking like :
Here's my CSS :
.b-nav-Wrapper {
width: 100%;
}
.b-nav {margin: 0 auto;}
.b-nav ul {
list-style: none;
}
.b-nav ul li{
display: inline-block;
width: 33.33%;
}
.b-nav ul li a{
text-decoration: none;
color: rgb(151,151,151);
}
.navNumber {
float: left;
width: 20%;
font-family: "korolev-condensed",sans-serif;
font-size: 2.5875em;
opacity: .50;
}
.navLink {
float: right;
width: 65%;
padding-top: 4px;
font-family: "mrs-eaves-xl-serif",sans-serif;
font-size: 1.2em;
line-height: 1em;
font-style: italic;
font-weight: 500;
}
*edit: here's my HTML :
<nav class="b-nav-Wrapper cf">
<div class="b-nav">
<ul>
<li class="active">
<a href="#">
<p class="navNumber active">01</p>
<p class="navLink active">Now Reading</p>
</a>
</li>
<li>
<a href="#">
<p class="navNumber">02</p>
<p class="navLink">Browse My Books</p>
</a>
</li>
<li>
<a href="#">
<p class="navNumber">03</p>
<p class="navLink">Notes & Quotes</p>
</a>
</li>
</ul>
</div>
</nav>
You didn't put your html, that makes us guessing about it. But if .b-nav ul li is referred to numbered parts, you should try width less than 33.33%. Because just 1px margin or padding of other elements cause it to break into two lines. If it doesn't solve, put your link or html.
I am currently using collapsible contents from Bootstrap. So this is the actual visualization when I clicked on the background of collapsible-header.
1st part ( not yet collapsed)
2nd part (After collapsed)
As you noticed, the icon wasn't changed when I clicked on the collapsible-header background. The lists collapsed but I want the icon to be changed along by pressing the background afterwards.
However, there is no problem if i clicked on the icon itself and i will have the icon changed to plus sign and the contents will be collapsed as well.
But I would like to have my collapsible-header background to be responsive along with the icon as well. Please do help. Here's the sample code but I cant have proper visualization and I would like to apologize for the inconvenience.
<div class="col-md-12" style="margin:20px 0 0 0">
<ul class="collapsible collapsible-landing" data-collapsible="accordion">
<li>
<div class="collapsible-header">
<span class="pull-left"><h3>Categories</h3></span>
<span class="pull-right">
<i class="zmdi zmdi-plus"></i>
<i class="zmdi zmdi-minus"></i>
</span>
</div>
<div class="collapsible-body">
<ul class="collapsible-list">
<li> Sample 1 </li>
<li> Sample 2 </li>
<li> Sample 3 </li>
<li> Sample 4 </li>
<li> Sample 5 </li>
<li> Sample 6 </li>
<li> Sample 7 </li>
<li> Sample 8 </li>
<li class="clearfix"></li>
</ul>
</div>
</li>
</ul>
</div>/
Heres the css part
.catehide2, .cateshow2 {
float: right;
font-size: 20px;
color: #000000;
text-align: center;
padding:0;
}
.catehide2:hover, .cateshow2:hover {
color: #9e9e9e;
text-decoration: none;
opacity: 1;
}
.categorybox1 ul{
list-style-type:none;
margin:0;
padding:0;
display:none;
height:auto;
font-family: 'Roboto', sans-serif;
font-weight:450;
font-size:15px;
color:#424242;
border:0;
}
.categorybox1 ul li{
float: left;
width: 25%;
padding: 0 0 15px 40px;
}
.categorybox1 ul li a:link, .categorybox1 ul li a:visited {
color:#424242;
text-decoration: none;
}
.categorybox1 ul li a:hover, .categorybox1 ul li a:active {
color:#9e9e9e;
text-decoration: none;
}
.collapsible-landing {
border-top: none;
border-right: none;
border-left: none;
border-bottom: none;
margin: 0.5rem 0 1rem 0;
box-shadow: none;
}
.collapsible-landing .collapsible-header {
display: block;
cursor: pointer;
height: 60px;
line-height: 60px;
padding: 0 24px;
background-color: #fff;
border-bottom: none;
}
.collapsible-landing .collapsible-header h3 {
font-size: 16px;
font-weight: 500;
padding:0;margin: 0;
line-height: 60px;
}
.collapsible-landing .collapsible-header i {
width: auto;
font-size: 1.6rem;
line-height: 60px;
display: block;
float: left;
text-align: center;
margin-right: 0;
}
.collapsible-landing .collapsible-body {
background: #ffffff;
display: none;
border-bottom: none;
box-sizing: border-box;
}
.collapsible-list li a {
width:25%;
padding:10px 24px;
float:left;
color:#424242;
}
.collapsible-list li a:hover {
text-decoration: none;
border-bottom: none;
color:#9e9e9e;
}
.collapsible-list li.clearfix {
clear:both;
padding: 0 0 20px 0;
}
UPDATED
Pure CSS Way
Problem of icon change on expand and collapse of accordion has been resolved.
Check example code at CODEPEN
HTML:
<div class="col-md-12 " style="margin:20px 0 0 0">
<ul class="collapsible collapsible-landing">
<li>
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#test">
<h3 class="panel-title accordion-toggle">Categories</h3>
</div>
<div class="collapsible-body collapsible-body panel-collapse collapse" id="test">
<ul class="collapsible-list">
<li> Sample 1 </li>
<li> Sample 2 </li>
<li> Sample 3 </li>
<li> Sample 4 </li>
<li> Sample 5 </li>
<li> Sample 6 </li>
<li> Sample 7 </li>
<li> Sample 8 </li>
<li class="clearfix"></li>
</ul>
</div>
</li>
</ul>
</div>
CSS:
ul {
list-style: none;
margin: 0;
padding: 0;
height: auto;
font-family: 'Roboto', sans-serif;
font-weight: 450;
font-size: 15px;
color: #424242;
border: 0;
}
.collapsible-landing {
border-top: none;
border-right: none;
border-left: none;
border-bottom: none;
margin: 0.5rem 0 1rem 0;
box-shadow: none;
}
.collapsible-list {
background: #efefef;
}
.collapsible-list li a {
width: 25%;
padding: 10px 24px;
float: left;
color: #424242;
}
.collapsible-list li a:hover {
text-decoration: none;
border-bottom: none;
color: #9e9e9e;
}
.collapsible-list li.clearfix {
clear: both;
padding: 0 0 20px 0;
}
.accordion-toggle:after {
/* symbol for "opening" panels */
font-family: 'Material-Design-Iconic-Font';
content: "\f273";
float: right;
color: inherit;
}
.panel-heading.collapsed .accordion-toggle:after {
/* symbol for "collapsed" panels */
content: "\f278";
}
you have a lot of css while a small jquery function just solve your problem easily.
Hoping it will help you!
$(function(){
$('#collapse1').on('hide.bs.collapse', function () {
$('#button').html('<span class="glyphicon glyphicon-chevron-down"></span> Show');
})
$('#collapse1').on('show.bs.collapse', function () {
$('#button').html('<span class="glyphicon glyphicon-chevron-up"></span> Hide');
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h2>Collapsible Panel</h2>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a id="button" data-toggle="collapse" data-target="#collapse1">
<span class="glyphicon glyphicon-chevron-down"></span> show
</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
</div>
This error is part of my nav bar (below):
<nav>
<ul>
<div class="vr"></div>
<li><a href="index.html" >Welcome</a></li>
<div class="vr"></div>
<li><a href="services.html" >Services</a></li>
<div class="vr"></div>
<li>Guestbook</li>
<div class="vr"></div>
<li><a href="locations.html" >Locations</a></li>
<div class="vr"></div>
<li>Contact Us</li>
<div class="vr"></div>
</ul>
And is styled with (below):
nav {
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 20px;
background-color: rgba(7, 7, 8, 0.85);
border: 1px solid white;}
ul {
list-style-type: none;
position: relative;
right: 10px;}
li {
display:inline-block;
width: 19%;
margin:auto;
text-decoration: none;
font-size: 1.2em;}
a{
color: white;
font-size: 1.2em;
text-decoration: none;}
.vr{
display: inline-block;
width: 1px;
background-color: white;
height: 20px;
margin: auto;
position: relative;
top: 1px;}
Which creates a vertical line effect between each nav item.
Note: I tried to post a picture of the navbar effect but as this is my first post I don't have enough reputation, but I will email to anyone if you can help
My question is does anyone know how to replicate this without causing the validation error?
Element <div> not allowed as child of element <ul> in this context.
Alternatively, you could just axe the extra markup and place the .vr line styles directly on
the <li> like so
li {
border-left: 1px solid white;
}
# http://jsfiddle.net/cYxvw/
Place the inside the list elements like so:
<ul>
<li><div class="vr"><a href="index.html" >Welcome</a></div></li>
<li><div class="vr"><a href="services.html" >Services</a></div></li>
<li><div class="vr">Guestbook</div></li>
<li><div class="vr"><a href="locations.html" >Locations</a></div></li>
<li><div class="vr">Contact Us</div></li>
</ul>
This is probably (hopefully) a pretty simple question, but I can't seem to get it to work so I'll turn to the experts here. I'm using a pretty straightforward CSS drop-down menu, with just a little JQuery involved. The issue is that when I hover over the drop-down and it opens, it's pushing everything on the page down below it rather then opening over it. I've tried messing with the z-index but that doesn't seem to be the issue. Any tips would be fantastic, thanks in advance.
Here's the HTML; sorry it's not super-pretty, I had to rip out a bunch of stuff to make it simple and generic.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML style="zoom: 100%; ">
<HEAD>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
</HEAD>
<BODY class="bodyclass" style="background:#BCE2F1; height: 100%;">
<DIV id="maincontainer" style="min-height: 100%;">
<STYLE type="text/css">
#cssdropdown, #cssdropdown ul { font-size: 9pt; background-color: black; list-style: none; }
#cssdropdown, #cssdropdown * { padding: 0; margin: 0; }
#cssdropdown li.headlink { width: 140px; float: left; margin-left: -1px; border: 1px black solid;
background-color: white; text-align: center; }
#cssdropdown li.headlink a { display: block; color: #339804; padding: 3px; text-decoration: none; }
#cssdropdown li.headlink a:hover { background-color: #F8E0AC; font-weight: bold; }
#cssdropdown li.headlink ul { display: none; border-top: 1px black solid; text-align: left; }
#cssdropdown li.headlink:hover ul { display: block; text-decoration: none; }
#cssdropdown li.headlink ul li a { padding: 5px; height: 15px; }
#cssdropdown li.headlink ul li a:hover { background-color: #CCE9F5; text-decoration: none; font-weight: normal; }
/* #cssdropdown a { color: #CCE9F5; } */
#cssdropdown ul li a:hover { text-decoration: none; }
#cssdropdown li.headlink { background-color: white; }
#cssdropdown li.headlink ul { background-color: white; background-position: bottom; padding-bottom: 2px; }
</STYLE>
<SCRIPT language="JavaScript">
$(document).ready(function(){
$('#cssdropdown li.headlink').hover(
function() { $('ul', this).css('display', 'block'); },
function() { $('ul', this).css('display', 'none'); });
});
</SCRIPT>
<DIV class="navigation_box" style="border: none;">
<DIV class="innercontent">
<DIV style="background: white; float: left; padding: 5px; border: solid 1px black;">
LOGO
</DIV>
<DIV class="navmenu" style="float: right; bottom: 0; font-size: 9pt; text-align: right;">
<SPAN>Logged in as user#example.com</SPAN><BR>
<UL id="cssdropdown">
<LI class="headlink">
One
<UL style="display: none; ">
<LI>Option One</LI>
<LI>Option Two</LI>
<LI>Option Three</LI>
<LI>Option Four</LI>
</UL>
</LI>
<LI class="headlink">
Two
<UL style="display: none; ">
<LI>Option Two-One</LI>
<LI>Option Two-Two</LI>
<LI>Option Two-Three</LI>
</UL>
</LI>
<LI class="headlink" style="width: 80px;">
Three
</LI>
<LI class="headlink" style="width: 300px; padding-top: 2px; height: 19px;">
<FORM action="http://localhost:3000/search" method="post">
<P>
Search:
<INPUT id="searchwords" name="searchwords" size="20" type="text" value="">
<INPUT name="commit" type="submit" value="Find">
</P>
</FORM>
</LI>
<LI class="headlink" style="width: 60px;">
Four
</LI>
<LI class="headlink" style="width: 60px;">
Logout
</LI>
</UL>
</DIV>
</DIV>
</DIV>
<DIV id="contentwrapper" style="clear:both">
<DIV class="innercontent" style="margin: 0px 20px 20px 20px;">
<H1>Some test content here to fill things out a little bit.</H1>
</DIV>
</DIV>
</DIV>
<DIV id="footer" style="clear: both; float: bottom;">
<DIV class="innercontent" style="font-size: 10px;">
Copyright 2008-2010
</DIV>
</DIV>
</BODY>
This is a pretty bad case of unnecessary Javascript to do what can be done via CSS itself. One way or another all you have to do is change:
#cssdropdown li.headlink ul { display: none; border-top: 1px black solid; text-align: left;}
to:
#cssdropdown li.headlink ul { display: none; border-top: 1px black solid; text-align: left;position:absolute;}
Here's an example of an extremely simple and clean drop down menu. Hope it helps you out a bit. I added a lot of comments to help you figure out what the CSS is doing to the HTML.
<style type="text/css">
/* Get ride of default margin's and padding */
ul, li {
margin: 0;
padding: 0;
}
/* Display parent unordered list items horizontally */
ul li {
float: left;
list-style: none; /* Get rid of default Browser styling */
margin-right: 10px; /* Add some space between items */
}
/* Hide inset unordered Lists */
ul li ul {
display: none;
}
/* Un-Hide inset unordered Lists when parent <li> is hovered over */
ul li:hover ul {
display: block;
position: absolute;
}
/* Clear the any element that may be "float: left;" (Essentially moves the item to the next line */
ul li:hover ul li {
clear: left;
}
</style>
<ul>
<li>
Link 1
<ul>
<li>Link 1.1</li>
<li>Link 1.2</li>
<li>Link 1.3</li>
<li>Link 1.4</li>
<li>Link 1.5</li>
<li>Link 1.6</li>
</ul>
</li>
<li>
Link 2
<ul>
<li>Link 2.1</li>
<li>Link 2.2</li>
<li>Link 2.3</li>
<li>Link 2.4</li>
<li>Link 2.5</li>
<li>Link 2.6</li>
</ul>
</li>
<li>
Link 3
<ul>
<li>Link 3.1</li>
<li>Link 3.2</li>
<li>Link 3.3</li>
<li>Link 3.4</li>
<li>Link 3.5</li>
<li>Link 3.6</li>
</ul>
</li>
</ul>
It would appear that I am suffering from a new bug in IE7, as I can't seem to find any reference to it anywhere else. It is best explained using screenshots, so here are a couple of links (and as a note, it's not a requirement for it to work in IE6, so I don't even want to know what it looks like under that!):
How it should be displayed (using Safari 4):
http://dl-client.getdropbox.com/u/45961/safari4.png
How IE7 is displaying it:
http://dl-client.getdropbox.com/u/45961/ie7.png
Here's the CSS for that menu chunk:
#mm #leftNav .navigation {
width: 100%;
margin-bottom: 0;
float: left;
}
#mm #leftNav li {
list-style: none;
display: inline;
margin: 0;
}
#mm #leftNav .navigation li ul {
display: none;
}
#mm #leftNav .navigation li a {
text-decoration: none;
color: #ffffff;
font-size: 11pt;
padding-left: 20px;
}
#mm #leftNav .navigation li {
cursor: pointer;
margin-right: 4px;
padding-left: 8px;
padding-right: 8px;
padding-top: 10px;
padding-bottom: 8px;
overflow: visible;
}
.menu_item {
background: #419185;
}
.menu_item:hover {
background: #48a093;
}
.currentcat {
background-color: #4aa8a6;
}
.currentcat:hover {
background: #4aa8a6;
}
And here is the HTML:
<div id="mm">
<div id="leftNav">
<ul class="navigation">
<li class="menu_item">
<a class="icon icon-base">Base</a>
</li>
<li class="menu_item">
<a class="icon icon-devices">Devices</a>
</li>
<li class="menu_item">
<a class="icon icon-management">Management</a>
</li>
<li class="menu_item">
<a class="icon icon-iptools">IP Tools</a>
</li>
<li class="menu_item">
<a class="icon icon-config">Configuration</a>
</li>
<li class="menu_item">
<a class="icon icon-admin">Administration</a>
</li>
</ul>
<div id="subnav"></div>
</div>
</div>
Any ideas?
top and bottom padding are not supported on inline elements (some browsers will render it, others won't)
Here's a good article on the problem:
http://www.maxdesign.com.au/presentation/inline/
If you really need correct padding, you should change the menu items to "display:block" and "float:left"
Hehe, activa beat me to it.
Indeed, move your margin/padding to the A element, kinda like so:
mm #leftNav .navigation li a {
text-decoration: none;
color: #ffffff;
font-size: 11pt;
display:block;
float:left;
background: #419185;
margin-right: 4px;
padding-left: 20px;
padding-right: 8px;
padding-top: 10px;
padding-bottom: 8px;
}
mm #leftNav .navigation li {
cursor: pointer;
}
.menu_item {
}