I want to make a CSS menu auto-justify full width.
HTML:
<nav class="menu">
<ul>
<li>click</li>
<li>click</li>
<li>long clickclick</li>
<li>click</li>
<li>clickclickclick</li>
<li>click click 666</li>
</ul>
</nav>
CSS:
.menu {
text-align: justify;
font-size: 0;
font-size: 14px\9; /* IE6-9 hack */
line-height: 0;
}
.menu:after {
content: '';
display: inline-block;
width: 100%;
height: 0;
zoom: 1;
*display: inline;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
display: inline;
}
.menu ul li {
display: inline-block;
font-size: 14px;
zoom: 1;
*display: inline;
}
.menu ul li a {
line-height: 54px;
}
Demo
It working good on Chrome/Firefox, but not working on IE 10-11. Coud someone please help me fix this?
I had the same problem, add text-justify: distribute to your .menu and it will work fine.
Do you mean you want to have the menu spread across the width of the page? In that case, adding min-width:100%; to .menu in your CSS file will achieve that.
Related
I've been trying to get multiple background images on my page but I couldn't get more than 2, so I started to think that I might use divs instead. But when I use divs I got like 5 white pixels left at the top and and sides of the screen, that was until I changed the position to absolute but then my navbar was stuck behind the div... If anyone could please help me fixing my issue.
My code isn't that good, but this is what I have at the moment:
#P1Tekstvlak1_1 {
background-image: url("DakB1.jpg");
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
/** — Navbar —*/
#nav {
color: FFFFFF;
opacity: 0.9;
}
#nav_wrapper {
width: auto;
margin: 0 auto;
text-align: left;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: fixed;
min-width: 200px;
text-align: center;
background-color: #B50B26;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
color: white;
text-align: center;
text-shadow: 1px 1px 1px #FFFFFF;
}
#nav ul li a,
visited {
color: #FFFFFF;
font-size: 20px;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
<div id="nav">
<div id="nav_wrapper">
<ul>
<li>Home</li>
<li>Over</li>
<li>Renovatie</li>
<li>Nieuwbouw</li>
<li>Vacatures</li>
<li>WKA</li>
<li>Contact</li>
</ul>
</div>
</div>
Remove the absolute positioning and then apply a CSS reset like the one here . Browsers have some styling attributes it applies by default for accessibility purposes. You should remove them. I do this before starting to build any web UI.
Note: Absolute positioning will stack elements versus applying layout to them. That is why you are seeing it behind your NAV
I'm trying to make a CSS drop down menu but the problem is that child list items overlap parent list items as you can see in the picture.
I found the source of the problem to be the padding: 10px 5px; in line 12 - When removed, the problem is solved. But I need the padding for the look. I read Inline elements and padding which addresses a similar issue but even the solution provided in the article - using float: left; instead of display: inline; - does not solve my problem.
Why does this happen and what is the solution?
HTML Code
<ul id="navigation_2">
<li>Home</li>
<li>About
<ul>
<li>Who We Are</li>
<li>Our Goal</li>
</ul>
</li>
</ul>
CSS Code
ul#navigation_2
{
margin: 0;
padding: 0;
list-style: none;
font-family: "Century Gothic","HelveticaNeueLT Pro 45 Lt",sans-serif;
}
ul#navigation_2 li
{
float: left;
position: relative;
padding: 10px 5px;
font-size: 114%;
text-align: center;
width: 100px;
}
ul#navigation_2 li a
{
text-decoration: none;
}
ul#navigation_2 li a:link, a:visited, a:active
{
color: black;
}
ul#navigation_2 li:hover
{
background-color: red;
}
ul#navigation_2 li ul
{
margin: 0;
padding: 0;
list-style: none;
display: none;
}
ul#navigation_2 li ul li
{
display: block;
width: 150px;
text-align: left;
}
ul#navigation_2 li:hover ul
{
display: block;
position: absolute;
background-color: #CBD966;
}
Here, I have a working example:
http://jsfiddle.net/hzCZY/2/
Never underestimate the power of inline-block! Basically your list was colliding with the text 'About' as opposed to the red box around the text 'About'. I formatted the actual a tag to be the red block instead, an inline-block, which then collided correctly with the ul below it.
If you need any more explanation I'd be more than happy to help.
I'm looking for a quick cross browser solution to my need for auto margins.
I have a simple list:
<ul>
<li>text</li>
<li>text</li>
<li class="possibly_last">text</li>
</ul>
With a width of 600px.
What I need is CSS code to make sure there is an even margin between each <li>.
So that they stretch across the full 600px evenly.
I may need to as a "last" class, but that's fine.
I just want a browser friendly way to do this.
Any help would be great, Thanks!
Try this:
<style>
li {
display: block;
float: left;
width: 32%;
}
</style>
If that does not work, try this:
<style>
li {
display: block;
float: left;
width: 200px; // or less
}
</style>
I take it you mean you don't want a margin after the last li? In that case, use the CSS :last-child selector:
ul li
{
margin-right: 10px;
width: 190px; // 190px = 200px - margin width
display: inline-block;
zoom: 1;
*display: inline;
}
ul li:last-child
{
margin-right: 0px;
}
Please note that this will NOT work in any internet explorer except IE9. Sorry :-(
As a fix, you could use JavaScript (notably jQuery) to edit the CSS of the last child.
An example here: http://jsfiddle.net/WtLAm/2/
Are you intending to float the list items so they stretch horizontally to fill the ul that way? if so, something like
<style type="text/css" media="screen">
ul {width: 600px;}
li {display: inline; float: left; width: 33%;}
</style>
would work.
I think this can't be done with margins, I suggest you this solution:
http://jsfiddle.net/wY5t6/
css:
ul li {
margin: 0;
display: block;
float: left;
width: 200px;
text-align: center;
}
ul {
width: 600px;
overflow:hidden;
}
If you need to set padding, background etc on list item than you can do it this way:
http://jsfiddle.net/wY5t6/1/
HTML:
<ul>
<li><span>text</span></li>
<li><span>text</span></li>
<li class="possibly_last"><span>text</span></li>
</ul>
CSS:
ul li {
margin: 0;
display: block;
float: left;
width: 200px;
text-align: center;
}
ul {
border: 1px green dotted;
width: 600px;
overflow:hidden;
}
li span {
background: yellow;
padding: 5px;
}
All,
I have been scratching my head for well over two hours now and I just cannot see whats wrong with the code.
I am building a liquid layout with two navigation bars at the top. The first one is sitting well but the second one (id="filem_right") refuses to sit alongside it.
Here is the HTML:
<body id="container">
<div id="main_bar">
<ul>
<li class="maintabs">Overview</li><li class="maintabs">Collar/ Neckline</li><li class="maintabs">Sleeves
<ul>
<li class="s_leftright">Left Sleeves</li>
<li class="s_leftright">Right Sleeves</li>
</ul></li><li class="maintabs">Body</li>
</ul>
</div>
<div id="filem_right">
<ul>
<li class="filetabs">File</li><li class="filetabs">Edit</li><li class="filetabs">Settings</li>
</ul>
</div>
And here is the CSS:
#container {
min-width: 960px;
max-width: 1034px;
min-height: 500px;
background: rgba(245,212,13,1);
}
/* START OF MAIN MENU */
#main_bar ul {
width: 60%;
position: relative;
left: 3.2%;
border: 1px solid black;
background: rgba(153, 244,200,0.3);
}
.maintabs {
display: inline-block;
width: 25%;
line-height: 3.5em;
list-style-type: none;
}
.maintabs a {
display: block;
text-decoration: none;
color: rgb(165,165,165);
color: rgba(165,165,165,1);
text-align: center;
font-size: 0.8em;
font-weight: bold;
text-transform: uppercase;
}
.s_leftright {
list-style-type: none;
}
.maintabs ul {
display: none;
}
.maintabs:hover > ul {
display: inline-block;
position: absolute;
}
*/ END OF MAIN MENU */
/* START OF FILE MENU */
#filem_right {
display: inline-block;
position: relative;
width: 30%;
left: 69%;
top: 14%;
right: 3.2%;
}
.filetabs {
display: inline-block;
width: 33.3%;
overflow: hidden;
list-style-type: none;
line-height: 3.5em;
}
I had a look at Firebug and it appears that none of my code for 'filem_right' is rendered by the browser (FF 3.6).
Thank you,
Your comment here is incorrect,
*/ END OF MAIN MENU */
Should be /* at the start. This could be a reason the filem_right CSS isn't being picked up by the browser.
I am doing an horizontal dropdown menu. It looks like this :
[menu1][menu2][menu3][menu4]
But when I resize (less wide) my browser, the menu appears like :
[menu1][menu2]
[menu3][menu4]
I want it to remain in line all the time!
EDIT: my CSS file
/* General */
#cssdropdown, #cssdropdown ul {
list-style: none;
position: relative;
visibility: visible;
z-index: 1;
overflow: hidden;
}
#cssdropdown, #cssdropdown * { padding: 0; margin: 0; }
/* Head links */
#cssdropdown li.headlink {
width: 11.911em;
float: left;
margin-left: -1px;
border: 1px black solid;
background-color: #e9e9e9;
text-align: center;
}
#cssdropdown li.headlink a { display: block; padding: 10px; }
/* Child lists and links */
#cssdropdown li.headlink ul { display: none; border-top: 1px black solid; text-align: center; }
#cssdropdown li.headlink:hover ul { display: block; }
#cssdropdown li.headlink ul li a { padding: 5px; height: 17px;}
#cssdropdown li.headlink ul li a:hover { background-color: #FF9; }
/* Pretty styling */
body {
font-family: verdana, arial, sans-serif;
font-size: 0.7em;
position: static;
}
#cssdropdown a { color: black; font-weight: bold; font-size:10px } #cssdropdown ul li a:hover { text-decoration: none; }
#cssdropdown li.headlink { background-color: #FFF50A; }
#cssdropdown li.headlink ul { background-position: bottom; padding-bottom: 10px; }
/*headermenu*/
#headerMenu {
position: relative;
float: left;
color: #DDD;
z-index: 1;
height: 34px;
right: 10px;
width: auto;
}
<div align="left" class="thrColElsHdr" id="headerMenu">
<ul id="cssdropdown" name="cssdropdown">
<li class="headlink"> Ecole
<ul>
<li>Histoire</li>
<li>Philosophie</li>
<li>Méthode</li>
<li>Equipe</li>
<li>Qualité</li>
<li>Services</li>
<li>Emplois</li>
</ul>
</li>
<li class="headlink"> Cours
<ul>
<li>Individuel</li>
<li>Semi-privé</li>
<li>Mini-groupe</li>
<li>Intensif</li>
<li>Entreprises</li>
<li>A distance</li>
<li>Par téléphone</li>
<li>Coaching</li>
<li>Soutien scolaire</li>
<li>Diplômes officiels</li>
</ul>
</li>
<li class="headlink"> Inscription
<ul>
<li>Auto-évaluation</li>
<li>Conditions</li>
<li>Tarifs</li>
<li>Formulaires</li>
</ul>
</li>
<li class="headlink"> Contact
<ul>
<li>Ecole</li>
<li>Lien externe</li>
</ul>
</li>
</ul>
</div><br/>
You should set min-width on the element containing the menu.
you want to use the css
white-space:nowrap;
this should be applied to the parent of your menus
if you provide some of the actual html, I can be more specific
for example
<div class='menuContainer'>
<span>menu1</span>
<span>menu2</span>
<span>menu3</span>
<span>menu4</span>
</div>
and css like
.menuContainer {
white-space:nowrap;
}
see http://www.w3schools.com/css/pr_text_white-space.asp
Edit in response to op question modifications
I assume #cssdropdown is the id your container around all the menus. please let me know the html for this if it's not correct.
Anyways, in this case, you should add to your css
#cssdropdown {
white-space:nowrap;
}
One other note, I see the width of your mens is set to 11.911em. When I see that I can only assume that you set it to be exactly the right width for whatever font you have. keep in mind your users may have slightly different fonts and suddenly your pixel perfect sizing is meaningless. design with a little more flexibility in mind.
Sounds like your width property isn't being set in either the HTML or the CSS.
Can you provide some sample code?