I'm trying to create a horizontal menu for my webisite. It's not that difficult, but I'm running into two problems, which brake my design.
I can do it in two ways:
1). by setting
#menu li {
display: inline-block;
}
like I did here: http://jsfiddle.net/l0ner/HPpgG/.
It works and looks like I want but there is a white space between each element, which breaks the design. I could remove the space by putting all list elements in one line, but it's not exactly an elegant solution.
I know I could set the <ul> font size to 0, and then restore it in <li> but it feels too much like a dirty hack to me, and I'd like to keep the css 'magic' minimal.
How do I remove those spaces?
2). by setting
#menu li {
display: block;
float: left;
}
Like I did here: http://jsfiddle.net/l0ner/HPpgG/1/
But like this the <div> container collapses and I loose the white background for the menu, which makes whole thing unreadable.
How I can make the container uncollpased?
Here is the working jsfiddle
#menu ul {
margin: 0;
padding: 0;
overflow:auto;
}
#menu li {
float: left;
list-style:none;
}
You need to set the overflow of the ul to auto or hidden
For your first example, the white space in between the li elements is literally caused by white space in your HTML - the line breaks in between your </li> and <li> tags. If you remove this, the white space will go away.
Alternatively, for your second example, you can stretch the parent element to 'clear' the floated elements. There are a couple of ways to do this (google 'clearfix' for a few examples), but the easiest way would be to use overflow: hidden on the parent element.
Just make the 'overflow' of your <div> hidden.
#menu {
background: #fff;
color: #000;
overflow:hidden;
}
Fiddled here
You can use a pseudo-element to do a clearfix on the <ul> without additional markup
jsFiddle
#menu ul:after {
clear:both;
content:"";
display:block;
}
Related
I made a navigation menu 100% width fixed to the top of the page.
#nav {
height: 50px;
}
I've used line-height to put text in center of the nav before but it's not working when I do this..
#nav ul li a {
line-height: 50px;
}
It is appearing half way off the bottom of the nav
OK, You seem to have missed the fact that browsers have some inbuilt styles for the elements like <ul> etc.
And that margin for the <ul> is pushing the whole menu down.
Try "normalizing" your css by including
ul {
margin: 0px;
}
As shown HERE.
So I'm having a problem with the last paragraph apparently not clearing and slipping into the middle of the h1 and nav. But when I put a div with a clear:both property before the paragraph it appears to work.
Bear with my fiddle, please.
I used a purple background to represent the image replacement technique that I learned from nettuts.
The clearfix part is a class named "group", the CSS is at the bottom.
Also if I remove the display:block; from h1 > a the layout breaks so a follow up question is, what elements should I float and where should I apply the clearfix.
The problem you are seeing arises because the clearing element is in the wrong place.
Consider your CSS:
h1 {
margin: 0;
float: left;
background: red;
text-indent: -9999px;
border: 1px dashed cyan;
}
nav {
height: 44px;
margin: 0;
float: right;
background: black;
border: 1px dashed cyan;
}
.group:after {
content:"x";
display:table;
clear:both;
background-color: cyan;
}
You have h1 floated left and nav floated right, and then you have your p block with your text (not floated).
The p content wraps around the two floated elements as expected unless you add the clear:both rule to p as pointed out earlier.
The clearing element has to appear in the DOM after the nav element.
In this example, you apply .group to nav, which generates content that appears after the ul block that is a child of the nav block.
The problem becomes more obvious is you set the nav height to auto and you add some borders and colors to show the edges of the various blocks.
See demo at: http://jsfiddle.net/audetwebdesign/9nGQy/
The problem can be seen as follows:
I added an x to mark the spot in your generated content for the clearing element, which appears within the nav block.
Try:
p{
clear:both;
}
It should work for you depending what the outcome is you are after.
I want to make some text float over the column edge when I mouse-over it, just like my IDE does:
Here's what I've got so far.
I can get it to float over the edge if I change the element positioning to absolute but then it doesn't "take up any space".
Also, I wouldn't mind having the border around the floated bit either.
Anyone have any ideas how to accomplish this?
I've found two ways to support this. The first requires you add span tags inside each li but it seems to be working across all browsers. The second works with the markup exactly as you have it, but doesn't work in chrome and safari.
All browsers:
http://jsfiddle.net/vkBqg/1/
This solution is extremely simple and basically comes down to:
li {
white-space: nowrap;
overflow-x: hidden;
width: 150px;
}
li:hover {
overflow-x: visible;
}
All but webkit-based browsers (chrome,safari):
http://jsfiddle.net/aeARH/1/
This is much hackier and requires you to changing the width and display type of the li, then forcing it to break line. The li:hover looks something like this:
overflow-x: auto;
width:auto;
content:"\A";
display:inline;
The take away in both of these should be position:absolute doesn't work well when you're trying to preserve the natural ordering among elements.
I have had a go at it and have come up with a solution which does not require any mark up changes at all, I have done some testing and it seems to work in Chrome 26, Safari 5.1.7, Firefox 20, IE10, IE10 in IE9 mode and IE10 in IE8 mode, it looks the same in all of these browsers and browser modes, it starts to break when using IE10 in IE7 mode.
It looks like this:
Basically what I've done is setting float:left on the li and then width:auto on li:hover, this ensures that the text floats over the column edge.
Then to add the border, I'm rendering a pseudo-element directly after the li, which inherits the width of the preceding li. Then I've set its borders, margins, heights and line-heights to position this pseudo-element over the top of the preceding li. I've set the margin-left to 150px to ensure it only shows up behind li's which exceed the width of the column.
To add some space at the right I have changed the white-space: no-wrap to white-space: pre, which will preserve some added white space inside the li (if it is added, it is not a requirement, I did add it to make it look a little prettier).
Here's a jsFiddle.
Here's the HTML:
<div>
<ul>
<li>some really long text </li>
<li>some text that doesn't fit into the column width </li>
<li>yeah dude, this is sample text </li>
<li>woot woot! double rainbows </li>
</ul>
</div>
And here's the CSS:
li {
white-space: pre;
overflow-x: hidden;
background-color: #f2f2f2;
line-height: 21px;
width: 150px;
float: left;
clear: both;
}
li:hover:after {
content:'';
height: 19px;
margin: -21px 0px 0px 150px;
border-width: 1px 1px 1px 0px;
border-style: solid;
display: block;
}
li:hover {
width: auto;
}
div {
width:155px;
border-right: 3px solid;
background-color: #f2f2f2;
}
ul:before, ul:after {
content:' ';
display: table;
}
ul {
list-style: none;
padding: 5px 0 5px 5px;
margin: 0;
}
ul:after {
clear: both;
}
body {
margin: 0;
padding: 0;
}
UPDATE
I have included the Micro clearfix hack on the div, now it adjusts its height based on its contents instead of it having a fixed height.
UPDATE 2
The problem with scrolling is that the width of the containing element is actually changing when setting width:auto on the child elements, since the scroll bar is on the right, it keeps moving around. I've tried using an extra wrapper div, but it seems that it is impossible to float stuff over the top of a scroll bar, from anywhere inside the element that creates the scroll bar. The only way I can get it to scroll is by setting overflow:hidden on the ul and then using the jQuery ScrollTo plugin to scroll up and down inside the ul.
Example jsFiddle with scrolling
Well I'm not sure how to ask this with words so I will post an image:
So in the image, there is a main div, lets call it "red".
Inside "red" there is another div called: "green"
Inside "green" there is an ul, with some li elements, they are supposed to have an underline, but that underline must get out of the div, so the problem I have, is getting that line outside of "green", when in the code, it is inside.
I'm guessing there might be some kind of overflow setting or some technique to achieve this, maybe its much easier than I think, but I just can't figure it out.
The sum it up, I need to get something from within a div, and get it to show outside of it as well.
I tried to google it as much as I could but I couldn't find anything that worked for me, maybe because I'm not even sure how to ask.
That depends on situation. If it is fixed size elements and they are always same size no matter what you could do it:
Position red div as relative, then green div as absolute and ul again as absolute. That will allow you move elements. Relatively to red div.
If it is stretching elements depending on size of window, it is harder and margin-left, margin-top and float:left would do the trick, but you should be very careful with it as it is hard to make cross-browser.
You cannot solve this with overflow. What you need to do is to let the ul inside green be set to position: absolute and the red box to position: relative.
I made a jsfiddle for it (my first).
see the demo as per your requirement :-
DEMO
HTML
<div class="red">
<div class="green">
<ul>
<li>loreum</li>
<li>loreum</li>
<li>loreum</li>
<li>loreum</li>
</ul>
</div>
</div>
CSS
.red {
width:300px;
height:300px;
background:red;
}
.green {
float: right;
height: 200px;
margin: 30px 30px 0;
width: 200px;
background:green;
}
.green ul {
left: 8px;
margin: 0;
padding: 0;
position: absolute;
width: 200px;
}
.green ul li {
list-style-type:none;
display:block;
border-bottom:1px solid white;
text-align:right;
}
Use "overflow : hidden" (css) for green div
You can see an attempt at what I'm trying to do here: http://rjlacount.com/clients/GreenTree/
I want the navigation li's to determine padding automatically so they can stretch across the entire width of the inner wrapper. So, if I added another li or took one out, they would still be centered and the padding of each li would just increase/decrease to make up for it.
Right now I'm floating the last navigation li to the right and adding padding to each one to try to get it as close to full-length as possible. So it's almost how I want it to look, but I have a space between the last two items that I'd like to get rid of.
Is this possible? Thanks for any help.
I don't believe this will work in < IE8, but you could always provide a float or display: inline-block fallback to those browsers using a conditional stylesheet.
Example
CSS
ul {
display: table;
width: 100%;
}
ul li {
display: table-cell;
}
ul li a {
display: block;
width: 100%;
height: 100%;
text-align: center;
}
jsFiddle.
jsFiddle with one more li, you'll notice the CSS is constant :P