Im making a css horizontal nav menu.
How can i make the submenus width to adjust automaticly to its content?
like the main menu does.
My css: http://pastebin.com/Kpx4s3fH
The text just folds back down.
EDIT: and the html http://pastebin.com/xaC0kvud
Try this:
#nav ul a {
display: block;
height:25px;
padding: 0 20px;/*changeto width for static size*/
line-height:25px;
background: rgba(24,24,24,1.0);
/* text-align:center; */
border: 1px solid grey;
border-radius: 0px 0px 0px 0px;
width: 100%;
}
http://jsfiddle.net/aunbyw9L/
Not sure if this corrects your problem but in reality, the only true problem is that you have an explicit height set. The height:25px; is what is causing the versioning numbers to overflow their container. They are the width they are because of the parent li. block level elements default to 100%ish width. (There are some differences particularly with padding and if you want to reset block elements back to their default you would use width:auto). All of that unfortunately doesn't help you. The position:absolute elements are trying to match their parent in width. The two things you can do are remove the height:25px and allow line-height:25px maintain your height (this will result in all the text being in your li's, but they will only be as wide as the parent li), or you can give the li a's white-space:nowrap. I prefer the second approach, personally. The bugs you may experience are long titles ending up off screen because of the lack of wrapping (obviously). Here is the rule and a demo:
http://jsfiddle.net/81un9gaa/ (check item 2.2.2)
#nav ul a {
display: block;
/*height:25px;*/ /* remove this */
padding: 0 20px;/*changeto width for static size*/
line-height:25px;
background: rgba(24,24,24,1.0);
text-align:center;
border: 1px solid grey;
border-radius: 0px 0px 0px 0px;
/* this one is optional, but I prefer it
in most cases. */
white-space:nowrap;
}
Related
I have this simple css menu list that I want to wrap in a div and put A border around it.
You can see on below link the border by default takes max width instead of wrapping around the menu list.
#cont
{
border: 4px solid #90bade;
display: inline;
overflow: hidden;
}
MY FIDDLE
I have tried to set the display mode of this div to inline and played with overflow:hidden style on div. It fixes the div border to wrap perfectly around my list But at the same time it prevents the menu drop down action.
UPDATE #1 :
As pointed out in Ritabrata's answer missing bit was display:inline-block; and there is no need for overflow: hidden;
#cont
{
border: 4px solid #90bade;
display: inline-block;
}
couple of changes in your css ::
#cont
{
border: 4px solid #90bade;
overflow:hidden;
width:auto;
display:inline;
}
#nav
{
position: relative;
padding: 0;
margin: 0;
display:inline-block;
}
UPDATED FIDDLE
LEARN MORE ABOUT display: HERE
This is what I'm trying to achieve, and have come pretty close:
This is my CSS:
li {
float: left;
position: relative;
padding-left: 55px;
background: url(../../images/separator.png);
background-repeat: no-repeat;
background-position: left bottom;
height: 87px;
}
a {
font-size: 15px;
line-height: 67px;
}
I'm almost there, but there are a few problems. The only way I came up with to have the menu items vertically in the middle of the separators was to use line-height. But now of course when hovering over the links the hover is the height of the line-height, and I don't want that.
Also: is there a way to have the menu items go "inside" the separator images, like in the picture? The separator image is a transparent png. If not I'll just decrease the padding on the menu items to try and get them closer.
First method:
Give the link a height, position it 50% from the top, half the height back to top:
a {
font-size: 15px;
height:30px;
display:block;
position:relative;
top:50%;
margin-top:-15px;
}
Demo
http://jsbin.com/ovaqix/1/edit
Second Solution
Make the a element display:table-cell and same height as li, then use vertical-align:
a {
display:table-cell;
height:87px;
vertical-align:middle;
}
Demo
http://jsbin.com/ovaqix/2/edit
Table-cell doesnt work in IE7
Have you tried changing stating a height in a:hover ?
To have the menu items go inside the separators, I think that you need to create after and before pseudo elements, with the border hack to generate triangular shapes. Something in he line of:
a:before {
border-top: 38px solid transparent;
border-bottom: 60px solid transparent;
border-right: 60px solid black;
}
If you provide more details, I can be more specific.
Ok, so am I missing something but I can't seem to line up a simple ul list of list items so that they stretch the entire width of their parent div. Here is an example of my problem here http://jsfiddle.net/37E55/17/.
What I'm trying to do is get grey boxes to line up in a row so that the first box's left hand edge is inline with left hand edge of the #wrapper div and the last box's right hand edge is inline with the #wrapper div's right hand edge.
I have tried successfully to line the boxes up by giving them an absolute positioning but is there a way to use a combination of margin and padding that I'm missing?
#wrapper {
width: 400px;
height: 300px;
background-color:#F0F0F0;
margin: 10px auto;
}
.box {
width: 92px;
height:92px;
background-color:#333;
margin:0px 10px 10px 0px;
float:left;
}
<div id="wrapper">
<ul>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
</ul>
</div>
I knew there was a way to do it with inline-block instead of floating (if you do not have to support overly old browser).
Here's a fiddle demo!
The li do not have margin applied, they are evenly disposed in the area and cling to borders. I followed this guide.
ul {
font-size: 0 !important; /* remove physical spaces between items */
text-align: justify;
text-justify: distribute-all-lines; /* distribute items in IE */
list-style-type: none;
margin: 0;
padding: 0;
}
/* fully justify all items in browsers other than IE */
ul:after {
content: "";
display: inline-block;
width: 100%;
}
ul li {
text-align: left; /* customize to suit */
vertical-align: top; /* can customize to suit */
display: inline-block;
width: 31.3%; /* optional, only need for text content to wrap */
margin-bottom: 1em; /* optional, customize to suit */
}
use :last-child to select the last box and apply margin-right: 0 to it. Make sure the remaining margins will fill the space properly.
.box {
width: 92px;
height:92px;
background-color:#333;
margin:0px 10px 10px 0px;
float:left;
}
.box:last-child {
margin-right: 0;
}
If you have to stick with a width of 92px you won't get them to align properly. The remaining space that the margins need to fill is 32px, which doesn't divide evenly by 3.
The first thing you need to do is remove the last element's right margin.
.box:last-child { margin-right:0; }
Beyond that, sometimes you don't have the ability to fit elements with, for example, exact even margins based on their space and the size of the container. Sometimes you can apply different margins on (for example) every-other element to keep the layout looking "even" but to handle the lack of space, something like:
.box:nth-of-type(2n) { margin-right:14px } /* add extra pixels to right margin of even elements*/
In your case though, only one of the boxes needs extra margins, say, the first. Here's how I did it (with color contrast increased just to make it easier to see).
.box {
width: 90px;
height:90px;
background-color:blue;
margin:0px 13px 10px 0px;
float:left;
}
.box:last-child {
background:green;
margin-right:0;
}
.box:first-child {
background:yellow;
margin-right:14px;
}
Cheers
Your boxes with the margins were too large. Note that padding is in additional to the specified height and width. See it work on http://jsfiddle.net/37E55/32
In IE8 my header looks like a bottom margin is set, yet margins are set to 0px. I've set a border property to test this.
I'm using DIV tags not HTML5 header, nav, etc.
Now that I'm looking at this picture, I'm noticing an extra pixel on the right as well.
#header
{
margin: 0px;
padding: 0px;
width: 800px;
height: 200px;
border: 1px solid red; /* test */
}
#nav
{
margin: 0px;
padding: 0px;
border: 1px solid black; /* test */
}
Where is the grey colour in the header coming from? If it's an image, you might want to check that its dimensions match those in your CSS definition (i.e. 800px x 200px). Otherwise, try removing any margins on the image.
Without seeing your full HTML structure, it's difficult to troubleshoot.
Why does this code produce only a white background:
ul.nav {
width: 30%;
border: 1px solid #999;
margin: 0px auto;
background-color: #00ff7f;
}
ul.nav li {
display: inline;
float: left;
width: 20%;
}
Two things:
1) Start more basically and give your elements height and width. At the stage of CSS dev you are probably at, percentages will only confuse you. Additionally, you should alphabetize all of the css properties you use; it will give you code some zen my friend.
2) Lose the display:inline; reference and replace it with display:block;. Display inline will only take up the room it needs, nothing more. In your code, it doesn't need to take up any space because you have only defined the spaces as a percentages. You could read more here: http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
Try this code instead:
ul.nav {
background-color: #00ff7f;
border: 1px solid #999;
height: 20px; /*This is an example*/
margin: 0px auto;
width: 400px;
}
ul.nav li {
background-color: #86182d; /*Example background color*/
display: block;
float: left;
height: 20px; /*This is an example*/
width: 80px; /*This is 20% of 400px*/
}
This will definitely output something tangible you can work back from with percentages as you learn more.
3) For every question someone answers on here for you, try and answer one yourself. It will help you learn more than you imagined. Good luck in coding...
The UL collapses due to the inner floated elements (the li's). Clear the UL with an overflow: hidden on the ul.nav.
ul.nav
{
width: 30%;
border: 1px solid #999;
margin: 0px auto;
background-color: #00ff7f;
overflow: hidden;
}
Since all of the children of ul.nav are floated, the ul.nav has to content to give it height. Since its height is zero, no background colour renders. You can confirm the ul's size using Firebug.
because your li is displayed inline and floating, which means that the containing ul does net get height from its children. Either give the ul a height or have a containing element around the ul and a clear: both after the ul and give that a background color
This question has been asked many times and in many ways: "Why isn't the container encapsulating my floated items?". It's because css is not a programming language, it is a styling language. CSS reacts fluidly and implicitly and many programmers expect to need to give explicit instructions.
I highly recommend you read more about floating in css. quirksmode has a good page about it. Additionally you should read the w3c spec to get a deeper understanding on the subject.
just delete the float from ul.nav li and change the display:inline to display:inline-block