How can I make this have the buttons in the same column as each other?
ul
li
p button
p button
using flexbox
if the p has different width the buttons are shifted.
Flexbox has no grid notion.
Instead, you can use CSS tables
ul {
display: table;
}
li {
display: table-row;
}
p, button {
display: table-cell;
}
<ul>
<li>
<p>Short</p>
<button>Foo</button>
</li>
<li>
<p>Long long long text</p>
<button>Bar</button>
</li>
</ul>
Related
I am hoping to have a navigation bar run across the entire screen, with a purple background and a to have a the menu sit in the middle of the bar. Right now I cant get the background color to work.
My Css:
div#main-navigation {
background-color: #AC56B8;
width: 100%;
height: 100px;
}
My Html:
<div class="main-navigation">
<ul id="menu">
<li>HOUSE</li>
<li>BABY</li>
<li>MORE</li>
<li>ABOUT</li>
</ul>
</div>
You are using wrong css selector # is for ids, to select element by class you have to use ., so the first line of your CSS must be: div.main-navigation {
Look for this:
Replace div#main-navigation for div.main-navigation
div.main-navigation {
background-color: #AC56B8;
width: 100%;
height: 100px;
}
<div class="main-navigation">
<ul id="menu">
<li>HOUSE</li>
<li>BABY</li>
<li>MORE</li>
<li>ABOUT</li>
</ul>
</div>
Write . instead of #
# is for id, . is for class.
I have a menu within a ul li and I'd like to change the background image for only one of the menu items.
In the css below the current background image is menu-ul.jpg and I need the additional background image for the "Capsules" menu item to be menu-ul2.jpg
Here's my current menu html:
<ul class="menu">
<li><strong>home</strong><span></span></li>
<li><strong>Products</strong><span></span>
<ul>
<li>Dew Drops</li>
<li>Capsules</li>
<li>Salvation Balm</li>
</ul>
Here's the piece of css that deals with the background image for the menu items:
.menu ul {
position: absolute;
padding: -3px 10px;
top: -999em;
width: 107px;
background: url(../images/menu-ul.jpg) left top repeat;
}
Any help would be greatly appreciated...thanks.
Meg
You can reach that effect by adding a class to the list item you want to change.
Add this to your CSS
.menu ul li.capsule {
background: url(../images/menu-ul2.jpg)
}
And this in your html
<li class="capsule">Capsules</li>
Off course there are many other ways...
I need to target only specific li in an ul but I can't add a Class to solve my issue. I guess there's a way using Javascript, but it would be my last resort.
To explain:
<div>
<ul>
<li>Start</li>
<li>Previous</li>
<li>>1</li> <!--need to target this-->
<li>2</li> <!--need to target this-->
<li>3</li> <!--need to target this-->
<li--in future a new li will be generated--/li>
<li>Next</li>
<li>End</li>
</ul>
This example is only the general idea as my jsFiddle contains more info such as span and classes.
http://jsfiddle.net/8aW77/
note: I looked for special and advanced selectors but I couldn't find one that fits my case.
Preferably you'd assign classes to the elements you do have control over, such as Start, Previous, Next and End. When you've done that, it's easy to style the other elements.
<ul>
<li class="static">Start</li>
<li class="static">Previous</li>
<li>>1</li> <!--need to target this-->
<li>2</li> <!--need to target this-->
<li>3</li> <!--need to target this-->
<li--in future a new li will be generated--/li>
<li class="static">Next</li>
<li class="static">End</li>
</ul>
Thus the CSS would look like:
UL LI {
color: green;
}
UL LI.static {
color: red;
}
This would be the most straight-forward solution. However, if you can't add those classes to the "static" LI-tags but you know that the DOM-structure will look the same then use CSS such as this:
UL LI {
color: green;
}
UL LI:first-child,
UL LI:nth-child(2),
UL LI:nth-last-child(2),
UL LI:last-child {
color: red;
}
I'm having a trouble with the menu widget.
I want to have a menu item that has a custom layout as a content. Very similar to what is shown in this demo: http://demos.kendoui.com/web/menu/index.html
The "Stores" item has a custom layout, and when I click inside, the menu isn't closed, which is the behavior I want. But if I copy the code shown below to my own project, when I click inside, the menu is closed... I don't want this behavior.
Why this happen in my project and not in the demo example? How can I solve this? Maybe some javascript library in conflict?
In items that have regular items, the behavior is the same in both...
Code (copied from the demo page):
<div id="example" class="k-content">
<div id="megaStore">
<ul id="menu">
<li>
Products
<ul>
<li>
Furniture
<ul> <!-- moving the UL to the next line will cause an IE7 problem -->
<li>Tables & Chairs</li>
<li>Sofas</li>
<li>Occasional Furniture</li>
<li>Childerns Furniture</li>
<li>Beds</li>
</ul>
</li>
<li>
Decor
<ul> <!-- moving the UL to the next line will cause an IE7 problem -->
<li>Bed Linen</li>
<li>Throws</li>
<li>Curtains & Blinds</li>
<li>Rugs</li>
<li>Carpets</li>
</ul>
</li>
<li>
Storage
<ul> <!-- moving the UL to the next line will cause an IE7 problem -->
<li>Wall Shelving</li>
<li>Kids Storage</li>
<li>Baskets</li>
<li>Multimedia Storage</li>
<li>Floor Shelving</li>
<li>Toilet Roll Holders</li>
<li>Storage Jars</li>
<li>Drawers</li>
<li>Boxes</li>
</ul>
</li>
<li>
Lights
<ul> <!-- moving the UL to the next line will cause an IE7 problem -->
<li>Ceiling</li>
<li>Table</li>
<li>Floor</li>
<li>Shades</li>
<li>Wall Lights</li>
<li>Spotlights</li>
<li>Push Light</li>
<li>String Lights</li>
</ul>
</li>
</ul>
</li>
<li>
Stores
<ul>
<li>
<div id="template" style="padding: 10px;">
<h2>Around the Globe</h2>
<ol>
<li>United States</li>
<li>Europe</li>
<li>Canada</li>
<li>Australia</li>
</ol>
<img src="../../content/web/menu/map.png" alt="Stores Around the Globe" />
<button class="k-button">See full list</button>
</div>
</li>
</ul>
</li>
<li>
Blog
</li>
<li>
Company
</li>
<li>
Events
</li>
<li disabled="disabled">
News
</li>
</ul>
</div>
<style scoped>
#megaStore {
width: 600px;
margin: 30px auto;
padding-top: 120px;
background: url('../../content/web/menu/header.jpg') no-repeat 0 0;
}
#menu h2 {
font-size: 1em;
text-transform: uppercase;
padding: 5px 10px;
}
#template img {
margin: 5px 20px 0 0;
float: left;
}
#template {
width: 380px;
}
#template ol {
float: left;
margin: 0 0 0 30px;
padding: 10px 10px 0 10px;
}
#template:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#template .k-button {
float: left;
clear: left;
margin: 5px 0 5px 12px;
}
</style>
<script>
$(document).ready(function() {
$("#menu").kendoMenu();
});
</script>
</div>
I found the problem.
I was using an old version of kendo (2013.1.514). When I updated to the latest (2013.2.716) the problem was gone.
Is it possible to not have the top bar in Foundation to collapse to Menu and the three lines? We don't really need this feature but not sure how to disable the collapse.
Will this require modifying the foundation.topbar.js?
If you're using Foundation via sass, there's an even better way to go about it.
Just open up the _settings.scss file and find this line:
// $topbar-breakpoint: emCalc(940px); // Change to 9999px for always mobile layout
Uncomment it and change the value to 0, or whatever breaking point you would like to use.
Things have changed in foundation 5.1.1 and this worked for me in the css: changed
#media only screen and (min-width: 40.063em) {
.top-bar {
to
#media only screen and (min-width: 4.063em) {
.top-bar {
Yes, it's possible to not show the default nav menu for small-screens with the menu toggle icon without modifying any js files. Foundation 4 uses a series of visibility classes to show and hide elements on the screen along with media queries.
As an example here's the main navigation for Zurb's demo site linked above:
<nav class="top-bar hide-for-small" style="">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1>Foundation</h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="divider"></li>
<li class="">Features</li>
<li class="divider"></li>
<li class="">Add-ons</li>
<li class="divider"></li>
<li class="">Case Studies</li>
<li class="divider"></li>
<li class="">Docs</li>
<li class="divider"></li>
<li class="">Training</li>
<li class="divider"></li>
<li class="has-form">
Getting Started
</li>
</ul>
</section></nav>
As you can see it's simple to remove the .menu-icon class or even the li; if you look at line 2816 of docs.css you can see that a minimum screen breakpoint (58.75em) is set for the .top-bar class:
#media only screen and (min-width: 58.75em) {
.top-bar {
background: #111111;
*zoom: 1;
overflow: visible; }
.top-bar:before, .top-bar:after {
content: " ";
display: table; }
.top-bar:after {
clear: both; }
.top-bar .toggle-topbar {
display: none; }
.top-bar .title-area {
float: left; }
.top-bar .name h1 a {
width: auto; }
...
Since F4 is built with a mobile first design approach by default the menu is set for small screens. At a minimum width of 58.75 em, the breakpoint is set to modify the default .top-bar view for larger screens so that the menu ul is displayed inline and the child li are floated left.
You can override the .top-bar so that this is the default view by overriding the corresponding lines of css/scss or even the global variables.
If you're working directly with the Foundation CSS, you can override the mobile mode of the .top-bar menu by changing the breakpoints in the following lines of CSS to 0em:
.top-bar-js-breakpoint {
width: 58.75em !important;
visibility: hidden; }
.js-generated {
display: block; }
#media only screen and (min-width: 58.75em) {
----- numerous lines below -------
However, if you're working with a child theme in WordPress or another CMS, you have to copy all of the .top-bar related selectors below the actual media query and paste them into your child CSS, then change the breakpoints to 0. Works like a charm.