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;
}
Related
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
ok the code is listed below, and when I adjust the css as follows:
.Nav {
color:red;
float:left;
display:inline;}
It wont display inline? What Am I doing wrong? Im sure this is a stupid question.
<head></head>
<body>
<div class="Nav">
<ul>
<li>Home</li>
<li>Sign Up</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</div>
</body>
dont use float and dislay inline at the same time just use `
display:inline-block;
and it will work perfectly fine
i would also recommend you to read this article, it's a short article but helps a lot
click this to read the article
atleast it did help me a lot and cleared my concepts of float and display
It will. Your div is the one with the .Nav class so that div will be displayed inline. Try:
.Nav li{
display:inline;
}
Here is a jsfiddle example
.Nav ul li{
color:red;
display:inline;}
You can put display: inline on li elements, all they will be on a unique line.
As you can see here: http://jsfiddle.net/b31krn9b/
CSS:
.Nav {
color:red;
float:left;
}
.Nav li {
display:inline;
}
Another ways to align:
Using float: http://jsfiddle.net/b31krn9b/1/
Or even display: inline-block (this is better because you can use margin-right and left): http://jsfiddle.net/b31krn9b/2/
The div itself is displayed inline, but since it's the only element inside the body, it has no visible effect.
You need to set it on the li elements:
CSS
div.nav ul li {
float: left; /* All li elements inside the div.nav are floated to left... */
display: inline; /* ...and displayed inline – but it does not make sence,
since a floating element cannot be inline. */
}
HTML
<div class="nav">
<ul>
<li>Home</li>
...
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 have a navigation element in HTML, I can change it with external CSS, but I want to compare how to call it from inside the HTML,
so I got
<div id="header" class="row">
<div id="logo" class="col_12">And the winner is<span>n't...</span></div>
<div id="navigation" class="row">
<ul>
<li>Why?</li>
<li>Synopsis</li>
<li>Stills/Photos</li>
<li>Videos/clips</li>
<li>Quotes</li>
<li>Quiz</li>
</ul>
</div>
</div>
If i put on header
<link href="css/custom.css" rel="stylesheet" type="text/css" />
I can change my list to show as navigation on CSS with
#navigation ul li {
display: inline-block;
}
but now I want to compare, and call this element from inside the HTML
I use in the head, and comment CSS
<style>
#ul.navigation{display:inline-block;}
</style>
But I dont think im referencing the element right
Also how will I call this "inline-block" property for my list inside my actual html body? [inine style]
I see the CSS working fine, but I want to compare calling with style in the head and how to call it in the body,
I have seen examples for the 3 cases,
http://www.w3schools.com/css/css_howto.asp
I see it working with paragraph, but will need more clarification to know how will work with my element?
thanks
Have you tried to put like this :
<style>
#navigation ul li {
display: inline-block;
}
</style>
With #ul.navigation{display:inline-block;} you are selecting the wrong element.
ul.navigation -> your ul element with classnavigation.
# stands for ID. So #ul.navigation isn't valid.
You probably meant div#navigation or even better div#navigation ul li to select the li elements of the ul element that is the child of a div with ID "navigation".
Like this:
<style>
div#navigation ul li {
display: inline-block;
}
</style>
JSFiddle.
You can use the css in this way..
#navigation ul li
to me this is really weird, i have this menu:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.menu{text-align:right;}
div.menu ul{
list-style:none;
display:inline;
}
div.menu li{
position:relative;
display:inline;
background:#434343;
padding:8px 12px;
line-height: 32px;
margin:0;
border-left:1px #000 solid;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li></li>
<li> </li>
<li></li>
<li>Hi</li>
<li>Hello </li>
<li></li>
</ul>
</div>
</body>
</html>
i'm using the latest chrome and firefox 3.6 for testing
there are 6 li but only 5 are shown, a space inside the li causes it not to be rendered
if there's a text inside it causes a 4px space
"hi" has a space after, "hello " doesn't
adding anchors inside the li causes the same behaviour
<li>Link</li>
has a space after
<li>Link </li>
doesn't
adding
div.menu li a:after{content:" ";}
in the code would solve the problem apparently but if you look closely the elements will appear wider except the last one
any help?
thank you
div.menu{text-align:right;}
div.menu ul{
float:right;
...
}
div.menu li{
float:left;
...
}
Looks fine to me:
Fiddle: http://jsfiddle.net/maniator/hgde9/show/
Chrome About:
Google Chrome 18.0.1017.2 (Official Build 118867) dev-m
OS Windows
WebKit 535.19 (#105663)
JavaScript V8 3.8.7.1
Update:
Add:
float: right;
height: 32px;
To div.menu li
Fiddle: http://jsfiddle.net/maniator/hgde9/1/show/
The problem is with display:inline. Two inline elements next to each other have a space between them if there is wehitespace in the source. Or if there is a space inside one of the elements. Whitespace collapses, so the space in "Hello " is folded with the space after it and ends up inside the li, while there is no whitespace in the "Hi", only after.
there is white space in the html, remove that and the gap will go! as in try this html
<ul><li></li><li> </li><li></li><li>Hi</li><li>Hello </li><li></li></ul>
and all will be revealed! (its nothing to do with CSS!)