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>
Related
I have a full browser width list with a background color (which changes color on hover). However I want the li text to be text-align:left, have a max-width and the left and right margins to be equal – but the background color to still be full browser width. How do I do this?
I have made a JSfiddle here.
As soon as I put a max-width on the li, the background color will obviously shrink to the max-width. Is there a way to just target the text within the list?
<div class="case_study_links">
<ul>
<li>Abbey Meadow Flowers<br>Helping to grow a sustainable florists</li>
<li>Collins Environmental<br>Differentiating ecologists from competitors</li>
<li>University of Oxford<br>Branding for research project on young migrants</li>
<li>Small Woods<br>New brand brings credibility to organisation</li>
<li>Good Energy<br>Rebranding helps double customer numbers</li>
</ul>
</div>
.case_study_links li {
list-style: none;
font-size:1.8rem;
text-align:left;
border-top:1px solid white;
}
.case_study_links a:link { color:white; display:block; padding:4.8rem 0; background-color:rgb(149,199,201);}
.case_study_links a:visited { color:white; display:block; padding:4.8rem 0; background-color:rgb(149,199,201);}
.case_study_links a:hover { color:white; display:block; padding:4.8rem 0; background-color:rgb(134,179,181);}
.case_study_links a:active { color:white; display:block; padding:4.8rem 0; background-color:rgb(134,179,181);}
wrap Your text in a <span class="myTexts"> and add css properties to it:
.myTexts
{
max-width:100px; // or anything you want
margin:auto
}
U have your CSS on wrong levels:
Define background-color on the ul (maybe width: 100%; too, didn't test)
Define borders and width: 100%; on the li
Define max-width: ; on the a, or the elements within a
As suggested, you could wrap a part of the text in a span element.
I would refrain from using "br", you could do this:
<li><p>Abbey Meadow Flowers</p><p>Helping to grow a sustainable florists</p></li>
Change the P elements accordingly for semantic HTML to H1,H2,H3,span,p, etc.
Note that span is an inline element, and will not automatically take up full width. Use display: block; in your CSS to fix this
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>
I am trying to create a grid-style navigation menu, which I have done. Here is a jsFiddle of what I have so far. If you hover over the links you can see there is a 1 or 2px gap between the left and right hand columns, and I can't seem to get rid of it.
At the moment I have:
#nav {
float:left;
width:230px;
display:inline;
text-align:right;
}
#footer li {
display:inline-block;
text-align:left;
line-height:32px;
text-indent:10px;
width:49%;
}
If I set the li {width:50%} the list doesn't fit into 2 columns, but when it is set to 49% I get the gap between list elements. There must be some padding or margin coming in somewhere but I can't see it. Any help would be great.
My favorite method of fixing this is to use a font-size: 0 in the parent and then restore the font size in the child. What happens is that a physical space in your html code (for example, pressing enter after an element) renders a physical space in the code, aka a space in between lis. The font-size: 0 renders that space as no physical width, thus allowing for two 50% lis.
#nav {
font-size: 0;
}
#nav ul li {
font-size: 15px;
}
Check it out: http://jsfiddle.net/3XqZ3/9/
Another option would be to use floats to get the elements right up next to each other. This also gets rid of the space in between.
#nav ul li {
float: left;
}
A third option would be to make sure that there are no breaks in between elements in the html. Like:
<li>This is an li</li><li>This is another li</li>
Or:
<li>This is an li</li><!--
--><li>This is another li</li>
That is white space caused by your inline-blocks. Because they are 'inline', your white space is taken into account.
There are a number of ways to overcome this. One is commenting out the whitespace:
<li class="green">Home</li><!--
--><li class="green">FAQs</li>
JSFiddle
Or you could use floating:
#footer li {
float:left;
}
JSFiddle
You should use float instead of display, like this:
#footer li {
text-align:left;
line-height:32px;
text-indent:10px;
width:49%;
float: left;
}
Demo: http://jsfiddle.net/3XqZ3/11/
Here is a css
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Jenware | Personalized Gifts</title>
<style type="text/css">
/* styles for navigation */
#nav {
background-color: #2322ff;
height: 3em;
width:70em;
}
#nav ul {
list-style:none;
margin: 0 auto;
}
#nav ul li {
font-weight: normal;
text-transform: uppercase;
float:left;
}
#nav ul li a {
display: block;
padding: .5em;
border: 1px solid #ba89a8;
border-radius: .5em;
margin: .25em;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li>House</li>
<li>Baby</li>
<li>More</li>
<li>About</li>
</ul>
</div>
<!-- end #content -->
</body>
</html>
It appears as follows
where as if the css is following
}
#nav ul {
list-style:none;
margin: 0 auto;
float:left;
}
then following appears
I am unable to understand the behavior of float:left in above images.
Why in 2nd kind of css it is getting down one by one? where as in first one it is coming properly?
Ok, here's the problem with the second code. When you float:left; in the first case, you apply it to the <li> elements, so each <li> is floated to the left.
In the second case, you apply float:left; to the <ul> element. CSS does it's job correctly and floats the container to the left leaving the <li> elements inside unchanged. So they stack on top of each other like they normally do, because you haven't told them to do otherwise.
The reason drip and John didn't see the problem is that you didn't tell us that in the second case, you also remove float:left; from the <li> styles. In the future, it's super helpful if you create a jsFiddle like they did to show exactly the code you are using. Let me know if you need more explanation, I'll be happy to try and clarify it.
The normal behaviour of float is to resize the container size as per content/child length. In first scenario LI are coming in single line because the parent is able to provide them complete width.
But in the case of second one, UL gets resize as per its child witch has max width. And, hence they are appearing underneath each other.
The margin:0 auto and float:left seem to conflict. To center the nav, place margin:0 auto on #nav.
edit: forgot to mention to clear after the float.
edit: maybe i should've inquired why you'd want to float the ul in the first place.
I would like to align the text and input in the LI to be horizontaly aligned with the menu on the left. Here how it looks.
I need the newsletter to be align with the menu on the left.
CSS
#footer .div1{
float:left;
}
#footer ul{
list-style:none;
}
#footer li{
float:left;
padding-left:20px;
font-size:18px;
}
#footer li:first-child{
padding-left:0px;
}
HTML
<div id="footer">
<div class="div1">
<ul>
<li><b>WE ♥ TO NETWORK</b></li>
<li>FACEBOOK</li>
<li>BLOG</li>
<li>CONTACT</li>
<li>NEWSLETTER : <input type="text" name="email" id="emailNl" style="font-family:arial; width:200px; margin:0px; padding:0px;"/> <span id="submitNl" style="cursor:pointer">OK</span></li>
</ul>
</div>
<div style="clear:both"></div>
</div>
Thanks
IMAGE UPDATED!
With padding and margin 0px it's almost there but you can notice a slight difference. :S
UPDATE 2
By changing the float:left of my LI to display:inline-block, now the text is align but the input seems to be like padding-top 2px too much ... I think i'll tweak this to make it fit and see through each browsers.
Your problem is caused by float: left;. Replace it with display: inline-block; and you'll be fine.
Try it yourself: inline-block vs float:left
Try putting it in a jsfiddle. It looks to me like the input tag is trying to put some padding/margin (oh how I always forget which is which) around itself. Try setting those to 0px.
try reset the padding and margin of the element and try vertical-align property - http://www.w3schools.com/cssref/pr_pos_vertical-align.asp
although, I tested, they align just perfectly as it is. below is the preview from firefox
You can try
#footer ul {
list-style: none outside none;
margin: 0;
overflow: auto;
padding: 0;
}
input[type=text]{
padding:0;
margin:0;
}
see if it works.
Don't know if this will look good but this sure does the job.
#emailNl{
margin-top:-3px;
}