My webpage has a list and I want the list to start just a few pixels down. The problem is, when I set margin: 0 0 0 0; it naturally does nothing, but setting margin: 1px 0 0 0 ; causes it to 'jump' down many pixels.
JSFIDDLE
<nav>
<ul>
<li>Layer This</li>
<li>And that</li>
<li>Ooooh</li>
</ul>
</nav>
CSS
nav {
background:#f0364f;
}
nav ul {
padding:1px 0 0 0; /* THIS IS THE FAULT. */
}
nav ul li {
list-style:none;
margin:20px 0;
background:#B8C5CD;
padding:5px;
}
So, in the CSS, if you change from
nav ul {
padding:1px 0 0 0; /* THIS IS THE FAULT. */
}
to
nav ul {
padding:0 0 0 0; /* THIS IS RENDERING CORRECTLY BUT, I WANT A PADDING! */
}
You will see the issue. When the padding is set to 0 it works as expected. Why does adding 1 pixel make it jump so far down?
EDIT Please note, although a fix is nice, I'm more interested in why this behaviour occurs (I'm sure I can find a hack easily enough, but I could not find any information into understanding the cause)
This is because when you have no padding on your <ul> the margin for your top list item collapses. When it has padding, the margin is acknowledged.
I'm assuming from your question that you don't want any margin before the first list item, you can remove any margin from the first item easily:
nav ul li:first-child{
margin-top:0;
}
JSFiddle
See Margin collapsing
You set margin for your li (child element). When you set padding for ul (parent element), you passed margin collapsing.
Set margin for second li element and next:
nav ul li + li {
margin-top: 20px;
}
jsFiddle Demo.
Rather than using :first-child, I would prefer doing something as mentioned below because :first-child may have cross browser compatibility issues.
<nav>
<ul>
<li class="first">Layer This</li>
<li>And that</li>
<li>Ooooh</li>
</ul>
</nav>
nav ul li.first{
margin-top:0;
}
The solution is basically same but targeting element based on class rather than :first-child may just help you prevent some cross browser issues.
Hope this helps :)
Try giving padding to first child instead of ul
nav ul li.test {
padding-top:1px;
}
nav ul {
padding:0 0 0 0;
}
<nav>
<ul>
<li class="test">Layer This</li>
<li>And that</li>
<li>Ooooh</li>
</ul>
</nav>
Related
I'm trying to make a simple menu bar using the ul tag,which has 4 links.
The ul width is 100% of the screen width,so according to this every li should be 25%.
i've tried doing this,but the last list item just falls down to the next line..
However if i will use width:23% for each li,it would look good.
But im very curious why this is happening,why 25% is not good enough?
This is my pen:
http://codepen.io/anon/pen/XKryKW
I would appreciate any help!
Thanks.
Simple. You have spaces in your html. This is always a problem with inline block elements. Remove them and the spaces in your result go away. See this explanation: https://css-tricks.com/fighting-the-space-between-inline-block-elements/
http://codepen.io/ruchiccio/pen/YWKRVQ
<ul>
<li><a> first</a></li><li><a> second</a></li><li><a> third</a></li><li><a> fourth</a></li>
</ul>
First of: display: inline-block will alway leave a few pixels between the block, so it would alway be more than 100%. You're also adding 22px padding, making the width: 25% + 22px +22px (left and right) to avoid this use box-sizing: border-box;
li {
font-size:25px;
padding: 22px;
width:25%;
text-align:center;
float: left;
display: block;
box-sizing: border-box;
}`
https://jsfiddle.net/wietsedevries/kmzym3xL/
First thing you need to remove padding right and left from lis , then you need also to add font-size:0 to ul to make it ignore spacing between lis
*{
margin:0;
padding:0;
}
ul
{
height:70px;
background-color:#e1973d;
list-style-type:none;
width:100%;
font-size:0;
}
li
{
font-size:25px;
padding: 22px 0;
width:25%;
text-align:center;
display:inline-block
}
<ul>
<li><a> first</a> </li>
<li><a> second</a> </li>
<li><a> third</a> </li>
<li><a> fourth</a> </li>
</ul>
My website has a scaling problem on the chrome browser in android on mobile. This does not happen in Firefox on mobile or in any desktop browser. When the navbar is selected and drops down, it scales the webpage. Note that the page is scaled differently depending on which dropdown has been selected. It seems as though the navbar has invisible content that is breaking frame when the dropdown behavior is engaged.
I have stitched together 4 screenshots of the issue.
Help with either a fix or a workaround would be much appreciated.
#NavigationBarList{
list-style-type:none;
padding:0;
}
li{
font-size:130%;
}
nav a{
display:block;
}
/* This customizes the presentation of the list elements (menu items) in the navbar. */
nav li{
display:block;
font-weight:bold;
font-size:200%;
color:#7F1717;
background-color:#9E939E;
width:25%;
text-align:center;
text-decoration:none;
text-transform:uppercase;
z-index:11;
-moz-box-shadow: inset 0 0 1px #000000;
-webkit-box-shadow: inset 0 0 1px #000000;
box-shadow: inset 0 0 1px #000000;
}
nav ul{
width:100%;
}
/* Hide the sub menu items. */
nav ul ul {
display:none;
}
nav ul ul ul {
display:none
}
/* When hovered over, the CSS menu will drop down. */
nav li:hover > ul {
text-align:center;
font-size:40%;
display:block;
}
/* Don't underline links in the list elements (menu items). */
ul a {
text-decoration:none;
color:#7F1717;
}
/* Change the background color of hovered list elements. This was both active and hover... */
nav li:hover{
background-color:#625C62;
}
/* This customizes the ul elements in the sub-menu. */
nav ul ul{
position:absolute;
padding:0;
width:100%
}
nav ul ul ul{
position: absolute;
width:400%;
left:100%;
top:0;
}
#totheleft{
left:-100%;
}
nav ul ul ul li{
text-align:center;
font-size:250%;
}
/* I think this refers to the dropdown navbar location and properties. */
nav ul ul li {
position:relative;
}
<nav>
<ul id="NavigationBarList">
<li style="float:left;">Events
<ul>
<li>Tournaments</li>
<li>Kid's Hour</li>
<li>Local Calendar</li>
</ul>
</li>
<li style="float:left;">Programs
<ul>
<li>Summer Camps</li>
<li>In Schools
<ul>
<li>After School</li>
<li>Registration</li>
</ul>
</li>
<li>Local Instructors</li>
</ul>
</li>
<li style="float:left;">Content
<ul>
<li>Posts</li>
<li>Games
</ul>
</li>
</li>
<li style="float:left;">Connect
<ul>
<li>Contact Us</li>
<li>Resources
<ul id="totheleft">
<li>Chess</li>
<li>Go</li>
<li>Xiangqi</li>
<li>Shogi</li>
<li>Backgammon</li>
</ul>
</li>
<li>About Us</li>
</ul>
</li>
</ul>
</nav>
Add this to the head section of all your pages.
<meta name="viewport" content="user-scalable=0">
From the google developers site
Without a viewport, mobile devices will render the page at a typical desktop screen width, scaled to fit the screen.
So when you visit the webpage on mobile, the view is actually zoomed out to fit all your content. When you touch your navbar, the browser also tries to zoom in. Setting user-scalable=0 prevents this from happening.
The downside is your users will no longer be able to scale the zoom on the website on mobile, but the only alternative would be to rewrite your website to use a fluid layout.
Your <ul>s that contain the dropdown items have width=100%. This means the width will be 100% of the first relatively positioned parent (which in this case is the <body>). This is causing an overflow on the x axis.
You could make the <ul>s 25% width and the <li>s inside 100%, instead of what you have now where the <li>s are 25%.
Giving you
/* This customizes the ul elements in the sub-menu. */
nav ul ul{
position:absolute;
padding:0;
width:25%;
}
and
/* I think this refers to the dropdown navbar location and properties. */
nav ul ul li {
position:relative;
width:100%;
}
I went to your site and checked it out real quick... I noticed you are using absolute positioning to position your content in the center of your page. I assume this is what is causing your issue.
I would look up a tutorial on how to create a repeating background image and use that instead of trying to use one image with no repeat. then you can center your content with margin: 0 auto.
I know its not a definite answer but I hope it nudges you in the right direction.
The workaround I came up with was to set overflow-x:hidden on my overlay. I had tried this previously on the body, but on Android overflow-x does not work on the body; it must be set for a container. There is presumably a related reason that this issue only arose on Android. This workaround works perfectly.
Forgive me if this is incredibly basic, but after researching online for a few minutes, I can't find how to remove the natural indentation from an HTML list. Here is what I have tried with the CSS:
(check out my fiddle)
CSS
ul li {
list-style: none;
margin-left:0;
padding-left:0;
}
HTML
<ul>
<li>There</li>
<li>is</li>
<li>still</li>
<li>an</li>
<li>indent</li>
</ul>
In most browsers, a ul has a padding-left of 40px to allocate spacing for the bullet points.
Simply overwrite the padding. jsFiddle example
ul {
padding:0px;
}
See http://jsfiddle.net/PdZrt/
Basically I have applied the yui reset and base and am the trying to seperately style a ul for a menu. The li's pick up the style but the ul doesn't appear too.
Any ideas?
In the fiddle there should:
list-style: none;
padding: 0;
margin: 0;
background-color:Red
There are a couple issues here.
One, that jsfiddle is all on one line and wrapping.
Two, your CSS for the ul reads: .nav-menu ul -- nav-menu IS the ul, thus it should read:
.nav_menu { list-style: none; ... }
The reason the background: red isn't showing up is because the elements inside of the <ul>, the <li>s have float: left set. This removes from from the flow of the <ul> and effectively makes your <ul> have a height of 0. While there is more than one way to solve this problem, the quickest would be to add a overflow: hidden to the <ul>.
Define your .nav-menu li list-style:none; and define your .nav-menu overflow:hidden;
Add this css
.nav-menu{
overflow:hidden;
}
.nav-menu li{
list-style:none;
}
Demo
I have below HTML in my web page:
Forum
<ul>
<li> Stack</li>
<li> OverFlow</li>
</ul>
And as you could see below, I get the items listed perfectly, but there is a fixed gap between <UL> and <LI> elements.
Is there a way, I can reduce this gap? i.e. gap between "Forum" and "Stack" text in attached screen?
The gap does not exist between UL and LI elements, but between the Forum text and the UL element. Most browsers define a default margin around certain elements, like the UL.
You get rid of it with CSS:
ul { margin: 0; }
or if you just want to reduce it, for example this one will set 0 margin for horizontal, 5px for vertical:
ul { margin: 5px 0; }
Try this (don't know if it's the problem with you):
<ul><li>
your first li element </li><li>
your second li element</li>
</ul>
There are spaces that you can't avoid on HTML code if you don't "avoid" it, let's say.
Take a look here.
In addition to kapa's comment, if you enter a negative value for the margin it will reduce the gap.
In css:
ul { margin:-20px;}
Yes, you can use CSS. In your CSS, specify the margin or padding properties to adjust the spacing between your LI and UL elements.
LI
{
margin: 0px;
}
This will decrease the vertical distance, but not the horizontal.
ul { margin:-15px 0;}
It is a combination of Andrew and kapa's.
Here's how it looks.