I have a sort of menu like this one, but how you can see the code is not so "well".
I'd like that margin between word and border is always 5px for example, for every word.
I know I should use List for this kind of stuff, but I don't know how to apply css style with cross-browser compatibility.
Can you give to me an example of that menu with List?
This is how I'd do it:
See: http://jsfiddle.net/thirtydot/554BT/3/
<ul class="menu">
<li>Home</li>
<li>Incredible</li>
<li>One</li>
</ul>
.menu {
width:545px;
float:left;
margin: 0;
padding: 0;
list-style: none
}
.menu li {
float: left;
text-align: center;
padding: 0 15px;
border-left: 2px solid red
}
.menu li:first-child {
border: 0
}
This is the way I would do it, keeping it as easy (simple) as possible. It probably doesn't get any less complex than this:
HTML
<ul id="menu">
<li>Home</li>
<li>Incredible</li>
<li>One</li>
</ul>
CSS
#menu {
list-style-type: none;
}
#menu li {
display: inline-block;
padding: 0 10px;
border-left: 2px solid red;
}
#menu li:first-child {
border-left: none;
}
DEMO: jsfiddle
Check out Listmatic for examples of all the basic list layouts.
Looks like you want something like this one.
Try this...
fiddle:http://jsfiddle.net/anish/Laqqn/
<style type="text/css">
.menu
{
width:500px;
}
.menu li
{
width:100px;
text-align:center;
float:left;
border-right:1px solid red;
}
</style>
<ul class="menu">
<li>Home</li>
<li>Incredible</li>
<li>One</li>
</ul>
A CSS3 example, not really cross browser as it uses CSS3 pseudo-selectors
CSS3 List menu
This other example uses a pipe character to separate the links and is cross browser safe:
CSS2 List menu
Space between the borders do this =
Put a border on the right side of the li and the second button put a border on the left side of the li.
Now add margin-left (or margin-right) and see it expand.
This worked in my case.
Good luck.
Related
I am working on a website which has a centered horizontal navigation bar. This bar has to have round corners on the end parts along with a hover effect. All of this is sort of working, but the issue is that the hover of the nav bar is overflowing the actual size of the bar. Along with that there is a slight white space between every element. As you can see in the following jsfiddle it doesn't look quite right. Another important note, is the fact that the navigation bar has to work with Bootstrap and the responsive functions. Which means nothing can be positioned absolute or float etc. Underneath I have also attached the html and css code.
HTML
<div class="navTopRight">
<ul class="naviTop">
<li class="first">Home</li>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li class="last">Item4</li>
</ul>
</div>
CSS
.navTopRight{
text-align:center;
list-style-type: none;
margin-top: 30px;
padding: 0;
}
ul.naviTop li {
border:1px solid black;
display: inline;
overflow:hidden;
background-color:#003340;
}
.navTopRight li:last-child {
border-right: none;
}
.navTopRight li a{
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
display: inline;
}
ul.naviTop li a:hover {
background-color:#0099bf;
}
li.first{
border-top-left-radius:5px;
border-bottom-left-radius:5px;
}
li.last{
border-top-right-radius:5px;
border-bottom-right-radius:5px;
}
So i think you basicly had everything right here there is just some small details.. if I understood your question correctly you wanted to just fill your li background without the blue color overflowing everything.. This is easiest done by changing the padding:14px 16px; to padding:0px 16px;
after that you wanted the empty white space removed and that can be achieved pretty simple by changing your html codes structure like this:
<li class="first">Home</li
><li>Item1</li
><li>Item2</li
><li>Item3</li
><li class="last">Item4</li>
Notice how all the li tags ends just before the new one starts. Here is a working fiddle aswell! So no use of position or float needed!
https://jsfiddle.net/nfztdxr2/3/
If you want to fix overflow hover just change this part of your css
ul.naviTop li {
border:1px solid black;
display: inline; -> *display: inline-block;*
overflow:hidden;
background-color:#003340;
}
here is the result https://jsfiddle.net/nfztdxr2/
Let me know if that is what you try to achieve, or maybe there is another concern?
You can also set hover without "a"
ul.naviTop li:hover. {...}
It also looks better.
The problem is you have padding: 14px 16px; on .navTopRight li a, which is set to display: inline;. You can't give vertical margin/padding/etc to an inline element and have it affect the elements before/after it. So when you hover over those links, and the background color is applied, it looks really weird because the vertical padding becomes visible. Assuming that the navigation menu looks like you want it when the links aren't hovered, just remove that vertical (top/bottom 14px) padding from the links.
.navTopRight{
text-align:center;
list-style-type: none;
margin-top: 30px;
padding: 0;
}
ul.naviTop li {
border:1px solid black;
display: inline;
overflow:hidden;
background-color:#003340;
}
.navTopRight li:last-child {
border-right: none;
}
.navTopRight li a{
color: white;
text-align: center;
padding: 0 16px;
text-decoration: none;
}
ul.naviTop li a:hover {
background-color:#0099bf;
}
li.first{
border-top-left-radius:5px;
border-bottom-left-radius:5px;
}
li.last{
border-top-right-radius:5px;
border-bottom-right-radius:5px;
}
<div class="navTopRight">
<ul class="naviTop">
<li class="first">Home</li>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li class="last">Item4</li>
</ul>
</div>
I want to put a little vertical line next to the right of each list item (except the last) but I'm wondering if there is a way to do it other than adding in a new div or something to accommodate the line. I tried just adding a border line for the list but it added one more than I needed.
html
<ul class="list">
<li><span id = "home">Home</span></li>
<li><span id = "about">About</span></li>
<li><span id = "portfolio">Portfolio</span></li>
<li><span id = "contact">Contact</span></li>
</ul>
CSS
.list li {
display: inline;
margin: 0px 25px 0px 0px;
white-space: nowrap;
font-family: Oswald;
color: white;
}
.list {
text-align: right;
padding-right: 2%;
}
#home {
height: 50px;
background-color: black;
}
Just add a right border to all the li elements and then remove it from the last one using the :last-child pseudo class. This will work for dynamic content.
Example Here
.list li {
display:inline-block;
border-right:2px solid;
padding:10px;
}
.list li:last-child {
border-right:none;
}
Alternatively, you could also just use the :not() pseudo class, and avoid applying the border to the last element to begin with.
Example Here
.list li:not(:last-child) {
border-right:2px solid;
}
Support for both of these methods can be found here - http://caniuse.com/#feat=css-sel3
If support is a concern, you could also alternatively just add a left border and remove it from the first child element. (:first-child has more browser support than :last-child/:not). I doubt you need to support older versions of IE though.
Example Here
.list li {
display:inline-block;
border-left:2px solid;
padding:10px;
}
.list li:first-child {
border-left:none;
}
You can achieve that by adding a border on every <li> item and just removing the border for the last element using the css last child selector: li:last-child selecting the last li element of its parent.
You can even combine that with the :not selector to achieve it with one css block.
JSFiddle Demo
I would probably set a border-right on the whole list and use jQuery to remove it on the last item.
This is a little trickier if you don't know the ID of the last item ahead of time, but if it's always going to be "Contact," you can say
$("#contact").attr('style','border-right:none');
You can add this:
li:before {
content: " | ";
}
li:first-child:before {
content: none;
}
Or:
li:not(:first-child):before {
content: " | ";
}
Here's a more universal and simpler solution that will work in older browsers without a hitch: http://jsfiddle.net/pw3vpvLv/.
HTML:
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
CSS:
ul > li {
display:inline-block;
padding: 5px 10px;
}
ul > li + li {
border-left: 1px solid;
}
First off, I'm really new to this so sorry if I sound dumb ;_;. Now, I'm trying to make a background color on my list items. Like this site has, black bar with the logo, search bar etc.. I tried wrapping divs everywhere but nothing seems to work.
HTML
<nav class="nav-menu">
<div class="container">
<ul>
<li>About Us</li>
<li>Staff</li>
<li>Schedule</li>
<li>Home</li>
</ul>
</div>
</nav>
CSS
.nav-menu ul {
margin-right: 50px;
}
.nav-menu li {
list-style: none;
display: inline;
margin-left: 30px;
float: right;
color: red;
}
.container {
color: black;
}
http://jsfiddle.net/Hm4KJ/
Set overflow to auto to display everything in the .content div (now everything is hidden because you use float property)
.container {
background: black;
overflow:auto;
}
I guess it is a typo, anyway , you should set background property instead of color to set background color.
Example
if you only want a background color in each list item you can use this one:
.nav-menu li {
list-style: none;
display: inline;
margin-left: 30px;
float: right;
color: red;
background:#000000;
display:inline-block;
padding:5px 10px;
}
http://jsfiddle.net/Hm4KJ/2/
You could add a clearfix after your floating element.
html:
put a
<div class="clear"></div>
after your <ul></ul>
related css:
.clear {
clear: both;
}
and you would need to change color: black; to background-color: black; ;-)
see: http://jsfiddle.net/Hm4KJ/4/
I am trying to center my navigation links inside the div but no matter what I've tried it won't work. I've tried margin-left:auto, margin-right:auto, but nothing...
Here is the section of CSS code:
#nav {
display:block;
background-color:#505050;
height:17.5px;
box-shadow: 0px 0px 15px 5px #CCCCCC inset;
border:1px solid #EEEEEE;
border-radius:20px;
padding:1.5%;
}
#nav li {
padding:0px 20px 0px 20px;
display:inline;
/*float:left;*/
list-style:none;
position:relative;
}
#nav li a {
padding:0px 0px 20px 0px;
color:#FFFFFF;
text-decoration:none;
}
and here is my ul code:
<ul id="nav">
<li>Home</li>
<li>About Us</li>
<li>Current Litters</li>
<li>Gallery
<ul>
<li>Bandi</li>
<li>Studs Used</li>
<li>Test Dog2</li>
<li>Test Dog3</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
Here is the rest of my code
actually without it i noticed that my drop down menu under (gallery) doesn't display correctly, ...here is the rest of that css file...that shows what happens to the drop down...maybe you can tell me why the float screws it all up...
...and the text align did great....but only after removing the float...
#nav li a:hover {
text-decoration:underline;
}
#nav li ul{
padding:10px;
font-size:medium;
display:none;
position:absolute;
left:0px;
top:30px;
background-color:rgba(50,50,50,0.8);
}
#nav li:hover ul {
display:block;
border-radius:20px;
border:1px solid;
width:150px;
}
This is actually quite simple, since your list items are display:inline. Add this style:
#nav {
text-align:center;
}
Demo: http://jsfiddle.net/fH6f5/
There are many other ways to do it, but this appears to be all you need. Just make sure not to float the <li>s (I see you have it commented out).
Adding text-align: center to the nav unordered list seems to work for me in chrome
#nav {
text-align: center;
}
To center a block element, you also need to explicitly set the width to some value, like this:
#nav {
width: 50%;
margin: 0 auto;
}
There are quite a few changes you're going to need to make to your code in order for it to display properly. Your list elements are currently inline elements. inline elements have a lot of restrictions, including not being able to explicitly set their width, height, and their top and bottom margin. Keep in mind that per the W3 spec:
Generally, inline elements may contain only data and other inline elements.
That being said, you can use display: inline-block with no problems for your current code. There is one very important thing to keep in mind about using inline-block elements: whitespace. Any space between inline-block elements in your code will be shown as a space on your browser. So, if you want the elements to be touching, their tags must be touching also:
<!-- Version A: This will produce a gap between the two elements -->
<li>Home</li>
<li>About Us</li>
<!-- Version B: This will not produce a gap between the two elements -->
<li>
Home
</li><li>
About Us
</li>
If you choose Version A from the code above, I'd recommend you float the elements rather than relying on inline-block for positioning. Centering a floated list is a bit more difficult than centering an inline list. Here's a way that I like to center floated elements:
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
</ul>
</nav>
CSS:
nav { overflow: hidden; }
nav ul {
position: relative;
float: left;
left: 50%;
list-style: none;
padding: 0; }
nav ul li {
position: relative;
float: left;
right: 50%;
margin: 0 5px; }
nav ul li a { display: block; }
Preview: http://jsfiddle.net/Wexcode/rsDbY/
You should post the design that you want for your dropdown menu, I don't really know what you want your final result to look like so I can't really help you with that.
You need to set a fixed width on your ul for margin-right:auto and margin-left:auto
Have you tried to add margin: 0 auto; to #nav style? You also have to set the ul width to get this working.
It's a bit more complicated then simply "text-align" as you have the text inside of a . You need to add "margin: 0px auto;" to your element in your css file. This will then center the divider on the screen first, then center the next element within the divider and so on.
I'm trying to create a horizontal navigation bar (no dropdown, just a horizontal list), but I'm having trouble finding the best way to add vertical dividers between the menu items.
The actual HTML is as follows:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
The current CSS is as follows:
.menu li {
display: inline;
margin-left: 25px;
padding-left: 25px;
}
Between each menu item I want a small image as a vertical divider, except that I don't want a divider shown before the first item and I don't want a divider shown after the second item.
The end result should look something like this:
Item 1 | Item 2 | Item 3 | Item 4 | Item 5
Just replacing the pipe with an actual image.
I've tried different ways - I've tried setting the list-style-image property, but the image didn't show up. I've also tried setting the divider as a background which actually more or less worked except that it made the first item have a divider in front of it.
Quite and simple without any "having to specify the first element". CSS is more powerful than most think (e.g. the first-child:before is great!). But this is by far the cleanest and most proper way to do this, at least in my opinion it is.
#navigation ul
{
margin: 0;
padding: 0;
}
#navigation ul li
{
list-style-type: none;
display: inline;
}
#navigation li:not(:first-child):before {
content: " | ";
}
Now just use a simple unordered list in HTML and it'll populate it for you. HTML should look like this:
<div id="navigation">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Support</li>
</ul>
</div><!-- navigation -->
The result will be just like this:
HOME | ABOUT US | SUPPORT
Now you can indefinitely expand and never have to worry about order, changing links, or your first entry. It's all automated and works great!
try this one, seeker:
li+li { border-left: 1px solid #000000 }
this will affect only adjecent li elements
found here
This can also be done via CSS:pseudo-classes. Support isn't quite as wide and the answer above gives you the same result, but it's pure CSS-y =)
.ULHMenu li { border-left: solid 2px black; }
.ULHMenu li:first-child { border: 0px; }
OR:
.ULHMenu li { border-right: solid 2px black; }
.ULHMenu li:last-child { border: 0px; }
See: http://www.quirksmode.org/css/firstchild.html
Or: http://www.w3schools.com/cssref/sel_firstchild.asp
I think your best shot is a border-left property that is assigned to each one of the lis except the first one (You would have to give the first one a class named first and explicitly remove the border for that).
Even if you are generating the <li> programmatically, assigning a first class should be easy.
A simpler solution would be to just add #navigation ul li~li { border-left: 1px solid #857D7A; }
.last { border-right: none
.last { border-right: none !important; }
This works fine for me:
NB I'm using BEM/OCSS SCSS Syntax
#navigation{
li{
&:after{
content: '|'; // use content for box-sizing
text-indent: -999999px; // Hide the content
display: block;
float: right; // Position
width: 1px;
height: 100%; // The 100% of parent (li)
background: black; // The color
margin: {
left: 5px;
right: 5px;
}
}
&:last-child{
&:after{
content: none;
}
}
}
}
I do it as Pekka says. Put an inline style on each <li>:
style="border-right: solid 1px #555; border-left: solid 1px #111;"
Take off first and last as appropriate.