Did a lot of research on all the separate components. However, I don't understand how the components work together. Several placement issues have plagued me on different occasions. I would like to understand why it behaves like it does.
Designing a site with a fixed header, containing some buttons. I want the buttons to be placed on a colored row (NAV). That's why I made a child of NAV. However I can't seem to place the buttons over the bar.
Html
<body>
<nav class="row">
<ul class="menu">
<li id="link1">Link 1</li>
<li id="link2">Link 2</li>
<li id="link3">Link 3</li>
<li id="link4">Link 4</li>
<li id="link5">Link 5</li>
</ul>
</nav>
<div class="row main">
#RenderBody()
</div>
CSS
nav, div, li {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
border: 1px dashed black;
}
.row {
width: 100%;
padding-left: 20px;
padding-right: 20px;
}
nav {
position: fixed;
top: 80px;
height: 40px;
z-index: 100;
background-color: Green;
border-bottom: solid greenyellow 2px;
}
.menu li {
display: block;
background-color: darkgreen;
float: left;
height: 40px;
width: 60px;
}
.menu a {
color: white;
}
Result
It can be fixed by several things, like button margin or placing the buttons relative with a negative Top offset. However, these solutions feel 'dirty', like it's not the right way to do it. Why are the LI's not on top of NAV?
because your broswer applies by default some margin to the ul tag
try adding
ul {
margin: 0;
}
you could avoid these issues by using a css reset (Eric Meyer is the authority here: http://meyerweb.com/eric/tools/css/reset/) or Necolas' Normalize.css: http://necolas.github.io/normalize.css/
the first one zeroes all the values of all elements - you have to rebuild the style of some elements like lists.
The second one normalizes the values of elements to fix browsers inconsistencies
When you use the "float" property on some elements (here the "LI"), the parent (here the "menu") ignore his floating children to calculate his height.
So you have to specify a valid height to your menu, or probably better, use "overflow:auto" on it to remember him his children.
So remove your
nav {
height:40px;
}
and add in your CSS :
.menu {
overflow:auto;
}
As in this fiddle : http://jsfiddle.net/bE3QH/
When using the element ul it sometimes creates whitespace on browsers. By making the margin 0px you are removing the whitespace decreasing the area used by element. hope this helps. The following code can be used...
ul {
margin:0px
}
You can use this instead of your code.
You will get ready made menu control on this website.
You can modify as you want & you will get your menu control available in a moment.
Here's the link.
http://cssmenumaker.com
http://tympanus.net/codrops/2010/07/16/slide-down-box-menu/
http://cssmenumaker.com/builder/1666948
Please check it out.
These are very useful and it will definitely save your time as well.
I hope this will resolve your issue.
Add this to your CSS:
ul{
margin:0;
padding:0;
}
This clears the default properties for ul elements
You would be better off if you didn't specify a width and a height for the list items, but rather displaying the anchor tags as blocks, and giving those a width and height.
Related
I've been scratching my head with this one for a while. I need to make a ul li menu reduce width responsively. At the moment the last li wraps to another line as the screen width is reduced. Whilst I've managed to do it on one of my menus, the same type of css won't work on this as the li contents are not equally sized. I did find a fiddle from a previous SO question, but trying that method it completely breaks the styling of the dropdown for "Shop By Products"
I'm trying to achieve something like this as the viewport is reduced.
http://jsfiddle.net/au9muz43/
where the css is very simple as
.horizontal-style {
display: table;
width: 100%
}
.horizontal-style li {
display: table-cell;
}
.horizontal-style a {
display: block;
border: 1px solid red;
text-align: center;
margin: 0 5px;
background: #999
}
I've set up a fiddle with a large chunk of my css and html here: https://jsfiddle.net/1Le63xk0/1/
Even adding
display:table-cell;
to my css line
.mega-menu li{float:left;text-align:center;position:relative;margin-right:15px;border:none;}
breaks the dropdown layout for the Products
So a quick combining of the two fiddles, I noticed that some of the styles conflicted. I removed your display:block calls on the li / a, and made them display:table-cell; (which is the reason why it will shrink, instead of drop to a new line.
Brought all your css over, this was just a case of fixing certain divs that were still styled as block/inline-block and converting them to table formats.
The main issues were found in these lines:
.mega-menu li a{color:#fff;outline:0;padding:12px 35px 0px 0px;text-decoration:none;display:block;font-weight:normal;text-transform:uppercase;}
.mega-menu li:hover a{color:#007dc5;position:relative;z-index:11;padding:4px 11px 3px 11px;}
Where you had a large amount of padding that was pushing each div.
Here is the JSFiddle.
Edit: Updated just to bring more of his css over.
Edit 2: Still getting downvoted, there literally is no other way to explain it other than, double checking OPs display properties. OP hasn't responded explaining something is wrong with the fiddle, so as far as I can see, it has everything he asked for: A shrinking nav, with his dropdowns working the same.
First: there is a ; missing on width:100%. Secondly it can be solved by changing display to block and inline-block. The table display is for tables and (probably) not intended to be used in this case.
.horizontal-style {
display: block;
width: 100%;
}
.horizontal-style li {
display: inline-block;
float:left;
}
.horizontal-style a {
display: block;
border: 1px solid red;
text-align: center;
margin: 0 5px;
background: #999
}
div {
background: #ccc
}
<div style="width: 100%;">
<ul class="horizontal-style">
<li>Home</li>
<li>Shop By Products</li>
<li>Shop By Brand</li>
<li>Why Choose Us</li>
<li>Support</li>
<li>Offers</li>
<li>Contact Us</li>
</ul>
</div>
Take a better look in this JSFiddle. StackOverflow snippet does not support resizing.
OK so this is actually a little complicated.
I have a navigation list where the list items are set to inline-block. The number of items is the list is dynamic so may vary.
My aim is to have the list items span the whole width of the container. (e.g. if there were 4 list items each one would take up 25% of the container width [ignoring margin/padding etc])
There is the added complication that browsers seem to add a 4px margin to inline-block elements where there is whitespace between them (linebreak/space etc).
I have made a fiddle as a starting point which has 2 examples: the first is just the list items in inline-block mode which the 2nd justifies them accross the width.
Neither achieves what I want which is for the whole width to be taken up by the elements without them breaking onto another line.
http://jsfiddle.net/4K4cU/2/
edit: slightly separate but why in my 2nd example is there a space beneath the lis, dispite the fact I have set line-height and font-size to 0?
OK, despite many decent answers and my inital thinking that js/jquery was the only way to go there is in fact a good css-only solution: using table cells. Original suggestion by #Pumbaa80
.list {
margin:0;
padding: 0;
list-style-type: none;
display: table;
table-layout: fixed;
width:100%;
}
.list>li {
display: table-cell;
border:1px green solid;
padding:5px;
text-align: center;
}
.container {
border: 1px #777 solid;
}
<div class="container">
<ul class="list">
<li>text</li>
<li>text</li>
<li>some longer text</li>
<li>text</li>
</ul>
</div>
This is superior to other solutions as:
css-only
no 4px margin problem as with inline-block
no clearfix need for floated elements
maintains equally distributed width independent of li content
concise css
Fiddle here: http://jsfiddle.net/rQhfC/
It's now 2016 and I wanted to update this question with an answer using flexbox. Consult with CanIUse for browser-compatiblity.
/* Important styles */
ul {
display: flex;
}
li {
flex: 1 1 100%;
text-align: center;
}
/* Optional demo styles */
* {
margin: 0;
padding: 0;
}
ul {
margin-top: 2em;
justify-content: space-around;
list-style: none;
font-family: Verdana, sans-serif;
}
li {
padding: 1em 0;
align-items: center;
background-color: cornflowerblue;
color: #fff;
}
li:nth-child(even) {
background-color: #9980FA;
}
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
Pre-edit fiddle (now inlined in above snippet)
Here is one way of modifying your original concept.
The CSS is:
.list {
padding:0;
margin:0;
list-style-type:0;
overflow: hidden;
height: 42px;
}
.list li {
display: inline-block;
line-height: 40px;
padding: 0 5px;
border:1px green solid;
margin:0;
text-align:center;
}
On your parent container, .list, set a height to enclose the child elements.
In this case, I chose 40px and added 2px to account for the border.
Also, set overflow: hidden on .list to hide the 2nd line generated by the pseudo-element.
On the li elements, set line-height: 40px which will center the text vertically.
Since the height is fixed, the second line gets hidden and you can style your parent with a border and so on without extra white space breaking the design.
Demo: http://jsfiddle.net/audetwebdesign/WaRZT/
Not Foolproof...
In some cases, you may have more links than can fit on a single line. In that case, the items could force a second row to form and because of overflow hidden, you would not see them.
Evenly Spaced Border Boxes
If you want the border boxes to be evenly distributed, you need to set a width to the li elements.
If the content comes from a CMS, and you have some control over the coding, you can dynamically generate a class name to set the correct width using predefined CSS rules, for example:
.row-of-4 .list li { width: 24%; }
.row-of-5 .list li { width: 19%; }
.row-of-6 .list li { width: 16%; }
See: http://jsfiddle.net/audetwebdesign/WaRZT/3/
There are multiple fixes to this. The one I prefer is simply to remove the whitespace between the elements, simply because the font-size trick involves non-semantic CSS. And its a lot easier haha. Code because answer requires it:
<ul class="list">
<li>
text
</li><li>
text
</li><li>
text
</li><li>
text
</li>
</ul>
Updated jsFiddle, where the first list has items set to width:25%; and fits in the window on one line. If this isn't what you were going for, I must have misunderstood.
EDIT: for unknown number of list items
There is some CSS3 stuff for this, but to be cross-browser compatible back to IE8, you want a JS solution. Something like this should work:
var listItems = document.querySelectorAll('li');
listItems.style.width = listItems.parentNode.style.width / listItems.length;
SECOND EDIT: for jQuery instead of JS
Winging it, but:
var $listitems = $('.list').children();
$listitems.width($listitems.parent().width()/$listitems.length);
you can use the display:inline-block with li element,and use the text-align:justify with ul element. If you are interested ,please click here.
I have a simple horizontal nav menu that uses highly-styled anchors for buttons. Now, the last button, called "store" has a list of content that becomes visible via this jquery hover effect.
I can't get the "store" button to align with the rest of them. Two days now I'm trying float:left margin 50% whatever, position:incorrect, overflow:I-forget-what, clear:both, plus various cheesy hacks, and I'm at that point of CSS positioning where you start thinking seriously about re-constructing your layout using tables.
Instead of selling my soul to tables, I guess I better just ask someone who is more experienced to please take a look:
http://www.ideagasms.net/ideagasms-with-dropdown-menu.html
When viewing source, you'll notice I added lots of comments next to the main elements so it should be easy to make sense of everything quickly. Thank you. :)
This code should work:
I've added a wrapping div to your menu with a fixed width and centred it on the page. Then added each a tag into an li.
Your jQuery Menu is now broken but it should just be a case of finding the correct elements again now the orders have changed in the dom.
You might also have to create some new styles and add them to the elements again. As I've probably messed a few bits up. I'd suggest adding proper classes and id's so you don't run into styling problems in the future.
<div id="nav">
<ul>
<li>
<a alt="STORE" class="navmenu faded" href="http://www.ideagasms.net/ideagasms-products/">STORE</a>
<ul class="file_menu">
<li>File</li>
<li>Edit</li>
<li>View</li>
<li>Insert</li>
<li>Modify</li>
<li>Control</li>
<li>Debug</li>
<li>Window</li>
<li>Help</li>
</ul>
</li>
<li><a alt="HOME" class="navmenu faded" href="http://www.ideagasms.net/link">HOME</a> </li>
<li><a alt="VIDEO" class="navmenu faded" href="http://www.ideagasms.net/link">VIDEO</a> </li>
<li><a alt="ABOUT" class="navmenu faded" href="http://www.ideagasms.net/link">ABOUT</a></li>
<li><a alt="CONTACT" class="smcf-link navmenu faded">CONTACT</a></li>
<li><a alt="DONATIONS" class="navmenu scroll faded" href="http://www.ideagasms.net/link">DONATIONS</a></li>
<li><a alt="MENTORING" class="navmenu faded" href="http://www.ideagasms.net/link">MENTORING</a></li>
<li><a alt="BEAUTY" class="navmenu faded" href="http://www.ideagasms.net/link">BEAUTY</a></li>
<li><a alt="SNIPPETS" class="navmenu scroll faded" style="letter-spacing:1px" href="http://www.ideagasms.net/link">#iG</a></li>
</ul>
</div>
<style type="text/css">
#buttonnav {
float:left;
height: 25px;
width: 100px;
margin-bottom:1cm;
position:relative;
z-index:9;
}
#nav {
margin: auto;
width: 740px;
background: orange;
}
ul {
margin: auto;
}
ul li {
display: inline;
float: left;
}
.menu_class {
border:1px solid #1c1c1c;
}
ul.file_menu {
cursor:pointer;
display:none;
width:260px;
border: 1px solid #1c1c1c;
margin:0;
padding:0;
list-style:none;
}
.file_menu li {
background-color: #302f2f;
}
.file_menu li a {
color:#FFFFFF;
text-decoration:none;
padding:10px;
display:block;
}
.file_menu li a:hover {
padding:10px;
font-weight:bold;
color: #F00880;
}
</style>
That menu looks atrocious and to be honest, doesn't allow for much flexibility as you noticed.
If I were you I would rebuild it in t way where a proper html structure is used with a (nested) li structure so you could just whip in that extra item and the submenu...
This is the ugly fix
#buttonnav {
display: inline-block;
/* remove the float & widht */
}
.hoverli ul.file-menu {
position:absolute;
}
This is a case where you should probably go back to the basics and re-learn how to make a proper menu. If this is in some content management system then override the classes & templates to make it so you can easily add things...
Stuff I am missing for the sub menu also is position: absolute; (and you probably want the sub-menus parent to be relative).
You need to fix two things to properly present the button and have the sub-menu functioning:
See this working Fiddle Example!
1)
Set the css for the button like:
#buttonnav {
display: inline-block;
height: 25px;
position: relative;
z-index: 9;
}
Note: display:inline-block; gets in and float, margin and width gets out.
2)
Adjust the css for the sub-menu to allow it to appear without breaking the layout:
CSS
.hoverli {
position: relative;
z-index: 1;
}
.hoverli ul {
position:absolute;
}
I have a menu built with jquery from apycom.com that I am trying to center.
The menu items are from a cms and dynamically created when the page loads. So this means that the menu isn't a fixed width.
I have tried several methods using just css, but without having a width set for the menu, they don't want to work.
I have found some information that leads me to believe that there may be a way to do it with javascript.
Is there is a way to dynamically set the width of the div element around the menu and then set the left and right margins to auto to center the menu?
If there is a better way to accomplish this, I am open to ideas.
Thanks in advance
Bjorn
Here is a sample of what I have thus far.
I have already tried using 'margin: 0 auto;' but without a width setting that doesn't work. Because the menu is created by looping over the menu items available from the cms, I don't know the width of the menu.
I've tried using 'display: inline-block;' as well, and that get's me to a point that the block space the menu takes up is only the width of the menu. Now I just need to be able to center that block. I thought that there might be a way that once the menu has been created and the width is then known that you could then apply the margin settings.
Maybe similar to the way jquery is able to apply and change style settings on the fly.
<div class="top_navigation_bar">
<div id="menu">
<ul class="menu">
<li><a class="parent" href="/en/"><span>Home</span></a></li>
<li><a class="parent" href="/en/web-design"><span>Web Design</span></a>
<div>
<ul>
<li><span>Design Packages</span></li>
<li><span>Website Maintenance</span></li>
<li><span>Redesign Website</span></li>
<li><span>Design Fundamentals</span></li>
<li><span>Design Key Elements</span></li>
</ul>
</div>
</li>
<li><a class="parent" href="/en/website-business-solutions"><span>Business Solutions</span></a></li>
<li><a class="parent" href="/en/internet-marketing"><span>Internet Marketing</span></a>
<div>
<ul>
<li><span>Small Business Marketing</span></li>
<li><span>Leveraging the Internet</span></li>
</ul>
</div>
</li>
<li><a class="parent" href="/en/doing-business"><span>About Us</span></a>
<div>
<ul>
<li><span>Design Team</span></li>
</ul>
</div>
</li>
<li><a class="parent" href="/en/blog"><span>Blog</span></a></li>
<li><a class="parent" href="/en/contact-us"><span>Contact</span></a></li>
<li class="last"><span>FAQ</span></li>
</ul>
</div>
.top_navigation_bar {
height: 46px;
padding-top: 4px;
background-color: #3a8658;
}
div#menu {
height: 46px;
padding-left: 24px;
background: url(/site_media/template_images/images/left.png) no-repeat;
_background: url(/site_media/template_images/images/left.gif) no-repeat;
width:auto;
}
div#menu ul {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
Without a sample makes harder to see what exactly is happening. It would be nice if you post a sample for HTML and CSS you are using. But going blind...
For horizontal centering an element with CSS, you can do:
element {margin: 0px auto;}
This is enough to correctly center an element.
Note that block elements (like div, ul, li and p) tends to fill 100% horizontally. Floating elements or absolute positioning them makes they loose this fullfillment characterist. If this is the case, the elements will wrap to minimum comfortable size that allows the content to be displayed, unless you set width and/or overflow properties.
If you set width, and content is larger than the declared width, it will or overflow, or wrap. You have CSS properties to handle those cases too.
I recommend doind this with CSS, because makes layout more accessible. But if you prefer, you can code width with javascript or jquery, making your life a bit easier.
To process that with javascript, you'll need something like:
myMenuElement.style.width = "200px";
with Jquery (width method):
$('#myMenuElement').width(200);
Cheers.
EDIT
Not sure what is exactly the desired effect, but I made a few changes in your css. Check.
.top_navigation_bar {
height: 46px;
padding-top: 4px;
background-color: #3a8658;
}
div#menu {
height: 46px;
padding-left: 24px;
}
div#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
ul.menu>li {
display: inline;
position: relative;
}
ul.menu>li>div {
display: block;
position: absolute;
left: 0%;
}
ul.menu span {
white-space: nowrap;
}
Follow a good reference from both, vertical and horizontal menus (I've learned from those).
If you are trying to center the #menu inside the .top_navigation_bar then you could use the margin:0 auto and additionally use jQuery like this
$(function(){
$menu = $('#menu');
$menu.width(
$('.menu').outerWidth() +
$menu.outerWidth() - $menu.width()
);
// added the following line, because the lavalamp plugin
// corrects itself when the window resizes..
// so we trigger a resize event, and the plugin fixes everything ;)
$(window).trigger('resize');
});
this will resize the #menu according to its contents, and will become centered because of the auto margin we set in css.
example at http://www.jsfiddle.net/MCnbr/
It shows in firefox,but no in IE(in fact mine is IE6)
<style type="text/css">
li { list-style-type:disc; }
</style>
<div style="margin: 2px auto 15px; padding: 5px 0px; width: 480px; text-align: center;">
<ul style="margin: 0; padding: 0; text-align: left; list-style-position: outside; overflow: visible;">
<li ><em>test.</em> 111</li>
<li><em>test.</em> 2</li>
</ul>
</div>
Can take a look here:link text
EDIT
All requirements:
1.remain the parent div with width fixed.
2.must make <ul> text-align:left;
3.show the bullets
Try messing with the margin/padding on the ul and give layout to the lis possibly?
ul { margin:0 0 0 10px; padding:0 0 0 10px; }
ul li { zoom:1; }
I forget which one IE cares about but it needs enough space to show them.
The left edge of lists is always at the text, not the bullet points. In other words, the bullet points are outside the list's bounding box, which makes them disappear for some reason in IE.
Add some left-padding to the list (at least 20px should do it).
I think you also want to add a doctype to the page - on your example page the list should be centrally aligned, but it isn't for me (in IE8) because IE is in quirks mode.
because of the CSS width attribute.
I suggest you set the width attribute to the li tag instead of the ul
Edit
list-style-position: outside; can make the same problem happen on Firefox
You will have to find another way to style the list, but if you insist on list-style-position: outside; you can use javascript to set the width attribute in the suitable place.
i know it`s old style but this should work
<li type="disc">... </li>
it might work.. ie has a lot of problem with css.. problems that will be fixed..