this is my first post here. If I am doing something wrong please don't hesitate to tell me.
I have built a navigation bar which looks pretty well:
My HTML:
<div style="width: 864px; margin: 0 auto;">
<nav id="main-navigation">
<ul>
<li id="nav1">Lorem ipsum dolor sit ametzu</li>
<li id="nav2">Lorem ipsum dolor sit am</li>
<li id="nav3">Lorem ipsum dolor sitd</li>
<li id="nav4">Lorem ipsum dolo</li>
<li id="nav5">Lorem ipsum do</li>
</ul>
</nav>
</div>
And this is how it is looking right now:
Notice that each navigation-item's width should be relative to its content. I managed to build this with static width-values (magic numbers) like in the following css:
body{background-color: gray;}
ul{
margin: 0;
padding: 0;
}
nav#main-navigation li{
float: left;
padding: 15px 0;
text-align: center;
margin: 0;
background-color: white;
border-right: 1px dotted #222;
color: #222;
}
nav#main-navigation li:last-child { border: 0; }
nav#main-navigation li a{
font: 11px/12px sans-serif;
text-transform: uppercase;
text-decoration: none;
}
#nav1{width: 218px;}
#nav2 {width: 198px;}
#nav3 {width: 178px;}
#nav4 {width: 138px;}
#nav5 {width: 128px;}
I have two questions with that:
Is it possible to get the whole li-tag to be filled with the link-tag? Can you give me a hint how to do that please. SOLVED!!!
I want to make this responsive. Is it best practice to calculate percentages of the widths? And then put them into a media-query? Or is it even possible to make the li-elements relate to its content (like what display:inline; should normally do)?
Would be really nice if someone more experienced helps :-)
Cheers
EDIT:
As requested, this is my state right now (thanks to Roddy of the Frozen Pea):
http://jsfiddle.net/0xsven/rbz72/
I want to make this responsive in order to display on smaller displays than 960px (which is my max). I want the navigation bar to stretch to the whole length of the div that contains it. Thank you for helping.
The answer to the second question is to make your <li> elements display inline-block and remove the float. This way the menu items will respond to content size like inline items.
nav#main-navigation li{
display:inline-block;
padding:15px 10px;
margin-right: -4px;
}
The negative right margin is a trick to overcome the native gap between inline-block elements.
To make the clickable areas bigger, the solutions would be something like this. Essentially what you need to do is put display: block on the li a element and tell it to take up all available room. It would mean transferring the li's padding to the a, however.
Here is a working JSFiddle demo of this code. I added a grey :hover background-color to the <a> so you can see the effects.
For question number one, one way would be via JQuery. Something like:
$("#main-navigation li").click(function () {
window.location = $(this).find("a").attr("href");
});
$("#main-navigation a").click(function (e) {
e.preventDefault();
});
Would do it.
#2
What I do is set the LI's in a UL to display:block when the screen width starts to deter the look and feel of the menu.
For example:
#media only screen and (min-width:0px) and (max-width:960px)
{
nav#main-navigation li { display:block; width:100%; }
}
The final effect should be a vertical list of menu items. Most of the time I will change the look and feel of the menu item to buttons.
Partial Answer:
To make the clickable area bigger add
nav#main-navigation ul li a
{
display: block;
text-decoration: none;
padding: 10px, 20px;
}
Setting the display property of the tag to “block”Makes the link expand to fill it's container. Padding increases the size of the clickable area, so adjust the values to suit your needs.
1.I'm not totally understanding you here (<li>'s cannot be <a> elements) but I think what you want is for the styling of the <li>'s to be the same as the tags. There are a couple of ways you could do this like styling the :hover states of the <li>s to be the same a the <a>'s. Setting the pointer to cursor may be a good start.
2.If you want your design to adapt to the veiwport's width, you don't necessarily need to use #media. #media is used to set break points in your design where elements can reflow above and below those points, percentages can do the rest. I just used a liquid design here: http://jsfiddle.net/ucbEe/ I removed all the fixed widths and placed a 20% width on the li's (5/100=20% width).
Does that make sense enough?
Related
I've looked at and tried a few of the existing solutions on the site (for example CSS Problem to make 2 divs float side by side and CSS layout - Aligning two divs side by side) but none of them work for me.
I'm a bit of a newb to CSS but I'm trying to align the title and menu on my WordPress site http://photography.stuartbrown.name/ in a similar way to http://www.kantryla.net/. Whenever I float:right on the menu area however the menu disappears below the image and a float:left on the menu it pushes the image way out to the right.
I know that in order to achieve what I want I will need to reduce the size of the site title and reduce the width of the menu (perhaps by reducing the gaps between the items in the list?), but I'd really appreciate some advice on how to achieve the title and menu layout of kantryla.
You may notice that I edited the PHP of the theme to include a DIV
<div class="stuart_menu">
that surrounds both the title and menu thinking that this wold make the enclosed items easier to control. Nt sure if that's right or not but I can easily remove if necessary.
Thanks for any help!
Place these styles in your CSS
#logo {
float: left;
margin: 0 0 25px;
position: relative;
width: 20%;
}
#logo h1 {
color: #555555;
display: inline-block;
font-family: "Terminal Dosis",Arial,Helvetica,Geneva,sans-serif;
font-size: 25px;
font-weight: 200;
margin-bottom: 0.2em;
}
#menu {
float: left;
width: 80%;
}
.stuart_menu {
overflow:auto;
}
I guess thats it.
The menu is kinda messed up, I can't make any sense out of it with all the (unneeded) elements, classes.
But basicly you're on the right way, you'll need to redruce the size of both main elements (logo and menu) so it fits inside the parent div.
For instance, like this:
HTML
<div class="stuart_menu">
<div class="logo">logo</div>
<ul class="nav">
<li>Home</li>
<li>Blog</li>
<li>Photos</li>
<li>Delicious</li>
<li>Twitter</li>
<li>Google+</li>
<li>FOAF Description</li>
</ul>
</div>
CSS:
.stuart_menu {
width: 600px;
}
.logo {
width: 150px;
background: red;
float: left;
}
.nav {
list-style: none;
margin: 0;
padding: 10px 0;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
float: left;
}
.nav li {
display: inline-block;
}
Also check this demo.
You can choose if you want to align the menu next to the logo (using float: left) or align it to the right side of the parent (changing the float to right).
Any kind of solution you can try could lead to modify the look & feel of your site.
Maybe you can try to achieve this by reducing the width of the elements and make it float on left.
BTW, this would mess up the entire design of the site, because the "menu" section is inserted into the main container element. So I'd rather separate the two section.
what I'd do is:
#logo{ width:60%;float:left;}
nav {width:35%;float:left;}
to reduce the gap between the nav li elements you can reduce the padding and to make it more recognizable, add a border-right
#menu ul li{margin:22px 15px; border-right:1px solid #ccc;}
Hope this works
Just changing the #logo to include float: left; should put the menu up with the logo. It will be to the right of it. Its just a matter of then down sizing both the logo and menu to fit within the container. Also the other answer should also work.
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've been teaching myself CSS, and decided to try and make a site with the knowledge I have thus far. So I decided to make a fixed navigation bar that follows the position of the web browser, and I ran into an issue. For whatever reason, one of the links I added isn't staying inside the nav bar when I change the browser window size. Can someone look at my code? Please ignore sloppiness, as I'm just trying this for the first time.
Here's my HTML. The "secondnavlinks" div id is the one that won't stay within the nav bar:
<div id="nav">
<div id="secondnavlinks">
<ul>
<li>Ambient Bookmarklet</li>
</ul>
</div>
<div id="class1">
<ul>
<li>Saved</li>
<li>Folders</li>
</ul>
</div>
<div id="header">
<img src="ambientfollowhead.gif" alt="ambientfollow" width="160" height="35" />
</div>
</div>
And here's the CSS:
#nav {
position: fixed;
border: 1px solid #DDDDDD;
top:-1px;
left:109px;
width:85%;
height: 46px;
background-color: white;
z-index: !important 99;
}
(Skipped over the "class1" div)
#secondnavlinks ul {
position: absolute;
display: inline;
list-style-type: none;
}
#secondnavlinks ul li {
display: inline;
text-align: center;
float: left;
font-family: klavika-light;
list-style-type: none;
position: absolute;
left: 950px;
white-space: nowrap;
}
#secondnavlinks ul li > a {
text-decoration: none;
color: inherit;
}
At first this seemed like it may be the positioning inside of the fixed element. After looking into this a little bit, I think I've found the culprit... It seems like your problem is the 'left: 950px;' - This value won't be browser independant and will vary the results / pop out the element with certain widths.
Like Libin mentioned, you want to be looking into Fluid Layout design using relational values instead of fixed values. So when you rescale your browser everything is set correctly.
Start looking into Media Queries & the use of relational values such as % and Ems.
Here's a useful resource for converting px values to ems etc: http://pxtoem.com/
Also if you want to go through tutorials / courses on the subject, I've included a couple of links below that have helped me in the past:
http://www.codeschool.com/courses/journey-into-mobile ( Check out the free first lesson )
http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-a-crash-course-in-css-media-queries/
http://www.css-tricks.com/css-media-queries/
Also, - Here's the proof that using absolute & relative won't pop normally inside the fixed nav bar: http://jsfiddle.net/JQT7u/2/
Good Luck!
If you are trying to make a fixed navigation bar that follows the position of the web browser, you should use % values instead of px values.
Check this demo
In that demo, I had changed the values to %, removed some position absolute etc.
Hope this is what you are trying.
check this link
Do you want like this?
It is not clear from your question how the design should be.
BTW, the links were coming out because you were giving the inside div's position:absolute. So the links were losing relation with the main div Nav.
If you want to know more about working of positioning in CSS then go through this link.
I'm trying to create a menu, in which the last menu item (with different class) will stick automatically to the right corner of the menu. I'm attaching a screenshot for this. There are a few menu items on the left and the last item should somehow count the rest of the available space on the right in the menu div, add this space as padding to the right and display a background in whole area ON HOVER (see the screen to understand this please)
Is something like this possible?
Thanks a lot
See if this will work for you: http://jsfiddle.net/neSxe/2
It relies on the fact that non-floated elements get pushed out of the way of floated elements, so by simply not floating it the last element fill up the rest of the space.
HTML
<ul id="menu">
<li>Services</li>
<li>Doctors</li>
<li>Hospitals</li>
<li>Roasted Chicken</li>
<li class="last">Customer Service</li>
</ul>
CSS
#menu {
width: 600px;
}
#menu li {
float: left;
}
#menu li a {
display: block;
padding: 6px 14px 7px;
color: #fefefe;
background-color: #333;
float: left;
}
#menu li a:hover {
background-color: #666;
}
#menu li.last {
float: none;
}
#menu li.last a {
text-align: center;
float: none;
}
Edit
I've made some changes to make it work smoother on IE6, by floating the anchors too.
If anybody else needs this and do not need to support IE6 and below, you can get rid of those two properties.
assuming your html looks like this:
<div id="menu">
<div class="entry">Services</div>
...
<div class="entry last">Support Staff</div>
</div>
I would make the #menu position: relative;, so that you can position the last menu entry absolute inside the #menu div.
Not necessarily putting the menu item last, but if you always wanted that rounded corner at the end then you could apply a background image to the ul itself and position that right top with the curve. The only issue you'd run into with this method is, if you hover over the last menu it will not put a hover right to the right-hand edge.
If you knew how many menu items there were you could achieve this by setting the correct widths for all your menu items?
Have a look at this:
http://jsfiddle.net/ExLdQ/
The trick is to use your lighter green as the background or background-image for the whole list. You can than use the darker green on all li's and add a background-color:transparent to li.last.
Just add float: right; to your css for the last menu item, and use light background for both the list itself and the last menu item.
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..