I have two divs and in between these two divs is some sort of white space I cannot seem to get rid of. Here is the jsfiddle if it helps: http://jsfiddle.net/aBzPv/1/
Basically one div is a menu (a vertical list) at the top of my page. I want to create another div directly underneath it for "Recent Items". I noticed that there is just too much white space between my first div (corp-crumb) with my second div (recent-crumb):
<div>
<div id="corp-crumb">
<ul class="vertlist" id="ulTop">
<li class="crumblink submenu"><a id="createNewLink" href="#" title="Create New" class="crumblink">Create New</a>
<ul>
<li>Company</li>
<li>Contact</li>
</ul>
</li>
</ul>
</div>
<div id="recent-crumb">hello world what is this white space here ^^^^^^^^</div>
</div>
<div class="clearfix"></div>
Some of the CSS:
#corp-crumb {
background: rgb(252, 252, 252);
margin: 0px -12px 20px;
padding: 0px 10px;
/*overflow: hidden;*/
font-size: 11px;
border-bottom-color: rgb(242, 242, 242);
border-bottom-width: 1px;
border-bottom-style: solid;
min-height: 28px;
}
#recent-crumb {
background: rgb(252, 252, 252);
margin: 0px -12px;
padding: 0px 10px;
overflow: hidden;
font-size: 9px;
border-bottom-color: rgb(242, 242, 242);
border-bottom-width: 1px;
border-bottom-style: solid;
min-height: 28px;
}
.vertlist ul {
margin: 0px 2em 0px 3.6em;
color: rgb(68, 68, 68);
}
img
{
border-style:none;
}
.vertlist li
{
display:block;
float:left;
width:140px;
font-weight:bold;
font-size:small;
height:50px;
list-style:none;
}
ul.vertlist li.submenu ul li {
display: block;
padding: 3px 8px;
/*#E5F1FA*/
background: rgb(252, 252, 252);
border-style:solid;
border-width:thin;
border-color:rgb(242, 242, 242);
color: #fff;
text-decoration: none;
font-size: small;
}
ul.vertlist li.submenu ul li:hover {
background-color: #E5F1FA;
}
ul.vertlist li.submenu ul:hover {
background-color: #E5F1FA;
}
ul.vertlist li.crumblink.submenu:hover {
background-color: #E5F1FA;
}
ul.corp-footer-local li.crumblink.submenu ul li:hover {
background-color: #E5F1FA;
}
a.crumblink:hover {
background-color: #E5F1FA;
}
ul.vertlist li ul
{
visibility: hidden;
}
ul.vertlist li.submenu:hover ul
{
display:block;
position:relative;
margin:0;
padding:0;
z-index:9999;
visibility: visible;
}
ul.vertlist li:hover ul, ul.vertlist li.hover ul {
display: block;
position: relative;
margin: 0;
padding: 0;
}
ul.vertlist li:hover li, ul.vertlist li.hover li {
float: none;
}
See fiddle for demonstration.
Ok, let's make your code more elegant, don't worry - just few steps to go.
First of all, you have margin bottom on your #corp-crumb, remove it.
Remove browser-specific margins from the ul.vertlist and ul.vertlist ul by adding margin:0; to your code. (the same happens to headings, so be aware of that)
Remove margin-top from #recent-crumb
Change height of .vertlist li, because it's bigger then container's one and makes your #recent-crumb moved to the right side. The height should be the same as container, in your case -height: 29px.
And the last thing, remove browser-specific margins from body by adding margin:0px; to it.
PS. Use normalize.css to avoid browser-specific paddings and margins to e.g. <body> and <ul> (we have already fixed that in point #2 and #5). Don't use negative margins on divs instead, it's not a good alternative (and not cross-browser).
JS Fiddle: http://jsfiddle.net/aBzPv/5/
As suggested in the comments, change your CSS from:
ul.vertlist li ul {
visibility: hidden;
}
to
ul.vertlist li ul {
display:none;
}
and then remove visiblity:visible from ul.vertlist li.submenu:hover ul. It's better approach.
In Chrome, open your dev tools.
Then in the elements tab. select and hover on #corp-crumb.
Now, in the upper right panel, you see div#corp-crumb as a blue rectangle, and an orange rectangle under it. This is margin, as you can see in the lower right pane (with the same color schema). Green, to the left, is padding
20px value causes that in #corp-crumb:
margin: 0px -12px 20px;
Related
I am trying to implement LI items horizontally as seen in the screenshot however I am not able to increase the height of the li item. I tried creating a class and assigning it to the li item and that still doesnt seem to work. Tried applying the height to the UL item and still doesnt seem to work. Could somebody tell me what the problem is ?
html
<div id="navcontainer">
<ul class="liheight">
<li class="liheight">Team Management</li>
<li class="liheight">User Management</li>
</ul>
</div>
CSS
#navcontainer ul {
display: block;
list-style-type: disc;
padding-top:40px;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
#navcontainer ul li {
display: inline;
border:5px solid #009ddc;
border-left: 5px solid #009ddc;
border-right: 5px solid #009ddc;
border-bottom:5px solid #009ddc;
border-top:5px solid #009ddc;
z-index: 0 !important;
padding: 0;
}
#navcontainer ul li a {
text-decoration: none;
padding: .1em 1em;
background: #fff;
color: #24387f !important;
}
#navcontainer ul li a:hover
{
color: #fff !important;
background-color: #009ddc;
}
.liheight {
min-height: 50px;
}
Desired height
Current implementation
Applying the solution
First answer explains it, but if you really want to keep 'inline' on li element, then just add line-height: 25px, or anything like that. It will increase line height and thus increase height of li element.
I am trying to implement LI items horizontally as seen in the
screenshot however I am not able to increase the height of the li item
This is accomplished using, display: inline-block. The reason is that when you try to increase the heigh of inline elements it has no effect, with inline-block it does.
Another way to make the li elements is to use floats: float: left
But it seems that what you are trying to accomplish is increase the height and width of the anchor tags, <a>, within the li elements and when the user hovers the pointer over it you get the blue color. This is done by making that inline element, the anchor tag, a block element and applying padding to make it grow.
Here are two possible solutions to your problem, you can choose the best one that fits your needs.
Solution one:
#navcontainer ul {
list-style-type: disc;
padding-top:40px;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
#navcontainer ul li {
display: inline-block;
border:5px solid #009ddc;
border-left: 5px solid #009ddc;
border-right: 5px solid #009ddc;
border-bottom:5px solid #009ddc;
border-top:5px solid #009ddc;
z-index: 0 !important;
}
#navcontainer ul li a {
display: block;
text-decoration: none;
padding: 0.5em 4em;
background: #fff;
color: #24387f !important;
}
#navcontainer ul li a:hover
{
color: #fff !important;
background-color: #009ddc;
}
<div id="navcontainer">
<ul>
<li>Team Management</li>
<li>User Management</li>
</ul>
</div>
Solution two (using floats):
#navcontainer ul {
list-style-type: none;
padding-top:40px;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
#navcontainer ul li {
float: left;
border:5px solid #009ddc;
border-left: 5px solid #009ddc;
border-right: 5px solid #009ddc;
border-bottom:5px solid #009ddc;
border-top:5px solid #009ddc;
z-index: 0 !important;
}
#navcontainer ul li a {
display: block;
text-decoration: none;
padding: 0.5em 4em;
background: #fff;
color: #24387f !important;
}
#navcontainer ul li a:hover
{
color: #fff !important;
background-color: #009ddc;
}
<div id="navcontainer">
<ul>
<li>Team Management</li>
<li>User Management</li>
</ul>
</div>
For further reading check out these articles:
CSS display: inline vs inline-block
https://developer.mozilla.org/en-US/docs/Web/CSS/display
https://alistapart.com/article/css-floats-101
https://developer.mozilla.org/en-US/docs/Web/CSS/float
Change #navcontainer ul li to use display: inline-block, as the use of inline is restricting its height.
Additionally:
I'd recommend you use classes rather than your very specific and non-reusable structure you're current implementing.
Do not use min-height, as this just prevents an element from going below this height, usually used when it's scalable.
Here's a js-fiddle, I've just changed the display property and added a height value. https://jsfiddle.net/g9aspo90/
EDIT:
To fix the background colour not filling out, you should set the background-color on the li tag, rather than the a tag. When you set the background-color on just the a tag, then it will only cover the a tag's area, which in our case was smaller than its parent (once we increased its size). And since in actuality all we want to do is give the li tag a white background, it makes much more sense to set it there.
Here's the fiddle: https://jsfiddle.net/g9aspo90/1/.
And these are the changes I made:
#navcontainer ul li a {
text-decoration: none;
padding: .1em 1em;
background: #fff;
color: #24387f !important;
}
#navcontainer ul li a:hover {
color: #fff !important;
background-color: #009ddc;
}
Becomes
#navcontainer ul li {
background: #fff;
color: #24387f !important;
}
#navcontainer ul li a {
text-decoration: none;
padding: .1em 1em;
color: #24387f !important;
}
#navcontainer ul li:hover {
color: #fff !important;
background-color: #009ddc;
}
Further comments:
I'd recommend you wrap the li tag in the a tag, rather than the other way around. This way the entire block will be a link, which I think is much nicer. So this:
<li class="liheight">
User Management
</li>
Would become this:
<a href="#">
<li class="liheight">
User Management
</li>
</a>
This messes up your styles a bit, but it should only take a few minutes to resolve. Good luck!
EDIT2: Here's how to resolve the styling issue, just changes the css selector #navcontainer ul li a to #navcontainer ul a li. https://jsfiddle.net/g9aspo90/3/
You can increase size of borders, your height and width will change according to that. Like this:
#navcontainer ul li {
display: inline;
border: 5px solid #009ddc;
border-left: 50px solid #009ddc;
border-right: 50px solid #009ddc;
border-bottom: 50px solid #009ddc;
border-top: 50px solid #009ddc;
z-index: 0 !important;
padding: 0;
}
My suggestion would be to use bootstrap, it has navigation class so you can group all things together and control all on same time.
When I put in a margin it adds 5px to the right as I expect it too, but it creates problems with my box-shadow. I want the box-shadow to be able to cover that space (white space) created by the margins. Is there a work around for that? Obviously if you don't have any margins the box-shadow looks fantastic.
Here is my CSS
#horizontalNav{
margin: 0;
padding: 0;
}
#horizontalNav ul{
margin: 0;
padding: 0;
box-shadow: 5px 5px 10px #888888;
}
#horizontalNav ul li{
margin-right: 5px; /* Make this margin a 0 to see what it looks like without margin added */
padding: 0;
list-style: none;
position: relative;
float: left;
background: linear-gradient(to bottom right, rgba(181,147,38,0.1), rgba(181,125,22,1));
}
#horizontalNav ul li a{
text-align: center;
width: 150px;
height: 30px;
display: block;
color: white;
border: 1px solid black;
text-decoration: none;
text-shadow: 1px 1px 1px black;
}
#horizontalNav ul ul{
position: absolute;
visibility: hidden;
top: 32px;
}
#horizontalNav ul li:hover ul{
visibility: visible;
}
#horizontalNav ul li:hover{
background: linear-gradient(to bottom right, rgba(167,120,38,0.1), rgba(167,136,42,1));
}
#horizontalNav ul li:hover ul li a:hover{
background: linear-gradient(to bottom right, rgba(180,105,45,0.1), rgba(180,135,15,1));
}
#horizontalNav ul li a:hover{
color: black;
}
#horizontalNav ul li ul li a:hover{
color: #120801;
}
Here is my HTML
<div id="wrapper">
<div id="horizontalNav">
<ul>
<li>Home
<ul>
<li>Home Sub 1</li>
<li>Home Sub 1</li>
<li>Home Sub 1</li>
<li>Home Sub 1</li>
<li>Home Sub 1</li>
</ul>
</li>
</ul>
</div>
</div>
If you don't want the box shadow on the ul, then try putting the box-shadow on another element. The actual link seems to achieve what you want, but then grabs the top level link, so you might need to target even more specifically.
#horizontalNav ul ul a {
box-shadow: 5px 5px 10px #888888;
}
Actually... that's not the best element to add it too. Here is a stripped down fiddle with a complete answer. I also urge you to see how giving the right elements classes, (the fist ul) it makes things much more readable.
jsFiddle
why you are adding margin-right to 5px it seems worthless. For space you should add padding-right to 5px;
I'm creating header of one aplication nad I found strange problem, which never happentd to me before. The problem is, that i have two list inside header, one floated to left, one to right and between all li elements there are two types of border. That's ok, but there's creating space between them out of nowhere? Or at least, I can't find what is creating the space
Can someone tell me where's space created?
Here is jsFiddle: jsFiddle link
Or direct-input:
HTML:
<header id="header">
<ul class="left">
<li class="title">jedna</li>
<li class="new-task">dva</li>
<li class="new-comment">NC</li>
</ul>
<ul class="right">
<li class="logged">jedna </li>
<li class="logout">dva</li>
</ul>
CSS:
header
{
position: relative;
top: 0px;
min-height: 35px;
padding: 0px;
margin: 0px;
background-color: #efefef;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#efefef));
background: -webkit-linear-gradient(top, #efefef, #bbbbbb);
background: -moz-linear-gradient(top, #efefef, #bbbbbb);
background: -ms-linear-gradient(top, #efefef, #bbbbbb);
background: -o-linear-gradient(top, #efefef, #bbbbbb);
}
header ul
{
margin: 0px;
padding: 0px;
line-height: 35px;
list-style-type: none;
}
header ul li
{
margin: 0px;
display: inline;
padding: 5px 10px;
border-left: 1px solid #efefef;
border-right: 1px solid #bbbbbb;
}
header ul li:first-of-type
{
border-left: none;
padding-left: 20px;
}
header ul li:last-of-type
{
border-right: none;
padding-right: 20px;
}
header ul.left
{
float: left;
}
header ul.right
{
float:right;
}
EDIT:
This space:
Your li's are set to display: inline, so your browser is putting a space between each li just like it would between words. You can counter this default behavior in a few ways. You can float instead of using display: inline, you can put all your li's on one line without spaces, or you can add a negative margin to pull the li's together. This article explains your options better than I could:
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Set ul li to float:left; and set the line-height to 25 instead of 35 in header ul
Adding the following CSS code fixed it for me:
header ul.left li {
display:block;
margin: 0;
float: left;
line-height: 25px;
}
This is being caused by the display: inline;.
What is happening is the white space between the lis is being considered as a character.
To prevent this add font-size: 0; to the parent ul and then add the font-size: 16px; to the lis.
header ul {
margin: 0px;
padding: 0px;
line-height: 35px;
list-style-type: none;
font-size: 0;
}
header ul li {
margin: 0px;
display: inline;
padding: 5px 10px;
border-left: 1px solid #efefef;
border-right: 1px solid #bbbbbb;
font-size: 16px;
}
JSFIDDLE
Here is a good article on what options you can use.
Just add float: left; and reduce padding, here's a FIDDLE
header ul li {
display: inline;
float: left;
padding: 0 10px;
border-left: 1px solid #efefef;
border-right: 1px solid #bbbbbb;
}
*Note: Horizontal space with width of about 4px is always added on inline & inline-block elements and to fix that you must float them or write HTML code in line for that elements.
I'm trying to make sub-menus for my menu, but something just isn't right and I cant seem to change the colour and layout of the submenus itself.
* { margin:0;
padding:0;
}
html {height: 100%;}
body{
position: relative;
height: 100%;
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff));
}
.navbox {
position: relative;
float: left;
}
ul.nav {
list-style: none;
display: block;
width: 200px;
position: relative;
top: :;0px;
left: 100px;
padding: 60px 0 60px 0;
background: url(shad2.png) no-repeat;
-webkit-background-size: 50% 100%;
display: inline-table;
}
li {
margin: 5px 0 0 0;
}
ul.nav li a {
-webkit-transition: all 0.3s ease-out;
background: #cbcbcb url() no-repeat;
color: #174867;
padding: 7px 15px 7px 15px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
width: 100px;
display: block;
text-decoration: none;
-webkit-box-shadow: 2px 2px 4px #888;
}
ul.nav li ul { display:none;
}
ul.nav li:hover ul {
display:block; }
<div class="navbox">
<ul class="nav">
<div class="navbox">
<ul class="nav">
<li>Program
<ul>
<li>Teknik</li>
<li>Naturvetenskap</li>
<li>El</li>
</ul></li>
<li>Nösnäs</li>
<li>Schema</li>
<li>Matsal</li>
</ul>
</div>
I've been looking at a guide, http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu
If you look at the 4th picture, you'll see how I want my own dropdowns to look, even tho the code is there, I've tried to fix the problem myself. So the problem is, when I try to change the layout to look like the one on the 4th picture, it wont change thesubmenu dropdown layout, it'll just create a weird looking box under the boxlayout it self.
Thanks for help! :)
If you add position:absolute to your hovering it will start to work:
ul.nav li:hover ul {
display:block;
position:absolute;
}
Then add a background(-color) and some other styling and you can get to this example:
http://jsfiddle.net/w1ll3m/zz83R/1/ (based on your code)
Good luck!
I have a problem with z-index in a CSS-Menu. I built the menu with nested ul Tags.
Clearly, the first ul is the first level in the menu-hierarchy. As a background-property of this first ul, I set a gradient and a box-shadow, all with CSS of course.
The second ul (the nested one) is the second level in the menu-hierarchy. I gave it a gray background-color.
Unfortunately, the second ul overlays the first ul. I tried to play around with z-index, but I can't get it to work. I'd like to get the shadow of the first ul over the nested ul.
Here is the code so that you may reproduce it:
CSS:
ul.menu {
/* Gradient: */
background: #444;
background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#777));
background: -moz-linear-gradient(top, #999, #777);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#999', endColorstr='#777');
height: 25px;
/* Box-Shadow: */
-moz-box-shadow: 1px 3px 3px #888;
-webkit-box-shadow: 1px 3px 3px #888;
box-shadow: 1px 2px 3px #888;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
position: relative;
z-index: 20;
}
ul.menu, ul.menu ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.menu a {
display: block;
text-decoration: none;
color: #000;
line-height: 22px;
padding-right: 15px;
padding-left: 15px;
}
ul.menu li {
padding:0;
margin:0;
float:left;
}
ul.menu ul {
margin-left: 15px;
padding: 0;
position: absolute;
display: none;
background-color: #CCC;
z-index: 10;
}
ul.menu li:hover ul {
display: block;
}
ul.menu ul li {
float: none;
}
Here is the HTML:
<ul class="menu">
<li>ONE
<ul>
<li>SUB_ONE</li>
<li>SUB_TWO</li>
<li>SUB_THREE</li>
</ul>
</li>
<li>TWO</li>
<li>THREE</li>
</ul>
Is there any way that the first ul overlays the second ul or is it just not possible?
I have a work-around. By inserting a DIV above the nested UL that has its own shadow, you can get it on top of the sub-menu.
See: http://jsfiddle.net/SLkrN/6/
Short answer after some testing appears to be: even setting all elements to float, the containment of the sub menus in the parent .menu ul is causing them to not respond to z-index changes except relatively, never decreasing below the parent UL. I'll continue experimenting. May I suggest, however, putting the submenus lower so they at least are inline with the bottom of the parent ul?
ul.menu ul {
margin-left: 15px;
margin-top: 5px;
padding: 0;
position: absolute;
display: none;
background-color: #CCC;
z-index: 10;
}