I'm just having a go at creating a website for a friend, but I've not actually done any development for a few months, and so I'm a bit rusty at the moment.
I've started putting a basic page together, to use as a template for all of the pages of the website, but I'm having a bit of trouble getting the horizontal navigation bar to display on the page beneath the logo, and I was just wondering if anyone could explain to me why it's not showing?
The HTML that I have for this is: (code updated 25/09/2013 # 17:40)
<!DOCTYPE HTML>
<html>
<head>
<title>Cosy Hearts- Home</title>
<style type = "text/css">
#navbar ul{
list-style-type: none;
}
#navbar ul li{
list-style-type: none;
display: inline-block;
}
ul{
list-style-type:none;
margin:0;
padding:0;
}
</style>
</head>
<body>
<img src = "images\masterPageTop.jpg" width = "700" height = "800" alt = "Cosy Hearts Banner" />
<ul>
<li>Home | </li>
<li>Products | </li>
<li>About Us | </li>
<li>Contact Us | </li>
<li>Terms and Conditions</li>
</ul>
</body>
</html>
Currently, when viewing the page in the browser, the logo image is displayed at the top of the page as intended, but then the navigation bar, which I've tried to created using a div and horizontal list is not displayed at all...
I was just wondering if anyone could explain to me why this is, and what I need to do to get it to display?
Cheers!
Edit 25/09/2013
I've edited the code to show changes made as suggested, also here's the screenshot of the page when viewed in Chrome (it displays exactly the same in Firefox):
As you can see, the image is displayed (although not longer central, having removed the 'center' tags as suggested- will sort this out later with CSS. But, the navigation bar is not displayed on the page at all, and I can't tell why this is... does anyone know what I should do?
Your HTML is a little bit botched... you may want to review the purposes of tags like <head> and <body>. The following HTML will give you the desired effect.
See this working demo.
<!DOCTYPE html>
<html>
<head>
<title>Cosy Hearts- Home</title>
<style type = "text/css">
#navbar ul {
list-style-type: none;
}
#navbar ul li {
list-style-type: none;
display:inline-block;
}
</style>
</head>
<body>
<center>
<img src="images\masterPageTop.jpg" width="700" height="800" alt="Cosy Hearts Banner" />
</center>
<div id="navbar">
<ul>
<li>Home | </li>
<li>Products | </li>
<li>About Us | </li>
<li>Contact Us | </li>
<li>Terms and Conditions</li>
</ul>
</div>
</body>
</html>
I've tried to indent things in such a way that you can easily remember what the layout of an HTML document looks like. As your page gets more complex, you might consider putting your CSS in a separate file -- say, stylesheet.css -- and including it by adding the following to the <head> section:
<link rel="stylesheet" href="stylesheet.css" type="text/css">
Best of luck!
Related
I am having a problem with NVDA screen reader, in that it will read all elements out on the same line in one block.
For example, with the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<style>
nav > ul > li {
list-style: none;
display:inline-block;
}
</style>
</head>
<body>
<h1>Title 1</h1>
<nav role="navigation">
<ul>
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
<li>
Link 4
</li>
</ul>
</nav>
</body>
</html>
This will display all navigation links in a row, which is visually correct, but NVDA, in browse mode, when scrolling through with the arrow keys, will read all the links together. The user cannot move between each individual link, meaning it is impossible to stay on one and select it.
The same happens with a link in the middle of a paragraph:
<p>NVDA will not stop on This link so a user can select it.</a>
In my navigation example, changing the style so each link is on a separate line:
nav > ul > li {
list-style: none;
display:block;
}
Fixes the problem for NVDA - the user can move between links - but is visually wrong.
The only way I have found to make it visually correct and force NVDA to read it separately is to display each anchor as a block inside the list item:
nav > ul > li {
list-style: none;
display:inline-block;
}
nav > ul > li > a {
display: block;
}
But this feels hacky and is not a solution in every situation (this will not work within a paragraph for example).
Is there an attribute I can add, or any other better way to make NVDA read each element separately?
This issue is across all browsers.
You do not need to do anything, the user can navigate to each link and can activate them. The user can interrupt the reading at any point with the CONTROL key. Also after the link has been read, the user can use the SHIFT-TAB key to navigate backwards to each link. Also the user can use the K key to navigate between links. In addition, the user can use the NVDA+control+leftArrow key to move backwards word-by-word.
The key here is to ensure that each link is focusable with the TAB by ensuring that it has an href attribute. So <a>Not really a link</a> will not be identified as a link and will not be TAB focusable.
Here is a reference for the keyboard commands for NVDA http://community.nvda-project.org/documentation/userGuide.html
If you want to change the default behavior to make NVDA read links as if there were only one per line, as JAWS does, do the following:
Go to the NVDA menu (insert|n).
Go to preferences.
Choose Browse mode.
Uncheck the second check box, “Use screen layout when supported.”
Choose OK.
Go back to the NVDA menu (insert|n).
Choose “save configuration.” If you don’t do this, depending on how you have NVDA configured, this change might not persist across restarts.
Changing the display properties on ul and li changes the way NVDA will read out the list. From what I have seen so far, changing either of them to things like inline and inline-block will cause NVDA to read them as it would a paragraph (with a "list with x items" at the start), pausing after a certain number of words in the default configuration.
To get it to work with an inline list, you can use display: flex on the ul element
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<style>
nav > ul {
display: flex;
}
nav > ul > li {
list-style: none;
}
</style>
</head>
<body>
<h1>Title 1</h1>
<nav role="navigation">
<ul>
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
<li>
Link 4
</li>
</ul>
</nav>
</body>
</html>
You can also use display: block; float: left on both the ul element and li elements
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<style>
nav > ul {
display: flex;
}
nav > ul > li {
display: block;
float: left;
}
</style>
</head>
<body>
<h1>Title 1</h1>
<nav role="navigation">
<ul>
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
<li>
Link 4
</li>
</ul>
</nav>
</body>
</html>
I am creating a simple webpage with header and footer using CSS. I wanted my web page header (built by CSS) to include a simple navigation menu as such:
------------------------------------------------------------
WebPage Header (Appears on every page)
Image Logo
Home | News | Event | Contact Us <-- How to do this is CSS to appear in all pages?
------------------------------------------------------------
Body Content
------------------------------------------------------------
WebPage Footer (Appears on every page)
------------------------------------------------------------
I have already come out with the header and footer definition in CSS as below.
hr {color:sienna;}
p {margin-left:20px;}
header
{
height: 192px;
background:#ffffff url("images/logo.jpg") no-repeat center top;
//How to add navigating buttons here?
}
footer
{
height: 192px;
}
I did quite a bit of research already, but most online tutorial uses different approach (e.g: php). w3schools did not go too much in depth as well.
First:
You can't add in every pages a footer or navigation bar or something else without the help of Javascript or PHP or another language. HTML and CSS are static and with CSS3 you are able to add a kind of label for each element, not a structure.
Unique way to do in HTML it's to use FRAMES*, but it's an ugly and old way.
Docs here, but really, don't use frames if not for an homework.
However, if you copy and paste a code like this in each page:
<div id="top_menu">
<ul id="nav_bar">
<li>Home</li>
<li>News</li>
<li>Events</li>
<li>Contact us</li>
</ul>
</div>
you can style this menu as you need in css like this
#nav_bar li{
display: inline;
padding: 3px; //just a sample
}
#nav_bar a {
text-decoration: none;
}
Example of frames:
<!DOCTYPE html>
<html>
<frameset rows="25%,*,25%">
<frame src="header.html">
<frame name="openhere" src="frame_b.htm">
<frame src="footer.htm">
</frameset>
</html>
so put in a page "header.html" your navigation bar (add in links attribute: target="openhere")
*remember that tag FRAME it's not more supported in HTML5. So... avoid if you can!
Put all links to centered div, and use styled <ul>:
<div style="text-align: center;">
<ul>
<li>Home</li>
<li>News</li>
<li>Events</li>
<li>Contact us</li>
</ul>
</div>
It would be better for you to change your html pages to php so you can easily include your
header file in all other pages or Make a simple frame to navigate between pages....
Thank you so much everyone. As previously stated the problem was where I had the CSS code. I didn't have the dot/period prefixing ul and li originally, that was a desperate last-minute act. :-)
I do read W3S, StackO/f, HTMLDog, Tizag and all of the other great sites b4 asking questions. But you're stuck w/me now.
Another question. Should I open a New question? This question refers to the original block of code.
My line color doesn't change. But if I code each individual line, the color changes. I would like to know how to change the color in the li CSS block.
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Why I love learning HTML - Part 2</TITLE>
</HEAD>
Colors
<BR>
My favorite colors are:
<BR>
<UL>
<LI><FONT SIZE=2 COLOR="red" >Navy</FONT>
<LI><FONT SIZE=2 COLOR="red" FACE="VERDANA">Olive</FONT>
<LI><FONT SIZE=2 COLOR="red" >Purple</FONT>
<LI><FONT SIZE=2 COLOR="red" FACE="VERDANA">Teal</FONT>
</UL
</BODY>
</HTML>
This is my 5th week of HTML&CSS class. The stack overflow website always pops up when I Google a question. So I joined and I have a question. My CSS code shows up on my web page as code. The UL and LI part of the code does not read the classes .ul and .li. I have looked at the code for a long time and cannot figure out what is wrong. Thanks for your help
<head>
<meta charset="utf-8" />
<title>Homepage</title>
<style type="text/css">
</style>
</head>
<body>
.ul {
margin:0;
padding:0;
color:#ff0000;
}
.li {
display:inline;
padding:0;
margin:0;
color:#000099;
}
<!-- Site navigation menu -->
<ul>
<li>Home page</li>
<li>Education and Experience</li>
<li>Publications and Committees</li>
<li>Links</li>
</ul>
<h1>can't find the errors</h1>
</body>
</html>
First of all, welcome to the world of HTML and CSS. I'll jump straight into things by saying that there are a couple of issues with the code you've posted up:
1. Putting your CSS in the right place
Your CSS code currently isn't placed within your <style type="text/css"> declaration at the top, it's placed within the document's body. This will output as text to the screen.
To fix this, simply move it all into that style element in your head:
<head>
<style type="text/css">
/* Styling goes here. */
</style>
</head>
(For rendering purposes, styling should never be declared outside of the document's head either.)
2. Fixing your selectors
Once you've fixed that, however, your selectors will still not target your elements. This is because you're prefixing your CSS selectors with a . (.ul and .li). A . prefixes the class selector.
To target your ul and li elements, you'd simply remove the .:
ul { ... }
li { ... }
3. Validating your HTML
On a side note, you need to pay attention to your closing HTML tags. Your closing </a> tags must be within your <li> tags. Change:
<li>...</li>
To:
<li>...</li>
you need to contain your CSS in
<style> </style>
Also, make sure you put it in the head where possible
Because CSS selector start with '.' is for class.
Use ul, li instead, and include ur css style in <style></style>.
That's because you put the CSS "code" as text in the HTLM instead of inside your empty <style> tag.
The correct way to do inline styling is to use the style attribute in your markup:
<ul style="margin:0; padding:0; color:#ff0000;">
The above is not however recommended because as the number of pages grow in your site, with lots of inline styling, maintenance becomes a nightmare.
What you are trying to do is embedded styling and it is not working because you need to have the styling directives inside the tags.
BTW it's always better idea to use ids. As things stand, this styling will be applied to every unordered list in your application which is often not what you want. If you gave the list an id, then you could reference it like this #myId {} and then the styling would be confined to that list.
Finally, the recommended practice is to use external style-sheets, using the HTML link tag:
<link rel="stylesheet" type="text/css" href="styles.css" />
Here is your original code with the embedded styling in the correct place:
<head>
<meta charset="utf-8" />
<title>Homepage</title>
<style type="text/css">
ul {
margin:0;
padding:0;
color:#ff0000;
}
ul li {
display:inline;
padding:10;
margin:0;
color:#000099;
}
</style>
</head>
<body>
<!-- Site navigation menu -->
<ul>
<li>Home page</li>
<li>Education and Experience</li>
<li>Publications and Committees</li>
<li>Links</li>
</ul>
</body>
So I am just learning CSS in my Web Programming 1 class, and the exercise is teaching us about class selectors, so our teacher wants us to make a page which has an unordered listed with only some of the listed items to be underlined. However, when I do this, my bullets in the lists get underlined aswell, where as in the page he wants us to make, they are not.
I've included my code below
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.underline { text-decoration: underline}
</style>
</head>
<body>
<h1> Solids </h1>
<ul>
<li class= "underline"> Tetrahedron </li>
<li> Pentahedron </li>
<li class = "underline"> Cube </li>
<li> Heptahedron </li>
<li class= "underline"> Octahedron </li>
<li class = "underline"> Dodecahedron </li>
<li class = "underline"> Icosahedron </li>
</ul>
<p> What's special about the underlined items.
</body>
</html>
You should give .underline class text-decoration css property:
li.underline{
text-decoration:underline
}
JSFIDDLE
Your code is fine, it must be a browser glitch. Actually, to make a browser display underlined bullets is not that easy. It would have to be something like this:
/* this will display underlined bullets. It can also be done in the markup without the second rule and adding an • in between the tags */
li.underline {
text-decoration: underline;
list-style: none;
}
li.underline:before {
content: "\2022";
}
The best solution was suggested by #Huangism in the comments. The markup would look like this:
<li><span class= "underline"> Tetrahedron </span></li>
<!-- and so on... -->
Still, that's a strange glitch. No browser I tested with your markup displays the bullets incorrectly.
I agree with, Huangism's answer. Adding the span element inside the <li> and making that underlined will solve you problem. This way you can colour and style the bullets without effecting the list itself.
When I run my (very basic) page in Chrome, it shows the title and list in the correct size, colour and position. Also the background image fits to the screen. But when I run my page in FF or IE, there is no background image and the title and list haven't got my CSS position, colour or size.
I have copied my code below. My question is: how can I make my title and list show up on my web page in all/most browsers in the correct size, colour and position to what I have set it to in my CSS? Also for the background image to be shown as well. I hope this isn't too general. Please help!
This is my HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="txt/css" href="C:///****/*****/Desktop/FifaStream1.0/indexstyle.css"/>
<title> Fifa Stream </title>
</head>
<body>
<h1 id="Title1"> <font color="grey"> Fifa </font color> <font color="red">Stream </font color></h1>
<nav class="IndexList">
<li> Home <br> <br> </li>
<li> Youtube <br> <br> </li>
<li> About Us <br> <br> </li>
<nav>
</body>
</html>
And this is my CSS:
body {
font-family: "proxima-nova",sans-serif;
background:url(fifa13messi.png);
-moz-background:url(fifa13messi.png);
background-size:100%;
-moz-background-size:100%; /* Old Firefox */
background-repeat:no-repeat;
}
#Title1 {
position:relative;
left:5%;
top:5%;
font-size: 3em;
}
.IndexList {
list-style: none;
position:relative;
left:5%;
top:40%;
font-size:2em;
font-weight: 600;
letter-spacing: -1px;
}
a {
color:white;
text-decoration: none;
}
It would a great help if anyone could explain where or why I'm going wrong.
Because <li> elements can't be children of the <nav> element - they can only be children of the <ul> or <ol> elements...
The type attribute should be text/css, not txt/css. IE and Firefox are (correctly) rejecting it for the mismatch.
First thing I want to say is try to do smart work, use some html eiditor, like dreamweaver or some other that provide hints forcodig.
Now point by point here are list of problems in you coding
Type attribute for link css should be text/css. Not. Txt/css
Try to close tags just after creating it. This will always make shure all tags are closed. Bcz your nav tagi not closed,but created two nav tags without closing them.
Li tag should be wrapped with 'o' or 'ul'
Thanks.
Your <nav> tag needs a </nav> closing tag, not a second <nav>.