I am trying to understand html/css menu bar and my problem is at the display property,
I do know about this property very well, but if you take a look at this Link,
just a simple menubar, but the problem is that i dont understand why does the li tag and the a tag at the css style include display property inside them when the float do the job and you can delete them and the menu looks the same, i know that there is a resone for thoes display properies to be there at thoes both tags styles but i dont get it, if can some one please help me understand why the display property with the value of inline at the li css style, and with value of block at the li a at the css style, and again its not that i dont know about this property it just i dont understand why its there, thank you all and have a nice day.
display:inline used in li's is to make li aligned Horizontal or side by side.
display:block is used in li a so the a should take the complete with of the li so that if you click anywhere inside li the <a> tag will work & will not only work on clicking on the text.
Related
I'm currently trying to follow a tutorial to make an image gallry a-la-Apple but for now, I got a little problem that I can't understand the reason.
Here's the JSFiddle: JSFiddle.
If you check correctly, you should see a white space on top of the second and third li item of the submenu in the slider. The first one doesn't have it.
There's the wanted result: Tutorialzine
If someone can find the reason, it would be appreciated!
Note: I'm using Twitter Bootstrap!
Rule #1 for list-based menus: Put all styling on the A-tag using display:block. Do not style the LI tag except for floats/positioning.
See my tutorial: http://preview.moveable.com/jm/ilovelists/
Here's my jsfiddle example:
http://jsfiddle.net/7PqqT/
Update: This is my work around solution: http://jsfiddle.net/7PqqT/1/
However I would like to achieve this same effect without needing the arrow divs to be in each li element.
Now what I'm going to be doing is having jquery addClass('current') to whichever of the 3 li elements the user clicks on, and it I want the arrow to appear below that li element in the center of the text. I'm not sure the best way to do this, I'm hoping there's a simple method to go about doing this.
Here you go, I updated your JSFiddle.
Basically, I just deleted the arrow div completely and change the arrow-related CSS to :before and :after pseudoelements. Works like a charm.
I am having a problem with nesting lists in IE 7.
It seems that when I use the following structure (shorthand):
ul
li
input type='radio'
label for='that input'
ul
li
input type='radio'
label for='that input'
ul
li
etc...
I have an overflow:auto on the container of all this, but I get some odd behavior in IE 7 and only in IE 7. The radio buttons will not scroll with the text. The text moves when you scroll the container, but the radio buttons are stationary.
Any idea what could cause this? I'm sorry I cannot provide more code than this, but I have to deal with property rights and all that with my company.
I am also open to other possible solutions to a way to show this sort of hierarchical structure where each 'spot' has a radio button and a label, followed by its children a bit more indented than the last level.
Any help is much appreciated.
The solution:
I had a position:relative style on the input tag that was making it not move with the container. changed this to position:static, fixed everything.
I'm trying to create a menu like this or this.
But I am trying all ways to fix the size of the tag "read" but I can not.
I'm in the beginning, to see where I am.
Notice that when the user hovers the tag "a" changes the background color.
Please, if you can change the code and show me how.
Thanks.
Use display:inline-block; instead of inline.
Your problem is that you've specified display:inline; and styled it from that point, you'll have to remove that, or change to inline-block like they said, and re-style your menu.
You cant declare width for an inline li , use
display:inline-block;
I've got menu items that look like this
<ul>
<li>Item1<span class="context-trigger"></span></li>
<li>Item2<span class="context-trigger"></span></li>
<li>Item3<span class="context-trigger"></span></li>
</ul>
with CSS that turns the above into a horizontal menu, and JS that turns the [spans] into buttons that bring up contextual menus. Vaguely like this:
Item1^ Item2^ Item3^
If the menu gets too wide for the browser width, it wraps, which is what I want. The problem is that sometimes it's putting in line-breaks before the [spans]. I only want it to break between [li]s. Any ideas?
try using
white-space: nowrap;
in the css definition of your context-trigger class.
Edit: I think patmortech is correct though, putting nowrap on the span does not work, because there is no "white space" content. It might also be that sticking the style on the LI element does not work either, because the browser might breakup the parts because the span is a nested element in li. You might reconsider your code, drop the SPAN element and use css on the LI elements.
You need to put the following to keep your list item from wrapping (putting it in the context-trigger class would just keep the span contents from wrapping):
li { white-space:nowrap; }
If you float the <li> elements, you should get the effect you want.