For some reason I can't display one <li> right next to each other:
ul {
padding: 0;
margin: 0;
}
li {
display: inline-block;
width: 100%;
height: 100%
}
.bg1 {
background-color: red;
}
.bg2 {
background-color: #000;
}
<ul>
<li class="bg1">item 1</li>
<li class="bg2">item 2</li>
</ul>
that code should produce a red page (because the first <li> has a red background)
I want to create a carousel with Javascript but before getting to that point I need to fix this. thank you.
The main problem is the width: 100% in the li rule: It forces the li element to be the whole width of its container (ul / body). Set it to a fixed width, a smalelr percentage or leave it out and just use padding similar to my example below.
ul {
padding: 0;
margin: 0;
}
li {
display: inline-block;
padding: 10px 30px;
}
.bg1 {
background-color: red;
}
.bg2 {
background-color: #000;
color: #fff;
}
<ul>
<li class="bg1">item 1</li>
<li class="bg2">item 2</li>
</ul>
you have to add something like this in your css code
body, html{
height: 98%;
padding: 0;
}
to give your body the full page size then give li who is inside body the full size that will get it from body size
Related
So I have two (or potentially more) elements that I want to occupy the same space. They need to fit inside a container element whose size should be automatically made large enough to contain them. I currently have a couple of possibilities that don't quite work, shown below:
.first {
display: inline-block;
position: relative;
border: 1px solid black;
padding: 1px;
}
.first > li {
display: block;
padding: 0px;
margin: 0px;
position: relative;
}
.second {
display: inline-block;
position: relative;
border: 1px solid black;
padding: 1px;
}
.second > li {
display: block;
padding: 0px;
margin: 0px;
position: absolute;
}
.third {
display: inline-block;
border: 1px solid black;
padding: 1px;
}
.third > li {
padding: 0px;
margin: 0px;
float: left;
margin-right: -100%;
}
<div style="float:right; width: 75%">(Attempt 1: note that the two items are not superimposed, but the container is large enough to hold them)</div>
<ul class="first">
<li>Item number 1</li>
<li>Item number 2</li>
</ul>
<br><br>
<div style="float:right; width: 75%">(Attempt 2: note that this time they are superimposed, but no space is allocated in the container for them)</div>
<ul class="second">
<li>Item number 1</li>
<li>Item number 2</li>
</ul>
<br><br><br><br>
Edited to add a third attempt:<br>
<ul class="third">
<li>Item number 1</li>
<li>Item number 2</li>
</ul>
Ideally I'm looking for a pure CSS solution, but it only needs to work on webkit-based browsers (i.e. chrome / safari).
Updated: add a third attempt that gets the two items overlapping, but allocates enough space to hold both of them side by side, which still doesn't really get me where I want to be.
For reference: I don't know the sizes of the items in advance, so can't (for example) size the container to hold the largest and make the rest overlap it.
like this?
ul {
display: inline-block;
position: relative;
border: 1px solid black;
padding:0; margin:0;
}
ul li {
display: block;
position: absolute;
top:0; left:0;
}
ul li:nth-child(1) {
position:relative;
}
<ul>
<li>Item number 1</li>
<li>Item number 2</li>
</ul>
absolute positioning:
Setting position: absolute on all <li> elements, then setting position: relative on the .current (there are many ways to select a dominant <li> and using a class is just one of them) <li> gives what I think you're after.
We can then set the visibility of every <li> to hidden, and set the visibility of .current to visible to reduce the visual clutter:
ul {
display: inline-block;
padding: .2em .3em;
list-style: none;
border: 2px solid black;
}
li {
position: absolute;
visibility: hidden;
}
li.current {
position: relative;
visibility: visible;
}
<ul>
<li>a</li>
<li>abc</li>
<li>abcdefg</li>
<li>foo bar baz</li>
<li>i dunno lol</li>
<li class="current">42</li>
</ul>
This approach is effectively identical to using display none and list-item:
ul {
display: inline-block;
padding: .2em .3em;
list-style: none;
border: 2px solid black;
}
li {
display: none;
}
li.current {
display: list-item;
}
<ul>
<li>a</li>
<li>abc</li>
<li>abcdefg</li>
<li>foo bar baz</li>
<li>i dunno lol</li>
<li class="current">42</li>
</ul>
Or for the container to always be wide enough for the longest string:
Setting the height of every <li> to 0 and giving just the .current its initial height back to push the <ul>'s border out, we get something like this:
ul {
display: inline-block;
padding: .2em .3em;
list-style: none;
border: 2px solid black;
}
li {
height: 0;
visibility: hidden;
}
li.current {
height: initial;
visibility: visible;
}
<ul>
<li>a</li>
<li>abc</li>
<li>abcdefg</li>
<li>foo bar baz</li>
<li>i dunno lol</li>
<li class="current">42</li>
</ul>
Using JavaScript :O
Although the question calls for a CSS solution, where that might be impossible or unreliable, we can always rely on JS.
In the case that both the width and height of the child <li>s may be different, and that the container should be both wide and high enough for every child, JS provides.
The method below uses getComputedStyle to get the width and height of the relatively rendered <li> elements, and sets position: absolute on them all as they're read.
The parent <ul> then has its width and height set to the largest width and heights of the child <li>s.
The result is a <ul> that's wide and high enough to contain every child <li>, but with all the children positioned absolutely;
var widths = [], heights = [];
// loop through all the li elements
document.querySelectorAll( "li" ).forEach( function( v ) {
// get the computed styles for each li element
var ecs = window.getComputedStyle( v );
// push the width into the widths array
widths.push( ecs.width );
// push the height into the heights array
heights.push( ecs.height );
// set position:absolute on this li element
v.style.position = "absolute";
} );
document.querySelector( "ul" ).setAttribute( "style",
/* sort the widths array and pop the last (and therefore largest) value
then apply it to the width of the ul. */
"width:" + widths.sort().pop() +
/* sort the heights array and pop the last (and therefore largest) value
then apply it to the height of the ul. */
";height:" + heights.sort().pop()
);
ul {
display: inline-block;
padding: .2em .3em;
list-style: none;
border: 2px solid black;
}
li {
visibility: hidden;
}
li.current {
visibility: visible;
}
<ul>
<li>a</li>
<li>abc</li>
<li>abcdefg<br>1234567</li>
<li>foo bar baz</li>
<li>i dunno lol</li>
<li class="current">42</li>
</ul>
display: flex and visibility: hidden
I was wondering if visibility: collapse might be useful, and found a CSS-tricks.com article linking to a csswg.org draft suggesting that visiblity: collapse may be used on <li>s with display: flex to acheive pretty much exactly what you're after.
I couldn't get it to work, and noticed that their own example was not using either display: flex or visibility: collapse!
They are instead manipulating the heights of the children.
Since it is a draft, this may become a useable solution down the road.
I am unfamiliar with the use of flexboxes (deep shame) so wouldn't be surprised if a solution using them exists. I just don't (at this time) know it.
Why not do it like this:
.second > li {
display: inline-block;
padding: 0px;
margin: 0px;
position: absolute;
border-top: 1px solid black;
border-bottom: 1px solid black;
padding: 1px;
left:0;
}
.second > li:first-child {
border-left: 1px solid black;
}
.second > li:last-child {
border-right: 1px solid black;
}
<ul class="second">
<li>Item number 1</li>
<li>Item number 2 greater length</li>
</ul>
First, you should include your two elements inside a container div that you want to have and write property as:
position: absolute;
top: 0;
left: 0;
And, make your container position property as:
position: relative
How can i create a marker that appears on top of the menu list items when i hover over them ?Like the one they have here .
It's possible to create with only css ?
EDIT:I don't want the code from you , i just want some tips because i don't know from where to start.
Here is a minimal example of what you want to achieve. The most important parts are the :before pseudo element and the position: relative of <a>. Please notice that the width of those "markers" is the width property of your pseudo element. (In this case it's 2px). Here is the CSS-Part of the marker pseudo element.
a:hover:before {
content:"";
width: 2px;
height: 20px;
background: #000;
position: absolute; /* Only works well when the parent is 'position:relative' */
left: 50%;
top: -10px;
}
Minimal Example Snippet
html * {
box-sizing: border-box;
}
ul {
list-style: none;
}
ul > li {
display: inline-block;
}
li > a {
padding: 5px 10px;
position: relative;
}
a:hover:before {
content: "";
width: 2px;
height: 20px;
background: #000;
position: absolute;
left: 50%;
top: -10px;
}
<ul>
<li>Item 1
</li>
<li>Item 2
</li>
<li>Item 3
</li>
<li>Item 4
</li>
<li>Item 5
</li>
</ul>
If you have a simple navigation along the lines of:
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
...then you can create a basic hover effect using the :hover CSS pseudo-class:
ul li a:hover {
border-top: 2px solid black;
}
If we're talking just CSS, have a look at the :hover pseudo class.
This can be combined with visiblity to create something like this:
span {
visibility: hidden;
font-weight: bold;
}
p:hover span {
visibility: visible;
}
<p><span>| </span>hello</p>
Try this only CSS:
CSS
.menu-wrap {
overflow: hidden;
width: 100%;
height: auto;
position:relative;
}
.menu-wrap div{
position:relative;
margin-top:100px;
display:inline-block;
border:2px solid red;
width:100px;
height:10px;
padding:10px;
}
.menu-wrap div:hover:before{
content:'|'; /*--------you can put image here as marker*/
position:absolute;
bottom:40;
font-size:1.3em;
margin-left:50px;
font-weight:bold;
}
HTML
<div class="menu-wrap">
<div class="menu-item"></div>
<div class="menu-item"></div>
<div class="menu-item"></div>
</div>
See if it is what you want.
I am having difficulty removing the white space to the left of my vertical nav bar.
I have tried setting padding-left to 0 on my main-bar.
It's my first time building a nav bar, so if you see something semantically wrong with my codes, do let me know as well.
Thank you!
This is the HTML code.
<title>Mockup of Zopim</title>
<body>
<main>
<nav class = "side-bar">
<ul class ="main-bar">
<li class="user-nav"><a class ="big-box" href="#">User</a></li>
<li class="main-nav">Home</li>
<li class="main-nav">Visitor List</li>
<li class="main-nav">Visualization</li>
<li class="main-nav">History</li>
<li class="divider-nav">Manage</li>
<li class="manage-nav">Agents</li>
<li class="manage-nav">Departments</li>
<li class="manage-nav">Shortcuts</li>
<li class="manage-nav">Banned Visitors</li>
<li class="manage-nav">Triggers</li>
<li class="divider-nav">Settings</li>
<li class="settings-nav">Widgets</li>
<li class="settings-nav">Personal</li>
<li class="settings-nav">Accounts</li>
</ul>
</nav>
<article>
<header>
<h1>Hello!</h1>
</header>
</article>
</main>
</body>
This is the CSS code.
#charset "utf-8";
/* CSS Document */
body {
background-color: black;
}
main {
width: 100%;
}
.side-bar {
width: 15%;
height: 100%;
background-color: #585858;
position: relative;
float: left;
}
nav li {
list-style: none;
}
.main-bar {
padding-left: 0px;
}
.main-bar li a {
display: block;
width: 100%;
height: 100%;
line-height: 2.5em;
text-decoration: none;
color: white;
text-align: center;
}
article {
width: 60%;
height: 30%;
float: right;
position: relative;
}
a.big-box {
display: block;
line-height: 7em;
}
header h1 {
color: white;
}
Here is the JSfiddle link.
http://jsfiddle.net/codermax/fe0L3d08/
Most Web browsers have different default settings for the base margins and padding. So The best way to solve this is to set all the margin and padding
*{
margin:0;
padding:0;
}
or
html,body {
margin:0;
padding:0;
}
Also better if you reset your css then you can use. something like this:
http://necolas.github.io/normalize.css/
You'll want to use a reset.css to resolve different browser quirks.
I've updated your sample and set body margin, and padding to 0.
body {
margin:0;
padding:0;
}
http://jsfiddle.net/fe0L3d08/1/
I have an unordered inline horizontal list menu, when my mobile media query kicks in I want the css to change so that it has a parent item called 'menu' that when clicked displays the menu child links in a vertical list.
What is the best way to achieve this?
Should I create both types of menu and use css to switch their visibility or is there a way I can make the first menu become the new second menu?
Any help would be really appreciated. I am sure switching between hidden css property on each would work but I wasn't sure how semantic friendly this would be etc?
Cheers
Righto, it took a bit of work but I've created a working example of what you're after here
HTML
Open / Close
<ul id="navigation">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>
Item 5
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
CSS
/* FOR ANYTHING GREATER THAN MOBILE RESOLUTION */
#media screen and (min-width: 480px) {
#nav-status {
display: none;
}
ul {
width: 100%;
min-height: 25px;
color:#fff;
background:#CCC;
overflow: visible;
}
ul li {
color:#000;
border-right: 1px solid #333;
width: 96px;
height: 21px;
padding:2px;
display: block;
float: left;
position: relative;
}
ul li:last-child {
border-right: none;
}
ul li ul {
display: none;
width: 100px;
color:#fff;
background:#666;
position: absolute;
top: 25px;
left: 0px;
overflow: hidden;
}
ul li:hover ul {
display: block;
}
}
/* FOR MOBILE RESOLUTIONS */
#media screen and (max-width: 480px) {
#nav-status {
display: block;
width: 100%;
height: 21px;
padding: 2px;
background: #000;
color: #FFF;
}
ul {
display: none;
width: 100%;
color:#fff;
background:#CCC;
overflow: visible;
}
ul li {
color:#000;
border-bottom: 1px solid #333;
width: 100%;
min-height: 21px;
padding:2px;
display: block;
position: relative;
}
ul li:last-child {
border-bottom: none;
}
ul li ul {
display: block;
width: 100%;
color:#fff;
background:#666;
overflow: hidden;
position: relative;
}
}
JAVASCRIPT
$(function() {
$('#nav-status').click(function(e) {
e.preventDefault();
$('#navigation').toggle();
});
});
In summary, any time the resolution drops under 480px wide, the mobile styling will kick in. This'll basically stack the menu items vertically and allow you to collapse/expand the nav with the open/close link. Anything larger than 480px will use the default styling which will order the menu items horizontally.
Hopefully it all makes sense :-)
You can keep the html markup the same, but set your media queries to intercept your chosen resolution and style the elements differently.
For example: http://jsfiddle.net/rYVz4/
HTML
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
CSS
#media screen and (min-width: 600px) {
ul { display: block; width: 100%; overflow: hidden; }
ul li { display: inline-block; padding: 2px 5px 2px 5px; width: 100px; float: left; }
}
#media screen and (max-width: 600px) {
ul { display: block; width: 110px; overflow: hidden; }
ul li { display: inline-block; padding: 2px 5px 2px 5px; width: 100px; }
}
As you can see, whenever the resolution is greater than 600px wide, the elements will be styled to float left and take up 100% of the width of the screen.
On any smaller resolution, the elements will stack vertically.
You can read more about media queries here
If you need more advanced behaviour, you can tie this in with javascript. This is one way of doing it:
function checkResolution() {
// Resolution width > 600px
if ($(window).innerWidth() > 600) {
// implement styling for these devices
}
}
$(function () {
$(window).resize(function () {
checkResolution();
});
checkResolution();
});
This code will tie into the window.resize event which'll run the relevant code if your browser is resized.
If the menu has the same items in both cases, I cannot see any reasons to make two copies of it. I would just make two different css-files, one for "regular" browsers and one for mobile media.
In the "regular" one, the "menu" parent item is hidden, and the menu is horizontal. In the mobile media one, the menu parent item is visible, the menu is a hidden vertical list that shows up (through css or javascript) when the menu parent item is clicked.
I have created a navigation bar that is centered with CSS which works. Each li item is separated with a border which is a background image. When hovering on the nav items, the separator disappears because the hover changes the background (I guess) but I wonder how I can fix this, padding or margin can't work because it will just shift the li element.
Second problem is that the sub menu items aren't displaying correctly and I have no idea why...
Demonstration: http://jsfiddle.net/Xenios/tfbhh/9/embedded/result/
The code: http://jsfiddle.net/Xenios/tfbhh/9/
I'm trying to get this to work for almost a week, and I'm quite tired of it, so I'm looking here for support.
Separator
As you know the main bar (nav_container) has a background image, which makes up the look of the button. The background for each button is the separator and nothing else (10px on the right). So, when your on hover background shows, because its park of the non-hover background.
In order to fix this you need to put the separator in it's own <li>, with the non-hover background. Then when you hover the elements they can easily change to your current on hover image with.
If you don't want to separate the <li> elements then, you will have to will have to make individual full width images for each button, but looking at the way you've gone about making this menu, I doubt you will want to do this.
Here is your working example (I only did the first few buttons): http://jsfiddle.net/tfbhh/43/
Submenu
As I mentioned above, you have set the container background image, you haven't done this on your submenu items, so thats why they don't have a larger looking button. Use your developer toolbar (F12) to see the styling and this should clear it up.
You can use a left padding equal to the width of the separator on the li and change only the background on the a. Also I noticed you used class="separator" on all but the first list item. You could replace that with the :first-child pseudo selector. Then you would get something like this:
li:first-child { padding-left: 0; background: transparent; }
li { padding-left: 3px; background: url(separator.png) no-repeat; }
li a { line-height: 40px; padding: 0 15px; }
li a:hover { background: url(anchor-hover.png) repeat-x; }
Edit: The CSS above covers the core styling of this solution. Here's a working example (using background colors):
http://jsfiddle.net/haa5X/3/
The complete CSS:
ul { overflow: hidden; background: green; }
li:first-child { padding-left: 0; }
li { padding-left: 3px; float: left; background: red; }
li a { float: left; line-height: 40px; padding: 0 15px; background: yellow; }
li a:hover { background: purple; }
The complete HTML:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Edit 2: Sorry, missed the part of the submenu:
http://jsfiddle.net/haa5X/4/
The complete CSS:
ul { overflow: hidden; margin: 0; background: green; }
ul > li:first-child { padding-left: 0; }
ul > li { padding-left: 3px; float: left; background: red; }
ul > li a { float: left; line-height: 40px; padding: 0 15px; background: yellow; }
ul > li a:hover { background: purple; }
li ul { display: none; position: absolute; margin-top: 40px; }
li:hover ul { display: block; }
li li { padding-left: 0; float: none; display: block; }
li li a { float: none; display: block; width: 100%; }
The complete HTML:
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>First sub item</li>
<li>Sub item 2</li>
<li>Last sub item</li>
</ul>
</li>
<li>Item 3</li>
</ul>