On my page i've got a navbar with logo, several items and login section which is aligned to the right.
<div id="topbar">
<nav>
<ul>
<li>
<a ui-sref="home" class="home-logo">
<img src="http://placehold.it/350x150">
</a>
</li>
<li> Item1</li>
<li> Item2</li>
<li> Item3</li>
</ul>
<ul>
<li> Log In</li>
<li>
Sign up for free
</li>
</ul>
</nav>
</div>
I try to make this login section to be aligned vetically on the same height as the remaining menu elements, but floating takes these items out of the normal flow and I've got no idea how do I achieve this?
Here's what I'm talking about: http://codepen.io/anon/pen/grBXJa
Used to line-height as like this
#topbar li
{
line-height:150px;
}
ul
{
list-style: none;
}
#topbar
{
font-size: 1.75em;
}
#topbar ul
{
padding: 0;
display: inline-block;
}
#topbar img
{
vertical-align: middle;
margin-right: 60px;
}
#topbar li
{
display: inline-block;
margin-right: 60px;
line-height:150px;
}
#topbar ul:last-child
{
padding: 0;
float: right;
}
<div id="topbar">
<nav>
<ul>
<li>
<a ui-sref="home" class="home-logo">
<img src="http://placehold.it/350x150">
</a>
</li>
<li> Item1</li>
<li> Item2</li>
<li> Item3</li>
</ul>
<ul>
<li> Log In</li>
<li>
Sign up for free
</li>
</ul>
</nav>
</div>
Related
I have been tasked with styling a website, where I have encountered a hurdle regarding the horizontal alignment of elements inside list items.
I have replicated the structure of the menu in question with this JSFiddle.
I want to know how I can keep the position of the green divs (as shown from the start) when I expand the menu, using the button in the fiddle. I need them to keep horizontal alignment with the first <a> element in their respective <li> element, when the submenus are displayed.
you can do it like this for example:
<html>
<script>
function clickFunction(){
var elements = document.getElementsByClassName("submenu");
for(var i = 0; i < elements.length; i++){
elements[i].classList.toggle("display-sublist");
}
}
</script>
<style>
ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
ul li{
width: 100%;
background-color: blue;
}
.submenu{
display: none;
}
.display-sublist{
display: block;
}
ul li a{
width: 95%;
background-color: red;
}
.main-test {
display: inline-block;
float: left;
width: 90%;
}
.cancel-test{
display: inline-block;
background-color: green;
float: right;
width: 10%;
}
.expand-button{
clear: both;
display: block;
}
</style>
<body>
<ul>
<li>
<a class="main-test" href="#">Something</a>
<a class="cancel-test">x</div>
<ul class="submenu">
<li>
Sub-Something
</li>
<li>
Sub-Something
</li>
<li>
Sub-Something
</li>
</ul>
</li>
<li>
<a class="main-test"href="#">Something</a>
<a class="cancel-test">x</a>
<ul class="submenu">
<li>
Sub-Something
</li>
<li>
Sub-Something
</li>
</ul>
</li>
<li>
Something
</li>
<li>
Something
</li>
</ul>
<button onclick="clickFunction()" class="expand-button">Expand</button>
</body>
</html>
This question already has an answer here:
How can I have perfectly centered navigation bar with equally wide links?
(1 answer)
Closed 6 years ago.
I wrote a navigation bar like this:
.site-nav ul {
margin: 0;
background-color: #09C;
line-height: 52px;
}
.site-nav li {
display: inline-block;
font-size: 14px;
}
.site-nav a {
display: inline-block;
}
<nav class="site-nav">
<ul>
<li>
首页
</li>
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
</ul>
</nav>
Now I need each <li> tag bisects the width of ul (it's parent). If the count of <li> is known, I can simply give an percentage to <li>,
in this case:
.site-nav li {
width: 25%;
display: inline-block;
font-size: 14px;
}
However, the <li> is dynamically generated ( I use razor), so I don't know how many <li> will generated.
So is there some way to achieve this?
use flexbox, and you can have it dynamic because you are using property flex-grow:1 in child li which will fill the remaining space available
If all items have flex-grow set to 1, the remaining space in the
container will be distributed equally to all children.
Flexbox Tutorial
.site-nav ul {
margin: 0;
background-color: #09C;
line-height: 52px;
display: flex
}
.site-nav li {
flex: 1;
font-size: 14px;
}
<nav class="site-nav">
<ul>
<li>
首页
</li>
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
</ul>
</nav>
You can play with flexbox. Check the snippet below.
.site-nav ul {
display: flex;
margin: 0;
padding: 0;
background-color: #09C;
line-height: 52px;
list-style: none;
}
.site-nav li {
flex-grow: 1;
flex-basis: 0;
font-size: 14px;
border: 1px solid white;
}
.site-nav a {
display: inline-block;
}
<nav class="site-nav">
2 columns:
<ul>
<li>
首页
</li>
<li>
1
</li>
</ul>
4 columns:
<ul>
<li>
首页
</li>
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
</ul>
8 columns:
<ul>
<li>
首页
</li>
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
首页
</li>
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
</ul>
</nav>
Hi I am looking to display my ordered list this:
so the first node and the first nested node appear on the top line and the remaining nested nodes appear under the 2nd column (under red).
Apples Red
Green
Yellow
Banana Yellow
html:
<ul class="lst" id="list_Apple">
<li>Apple</li>
<ul>
<li id="Apple">Red</li>
<li id="Apple">Green</li>
<li id="Apple">Yellow</li>
</ul>
</ul>
<ul class="lst" id="list_Banana">
<li>Banana</li>
<ul>
<li id="Banana">Yellow</li>
</ul>
</ul>
There is a slight mistake in your html. The <ul> tag should be inside a <li>.
HTML:
<ul class="lst" id="list_Apple">
<li>Apple</li>
<li>
<ul>
<li id="Apple">Red</li>
<li id="Apple">Green</li>
<li id="Apple">Yellow</li>
</ul>
</li>
</ul>
<ul class="lst" id="list_Banana">
<li>Banana</li>
<li>
<ul>
<li id="Banana">Yellow</li>
</ul>
</li>
</ul>
And add this CSS:
.lst {
clear: both;
}
.lst li {
list-style: none;
}
.lst > li {
float: left;
}
Here's a Fiddle: http://jsfiddle.net/rayg8ua9/1/
lithanks... Yes I missed the li tag.
.lst {
clear: both;
padding-top: 10px;
}
.lst li {
list-style: none;
width:100px;
}
.lst > li {
float: left;
}
I have html:
<div class="wd">
<ul id="postlist">
<li><span class="num">h1</span>
<ul>
<li><span class="dt">h2</span>
<ul>
<li><span class="pun">h3</span></li>
</ul>
</li>
</ul>
</li>
<li><span class="num">1<br/>11<br/>111</span>
<ul>
<li><span class="dt">1.1</span>
<ul>
<li><span class="pun">1.1.1</span></li>
</ul>
</li>
</ul>
</li>
<li><span class="num">2<br/>2</span>
<ul>
<li><span class="dt">2.1</span>
<ul>
<li><span class="pun">2.1.1</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
how to set with css width of #postlist 100%, .num,.dt,.pun - 33% each?
http://jsfiddle.net/mma75kq7/
You can pull that off, but you'll need to change your css a bit:
outer wrapper, .wd set it to display table & 100% width, or if you plan on having something else inside it, maybe wrap the whole thingy in a div of its own with display table and 100% width
the top <li> set it to have the width of 33.3333%
then the <ul> inside the <ul> give it a width of 66.6666%
the <li> inside the children <ul>, with .dt and another ul, set both children to display table cell, and the same for the next children
and it should get going.
Alternatively you could just use a regular <table> if you plan on displaying tabular data, instead of pouring css rules to mimic the table behavior.(seems like a awful amount of markup to pull off 'undercover' table )
Check out the demo here or the snippet bellow:
.wd {
width: 100%;
display: table;
}
ul {
display: table-cell;
vertical-align: top;
list-style: none outside none;
width: 100%;
padding: 0;
}
ul ul {
width: 66.6666%;
}
li {
vertical-align: top;
display: table;
width: 100%;
}
.num {
display: table-cell;
width: 33.3333%;
}
.dt {
display: table-cell;
width: 50%;
}
.pun {
display: table-cell;
width: 50%;
}
ul#postlist >li {
border-bottom: 1px solid black;
}
<div class="wd">
<ul id="postlist">
<li><span class="num">h1</span>
<ul>
<li><span class="dt">h2</span>
<ul>
<li><span class="pun">h3</span>
</li>
</ul>
</li>
</ul>
</li>
<li><span class="num">1<br/>11<br/>111</span>
<ul>
<li><span class="dt">1.1</span>
<ul>
<li><span class="pun">1.1.1</span>
</li>
</ul>
</li>
</ul>
</li>
<li><span class="num">2<br/>2</span>
<ul>
<li><span class="dt">2.1</span>
<ul>
<li><span class="pun">2.1.1</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
I, belatedly, offer the following simplified HTML and CSS that achieves the same result.
.wd {
width:100%;
}
ul#postlist {
display: table;
width:100%;
margin: 0;
padding: 0;
}
ul#postlist > li {
display:table-row;
}
.num, .dt, .pun {
display:table-cell;
vertical-align: top;
list-style: none outside none;
width: 33.333333333%;
border-bottom: 1px solid black;
}
<div class="wd">
<ul id="postlist">
<li>
<div class="num">h1</div>
<div class="dt">h2</div>
<div class="pun">h3</div>
</li>
<li>
<div class="num">1
<br/>11
<br/>111</div>
<div class="dt">1.1</div>
<div class="pun">1.1.1</div>
</li>
<li>
<div class="num">2.
<br/>2..</div>
<div class="dt">2.1</div>
<div class="pun">2.1.1</div>
</li>
</ul>
</div>
I am trying to make a navigation bar with a four columns submenus. I coded most of things, but when I creating the submenu I found the problem.
This is my HTML:
<div id="navigation">
<ul>
<li class="current">
Home
</li>
<li class="sub-menu">
Our Products
<div class="subnav product">
<div class="content">
<div class="col">
<ul>
<li class="one">
Main Menu Item
</li>
<li class="one">
Main Menu Item
</li>
<li class="one">
Main Menu Item
</li>
</ul>
</div>
<div class="col">
<ul>
<li class="two">
<img src="" />
Promoting Peace in the Niger Delta
</li>
<li class="three">
<img src="" />
Promoting Peace in the Niger Delta
</li>
<li class="four">
<img src="" />
Promoting Peace in the Niger Delta
</li>
<li class="five">
<img src="" />
Promoting Peace in the Niger Delta
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="">
Service Maintenance
</li>
<li class="sub-menu">
Frequently Ask Questions
<li class="sub-menu">
Our Products
<div class="subnav product">
<div class="content">
<div class="col">
<ul>
<li class="one">
Main Sub Item
</li>
<li class="one">
Main Sub Item
</li>
<li class="one">
Main Sub Item
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
Hope somebody will help me out.
Thank you.
The problem is the container width is defined at 300px
#navigation ul li > div.product {
width: 300px;
}
And its child elements are taking up 100% of that space. So you need to make sure they have room to float left.
#navigation div.col {
float: left;
height:200px;
width: 25%;
}
Hopefully that helps with your question.
Fiddle
Check this http://jsfiddle.net/qtvVK/11/embedded/result/.
I made some changes to your markup and used display:inline-block; instead of floating elements
Relevant CSS syles
/* Dropdown styles */
#navigation ul > li > ul.sub-menu {
display: none;
position:absolute;
padding:10px 0;
background:#fff;
border: 1px solid #DDDCDC;
top: 24px;
z-index: 1;
}
/* Show dropdown when hover */
#navigation ul > li:hover > ul.sub-menu {
display:block;
}
.row {
width:auto;
white-space: nowrap;
}
.col {
display: inline-block;
vertical-align: top;
padding: 0 10px;
}
i suggest using jQuery.
it has simple function called slideDown().
Here is a link to a good tutorial.
You should do like so: First hide your menu when script starts:
$("#idOfDropDownMenu").hide();
And command to drop menu down when mouse enters button and slide up when it leaves it:
$("#idOfButton").hover(function(){ //function that fires when mouse enters
$("#idOfDropDownMenu").slideDown();
}, function() { //function that fires when mouse leaves
$("#idOfDropDownMenu").slideUp();
}
Instead of using IDs you can use any CSS selector.
I hope this helps with your question.
css
ul li ul
{
display: none;
position: fixed;
margin-left: 191px;
margin-top: -37px;
}
ul li:hover ul
{
display: block;
}
ul li a:hover
{
color: #fff;
background: #939393;
border-radius:20px;
}
ul li a
{
display: block;
padding: 10px 10px;
color: #333;
background: #f2f2f2;
text-decoration: none;
}
ul
{
background: #f2f2f2;
list-style:none;
padding-left: 1px;
width: 194px;
text-align: center;
}
html
<ul>
<li>Home</li>
<li>
About
<ul>
<li>About Me
<li>About Site
</ul>
</li>
<li>Contact</li>
</ul>