I have the following HTML
ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 12px;
display: inline-block;
}
li {
display: inline-block;
padding: 0 5px;
}
.number {
float:right;
}
.rec {
float: left;
}
<div style="background-color: grey;">
<span style="font-size:16px">Text</span>
<ul>
<li>10</li>
<li>records</li>
</ul>
</div>
<br>
<div style="background-color: grey;">
<span style="font-size:16px">Text</span>
<ul>
<li class="number">10</li>
<li class="rec">records</li>
</ul>
</div>
When the list item floats, they move higher vertically, See this screenshot
Here is the jsfiddle link:
https://jsfiddle.net/mddc/d193a4v8/1/
How to make floating items remain the original position vertically?
You can adjust the line-height and reduce it to line-height: 8px for the property ul and it should align it properly as follows:
ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 12px;
display: inline-block;
line-height: 8px;
}
li {
display: inline-block;
padding: 0 5px;
}
.number {
float:right;
}
.rec {
float: left;
}
<div style="background-color: grey;">
<span style="font-size:16px">Text</span>
<ul>
<li>10</li>
<li>records</li>
</ul>
</div>
<br>
<div style="background-color: grey;">
<span style="font-size:16px">Text</span>
<ul>
<li class="number">10</li>
<li class="rec">records</li>
</ul>
</div>
Related
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>
I'm building a menu with two sections and a logo between.
And i would like to know how can I prevent the logo from moving whenIi change the text from both sections. I would like to fix the logo, when i change the about us for exemple, i would like to see the about us editing and moving to the left side, not to the right side.
Sorry for my english:
Jsfiddle:
http://jsfiddle.net/uL52rvwn/
HTML:
<div class="menu">
<div class="m-info">
<ul>
<li class="l-aboutus"><a>About us</a></li>
</ul>
</div>
<div id="logo"><img alt="logo" src="http://i.imgur.com/bebZYcu.png" width="80" height="80" /></div>
<div class="m-contact">
<ul>
<li class="l-ourcontacts"><a>Contacts</a></li>
</ul>
</div>
</div>
What I did? I made the m-info float:left, and m-contact float:right, than made the #logo's margins negative to move it to the center.
Fiddle: http://jsfiddle.net/uL52rvwn/3/
<style>
.m-info {
width: 50%;
float: left;
text-align: right;
margin-left: -40px;
padding-right: 40px;
}
.m-contact {
width: 50%;
float: right;
text-align: left;
padding-left: 40px;
margin-right: -40px;
}
#logo {
float: left;
margin-left: -40px;
margin-right: -40px;
}
.menu ul {
padding: 0;
}
.menu li {
display: inline;
padding: 10px;
color: #eaeaea;
text-transform: uppercase;
z-index: 11;
position: relative;
}
.m-info ul li a, .m-contact ul li a {
text-transform: uppercase;
color: #a1a1a1;
letter-spacing: 7px;
font-size: 12px;
}
.m-info ul li a:hover, .m-contact ul li a:hover{
cursor:pointer;
color:#c8c8c8;
}
.m-contact ul{
margin-right:20px;
}
</style>
<div class="menu">
<div class="m-info">
<ul>
<li class="l-aboutus"><a>About us</a></li>
</ul>
</div>
<div id="logo"><img alt="logo" src="http://i.imgur.com/bebZYcu.png" width="80" height="80" /></div>
<div class="m-contact">
<ul>
<li class="l-ourcontacts"><a>Contacts</a></li>
</ul>
</div>
</div>
Absolute positioning should work: http://jsfiddle.net/6L35a0up/7/
I changed the following CSS rule:
#logo img {
left:50%;
z-index: 12;
position: absolute;
}
And moved the logo div to outside of the .menu wrapper.
<body>
<div id="container">
<div id="header">
</div>
<div id="nav">
<ul id="navigation">
<li id="nav_home">Home</li>
<li id="nav_gallery">Gallery</li>
<li id="nav_shows">Shows</li>
<li id="nav_contact us">Contact us</li>
</ul>
</div>
</div>
<div id="container2">
<div id="background">
</div>
</div>
</body>
Css :
#nav{
text-align: right;
margin-top: none;
}
#navigation{
list-style: none;
display: inline-block;
margin-left: 10px;
font-size: 17px;
font-family: monospace;
float: right;
position: relative;
}
I can not figure out why it is not working. When I try closing the div header tag after the list (bar) it appears above the logo image. And it is currently like this:
EDIT: How to specify a style for this exact line? I tried anything but i couldn't, due to the fact that with DIV it gets under the whole Anime of the week - http://gyazo.com/5c9c6b57cd7097edc719b09a8bbfdd1d
Try this and then arrange the padding as per required :-
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
}
<div id="navcontainer">
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Cheese</li>
<li>Vegetables</li>
<li>Fruit</li>
</ul>
</div>
Make necessary changes to replicate the block of CSS code below:
#nav {
margin-top: none;
width: 500px; /* Define a width for the parent cont*/
}
#navigation {
width: 100%; /* Adjsut as needed */
}
#navigation li {
display: inline-block;
list-style: none;
padding: 15px;
}
See working example here
Important: If the logo and the nav are both inside one container, find out what's left of the container after the width of the logo and use it as the with of the nav.
When the menu "product" is clicked or mouse over, the another list of menus appear.. but the image block which is below the menu bar, moves away from the position. if i use css [ position:absolute;], then the image box remains static and the product's sub-menu overlaps the image block, which is what i wanted. but the image blocks width & height settings change drastically, thereby spoiling the alignment.
pls chk the codings in jsFiddle
.home_menu {
border: 1px solid black;
width: 98%;
height: 3.3%;
margin-right: auto;
margin-left: auto;
}
div#menuDemo {
clear: both;
//border:1px solid black;
height: 78%;
width: 100%;
position: relative;
left: 0;
top: 0;
background-color: #A55927;
/*Remove this next one in production - Used for demo purpose only*/
margin-bottom: 0.1%;
padding-top: 0.7%;
z-index: 4;
}
div#menuDemo ul {
list-style: none;
margin: 0;
padding: 0;
background-color: #A55927;
}
div#menuDemo > ul > li {
float: left;
text-align: center;
}
div#menuDemo ul li {
width: 25%;
//border: 5px solid purple;
}
div#menuDemo ul li a {
text-decoration: none;
font-weight: bolder;
text-align: center;
}
div#menuDemo > ul > li > ul {
display: none;
text-align: center;
}
div#menuDemo > ul > li:hover > ul {
display: block;
text-align: center;
}
.sub1 {
width: 100%;
//border:1px solid green;
}
.colouring {
color: black;
font-weight: bolder;
}
.colour {
//border:1px solid blue;
color: black;
text-align: center;
//width:100%;
}
.wrapper {
border: 5px solid pink;
width: 98.8%;
height: 82%;
margin-top: 1%;
z-index: 2;
}
.uniform_block {
border: 5px solid green;
width: 100%;
height: 40%;
cursor: pointer;
}
.uniform_block img {
width: 100%;
height: 100%;
}
<body>
<div class="home_menu">
<div id="menuDemo">
<ul>
<li id="homeMenu">About Us
</li>
<!-- <li >About Us</li> -->
<li>Products
<ul class="sub1">
<li> Uniforms
<ul>
<li>  
</li>
<li> Automobile Industry Uniforms
</li>
<li> Pharmaceutical Uniforms
</li>
<li> Food Industry Uniforms
</li>
<li> Government Sector Uniforms
</li>
<li> School/College Uniforms
</li>
<li>  
</li>
</ul>
</li>
<li>Shoes
<ul>
<li>  
</li>
<li> Industrial Shoes
</li>
<li> Safety & Security Shoes
</li>
<li> Executive Shoes
</li>
<li>  
</li>
</ul>
</li>
</ul>
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="uniform_block">
<img src=" http://t0.gstatic.com/images?q=tbn:ANd9GcSH-kRi3rkVciPcH_c6dDJJI6C1ntzwcKl9MoVQIyuKk8F7unpf" />
</div>
<div class="home_footer">
<div class="footer_contents"></div>
</div>
</div>
</body>
kindly help. My requirement is, when i mouse over the "product menu", the drop down menu should be viewed above the image block which is below the menu bar.
Add position:absolute to the css of your ul menu (in your case, the sub1 class), and remove the width:100% so it can inherit the default width of its parent. Absolute positioning will prevent your browser from trying to put your ul element after the previous element on the page.
ul.sub1 {
position:absolute;
}
http://jsfiddle.net/C2YXp/2/
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>