I have been trying to figure out how to make a nav bar like this one here: navbar
but as almost an absolute beginner, I have no idea which method to use here. Is it a UL or a table, and also don't know how to set these borders between the links which should most probably be inserted there as the images.
I know it would be more helpful if I wrote my own code here to be examined first, but I don't even know whether I should go with the table or a list with this one.
So, I would really appreciate if someone could give me a suggestion on that first and then i could write a code which we could discuss further.
Thanks
Although i prefer using UL for the menu,
it seems to be easier to achieve the effect with tables.
try making a table with two rows and 5 columns.
and:
remove the bottom-border of the first row.
remove the upper-border of the second row.
the borders of the cells in the second row.
also you may have to set the height of each row.
This can be done 2 different ways. The first one will be with image of a small vertical line which will be set as a background of the navigation button.
The other way is to be an absolute positioned <span> in the <a> tag with height as this border height and set top: 0 and left:0.
HTML:
<ul>
<li><span></span>Nav 1</li>
<li><span></span>Nav 2</li>
<li><span></span>Nav 3</li>
<li><span></span>Nav 4</li>
</ul>
CSS:
ul {
float:left;
border: 1px solid #000;
}
ul li {
list-style-type: none;
float:left;
}
ul li a {
display:block;
padding: 10px;
position:relative;
}
ul li span {
border-left: 1px solid #000;
height: 10px; <!-- as long as you want -->
position:absolute;
top: 0;
left: 0;
}
You can copy and paste that in your editor and see how it looks like.
And for navigations use <ul> with <li>'s. The <table> is deprecated and is no longer good to use it for that purposes.
Related
I'm using jQuery-UI-Layout plugin that creates a pane on the east side of the screen. When I create a list in it and apply a background-color to each <li> element, it doesn't span the width of the entire pane.
I would like it so that there is no white space on either side of the <li>, even if it has a bullet or number next to it (meaning if I decide to include a bullet or number, it should also be covered by the color). How can I do this?
Fiddle: http://jsfiddle.net/5EECD/497/
HTML:
<div class="ui-layout-center">Center</div>
<div class="ui-layout-east">
<ol id="someList">
<li class="not-selected">step 1</li>
<li class="selected">step 2</li>
<li class="not-selected">step 3</li>
<li class="not-selected">step 4</li>
</ol>
</div>
CSS:
.selected {
background-color: #e90902;
padding-top: 10px;
border-bottom: 1px solid #808080;
padding-bottom: 10px;
}
.not-selected {
padding-top: 10px;
padding-bottom: 10px;
background-color: #e9e9e9;
border-bottom: 1px solid #808080;
}
Add this to your CSS file:
.ui-layout-pane-east {
padding: 0 !important;
}
Don't do this from the browser's inspector. jQuery UI's inner workings are supposed to calculate widths on page load.
Try Removing the
padding: 10px
from the following in css
body > div.ui-layout-east.ui-layout-pane.ui-layout-pane-east
It might not be the best way of doing it, though you can expand the margins of the <li> to fill the pane.
li{
margin: 0px -10px 0px -10px;
}
JSFiddle
Here is your edited working Fiddle, with a List Style Disc "inside" the actual list item, by using the list-style-position style. To remove the Disc icon, simple use the style "none" instead.
If you set the font-size to 0px and that will remove all white space from list items, as long as the list item has a given font size which is shown in the example.
I just added a little CSS to your working CSS:
ol#someList {
font-size:0px;
padding-left:0px;
list-style:disc;
list-style-position: inside;
}
ol#someList li {
font-size:14px
}
I also added a body style to remove the default margin of 8px to show you that there is no white space to left or right of the list items.
Hope that helps!
Michael G
I am able to achieve the effect I want but wondering if there is a better way of coding. I am using li:nth-child() to select parts of a parent list I want to add a border to.
However I do not want these to effect sub lists inside the parent list.
HTML
<ul class="nav">
<li>Link 1
<ul>
<li>Sub Link 1</li>
</ul>
</li>
</ul>
CSS
.nav li:nth-child(-n+3) {
border-left: 4px solid #FFC50A;
}
How do I get the "Sub Link 1" to not have a border without using:
.nav > li > ul > li {
border: 0px !important;
}
Should I just give the parent list a class to make the list have a border instead of using .nav li:nth-child(-n+3)?
See Fiddle
As I noted in comments, you could use child selector in order to prevent for the inner list items from be treated by the selector, as follows:
.nav > li:nth-child(-n+3) {
border-left: 4px solid #FFC50A;
}
EXAMPLE HERE
5.6 Child selectors
A child selector matches when an element is the child of some element.
A child selector is made up of two or more selectors separated by >.
Unfortunately, due to the cascading nature of CSS, I don't think this is explicitly possible (yet).
I think if I were implementing this, I might define parent and child classes for each list. This would help with specificity, but you can run into problems if the HTML is generated instead of hand-coded.
EDIT:
Another thing I just thought of is (depending on your scalibility needs here), you could try just styling children with your overrides like so:
fiddle
<li>Link 1
<ul>
<li class="childList">Sub Link 1</li>
</ul>
</li>
and
.childList {
position: relative;
width: 175px;
padding: 0;
display: inline-block;
margin-right: 20px;
color: #555;
border: 0px !important;
}
. I'm not really sure how this list will be balanced, so to speak, so this could be a bad answer as well.
I am trying to implement a sub navigation menu under "Jewellery". The problem is I want a space between the two menus when they open. To achieve this I added "margin-top:5px;" to the sub navigation. It does create the space however as you can see as soon as I bring the mouse down to the sub navigation it becomes deselected.
What is the correct way to achieve this?
nav ul ul {
margin-top:5px;
background-color: #101010;
color: #FFF;
}
Link to jsfiddle
http://jsfiddle.net/2mpcQ/4/
You should use padding-top:5px and the black submenu inside this padded DOM Element
border-top: 5px solid #fff;
This will give the appearance of space between the Menu and sub menu.
and will still give it functionality.
You can use div tag sub menu to get the desired vertical space. I have modified your jsfiddle for reference.
.rowheight {background: #fff; font-size: 5px;}
<ul>
<li>
<div class="rowheight"> </div>
<ul><li>Item</li></ul>
</li>
</ul>
jsfiddle link -
http://jsfiddle.net/2mpcQ/25/
or can use border-top: 5px solid #fff; for nested ul but it is not controllable. It will affect all nested UL tags.
hope this helps!
If you want just to solve this issue, try adding border-top to .nav ul ul (border-top:5px solid #fff;). Though, your question was "what's the correct way to achieve this?". I think the right way is styling the "a" element, as Diodeus said.
I have the following html
<div id="menu">
<ul class="horizMenu">
<li id="active">About</li>
<li>Archive</li>
<li>Contact</li>
<li>Item four</li>
<li>Item five</li>
</ul>
</div>
and in the css I have
.horizMenu li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
#menu
{
text-align:center;
margin-bottom:10px;
letter-spacing:7px;
}
#menu a
{
color:red;
}
#menu a:hover
{
color:blue;
font-weight:bold;
}
Everything works pretty well, except that when I mouse over the links, the color changes and it becomes bold, which is what i want, but it also causes all of the other li elements to move slightly and then move back when you mouse-off. Is there an easy way to stop this from happening?
Not sure who -1ed, but Mauro's answer is essentially correct: you can't trivially make an item with automatic width depend on what the width would have been if the font inside weren't bold.
However, a 'float: left;' rule will also be necessary as you can't set the width of an inline-display element. And 'em' would probably be a better unit, to make the required width dependent on the font size in the buttons.
Add a width to the list item elements which is bigger than the bolded width of the items, this way they wont be pushed out of line.
#menu li
{
width: 150px;
}
Alternatively you could try a monospace font, which wont be affected by the bold/unbold on hover.
try using this
menutext {
line-height: 10px; /* or whatever */
}
and also, to set the width of a inline element, use display: inline-block;
float:left might be not so friendly, if you do use it and it messes things up use clear:both
I've just had the same problem. A solution I thought of, and might use from now on, is to use text-shadow instead.
a:hover {
color:blue;
text-shadow:0px 0px 1px blue;
}
The text will look a little blur though. If you set the 3rd parameter to 0, text won't be blur but will look just a little bit bolder.
I'd say this is better than dealing with width-dynamic texts.
I have an html file with an unordered list. I want to show the list items horizontally but still keep the bullets. No matter what I try, whenever I set the style to inline to meet the horizontal requirement I can't get the bullets to display.
The best option I saw in other answers was to use float:left;. Unfortunately, it doesn't work in IE7 which is a requirement here* — you still lose the bullet. I'm not really keen on using a background image either.
What I'm gonna do instead (that no one else suggested, hence the self-answer) is go with manually adding • to the my html, rather than styling this. It's less than ideal, but it's the most compatible option I found.
edit: *Current readers take note of the original post date. IE7 is unlikely to be a concern anymore.
I had the same problem, but only in Internet Explorer (I tested version 7) - not in Firefox 3 or Safari 3. Using the :before selector works for me:
ul.tabs li {
list-style: none;
float: left;
}
ul.tabs li:before {
content: '\ffed';
margin-right: 0.5em;
}
I'm using a square bullet here, but a normal bullet \2022 would work the same.
You could also use a background image on the <li> elements, with a padding to keep the text from overlapping it.
li {
background-image: url(i/bullet.gif) no-repeat center left;
padding-left: 20px;
display: inline;
}
The browser displays the bullets because the style property "display" is initially set to "list-item". Changing the display property to "inline" cancels all the special styles that list items get. You should be able to simulate it with the :before selector and the content property, but IE (at least through version 7) doesn't support them. Simulating it with a background image is probably the best cross-browser way to do it.
Keep them display blocked, give them a width and float left.
That will make them sit by side, which is like inline, and should maintain the list style.
It's actually a very simple fix. Add the following to the ul:
display:list-item;
Adding this CSS line will add the bullet points.
I was just messing around and I ran into the same issue with the same browser constraints; when I searched for an answer your post came up without the answer. This is probably too late to help you, but I thought for posterity's sake I should post it.
All I did to solve my problem was to embed another list with one item within each list item of the first list; like so...
HTML:
<div class="block-list">
<ul>
<li><ul><li>a</li></ul></li>
<li><ul><li>b</li></ul></li>
<li><ul><li>c</li></ul></li>
</ul>
</div>
CSS:
.block-list > ul > li { display: inline; float: left; }
IE7 Page:
o a o b o c
...it is a dumb solution, but it seems to work.
Did you try float: left on your <li/>? Something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
ul li {
float: left;
margin-left: 2em;
}
</style>
</head>
<body>
<ul>
<li>test</li>
<li>test2</li>
</ul>
</body>
</html>
I only tested Firefox 3.0.1, works there. The margin is set because else your bullet overlaps the previous item.
addition:
Be wary that when you float the items you remove them from the normal flow, which in turn causes the <ul/> to have no height. If you want to add a border or something, you'll get weird results.
One way to fix that is to add the following to your styles:
ul {
overflow: auto;
background: #f0f;
}
You may set <ul> as a CSS grid and <li> as cells to get similar layout to inline <li> and keep bullets easily:
ul {
display: grid;
grid-template-columns: 100px 100px 100px; /* or a smarter width setting */
}
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
You could use Character entities, see reference : http://dev.w3.org/html5/html-author/charref
<ul class="inline-list>
<li> • Your list item </li>
</ul>
In HTML, I added a break after each li like this:
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
And CSS:
li { float:left; }
Using float: left didn't work very well for me because it made the content box of the ul element 0 pixels high. Flexboxes worked better:
ul {
display: flex;
flex-wrap: wrap;
}
li {
margin-right: 24px;
}
You can use following code
li {
background-image: url(img.gif) no-repeat center left;
padding-left: 20px;
display: inline;
}