CSS: remove separator on the last and first item - css

I have a menu div which has a dark background. Inside it, I have several menu item divs with 1px margins on the right and the left. This way I've got separators between them. Obviously these appear on the very left and very right side of the menu which I don't want. Is there a way to accomplish this without inserting 1-pixel divs as separators?
Thank you
edit: sorry, I thought it was descriptive enough. Here is the code:
<div id="menu">
<div class="menu_item"><img src="imgs/menu/szabalyzat.png" /></div>
<div class="menu_item"><img src="imgs/menu/profil.png" /></div>
<div class="menu_item"><img src="imgs/menu/zenekarok.png" /></div>
<div class="menu_item"><img src="imgs/menu/jelentkezes.png" /></div>
<div class="menu_item"><img src="imgs/menu/esemenynaptar.png" /></div>
<div class="menu_item"><img src="imgs/menu/mmmk_estek.png" /></div>
</div>
IE6 incompatibility is OK (thankfully).

The following rule will apply to all .menu_item elements that follow another .menu_item element:
.menu_item + .menu_item {
border-left: 2px solid black;
}

The simplest way yo achieve it is to mark your first and last elements with custom classes and remove that margins from them.
<ul class="menu">
<li class="first">One</li>
<li>Two</li>
<li>Three</li>
<li class="last">Four</li>
</ul>
<style>
.menu li { margin: 0 1px; }
.menu .first { margin-left: 0; }
.menu .last { margin-right: 0; }
</style>
You can also try using complex css selectors, like :first-child, but they do not work in older versions of MSIE.
OR, you can use 2px margins on the right side instead and go with only one additional class:
<ul class="menu">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li class="last">Four</li>
</ul>
<style>
.menu li { margin-right: 2px; }
.menu .last { margin-right: 0; }
</style>

If a high percentage of your audience's browsers support CSS3, you can use the :first-child and :last-child pseudo-classes:
div#menu div:first-child {
margin-left: none;
}
div#menu div:last-child {
margin-right: none;
}

Can't you have 2px left-margin instead of 1px on each side and then use the css pseudo class :first-child to remove these margin for the first item ?
EDIT: I agree with the fact that you should use border as separator rather than background but in case you do this that way for some good reasons, my answer's still valid :-)

Related

Foundation 6.4 tweaking top bar

Foundation's top bar navigation tool is set-up to fully flesh out a hierarchy of links, relying upon list and item tags.
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Site Title</li>
<li>
One
<ul class="menu vertical">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
</div>
However, in an attempt to soften this structure, the goal is to have the second layer links on a single line, say
<ul><li>
One Two Three
</li></ul>
Unfortunately, either display is relinquished to the browser definition for line-item or display:block; from the base code of Foundation overrides even <li style='display: float'><a href="#" style='display: float'> with its .menu a class definition.
How can this one-liner be achieved?
Looks like you may have mixed up your css rules: display: block; and float: none. The default behaviour looks like it wants it to be vertical, and the structure looks to be built in that way. I didn't see anything in their docs for this (I skimmed them lol) but what I did to make it work was to use position:absolute; on that submenu, and then position it. I don't know what the rest of your menu looks like, but you will need to adjust I assume.
I created a codepen that might do what you need it to.
https://codepen.io/bjorniobennett/pen/bGGajWZ
ul.dropdown > li {
position: relative;
&:hover {
> ul.vertical {
display: block;
}
}
> ul.vertical {
display: none;
position: absolute;
width: 500%;
background: #c5c5c5;
top: 120%;
> li {
display: inline-block;
float: left;
}
}
}

Is it appropriate to wrap each navigation element in a div?

I'm learning HTML + CSS and working on a website where I need to have a vertical navigation bar on the left side which will have four elements which can be interacted with. Is it standard practice to wrap each of these four elements with a div or is there a more elegant or semantic way to solve this problem? I will want each element to have unique on-click functions associated with them, which is why I thought giving them divs and classes would make the most sense for interacting with them later.
Thanks!
JSFIDDLE DEMO
HTML structure:
There are many ways to achieve a vertical navigation.
The most common would be to use ul and li:
<div id="lnav_container">
<ul id="lnav">
<li class="lnav_item">Item 1</li>
<li class="lnav_item">Item 2</li>
<li class="lnav_item">Item 3</li>
<li class="lnav_item">Item 4</li>
</ul>
</div>
Also very common to have a tags inside li.
Styling:
You can get rid of the bullets by having list-style-type: none; for the ul.
You can give them different style on hover by using :hover selector to make it more interactive.
.lnav_item {
width: 74%;
margin-top: 10px;
}
.lnav_item:first-child {margin-top: 0px;}
.lnav_item.selected {width: 86%;}
.lnav_item a {
display: inline-block;
width: 100%;
line-height: 30px;
padding: 8px 5px 5px 0px;
background-color: yellow;
color: black;
font-weight: bold;
text-decoration: none;
border-radius: 2px 12px 12px 2px;
}
.lnav_item.selected a {
background-color: green;
color: white;
font-size: 18px;
}
.lnav_item:hover a {background-color: orange;}
To get rid of a underline use text-decoration: none; and override its default coloring if you wish.
Javascript (jQuery):
It'll be easy to bind clickListener to the items:
$('.lnav_item a').on('click', function() {
//$(this) item is clicked, do whatever you want
$('.lnav_item').removeClass('selected');
$(this).parent().addClass('selected');
});
EDIT:
If you want to give each of the navigation items a different style, etc, you can achieve it different ways:
jsfiddle DEMO
You can use CSS' nth-child() selector:
.lnav_item:nth-child(2):hover a{background-color: #252F1D;}
.lnav_item:nth-child(3):hover a{background-color: white;}
If you're doing it in jQuery, alternatively you can use the function with parameter (index) and maybe use eq if needed.
$('.lnav_item > a').each(function(index) {
if(index == 0) {
//give it a different onClick, CSS rule, etc
}
//and so on
});
index is zero-based, but nth-child starts from one.
The typical HTML5 markup for a site navigation menu would be a nav element that contains an ul element:
<nav>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</nav>
If you can get your CSS/JS to work with this markup (+ class attributes or whatever you need), great.
If you need more elements, add div and/or span elements: they are meaningless, so they don’t change the semantics of your document.
NAV elements are simply LISTS.
You don't need to wrap them in anything.
Here's an example of my own Navigation Panel (I also placed it on the left-hand side of my screen)
<nav>
<ul style="list-style: none">
<h3>Main Menu</h3>
<li style="font-size: 100%"><b>Article 1</b></li>
<ul style="list-style: none">
<br>
<dt>
<li style="font-size: 100%"><a href="Article 1.1">Article
1.1</a>
</li>
<br>
<li style="font-size: 100%"><a href="Article 1.2">Article
1.2</a>
</li>
<br>
</dt>
</ul>
<br>
</nav>

How to set margin: auto to an unordered list? <ul>

I need to center a <ul> element using margin: 0 auto;
If I set the width for the ul element (width:300px) then its works fine. But I can't do this since it is a dynamic list, then the width changes all the time.
HTML:
<div>
<ul>
<li>hello</li>
<li>bye</li>
</ul>
</div>
CSS:
ul{margin:0 auto;} But it isn't working.
ul{margin:0 auto;width:300px;} Works, but I can't set the width in this way.
Then write like this:
div{
text-align:center;
}
ul{
display:inline-block;
*display:inline; /* For IE7 */
*zoom:1; /* For IE7 */
vertical-align:top;
}
Check this http://jsfiddle.net/Wg9Dz/
rather than that you can use
html
<div class = "margin-me">
<ul>
<li>hello</li>
<li>bye</li>
</ul>
</div>
css
.margin-me, margin-me ul{margin:0 auto;}

Controlling CSS based hover effects

To my knowledge, the answer to this is no, can't be done, but I need a second opinion:
If I have the following:
<li>
<a >#</a>
<div class="sub">
#
</div>
</li>
and have a background image that appears on li a:hover is it possible to have that background stay on when hovering on the .sub div? This also has to work pure CSS - no javascript cheats.
My understanding is because .sub isn't a child of the a we can't reference it in css to keep the hover.
Because the image is for only one section of the code, I can't move it to the li and reference li:hover a.
Not sure what all you are trying to achieve, but there are many hover effects that can be done.
SECOND UPDATE: If you don't need to interact (other a tags, etc) at all with anything in the div, then this way cheats to get the effect. Note how the anchor inside the div does not register because of the z-index.
UPDATE I think I understand your issue better now. Can you add a wrapper and do the following?:
Example HTML:
<ul>
<li>
<div>
<a>Some anchor text</a>
<div class="sub">Some div content <a>and anchor</a></div>
</div>
</li>
</ul>
Example CSS:
li:hover {
background-color: cyan;
}
li > div:hover > a {
background-color: green;
}
a:hover {
color: yellow;
display: block;
}
a:hover + .sub {
outline: 1px solid blue;
}
.sub:hover {
color: red;
outline: 1px solid red;
}
If you can't use a class on the li or modify the div.sub to be in the a, you're probably out of luck without Javascript:
Is there a CSS parent selector?
However, if you can, you could use:
<ul>
<li class="sub">
<a>Class #</a>
<div class="sub">#</div>
</li>
<li>
<a>Inner #
<div class="sub">#</div>
</a>
</li>
<li>
<a>None #</a>
<div class="sub">#</div>
</li>
</ul>
li.sub:hover,
li a:hover {
background: url(http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=32&d=identicon&r=PG);
}
li a {
border: 1px solid blue;
display: block;
}
.sub {
border: 1px solid green;
}
http://jsfiddle.net/B7Au2/4/
I don't know if you can modify the html, but if you can, try swapping the div and the a:
<li>
<div class="sub">
#
</div>
<a >#</a>
</li>
Now you can use the adjacent sibling selector:
li a:hover, li .sub:hover + a {background:url('some-image.png')}
Unfortunately there's no way to select the previous element through CSS: that's why you need to swap your elements.

<ul> within another <ul> inherits style

I have the following structure in some HTML:
<ul class="li_inline">
<li>
<ul class="li_block">
<li>Stuff</li>
<li>Stuff under stuff</li>
</ul>
</li>
<li>
<ul class="li_block">
<li>Stuff</li>
<li>Stuff under stuff</li>
</ul>
</li>
</ul>
With the CSS like this:
.li_inline li
{
display: inline;
}
.li_block li
{
display: block;
}
What I would like to happen is to have the two inner <ul>s side by side, but any <li>s inside them to be below each other. This is so I can get a sidebar and main body side by side, but elements inside them behave normally (ie. one below the other).
Can someone suggest some CSS I can use so that the inner (li_block) lists' <li> elements are displayed as block elements, but the <ul>s themselves are displayed side by side?
Thanks,
James
Use a reset rule.
ul ul { list-style:none; padding: 5px 20px; margin: 5px 10px; }
In your case using the !important can get your job done. But try not to use it
UPDATE
Solution: http://jsfiddle.net/Starx/KHjmP/ (FF3+, Safari 4+, IE8+)
it ain't pretty but you get the jist of it :)
<div style="overflow: hidden;">
<ul class="li_block" style="float: left;">
<li>Stuff</li>
<li>Stuff under stuff</li>
</ul>
<ul class="li_block" style="float: left;">
<li>Stuff</li>
<li>Stuff under stuff</li>
</ul>
</div>
This worked for me:
<html>
<head>
<style type="text/css">
ul.outer{}
ul.outer > li{
float: left;
}
ul.outer > li > ul > li{
display: block;
}
</style>
</head>
<body>
<ul class="outer">
<li>
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
</li>
<li>
<ul>
<li>2.1</li>
<li>2.2</li>
</ul>
</li>
</ul>
</body>
</html>
You should be able to do something as simple as the following. I tested it in Firefox, Chrome and IE7.
.li_inline > li {
display: inline;
}
.li_inline > li > ul {
float: left;
}
http://jsfiddle.net/fzBnG/
.li_inline li {
display: inline-block;
float: left;
}
.li_block li {
display: block;
clear:both;
}
First, thanks for everyone's help! I'm really sorry to look like I'm ignoring your hard efforts away, but I have taken note of all your answers, and they're all very handy.
The solution I have come up with is to simply use display: inline-block for both inner uls, with the outer one left default.
Once again, thanks for your help everyone.
James

Resources