How do I enter the following code into CSS so that I don't have to copy and paste it in every HTML page?
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
My issue is especially with the "ul" and "li" -I am not sure what to do with this! Any help would be greatly appreciated- thanks!
Place your css in a separate file and use the following directive to make it accessible in each page:
<link href="url to stylesheet.css" rel="stylesheet" type="text/css">
Place the html in a seperate .CSS stylesheet and reference it as:
<link href="url to stylesheet.css" rel="stylesheet" type="text/css">
To use the ul and li tags you would write something similar to this:
<ul>
<li>
Item 2
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>
Item 3
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>
Item 4
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
</ul>
Create a CSS file and link it to your HTML file.
Add your css in separate .css file and call it in html file
<!DOCTYPE html >
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
</body>
</html>
Related
I'm trying to style two unordered lists differently on my page - no list style for the nav at the top, and regular list styling in the form.
Here's my simplified markup:
<html>
<head>
<style>
nav
{
background-color:lightgrey;
}
nav ul, li
{
list-style:none;
display:inline-block;
}
form ul, li
{
color:red;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</nav>
<form>
<ul>
<li>Form Item 1</li>
<li>Form Item 2</li>
<li>Form Item 3</li>
</ul>
</form>
</body>
When this is run, both the nav and form ULs are coloured red and also lack list styling.
Replace nav ul, li with nav ul, nav li and form ul, li with form ul, form li.
Your code should be as follows:
<html>
<head>
<style>
nav
{
background-color:lightgrey;
}
nav ul, li
{
list-style:none;
display:inline-block;
}
/*Targets all "li" elements that have "form" as parent*/
form ul, form ul li
{
color:red;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</nav>
<form>
<ul>
<li>Form Item 1</li>
<li>Form Item 2</li>
<li>Form Item 3</li>
</ul>
</form>
</body>
I am trying to make a menu with submenus. I wrote my HTML and it looks like:
<nav>
<ul>
<li>Home</li>
<li>Page 1
<ul>
<li>dropdown 1</li>
<li>dropdown 2</li>
<li>submenu
<ul>
<li>submenu 1</li>
<li>submenu 2</li>
<li>submenu 3</li>
</ul>
</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</nav>
I have a stylesheet linked to it, and it looks like:
nav ul {
display:inline-block;
position:relative;
list-style:none;
}
nav ul ul {
display:none;
}
nav ul li:hover > ul {
display:block;
}
For some reason the list is displayed as a block. I tried float:left, and it made no difference.
You have to to put display:inline-block for li elements:
nav li {
display:inline-block;
}
check here the example: http://jsfiddle.net/9y1uzqye/1/
You need to make the individual list items use block display, not the list itself.
Note the li with child ul is display:inline
- code example as follows
<style type="text/css">
ul.nav_main li { display: inline }
ul.nav_submenu li { display: block }
</style>
<ul class="nav_main">
<li>Item 1
<ul class="nav_submenu">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
</ul>
CSS does not affect validity of HTML source. It may however cause unpredictable results, as the browser try their best to place a UL inside of an inline element (even though it's valid!)
Any way, you're always welcome to check it yourself
I see no problems with XHTML 1.0. If you want to check, you can use the W3C Validator:
http://validator.w3.org/check
Therefor you need a dummy page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css" media="all">
ul.nav_main li { display: inline }
</style>
</head>
<body>
<ul class="nav_main">
<li>Item 1
<ul class="nav_submenu">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
</ul>
</body>
</html>
No errors on W3C Validator
Nesting of <ul> is allowed in CSS
If you are trying to get horizontal nav-main with vertical nav_submenu, you should have display: inline-block for ul.nav-main > li
<style>
ul.nav_main li { display: inline-block }
ul.nav_submenu li { display: block }
</style>
<ul class="nav_main">
<li>Item 1
<ul class="nav_submenu">
<li>Option 1.1</li>
<li>Option 1.2</li>
</ul>
</li>
<li>Item 2
<ul class="nav_submenu">
<li>Option 2.1</li>
<li>Option 2.2</li>
</ul>
</li>
</ul>
Tested in Firefox 11 and Chrome 17 on Linux
I have an img floated to the left followed by a long ul that should render to the right of the img then continue below it. It does this, but the portion of the ul next to the img it all left aligned and loses its indentation.
Here is a minimum case example. (also in jsbin)
<html>
<head>
</head>
<body>
<div style="float:left"><img src="http://i410.photobucket.com/albums/pp190/FindStuff2/Photography/Winter/winter.jpg" width="200" height="150" /></div>
<ul>
<li>Level 1</li>
<li>Level 1</li>
<li>
<ul>
<li>Level 2</li>
<li>Level 2</li>
<li>Level 2</li>
<li>Level 2</li>
</ul>
</li>
<li>Level 1</li>
<li>Level 1</li>
<li>Level 1</li>
<li>Level 1</li>
</ul>
<div style="clear:both"><!-- --></div>
More content More content More content More content More content More content More content More content More content More content More content
</body>
</html>
I appreciate your help.
Try this:
/* add some margin-right for some white space between the list and image */
div {margin-right:12px; float:left;}
/* add overflow and set the list-style attributes */
li {overflow:hidden; list-style:inside square none;}
css:
div {margin:0 10px 5px 0; float:left;}
ul{
padding:0px;
list-style-type:none;
margin:0px;
}
How can I use CSS selectors to apply a style only to the inner item in a list. Example:
HTML fragment:
<ul class="list">
<li>Item 1</li>
<li>
<ul class="list">
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>
<ul class="list">
<li>Subitem 1.1</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS fragment:
ul.list {
border: 1px solid red;
}
What I need is to have a border only arround the "Subitem 1.1" string. The list is generated and it's not possible to add an extra class or id and as the list has no fixed depth it's not an option to specify an "ul > ul > ul.list" or similar selector.
I believe you cannot do this with only CSS if it is not possible to use an Id or unique class. In this case I think jQuery is the way to go:
$("li").children().eq( $("li").children().length - 1 ).
css('border', '1px solid red');
The idea is to use eq() to pinpoint the deepest child.
Hope this helps
it's not an option to specify an "ul > ul > ul.list" or similar selector.
Why not? This, or adding a class, is the solution.
You've basically specified a requirement to identify an element, then rejected all the approaches that you could use to do so.
<html>
<head>
<style type="text/css">
li.list {
border: 1px solid red;
}
</style>
</head>
<body>
<ul >
<li>Item 1</li>
<li>
<ul >
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>
<ul >
<li class="list">Subitem 1.1</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
I Hope This ma help you..
JoseSantos is correct in that it can't be done with pure CSS. Here's how I'd do it in jQuery:
$("ul").each(function(){
if ($(this).find("ul").length == 0)
$(this).addClass("list");
});