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
}
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>
How can I fix the width of the dropdown menu items?
.row,
.grid-container {
border: 1px solid blue;
}
.menu>li>a {
line-height: 40px;
}
.menu>li>a:hover {
border-bottom: 1px solid red;
}
.menu ul li a {
line-height: normal;
width: 100%;
text-align: center;
}
.menu ul li:hover {
background-color: #eee;
}
.menu ul {
max-width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/css/foundation.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/js/foundation.min.js"></script>
<div class="row">
<ul class="menu align-center dropdown" data-dropdown-menu>
<li>
One
<ul class="menu vertical">
<li>One One One One One very long title</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
<script>
$(document).foundation();
</script>
As you can see I have fixed the dropdown menu items to 200px but the item with the long text is running outside the box. How can I fix the width so that the text is always inside the box? What is the correct way doing it? If the text is very long, then it should break the text into multiple lines.
Is this possible?
Try adding this class "ul.vertical li a"
and add title to the a tag
.row,
.grid-container {
border: 1px solid blue;
}
.menu>li>a {
line-height: 40px;
}
.menu>li>a:hover {
border-bottom: 1px solid red;
}
.menu ul li a {
line-height: normal;
width: 100%;
text-align: center;
}
.menu ul li:hover {
background-color: #eee;
}
ul.vertical li a {
display: inline-block;
max-width: 100%;
white-space: nowrap;
overflow: hidden!important;
text-overflow: ellipsis;
}
.menu ul {
max-width: 100px;
}
.dropdown.menu>li.opens-right>.is-dropdown-submenu{
min-width: 100px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/css/foundation.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/js/foundation.min.js"></script>
<div class="row">
<ul class="menu align-center dropdown" data-dropdown-menu>
<li>
One
<ul class="menu vertical">
<li>One One One One One very long title</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
<script>
$(document).foundation();
</script>
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>
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>
The picture below shows what I would like to get.
It is a menu within a container, where the menu may wrap to multiple lines when the window/screen gets too narrow for all menu items to fit in. At the same time I would like the menu to have a background which expands to full screen in width, while expanding in height with the menu when it gets wrapped to multiple lines. Currently I think this is not possible with CSS, but I am also just a CSS amateur. My current solution involves #media queries to set the height of the menu background for resolutions where wrapping appears. This does not take into account that font-size could change, thus making each line of menu higher.
Here is a jsFiddle with a basic setup, which does NOT what I want:
https://jsfiddle.net/n3jmyq2f/3/ (Edited, was not the final version)
Here is the code:
<div class="container">
<div class="menu_wrap">
<div class="menu_bg"></div>
<div class="menu">
<ul>
<li>item 1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ul>
</div>
</div>
<div class="content">It's me, Mario!</div>
CSS:
.container {
width:50%;
margin: 0 auto;
background:lightgreen;
height:300px;
}
.menu_bg{
position: absolute;
background: #afafaf;
width: 100%;
left:0;
height:30px;
z-index: -1;
}
ul {
height:30px;
background: #afafaf;
}
li {
display:inline-block;
}
The first option is the simplest.
Stop thinking of the .container as something that must contain everything. It's just a class that can be reused as and when required.
If you take the menu div out of the "container" but put a .container div inside you get the effect you are looking for.
JSfiddle Demo
*,
body {
padding: 0;
margin: 0;
}
.container {
width: 50%;
margin: 0 auto;
background: lightgreen;
}
.menu {
background: #afafaf;
}
ul {
border: 1px solid green;
}
li {
display: inline-block;
}
.content {
height: 300px;
}
<div class="menu">
<div class="container">
<ul>
<li>item 1
</li>
<li>item2
</li>
<li>item3
</li>
<li>item4
</li>
<li>item5
</li>
<li>item6
</li>
</ul>
</div>
</div>
<div class="container">
<div class="content">It's me, Mario!</div>
</div>
2nd Option
Use a pseudo-element
*,
body {
margin: 0;
padding: 0;
}
.container {
width: 50%;
margin: 0 auto;
background: lightgreen;
height: 300px;
}
ul {
background: #afafaf;
position: relative;
border: 1px solid green;
}
ul:before {
content: '';
position: absolute;
height: 100%;
background: inherit;
width: 100vw;
left: 50%;
transform: translateX(-50%);
z-index: -1
}
li {
display: inline-block;
}
<div class="container">
<div class="menu">
<ul>
<li>item 1
</li>
<li>item2
</li>
<li>item3
</li>
<li>item4
</li>
<li>item5
</li>
<li>item6
</li>
</ul>
</div>
<div class="content">It's me, Mario!</div>
</div>
JSfiddle Demo
if in .container you change
width:50%;
to
width:100%;
it will do it
fiddle
you could also use the .menu-wrap class (which I've seen in your markup) to do this