Is there a way to do this?
When using navigation that can change the number of items often, it would be nice not having to calculate the with and updating the css, but just having a solution that works.
if that's impossible (I'm assuming it is) can anyone point me to a javascript that can do this?
edit
re: provide code some code
basically I'm working with, what I think is, the most typical setup
<div class="main">
<div class="nav">
<ul>
<li>short title</li>
<li>Item 3 Long title</li>
<li>Item 4 Long title</li>
<li>Item 5 Long title</li>
<li>Item 6 Extra Long title</li>
</ul>
</div>
</div>
edit
.main {
width:100%;
text-align:center;
}
.nav {
margin:0 auto;
}
.nav ul li {
display:inline;
text-align:left;
}
the issue I've found with this/these solutions is that the content is nudged to the right
adding some right padding (of 40px) seems to fix this across the browsers I'm checking on (O FF IE).
.nav {
margin:0 auto;
padding-right:40px;
}
I don't know where this value is coming from though and why 40px fixes this.
Does anyone know where this is coming from? it's not a margin or padding but no matter what I do the first about 40px can not be used for placement.
Maybe it's the ul or li that's adding this.
I've had a look at the display:table-cell way of doing this, but there's that complication with IE and it still has the same issue as the other solution
edit (final)
okay I've tried some things in regard to the indent.
I've reset all padding to 0
*{padding:0;}
that fixed it, and I don't need to offset the padding
(I think I'll leave my whole process up so if anyone comes across this, it'll save them some time)
thanks for the comments and replies
<div class="nav">
<ul>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
</ul>
</div>
<style>
.nav { text-align:center; }
.nav ul { display:inline-table;}
.nav ul li {display:inline;}
</style>
That's all,
Change number of li , but ul will always be centre aligned
make div with class="nav"
place ul inside it, ul will be center aligned always
hard to tell without seeing exactly what your trying to achieve but this should at least help...
Your CSS
#main {
width:100%;
text-align:center;
}
#nav {
margin:0 auto;
}
#nav ul li {
display:inline;
}
#content {
text-align:left;
}
Your HTML
<div id="main">
<!-- Your Navigation Menu -->
<div id="nav">
<ul>
<li>Nav 1</li>
<li>Nav 2</li>
<li>Nav 3</li>
</ul>
</div>
<!-- Your Content Area -->
<div id="content">
Lorem ipsum dolor sit amet, consectetur ...
</div>
</div>
If you want to center a div in its container, try setting margin-left and margin-right of the container to auto.
It looks like somebody had the same problem you did. Hopefully this is better than my first recommendation. :)
http://www.leveltendesign.com/blog/nickc/centering-a-css-menu-without-width-aka-shrink-wrap
How about
#form1 {text-align:center}
#menuWrapper{display:inline-block;text-align:left}
Also, it woudl be more accessible to mark up your menu as follows:
<form id="navWrapper">
<ul>
<li><input></input></li>
...
</ul>
</form>
and use
#navWrapper {text-align:center}
#navWrapper ul {display:inline-block;text-align:left}
#navWrapper li {display:inline}
here a nice workaround for centering a div with no width.
is tableless and is working in any browser!
(EDIT: dead link replaced with one from archive.org. BTW, the technique described there is: wrap your DIV in a SPAN to make it inline.)
Based on what I believe you are asking, you want to center a div dynamically, given that the width will change based on how many menu items are visible. I assume you would also like this to dynamically center itself on resize as well. This can be done with some simple javascript as shown below. I have mocked up an example you can play with, works in IE and FF. The javascript is the key. Also of note, although not part of your question, it may make sense to control the min-width on resize...ping me if you run into that.
<html>
<head runat="server"></head>
<body onload="centerMenu()" onresize="centerMenu()">
<form id="form1" runat="server">
<div id="menuWrapper" style="display:inline; height:20px;">
<input type="text" value="menuItem" />
<input type="text" value="menuItem" />
<input type="text" value="menuItem" />
<input type="text" value="menuItem" />
</div>
</form>
<script type="text/javascript">
function centerMenu()
{
//Wrap your menu contents in a div and get it's offset width
var widthOfMenu = document.getElementById('menuWrapper').offsetWidth;
//Get width of body (accounting for user installed toolbars)
var widthOfBody = document.body.clientWidth;
//Set the width of the menu Dynamically
document.getElementById('menuWrapper').style.marginLeft = (widthOfBody - (widthOfMenu)) / 2;
}
</script>
</body>
</html>
Related
I'm trying to develop a menu where dynamically some text must have the property vertical-align:super.
It's happening that this item containing "super" text is not vertical aligned with other item.
Here the CSS code:
<style>
#menu{width:300px;height:100px;background:#ABD4E6;}
#menu ul{list-style:none;}
#menu li{float:left;background:#054664;padding:20px;}
</style>
<div id="menu">
<ul>
<li>Home</li>
<li>App<span style="vertical-align: super;">*</span></li>
<li>Contacts</li>
</ul>
</div>
How can I solved the issue?
Many thanks in advance
Elements with float: left behave in such way that they won't position themselves verticaly, no matter what vertical-align would you set to them. All li elements should not have float: left so they would preserve some specific line-height. Then you can position them together with the span, relatively to the line-height. One of the possibilities is to change the #menu li styles to this:
#menu li {
display: inline-block;
vertical-align: top;
background:#054664;
padding:20px;
}
You will also have to remember to change the HTML markup a bit. There must be no white-spaces between each opening and enclosing li tags, like this:
<ul>
<li>
Home
</li><li><!-- HERE: no space -->
App<span style="vertical-align: super;">*</span>
</li><li><!-- HERE: no space also -->
Contacts
</li>
</ul>
Here's an example: http://jsfiddle.net/eLft6/
I've another issues. The text in now vertically aligned but the position changed if I use span with super property or not.
Vertical alignment of this code:
<div id="menu">
<ul>
<li>Home</li>
<li>App<span style="vertical-align: super;">*</span></li>
<li>Test</li>
</ul>
is different from that one:
<div id="menu">
<ul>
<li>Home</li>
<li>App</li>
<li>Test</li>
</ul>
I've tried to modify the line-height using span for all li item, also setting it with different value in case of super usage or not but it doesn't work!
Given mark-up similar to:
<h1 id="Menu1Title">Menu1</h1>
<nav id="Menu1">
<a>Item1-1</a>
<a>Item1-2</a>
<a>Item1-3</a>
</nav>
<h1 id="Menu2Title">Menu2</h1>
<nav id="Menu2">
<a>Item2-1</a>
<a>Item2-2</a>
<a>Item2-3</a>
</nav>
<h1 id="Menu3Title">Menu3</h1>
<nav id="Menu3">
<a>Item3-1</a>
<a>Item3-2</a>
<a>Item3-3</a>
</nav>
How can this presentation be achieved using CSS only?
Menu1 Menu2 Menu3
Item1-1
Item1-2
Item1-3
Item2-1
Item2-2
Item2-3
Item3-1
Item3-2
Item3-3
ULs can also be used as long as they are three separate elements and not sub-lists of one another. I'd prefer not to use absolute positioning as there is other content below this that should flow around the mark-up above. I also have no need for old IE hacks; only supporting IE9 and modern browsers.
Is this even possible? Thanks!
Edit... The above formatting question is to style for mobile. Non-mobile is displayed as below which is why I was hoping for a CSS-only solution that didn't require mark-up changes.
Menu1
Item1-1
Item1-2
Item1-3
Menu2
Item2-1
Item2-2
Item2-3
Menu3
Item3-1
Item3-2
Item3-3
OK, if you really cant change mark up or use jQuery to alter the mark up then below is a CSS only solution:
http://jsfiddle.net/wSLEb/
You could absolutely position the headers and give the first ul margin top. Then using :nth-of-type pseudo class selector you could target individual headers and give them more left positioning to push them across the page and away from one another.
It's not very flexible as you have to hard code the left positioning so take into account how the width of the headers are rendered on a mobile screen.
Mark up would be:
<h1 id="Menu1Title" class="header">Menu1</h1>
<nav id="Menu1">
<ul class="first">
<li><a>Item1-1</a></li>
<li><a>Item1-2</a></li>
<li><a>Item1-3</a></li>
</ul>
</nav>
<h1 id="Menu2Title" class="header">Menu2</h1>
<nav id="Menu2">
<ul>
<li><a>Item2-1</a></li>
<li><a>Item2-2</a></li>
<li><a>Item2-3</a></li>
</ul>
</nav>
<h1 id="Menu3Title" class="header">Menu3</h1>
<nav id="Menu3">
<ul>
<li><a>Item3-1</a></li>
<li><a>Item3-2</a></li>
<li><a>Item3-3</a></li>
</ul>
</nav>
and CSS would be:
.header {
position: absolute;
top: 0;
left:0;
}
.header:nth-of-type(2) {
left:50px;
}
.header:nth-of-type(3) {
left:100px;
}
ul {
list-style: none;
margin:0;
padding:0;
}
ul.first {
margin-top: 20px;
}
You can read more about pseudo class selectors on Chris Coyier's site here: http://css-tricks.com/pseudo-class-selectors/
Good luck
To start your lists should be in uls.
if you can't use absolute positioning then you need to change your mark up to achieve that kind of styling. The headers should appear after one another in the html. If you can't change your mark up at the source then you will have to use jQuery to reorder the mark up on page load.
in your jQuery I would target all of the headers and then remove all of them except for the first and then insert these removed headers after the first one, and then place a clearing div after the last header.
See this or the code below: http://jsfiddle.net/wSLEb/
Your mark up would become like so:
<h1 id="Menu1Title" class="header">Menu1</h1>
<h1 id="Menu2Title" class="header">Menu2</h1>
<h1 id="Menu3Title" class="header">Menu3</h1>
<div class="clear"></div> <!--clearing div added to move first ul under the headers-->
<nav id="Menu1">
<ul>
<li><a>Item1-1</a></li>
<li><a>Item1-2</a></li>
<li><a>Item1-3</a></li>
</ul>
</nav>
<nav id="Menu2">
<ul>
<li><a>Item2-1</a></li>
<li><a>Item2-2</a></li>
<li><a>Item2-3</a></li>
</ul>
</nav>
<nav id="Menu3">
<ul>
<li><a>Item3-1</a></li>
<li><a>Item3-2</a></li>
<li><a>Item3-3</a></li>
</ul>
</nav>
The styling would then be like so:
.header {
float: left;
margin-right: 10px;
}
ul {
list-style: none;
margin:0;
padding:0;
}
.clear {
clear: both;
}
I would like the navigation links on this page to each appear on their own line:
A. Without using "display:block" - as that makes the hover animation take up the full width of the container, not just the <a> element.
B. Without using <br> tags, as I am eventually looking to create a responsive site with a horizontal navigation on smaller screens.
Thanks for your help.
Have you tried float:left; clear:left ?
wrap you navigation in ul, li:
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
css:
ul {list-style: none} li {display: block}
This lets you style your anchors accordingly while forcing them to break lines.
You can wrap the <a>'s in <div>'s and apply CSS to the div's to float:left, clear:left;
div.anchorContainer
{
float:left;
clear:left;
}
<div class="anchorContainer">
text
</div>
<div class="anchorContainer">
text
</div>
<div class="anchorContainer">
text
</div>
You can just apply word-break: break-all;
.parent-block {
max-width: 250px;
width: 100%;
border: solid 1px black;
}
.long-link {
word-break: break-all;
}
<div class="parent-block">
<a class="long-link">https://stackoverflow.com/questions/10000674/make-an-a-tag-move-onto-a-new-line-without-using-displayblock</a>
</div>
I need to create a list in an html page and have it centered using CSS.
Here's an image of sorta what i want:
the little block list should be in the center, with all of the solid bullets and there text left aligned, but the block itself should still be in the center . i have my list created and the indents i want, and the entire list is left aligned.
basically i want the list in the dead center of the page, with the bullets all left aligned correctly with each other and the two circle bullets indented a bit.
how can i do this!?
I'm trying a div using margin-left/right set to auto but having no luck.
Have you tried margin:0 auto;
Usually this works to make stuff in center.
You could do something like this:
HTML
<div id="container">
<ul>
<li>One</li>
<li>Two</li>
<li>
<ul>
<li>One</li>
<li>Two</li>
</ul>
</li>
<li>Three</li>
</ul>
</div>
CSS
#container{
width:45%;
border:1px solid red;
padding:1em;
margin:0 auto;
}
Example: http://jsfiddle.net/7rrzZ/1/
Of course, you don't want the border and you will need to play with the bullets, but you get the idea.
This way it's centred exactly:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body { text-align: center; }
div { display: inline-block; }
li { text-align: left; }
</style>
</head>
<body>
<div>
<ul>
<li>text
<ul>
<li>indented text</li>
<li>indented text</li>
</ul>
</li>
<li>text
<ul>
<li>indented text</li>
<li>indented text</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
For me it worked by adding padding-left in CSS to the div element that contains the list. I used percentages (in my case 44%). You can adjust the percentages depending on the length of the text. Nothing more was needed for me to center the list.
Hopefully you can see what the problem is, I want the links to go side by side not on top of each other?
Can you please see what the problem is on JS Fiddle: http://jsfiddle.net/pky7X/
Thank you for any help
At first, you forgot the <ul></ul>
<style>
ul {
list-style-type: none;
}
li {
float: left;
border: 1px solid #ff9900;
}
</style>
<ul>
<li>Home</li>
<li>About</li>
</ul>
First: You're missing <ul> around your <li> tags (don't think that's valid in HTML5; it wasn't before).
Second: Why even using list items and then removing the list-style and adding float?
Just use <span> or the <a> directly...
HomeAbout
... and then use CSS to set their padding, style, dividers, etc.
Remove the <br /> and place <li> tags inside a <ul> like so:
<ul>
<li>Home</li>
<li>About</li>
</ul>
Remove margin: -35px 220px; from CSS and remove the <br /> from HTML.