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.
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>
friends, sorry for that irritating questions but I didnt really get the sense of some stuff here, im new to HTML/CSS...
overflow:hidden under ul{}
if I dont use it here, then the green background of the ul element doesnt appear anymore. and it is used to cut content which is bigger than its element. but in that code, which content is bigger than which element so that the background disappears? in other words why does the background of the total width of that ul-element dissappear because of these floating li-elements?
display: inline-block
I was wondering about the sense of inline-block here. the only thing I recognized is, that by using inline-block here, the vertical padding does work now. so why doesnt vertical padding work here if i use block or inline instead of that inline-block, I thought padding does work in ALL directions no matter if block inline or inline-block?
li a:hover, .dropdown:hover .dropdown-btn {
does li a: hover mean that the code is for all "a" which are directly under the parent "li" or also for the "a"s within the (which are not directly under the parent li because their parent is div)?
And what does .dropdown:hover .dropdown-btn exactly mean?
Heres the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<ul>
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li class="dropdown">
Dropdown
<div class="dropdown-menu">
Link 1
Link 2
Link 3
Link 4
</div>
</li>
</ul>
</body>
And the CSS file:
body {
font-family: 'Arial', sans-serif;
max-width: 960px;
margin: 0 auto;
padding: 20px;
}
ul {
list-style-type: none;
margin:0;
padding: 0;
background-color: #1ebb90;
overflow: hidden;
}
li {
float: left;
}
li a, .dropdown-button {
display: inline-block;
color: #ffffff;
text-align: center;
padding: 18px 22px;
text-decoration: none;
}
To get things started, I can help with the overflow:hidden. That is because of the css float instruction.
When you float:left or float:right a couple of elements, they will go side-by-side... but they will also lose their height.
<div id="wrap">
<div id="boxLeft">Box Left</div>
<div id="boxRight">Box Right</div>
</div>
* {position:relative;box-sizing:border-box;}
#wrap{width:70%;border:2px solid red;}
#boxLeft {background:pink;}
#boxRight{background:palegreen;}
[id^=box]{width:50%;height:40px;padding:30px;text-align:center;}
Demo 1 - Not floated
Demo 2 - Floated, height is gone
Demo 3 - Fixed height with overflow on parent
The li a:hover means any a tag under the li -- not necessarily directly under the li.
See this demo
.dropdown:hover .dropdown-btn
This means: when user hovers over an element with class="dropdown", the child element with class="dropdown-btn" gets styled.
Demo
I would like to have part of <li> content aligned to the left ("Title") and rest of it ("[button]") to the right. For each item.
I'm using following HTML code:
<ul class="dual-align-list">
<li><div>Title</div><div>[button]</div></li>
<li><div>Title</div><div>[button]</div></li>
</ul>
and styles:
ul.dual-align-list li
{
display: block;
height: 25px;
}
ul.dual-align-list li div:first-child {float: left}
ul.dual-align-list li div:nth-child(2) {float: right}
But I have a bad feeling, that I'm doing something really wrong.
Is there a better approach/solution to this problem?
But I have a bad feeling, that I'm doing something really wrong.
Is there a better approach/solution to this problem?
The only problem is your classes and use of pseudo-elements aren't very semantic. A better approach would be to give classes to your divs that describe what their content is, and style them that way.
<ul class="title-content-list">
<li><div class="title">Title</div><div class="content">[button]</div></li>
</ul>
And CSS
ul.title-content-list > li { display: block; height: 25px; }
ul.title-content-list > li > div.title { float: left }
ul.title-content-list > li > div.content { float: right }
Or something along those lines.
It's very bad practice to use "left" or "right" as class names - what if you later decide you want your title on the right and button on the left? You'd have to change all your HTML, or have weird CSS where .right positions elements on the left and .left on the right.
What you are doing seems to be working (at least per how you describe what you are looking for here). I'm assuming that your issue is the complexity of your selectors? If so, one thing you could try is moving the selector to the individual element. I know for bootstrap they call this pull-right so I went ahead and did that:
<ul class="dual-align-list">
<!-- Title really only needs to be in a div if you
plan on styling it further -->
<li> Title <div class="pull-right">[button]</div></li>
<li> Title <div class="pull-right">[button]</div></li>
</ul>
See this JSFiddle for a working example with that in it. Hopefully this addresses the actual question!
Edit
By the way, if the issue is just how far the button goes to the right you can put everything in a fixed width container or you can add a margin-right to the "pull-right" class. For the fixed width container, just wrap your ul in:
<div class="container"> <!-- "ul" here --> </div>
You will also need the following style rule as well:
/* edited to use percents for a responsive layout */
.container { margin-left: 5%; margin-right: 5% }
I put this in an update to the previous fiddle you can find here. Hopefully that helps some as well. Good luck!
EDIT (2)
Changed fixed width layout to responsive layout with 5% margins. These could be adjusted per the desired result or even styled with the #media element to vary based on screen size!
Try this:
HTML
<ul class="dual-align-list">
<li>
<div class="left">Title</div>
<div class="right">[button]</div>
</li>
<li>
<div class="left">Title</div>
<div class="right">[button]</div>
</li>
</ul>
CSS
ul.dual-align-list li {
display: block;
height: 25px;
position: relative;
}
ul.dual-align-list li .left {
text-align: left;
position: absolute;
left:0;
}
ul.dual-align-list li .right {
text-align: right;
position: absolute;
right:0;
}
Hopefully this helps :)
Okay so here is the link to the page I'm working on:
http://students.thenet.ca/jlandon/
As you can see, the list is still displaying vertically instead of horizontally.
CSS:
li { display:inline;
list-style-type:none;
}
#nav { background-color:#c6c7c3;
height:50px;
margin-top:120px;
z-index:2;
}
HTML
<div id="nav">
<ul>
<li><h2>Home</h2></li> <li><h2>About</h2></li> <li><h2>School</h2></li> <li><h2>Workshop</h2></li> <li><h2>Contact</h2></li>
</ul>
</div>
Okay now I see why that wasn't working (H1-6 are blocks) so here is the specifics of what I want the navigation to look like (please help me):
site design http://students.thenet.ca/jlandon/images/sitedesign.png
Why are you using H2 for the navigation elements?
Change them to also display inline, or use an inline element.
h2 is a block element by default, which is what's breaking your lines.
You can fix it by either setting display: inline on the h2s (probably not a great idea) or by replacing the h2s with something else (like just styling the a tag to be the size and font etc you want).
I think a float: left would fix this:
li
{
display:inline;
float: left;
list-style-type:none;
}
You should consider using semantic classes instead of using block elements like h2 in your navigation. If by using the h2 element, you want a bold font with a certain size then you should consider this:
.nav-text, #nav li a {
font-size: 1.25em;
font-weight: bold; }
#nav {
background-color: #c6c7c3;
height: 50px;
margin-top: 120px;
z-index: 2; }
Also notice that I use em instead of pixels. This will help in responsive design if you decide in the future to extend the page to mobile sites.
Your html will something like this:
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>School</li>
<li>Workshop</li>
<li>Contact</li>
</ul>
</div>
I have a horizontal menu demo below using HTML and CSS. As you can see I have put a right border on the li tag to separate the menu options. However I don't wish to have a border on the last menu option so I have used a span style to try and stop it showing. However it does not appear to be working for me. Can anyone help?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#menu a {
text-decoration:none;
color:black;
font-weight:bold;
}
#menu ul {
display:inline;
list-style:none;
padding:0px;
}
#menu li {
display:inline;
margin:0px;
border-right: solid black thin;
padding-right:5px;
color:black;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>About</li>
<li>Service</li>
<li>Prices</li>
<span style="border-right:none"><li>Contact Me</li></span>
</ul>
</div>
</body>
</html>
Two problems:
A) You can't wrap a li inside a span, because lists (ol) can't contain anything else than li. (First thing to learn here is to allways validate your HTML code: http://validator.w3.org/)
B) The border is on the li, you are tying to remove the border from the span. You need to remove the border from the li itself, for example like this:
<li style="border-right:none">Contact Me</li>
However it's even easier if you directly define in the stylesheet that the last element shouldn't have a border:
#menu li:last-child {
border-right: none;
}
That way you don't need to worry yourself which li is the last one, even if you ever decide reorder the items or add new ones to the end.
You have to consider the li, not the span. Try this :
<span><li style="border-right:none">Contact Me</li></span>
That's because you have a li tag inside the span!
Just remove the li tag inside the span too and it will work. Eg here: http://jsfiddle.net/8cUmx/
remove span tag and add this css
#menu li:last-child {
border-right:none;
}