I made a menu , I have worked with chrome but now when I try with firefox I get spacing between items
In chrome
In Firefox
Here's The CSS
http://jsfiddle.net/Mazala/mpc1o2gf/
HTML :
<nav>
<ul class="menu">
<li id="accueil">Accueil</li>
<li id="bureau">Bureau</li>
<li id="actualites">Actualités</li>
<li id="partenaires">Partenaires</li>
<li id="contact">Contact</li>
<li id="liens">Liens utiles</li>
<li id="Liens">lien+subtitles
<ul class="sousmenu">
<li id="Liens">Liens utiles</li>
<li id="Liens">Liens utiles</li>
<li id="Liens">Liens utiles</li>
<li id="Liens">Liens utiles</li>
</ul>
</li>
</ul>
</nav>
CSS in the link .
Thanks for help.
Using inline block will make any text/spaces between your elements treated as text, and style them accordingly. One quick fix (if pure images) was to set the font-size to 0 (that wouldn't work for you since you have actual text in there).
The easiest solution, if you don't care about having the perfect looking code and just getting it to work, is to remove all extra spaces in your code. Which I did to your code, and it works:
<ul class="menu">
<li id="accueil">Accueil</li><li id="bureau">Bureau</li><li id="actualites">Actualités</li><li id="partenaires">Partenaires</li><li id="contact">Contact</li><li id="liens">Liens utiles</li><li id="Liens">lien+subtitles<ul class="sousmenu"><li id="Liens">Liens utiles</li><li id="Liens">Liens utiles</li><li id="Liens">Liens utiles</li><li id="Liens">Liens utiles</li></ul></li>
</ul>
https://jsfiddle.net/mpc1o2gf/1/
That's a common issue with inline-block elements. By default, there some some spacing surrounding those elements. It's somewhat counter-intuitive but default behavior.
There are a few fixes to this. My preferred is to float the li elements. There are some caveats. Read this for a full understanding.
Related
Here is my HTML
<ul class="menu">
<li class="menu__item">
</li>
<li class="menu__item">
<ul class="list"> // can I place this block inside here?
<li class="list__item">
...
</li>
<li class="list__item">
...
</li>
</ul>
</li>
</ul>
In this case, I place the block list inside the element menu__item.
I wonder, is this legal?
As per this documentation from BEM, we can nest the blocks. I.e. a block can have another block in it.
The only condition is that the children blocks should be independent on the parent.
https://en.bem.info/methodology/block-modification/#placing-a-block-inside-another-block
Yes, it is valid. See example from section Nested Lists
in - https://html.com/lists/.
I have a horizontal navigation, and I want the last two item to be pushed to the right side of the container.
With only one item, I could simply float the last item of the navigation. But I want to apply this to two elements - and I have the constraint that their order has to be the same in HTML and for the viewer.
I tried the following, but this broke my javascript code which relies on
$('... a').parent().next().doSomething(...)
The code
<ul class="main main-nav">
<li class="first">Projekte</li>
<li>Aktuell</li>
<div class="push-right">
<li>Über uns</li>
<li>Kurse</li>
</div>
</ul>
Is there some obvious solution I don't see?
Any other shortcut?
You shouldn't place a div inside of a ul:
<ul class="main main-nav">
<li class="first">Projekte</li>
<li>Aktuell</li>
<li class="push-right">Über uns</li>
<li class="push-right">Kurse</li>
<!-- Or Flip them to maintain order -->
<li class="push-right">Kurse</li>
<li class="push-right">Über uns</li>
</ul>
CSS:
.push-right{
float:right;
}
I'm new to programming and I'm trying to build a website with various links in the same line. I'm using div so I got them all on the same block. The problem is that when I put all the links on float:left, the background color dissappears, but when I put the last link with float:center it shows the background as I want it.
Can anyone help me? Thanks in advance
This is what I'm using:
<div id="links" style="width:1250;height:450;background-color:#000000;text-align:center">
<ul type="none">
<li style="float:left;margin-right:100px;text-align:center">
Nosotros
</li>
<li style="float:left;margin-right:100px">
Desafío UNIMET
</li>
<li style="float:left;margin-right:100px">
Patrocinantes
</li>
<li style="float:left;margin-right:100px">
Contacto
</li>
</ul></div>
There is no such thing as float: center only left, right, none, and inherit. But the reason the parent container bg color is not showing is because when you float an element it no longer takes up space in its parent.
Either give your parent container a height (and specify pixels or some other unit of measure which you aren't doing now), or as a hack you can give the parent: "overflow: hidden;" css property.
Good luck in your learnings! Time and passion will get you everwhere!
EDIT: I highly recommend you get the book CSS Mastery by Andy Budd. It will teach you this and a lot more.
You had not given the unit to width, and height. Make it to px or em or as per what you need and it will work.
<div id="links" style="width:1250px;height:450px;background-color:#000000;text-align:center">
<ul type="none">
<li style="float:left;margin-right:100px;text-align:center">
Nosotros
</li>
<li style="float:left;margin-right:100px">
Desafío UNIMET
</li>
<li style="float:left;margin-right:100px">
Patrocinantes
</li>
<li style="float:left;margin-right:100px">
Contacto
</li>
</ul></div>
Try this http://jsfiddle.net/sLEYs/
Secondly, there is no such value center for float. http://www.w3schools.com/css/css_float.asp
the page in question is http://www.streetstyles4all.co.uk/test4.html (general menu drop down problem)
Hi
I have decided to update my menu to use icons. I had a drop down menu working with no java script etc just css and html, and I tried to put icons beside each link in the drop down, but before I could go any further I could not get passed this problem, and get rid of the hover image that is used for the main navigation. The image appears next to every menu
I can't get passed this. Can anyone please advise.
My menu code is:
<ul id="menu">
<li id="home">Home</li>
<li id="general">General
<div class="dropdown_4columns">
<div class="col_1">
<h3>Street Styles 4 All</h3>
<ul id="submenu">
<li id="ss4aaboutus">About Us</li>
<li id="ss4aagency">Agency</li>
</ul>
</div>
<div class="col_1">
<h3>Events</h3>
<ul>
<li>What's on next</li>
<li>Competitions</li>
<li>End of Year Show</li>
<li>Summer School</li>
<li>Master Classes</li>
</ul>
</div>
<div class="col_1">
<h3>Dance Crew</h3>
<ul>
<li>Demo Squad</li>
<li>Pure Skillz</li>
<li>Performance Dates</li>
<li>How to Join</li>
</ul>
</div>
<div class="col_1">
<h3>Dance Crew</h3>
<ul>
<li>Demo Squad</li>
<li>Pure Skillz</li>
<li>Performance Dates</li>
<li>How to Join</li>
</ul>
</div>
</div>
</li>
<li id="nearestclass">Nearest Class</li>
<li id="tutorials">Tutorials</li>
<li id="shop">Shop</li>
<li id="hireus">Hire Us</li>
<li id="contact">Contact</li>
the page in question is http://www.streetstyles4all.co.uk/test4.html
I think the hover state and the height for #general is getting applied to the LI elements that are inside the #general LI element. You may need to define a class for the inner LI elements and set the background as none and mark it !important.
Try using the css z-index property for your images. As easy as z-index: 3;
Or try resizing the images also with css.
I have a group of images which each have their own links. I want the images to be in a list (<ul><li> .. etc) and have each item have a different background-image.
Would I run into any issues with something like this?
<ul>
<li class="1"></li>
<li class="2"></li>
<li class="3"></li>
<li class="4"></li>
<li class="5"></li>
<li class="6"></li>
</ul>
You would do better to write it like this
<ul>
<li class="1"></li>
<li class="2"></li>
<li class="3"></li>
</ul>
Then you could add the background-image to either the a or the li.
However, you would style the as as display:block and give them the same height and width of the li. That way the background-image would show and the entire li would be clickable.
It is not valid HTML because the only thing allowed in an <ul> element is <li>s.
It's not valid HTML.
<!ELEMENT UL - - (LI)+ -- unordered list -->