How can I change other to right side?
li{
display: inline;
}
#main{
float: left;
}
#other{
float: left;
}
<nav id="other">
<ul>
<li>other</li>
</ul>
</nav>
<nav id="main">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</nav>
This should be like this:
one two three other
But not like this:
one two three other
PS: I cannot change the html.
I know this can be done with absolute positioning but this would be very expensive for responsive design. Thus looking around other solution.
A quick way to achieve this is to put into a containing element which is floated left and then float both of the ul's to the right. As #other comes first it will be floated right first.
ul {
margin: 0;
padding: 0;
margin-right: 5px;
}
li {
display: inline;
}
#main,
#other {
float: right;
}
div {
text-align: left;
float: left;
display: inline;
}
<div>
<nav id="other">
<ul>
<li>other</li>
</ul>
</nav>
<nav id="main">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</nav>
</div>
Remove the float: left from your #other element and instead set that element's display to inline-block.
Then to adjust the placement you can remove the padding-left from the inner ul element and space it apart from the #main element with some margin-left instead:
li{
display: inline;
}
#other {
display: inline-block;
}
#other ul {
padding-left: 0;
margin-left: 5px;
}
#main{
float: left;
}
<nav id="other">
<ul>
<li>other</li>
</ul>
</nav>
<nav id="main">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</nav>
Check this snippet
li {
display: inline-block;
}
#main {
float: left;
}
#other {
position: absolute;
text-align: right;
left: 100px;
}
<nav id="other">
<ul>
<li>other</li>
</ul>
</nav>
<nav id="main">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</nav>
Related
I am creating a menu using an unordered list that mixes list items of different sizes, some are half the height and width of others. They all float left. What I'm getting is this:
If I add clear:left to the third small item I get this:
What I want is for the second and fourth (or third and forth) small items to float below the other two, like this:
Is there a way to do this with css? The menu is created dynamically so forcing a particular position won't work, it needs to be able to flow into the proper position.
Would having multiple <ul/> work for you ? If so, the following Codepen would work : https://codepen.io/anon/pen/qPaVar
Same code as an embedded code snippet :
ul {
list-style : none;
padding: 0;
margin: 0;
text-align: center
}
li {
margin: 0
}
li.left {
float: left
}
div.small {
background-color: blue;
width: 20px;
height: 20px
}
div.large {
background-color: yellow;
width: 40px;
height: 40px;
}
<ul>
<li class="left">
<div class="large">A</div>
</li>
<li class="left">
<ul>
<li class="left">
<div class="small">1</div>
</li>
<li class="left">
<div class="small">2</div>
</li>
</ul>
<ul>
<li class="left">
<div class="small">3</div>
</li>
<li class="left">
<div class="small">4</div>
</li>
</ul>
</li>
<li class="left">
<div class="large">B</div>
</li>
</ul>
Hope this helps!
Try the grid-auto-flow: dense
https://developer.mozilla.org/ru/docs/Web/CSS/grid-auto-flow
try this
.main li {
display: inline-block;
vertical-align: middle !important;
width: 200px;
height: 200px;
border: 1px solid;
}
.inner-div li {
width: 99px;
height: 89px;
display: inline-block;
list-style: none;
padding: 0;
margin: 0;
float: left;
text-align: center;
}
ul.inner-div {
list-style: none;
padding: 0;
}
<div class="container">
<ul class="main">
<li>div 1</li>
<li>div 2
<ul class="inner-div">
<li>div 21</li>
<li>div 21</li>
<li>div 21</li>
<li>div 21</li>
</ul>
</li>
<li>div 3</li>
</ul>
</div>
I have a centered LI's UL (like those default navigation bars...) - see code below.
Now i want to make a little weird adjustment to that. i want the last li to stay sticked to the left of the last li before him (just like float: left) but without him taking space in the ul, so the other li's will be in the center and he will just be sticking in the side (maybe just like an absolute position's element will...). another thing is i that i need to work when this weird li is alone in the ul also. here is an image that explains better:
weird sticky li image before and after
and here is a codepen playground with that.
Also a built-in one here:
*{font-size:24px;text-align:center;}
.con { background: #aaa; }
.navbar { background: #eee; width:70%;margin:auto;}
.navbar li{display:inline-block; padding: 4px 8px; border: 1px solid blue;}
.last{color:red;}
.afterlast{margin-right:-78.6px;}
BEFORE:
<div class="con">
<nav class="navbar">
<ul class="nav">
<li>HOME</li>
<li>ABOUT</li>
<li>STUFF</li>
<li>CONTACT</li>
<li class="last">WEIRD</li>
</ul>
</nav><!-- /.navbar -->
</div>
AFTER:
<div class="con">
<nav class="navbar">
<ul class="nav">
<li>HOME</li>
<li>ABOUT</li>
<li>STUFF</li>
<li>CONTACT</li>
<li class="last afterlast">WEIRD</li>
</ul>
</nav><!-- /.navbar -->
</div>
Now I prefer a pure css solution if possible and of course it should be responsive.
So, combining the answer and comments made by the grateful users, this is the best answer (pure css):
Using absolute positioning.
Using the :first-child:last-child to set position to relative when the weird li is alone.
Here it is live:
* {
font-size: 24px;
text-align: center;
}
.con {
background: #aaa;
}
.navbar {
background: #eee;
width: 70%;
margin: auto;
}
.navbar ul {
padding: 0;
}
.navbar li {
display: inline-block;
padding: 4px 8px;
border: 1px solid blue;
}
.last {
color: red;
}
.afterlast:last-child {
position: absolute;
margin-left: .25em;
}
.afterlast:first-child:last-child {
position: relative;
margin-left: 0;
}
<h2>BEFORE:</h2>
<div class="con">
<nav class="navbar">
<ul class="nav">
<li>HOME</li>
<li>ABOUT</li>
<li>STUFF</li>
<li>CONTACT</li>
<li class="last">WEIRD</li>
</ul>
</nav>
<!-- /.navbar -->
</div>
<h2>AFTER:</h2>
<div class="con">
<nav class="navbar">
<ul class="nav">
<li>HOME</li>
<li>ABOUT</li>
<li>STUFF</li>
<li>CONTACT</li>
<li class="last afterlast">WEIRD</li>
</ul>
</nav>
<!-- /.navbar -->
</div>
<h2>AFTER ALONE:</h2>
<div class="con">
<nav class="navbar">
<ul>
<li class="last afterlast">WEIRD</li>
</ul>
</nav>
<!-- /.navbar -->
</div>
Thanks to: #sorayadragon, #JaKhris and #Michael Coker.
You'll have to add an additional class to that li element when it's by itself so you can adjust the styles and make it take up space again. I added the .aloneweird class and adjusted its styles. Additionally, I removed the padding-left from the ul element which was making it uncentered.
* {
font-size: 24px;
text-align: center;
}
.con {
background: #aaa;
}
.navbar {
background: #eee;
width: 70%;
margin: auto;
}
.navbar ul {
padding-left: 0;
}
.navbar li {
display: inline-block;
padding: 4px 8px;
border: 1px solid blue;
}
.last {
color: red;
}
.afterlast {
position: absolute;
margin-left: .25em;
}
.aloneweird {
position: relative;
margin-left: 0;
}
<h2>AFTER:</h2>
<div class="con">
<nav class="navbar">
<ul class="nav">
<li>HOME</li>
<li>ABOUT</li>
<li>STUFF</li>
<li>CONTACT</li>
<li class="last afterlast">WEIRD</li>
</ul>
</nav>
<!-- /.navbar -->
</div>
<h2>ALONE:</h2>
<div class="con">
<nav class="navbar">
<ul class="nav">
<li class="last afterlast aloneweird">WEIRD</li>
</ul>
</nav>
<!-- /.navbar -->
</div>
I've searched around and found a lot of questions about this problem, but none of the answers I tried seemed to work in my case. So I have a unordered list inside of the nav tag and I want the list to be centered relative to the parent nav tag. But the list is always a bit to the right and never in the center no matter what I tried.
HTML pretty straight forward:
<nav>
<ul>
<li>MENU</li>
<li>Opt 1</li>
<li>Opt 2</li>
<li>Opt 3</li>
</ul>
</nav>
Here is the CSS so far:
nav {
float: left;
width:15%;
margin: 0;
padding:0;
background:gray;
text-align:center;
}
nav ul {
list-style-type: none;
color:blue;
}
Any ideas how can I get this to work?
try this
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
this is because ul have a padding and margin applied to it by browsers by default you need to remove them
nav {
float: left;
width: 50%;
margin: 0;
padding: 0;
background: gray;
text-align: center;
}
nav ul {
list-style-type: none;
color: blue;
margin: 0;
padding: 0;
}
<nav>
<ul>
<li>MENU</li>
<li>Opt 1
</li>
<li>Opt 2
</li>
<li>Opt 3
</li>
</ul>
</nav>
Test this:
<nav>
<ul>
<li>MENU</li>
<li>Opt 1</li>
<li>Opt 2</li>
<li>Opt 3</li>
</ul>
</nav>
nav {
display:table;
margin:0 auto;
padding : 10px;
}
EDIT: in theory i think i could accomplish this by having a dummy ul between the 2 level and then positioning the 'second (now 3rd) level. Crude proof of concept > http://jsfiddle.net/petergus/jk7vU/
I have a horizontal dropdown menu that I am trying to get to stretch its parent div height.
The problem I run into is the child ul. In order to get it to sit on a line below the main menu I have to use position: absolute but that takes it out of the flow.
Is it even possible to have a multilevel horizontal list without set container height?
EDIT: Here is an illustration screenshot of what i am trying to accomplish. EXCEPT the content (black text behind) should slide down.
Here is how the content slides down >
as far as i can tell this is simple a problem of position: relative vs absolute
Please see a sample setup at http://jsfiddle.net/petergus/nC32t/
HTML:
<div class="mnavwrapper">
<div id="mnav">
<ul class="menu clearfix">
<li class="first expanded">
<span title="" class="nolink">Click me here</span>
<ul class="submenu clearfix">
<li class="first leaf">consultancy</li>
<li class="leaf">daylight</li>
<li class="leaf">solutions</li>
<li class="leaf">design</li>
<li class="leaf">something</li>
<li class="last leaf">team</li>
</ul>
</li>
<li class="expanded"><span title="" class="nolink">portfolio</span>
<ul class="submenu clearfix">
<li class="first leaf">all projects</li>
<li class="leaf">commercial</li>
<li class="leaf">public</li>
<li class="leaf">private</li>
<li class="leaf">something</li>
</ul>
</li>
<li class="expanded"><span title="" class="nolink">another</span>
<ul class="submenu clearfix">
<li class="first leaf">techniques </li>
<li class="last leaf">influences</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="contentbody">
<p>Hello text</p>
</div>
CSS:
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
ul.menu {
/*display: inline-block;*/
list-style: none;
clear: both;
width: 100%;
display: block;
position:relative;
}
ul.menu li {
/*float: left;*/
padding: 0px 10px;
display: inline;
}
ul.menu li {
float: left;
}
ul.submenu {
list-style: none;
position: absolute;
width: 100%;
}
ul.submenu li {
float: left;
}
.mnavwrapper {
/*clear: both;*/
}
#mnav {
background: lightblue;
/*float: left;*/
width: 100%;
}
#contentbody {
background: pink;
}
p {
padding: 0px;
margin: 0px;
}
jQuery:
$('.active-trail').addClass('selected');
$('ul.menu .nolink').click(function() {
$(this).parent().toggleClass('selected').end().next('ul').slideToggle().parent().siblings('li').find('ul').slideUp(150).parent().removeClass('selected');
});
I think this is what you want:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8"
http-equiv="Content-Type" />
<title>test doc</title>
<style type="text/css">
ul {
display: table;
padding: 0;
}
li {
display: inline-block;
white-space: nowrap;
width: 13em;
}
li li {
display: none;
width: auto;
}
li:hover li {
display: inline-block;
}
</style>
</head>
<body>
<p>dfhg</p>
<ul>
<li>Hover here for sub-menu
<ul>
<li>daylight</li>
<li>solutions</li>
<li>design</li>
<li>something</li>
<li>team</li>
</ul>
</li>
<li>Yet another sub-menu
<ul>
<li>daylight</li>
<li>solutions</li>
<li>design</li>
<li>something</li>
<li>team</li>
</ul>
</li>
</ul>
<p>Hello text</p>
</body>
</html>
cheers,
gary
something like this?: http://jsfiddle.net/chanckjh/DDeRT/
html:
<div class="nav">
<ul>
<li class="nav1">nav
<ul>
<li>sub</li>
<li>sub</li>
<li>sub</li>
<li>sub</li>
</ul>
</li>
<li class="nav2">nav2
<ul>
<li>sub</li>
<li>sub</li>
<li>sub</li>
<li>sub</li>
</ul>
</li>
</ul>
</div>
css:
.nav > ul >li{
display: inline;
position: absolute;
}
.nav1{
left: 50px;
}
.nav2{
left: 100px;
}
.nav > ul >li > ul > li{
display: none;
}
.nav > ul >li:hover > ul > li{
display: inline;
}
On the .master file i have...
<div id="menu">
<ul>
<li class="1">One</li>
<li>Two</li>
</ul>
</div>
<div id="Div1">
<ul>
<li class="1">Three</li>
<li>Four</li>
</ul>
</div>
and on the css file i have
#menu {
width: 940px;
height: 49px;
margin: 0 auto;
padding: 0;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}
So how can use the same style "#menu" both for the <div id="menu"> AND the <div id="Div1"> ?
You can target both elements:
#menu, #Div1 {
but the more clean way is probably to use a class to set the properties:
.default_menu {
and giving that class to both elements:
<div id="menu" class="default_menu">
......
<div id="Div1" class="default_menu">
classes are independent from a specific element, and usually the better option. Use classes where possible, and IDs only in very, very specific cases of unique elements.
You can also assign multiple classes - as many as you want - to one element:
<div id="menu" class="default_menu menu_big">
if a property was set in both default_menu and menu_big, the setting from menu_big will override the first one.
Make use of classes like (you may change the name .menu to something which makes sense for the two div´s):
.menu {
width: 940px;
height: 49px;
margin: 0 auto;
padding: 0;
}
.menu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}
And:
<div class="menu" id="menu">
<ul>
<li class="1">One</li>
<li>Two</li>
</ul>
</div>
<div class="menu" id="Div1">
<ul>
<li class="1">Three</li>
<li>Four</li>
</ul>
</div>
Either use a class
<div class="menu">...</div>
And in your css
.menu {...}
OR target both divs
#menu, #Div1 {
....
}
You have to use classes instead of ids for that reusable styles:
<div id="menu" class="menu">
<ul>
<li class="1">One</li>
<li>Two</li>
</ul>
</div>
<div id="Div1" class="menu">
<ul>
<li class="1">Three</li>
<li>Four</li>
</ul>
</div>
And the css:
.menu {
width: 940px;
height: 49px;
margin: 0 auto;
padding: 0;
}
.menu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}
You can try and target both divs:
div#menu, div#Div1 {
css goes here
}