In my following code everything is write but it make distance from left right and top of the browser screen.
CSS code is:
ul {
list-style:none;
background:#2E94C7;
padding:10px;
color:white;
}
body ul li {
position:relative;
}
ul, li {
margin:0;
padding:0;
}
li {
display:inline-block;
padding:10px;
}
ul li ul {
display:none;
position:absolute;
width:100%;
background:black;
margin:10px 0 0 -10px;
}
ul li ul li {
display:block;
}
ul li:hover ul {
display:block;
}
HTML code is:
<ul>
<li>Menu 1
<ul>
<li>Menu 1-1</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Menu 2-1</li>
</ul>
</li>
<li>Menu 3</li>
<li>Menu 4</li>
Is there any way to cover the top ,left,right of the browser screen.
Just paste it on your top of the CSS file.
body {
margin: 0;
padding: 0;
width:100%;
}
Try this
body {
margin: 0;
padding: 0;
}
The natural margin on the body tag is causing the spaces. You can also checkout http://meyerweb.com/eric/tools/css/reset/ for more reset css related stuff.
Try a css reset block
so it resets everything that are defaults to the browser
http://html5doctor.com/html-5-reset-stylesheet/
Im not sure if i understand your problem or not but you can try add
* {
margin: 0px;
}
to the top of your css.
The body element has margin by default. What you need to do is just override it:
body {
margin:0;
}
jsFiddle demo.
Related
I'm trying to style a popup-menu that shows a submenu on hover, popping out to the right of the hovered item.
My main items are split into two columns using column-count, and this is where the misery begins.
In Firefox, everything behaves as expected: the submenu pops out where the hovered item is. In Chrome, the submenu pops up relative to the leftmost column.
The four cases (hovered items 3 and 9, Firefox and Chrome) are shown in the attached screen. Try the demo both in Firefox and Chrome to see what I mean.
Is there a neat solution for this? I tried column-span, but that doesn't work. I cannot make the item's li relative because I want the popup to fill the complete height.
ul.first {
border:1px solid #888;
position:relative;
display:inline-block;
margin:5px;
padding:0;
column-count:2;
-moz-column-count:2;
-webkit-column-count:2;
column-rule:1px solid #888;
-moz-column-rule:1px solid #888;
-webkit-column-rule:1px solid #888;
background-color:#eee;
}
ul.first li {
list-style:none;
display:block;
width:200px;
background-color:#eee;
margin:2px;
padding:5px;
}
ul.first li:hover {
background-color:#ddd;
}
ul.first > li.hassub > ul {
display:none;
position:absolute;
margin-left:100px;
top:0;
bottom:0;
background-color:#ddd;
padding:0 5px;
}
ul.first > li.hassub:hover > ul {
display:inline-block;
}
ul.first > li.hassub > ul > li {
background-color:#ddd;
}
ul.first > li.hassub > ul > li:hover {
background-color:#eeffee;
}
<ul class="first">
<li>Item 1</li>
<li>Item 2</li>
<li class="hassub">Item 3
<ul>
<li>Subitem 3-1</li>
<li>Subitem 3-2</li>
<li>Subitem 3-3</li>
<li>Subitem 3-4</li>
</ul>
</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li class="hassub">Item 9
<ul>
<li>Subitem 9-1</li>
<li>Subitem 9-2</li>
<li>Subitem 9-3</li>
<li>Subitem 9-4</li>
</ul>
</li>
<li>Item 10</li>
</ul>
http://jsfiddle.net/cfckw5jz/6/
There are many solutions:
Solution 1: A quick solution is to Give the sub-menu inside the right column different class (hassub2), and give it different margin-left
.hassup2{
left: 390px;
}
Solution 2: A smarter solution is to give all sub-menus inside li's above 5 a different margin, this can be achieved by using nth-child:
ul.first > li:nth-child(n+5) > ul{
left: 390px;
}
n + 5 = any element above 5 (in that case all li's above 5)
Solution 3: You can also separate it into 2 UL's and float them left (or use display: inline-block), and assign position relative to the UL's to be the reference point for the sub-menu:
li{ list-style: none; }
ul.left,
ul.right{
float: left;
width: 200px;
position: relative;
}
.right li,
.left li{
float: left;
width: 100%;
background-color: #eee;
margin: 2px;
padding: 5px;
}
.right li ul,
.left li ul{
display: none;
position: absolute;
left: 200px;
top:0;
height:100%;
}
.right li ul li,
.left li ul li{
width: 100%;
padding: 5px;
margin: 2px;
}
.right li:hover ul,
.left li:hover ul{
display: block;
}
Tip: use Left instead of margin-left for a consistent design, using left will always make the element 200px away from left side, it will not depend or get effected on any element placed before it, like what margins behave.
Tip: Absolute positioned element will look for the first father with a defined position and make it its reference point. So to make an absolute div refer to the direct father div, the father must be given position (relative, fixed, or absolute).
Today I realized that this issue was fixed in the latest Chrome release 55 and now Chrome behaves as the other modern browsers.
So, no need to make modifications to css nor html. Yay!
I have a list of links that are displayed inline. I want the last li to be positioned centered of the inline list above it. How can I do this with css?
The reason for this is, when the web page is used in mobile it can't fit the entire list, so I want to move it below.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Last Item</li>
</ul>
You can do this by setting text-align:center to both the ul and li element:
ul{
list-style:none;
height:100%;
width:100%;
padding:0;
text-align:center;
}
ul li{
text-align:center;
display:inline-block;
width:75px;
height:20px;
background:silver;
border:1px solid black;
padding:10px;
}
IN ADDITION: Make sure that the ul has a width of 100% and the padding of the ul is set to zero. Also, the li must have a display of inline-block.
Check out the fiddle:
http://jsfiddle.net/rmj7q78t/
This css will do the trick:
ul li {
display: inline-block;
}
ul li:last-child {
display: block;
text-align: center;
}
I have some sort of space in between my li tags I don't where it's coming from? How can i remove this?
Also, I'd like to change the color of the font to white on hover of the li
JSFIDDLE http://jsfiddle.net/omarel/tfyxL66c/
CSS
.nav_container {
text-align: center;
width:100%;
}
.nav_container ul {
/* margin-top:15px; */
margin-left:30px;
}
.nav_container ul li {
display: inline-block;
text-align: center;
padding-left:40px;
padding-right:40px;
margin:0px;
height:80px;
cursor:pointer;
}
.nav_container ul li:hover {
background-color:#08298A;
}
.nav_container a:hover {
color:#fff;
}
header {
width:100%;
margin: auto;
box-shadow:0 0 8px rgba(0,0,0,0.1);
min-width:410px;
}
.navlogo {
z-index:99;
}
.navlogo img {
width:100px;
margin:10px 10px 10px 10px;
}
.floatleft {
float:left;
}
.floatright {
float:right;
}
.centerdiv {
margin:0 auto;
}
#media only screen and (min-width:700px) {
header {
max-width:1250px;
}
.container {
max-width:1250px;
}
.box2 {
width:32%;
height:300px;
float:left;
}
.box2left {
width:65%;
height:600px;
float:left;
}
}
div {
border:solid 1px #E6E6E6;
position:relative;
}
ul li {
border:solid 1px #E6E6E6;
}
HTML
<div class="navlogo floatleft">
<img src="images/logo.png" />
</div>
<div class="floatleft">
<div class="nav_container">
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
</div>
<div class="floatright">
<div class="nav_container">
<ul>
<li>Profile</li>
<li>Sign out</li>
</ul>
</div>
</div>
</header>
<div style="clear:both;"></div>
Answering your second question first as the answer is shorter: use the :hover pseudo class.
EXAMPLE
li:hover a{color:#fff;}
More information on pseudo classes
To answer your first question, then; setting an element's display property to inline or inline-block will cause the white space surrounding it to be treated just like the space surrounding any other inline element.
You can workaround it in a number of ways
Remove all line breaks from within your list:
<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>
Use comments to hide the line breaks from the browser:
<ul><!--
--><li>Item 1</li><!--
--><li>Item 2</li><!--
--><li>Item 3</li><!--
--></ul>
Use CSS to set the font-size of the parent element to 0 and then "reset" it for the child elements:
html{font-size:20px;}
ul{font-size:0;}
li{font-size:1rem;}
Alternatively, if you're not 100% set on using display:inline-block, you can use floats or flexbox instead.
To change the color of the links to white, use this css:
.nav_container ul li:hover a {
color:white;
}
However, only the text will be clickable, the li element won't be clickable. Another way to do the same thing is to apply all width/height/background styling to the link, instead of the li.
As Shaggy mentioned, to eliminate extra spacing when using inline-block you should remove all spaces in your html between your menu li items.
As for changing the link color on hover you should add the following to your css code:
.nav_container li:hover a {
color:#FFF;
}
I was wondering how to remove the vertical space between a unordered list and div. I know it's possible with using - margins, but I have a feeling that isn't really a clean method.
This is my code:
.menu {
list-style-type: none;
background-color: #660066;
}
.menu li {
display: inline;
padding-left: 40px;
padding-right: 40px;
}
.div {
width: 100%;
height: 500px;
background-color: #660066;
}
<nav>
<ul class="menu">
<li>Check 1</li>
<li>Check 2</li>
<li>Check 3</li>
<li>Check 4</li>
</ul>
</nav>
<article class="div">
In this case your ul simply has standard margin on top and bottom. margin: 0; solves this.
jsfiddle
ul{
margin: 0;
}
Always do a reset like shown below for both UL and LI. That way spaces will only be present when you apply them by yourself.
ol, ul {
margin: 0;
padding: 0;
}
Click here to see why it is important to set a reset.
You have to set up your position since you are going to move in close proximity to the original location your position will be relative from there you move can move it up or down , it should look like this
.div
position:relative;
bottom:30px;
I've tried many methods but cannot get this menu centered .. Any ideas?
You can view the page here:
http://jsbin.com/obecig/1/edit
I tried text-align:center in the #nav ul selector but no luck..
<html>
<head>
<style type="text/css">
#nav, .nav, #nav .nav li { margin:0px; padding:0px; }
#nav li {float:left; display:inline; cursor:pointer; list-style:none; padding:0px 10px 0px 10px; border:1px #000 solid; position:relative;}
#nav li ul.first {left:-1px; top:100%;}
li, li a {color:#000;}
#nav .nav li { width:100%; text-indent:10px; line-height:30px; margin-right:10px; border-top:1px #000 solid; border-bottom:1px #000 solid; border-left:none; border-right:none; background:#fff;}
#nav li a {display:block; width:inherit; height:inherit;}
ul.nav { display:none; }
#nav li:hover > a, #nav li:hover { color:#fff; background:#000; }
li:hover > .nav { display:block; position:absolute; width:200px; top:-2px; left:50%; z-index:1000; border:1px #000 solid;}
li:hover { position:relative; z-index:2000; }
</style>
</head>
<body>
<ul id="nav">
<li>Menu 1
<ul class="nav first">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<ul>
</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</body>
</html>
Seeing how everyone answered the same thing and no one bothered to explain why... here we go:
As you all know, centering a block level element can be a pain when you don't know how. First of all, most of us know that margin: 0 auto; works, but not everyone knows why.
A quick breakdown of margin: 0 auto; has to do with the way CSS accepts shorthand notation for certain properties. Saying margin you are of course targeting the margin of the given element and the 0 part is using shorthand notation to say: 0 on the top and 0 on the bottom ... while adding auto at the end you are saying: auto margin on the left and auto margin on the right.
The above will not work if you don't have a defined width for the element in question. In this case the element has an ID attribute of #nav ... this is why the examples that everyone gave in their answers have a fixed width. The logic behind this is that a block level element extends 100% of it's parent container by default unless you specifically define otherwise in your CSS.
So in theory this also works for centering, and while it's more markup and not the best approach for simplicity's sake, I'm only showing it for illustrative purposes.
#nav {
width: 300px;
margin-left: auto;
margin-right: auto;
}
Everyone is more used to looking at it like this... and we use it like this because it's shorter.
#nav {
width: 300px;
margin: 0 auto;
}
The zero is not a must... Remember that it's the top and bottom margin of your element. So with that said, here's an example of the element with a 20 pixel margin on the bottom and centered.
#nav {
width: 300px;
margin: 0 auto 20px auto;
}
Last but not least... The shorthand notation for this property (margin) is the same as for the: border , padding , etc. It stars from Top... going clockwise to Left with Right and Bottom in between the two.
So it's: top, right, bottom, left. Like so: margin: 10px 20px 30px 40px
You need to give it a width, and then set the horizontal margins to auto. That's the quickest way anyways.
add this to your css:
#nav
{
width:100px;
margin: 0 auto;
}
To center something, it needs a width, and margin: 0 auto, so if you add this code:
#nav {
width: 100px;
margin: 0 auto;
}
It should (and did for me) work
#nav{
width:80px;
margin: 0 auto;}