Insert simple menu into css to use as web page header - 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....

Related

Strange CSS Border Issue

body{
margin:0;
padding:0;
background-color:white;
font-family:sans-serif;
font-size:14px;
}
#wrapper{
margin-top:10px;
margin-bottom:50px;
margin-left:auto;
margin-right:auto;
width:550px;
}
<!DOCTYPE html>
<html>
<head>
<title>advanced website one</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="advanced1.css">
</head>
<body>
<div id="wrapper">
<header id="header">
<img id="logo" src="images/logo.png" alt="logo image"/>
<ul id="menu">
<li>Home</li>
<li>Portfolio</li>
<li>Gallery</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
<content>
<h2>About Blue Micro</h2>
<p>Blue Micro is meant for a site that doesn't necessarily need a huge amount of content. I've found that trying to put a small amount of text onto a large template ends up in a site that looks slightly off. So this template is for those that need a quick and simple site</p>
<h2>Titles are H1 Tags</h2>
<p>Try to include your keywords in the titles since they are what seach engines pick up, it's also a good idea to try to include those same keywords in the title as well (only one of two of your best ones).</p>
<h2>Background Image</h2>
<p>I debated using a fancy background for this template, but ultimately just decided to keep it blank. I did however create all the images with Alpha transparency, which means that regardless of what background you choose, it will always look good. So keep it white, or experiment with it if you please.</p>
<h2>XHTML 1.1</h2>
<p>This template validates as XHTML 1.1 - this is to ensure it'll work for many years to come, and it makes it really easy for you to modify.
Try to include your keywords in the titles since they are what seach engines pick up, it's also a good idea to try to include those same keywords in the title as well (only one of two of your best ones).</p>
</content>
<footer>
free xhtml template by web page designer
<!-- begin snippet: js hide: false console: true babel: false -->
</footer>
</div>
</body>
</html>
I want to do this "see border" border in css, its not that hard but i'm newbie at web development. This border is linear gradient and has radius and i think internal radius
here is the logo image logo image
border
.border {
float: left;
background-image: url(gradient_rectangle_back.png);
background-repeat: repeat-x;
background-color: #4586F1;
width: 547px;
margin-left: 14px;
clear: both;
margin: 0 auto 0 auto;
}
You also need to download this graphic
http://www.quackit.com/html/templates/download/bryantsmith/bluemicro/gradient_rectangle_back.png

<a tag in html is not working with <div class="subnav">

I'm writing a code for my website in html.when I use < a tag as below its not working (bad).
<div id="column">
<div class="subnav">
<li>Introduction To File</li>
<li>File Access Mode</li>
<li>Error Handling</li>
<li>Closing File</li>
<li>End of File</li>
<li>fcloseall() vs exit()</li>
<li>getchar() and putchar()</li>
<li>getc() and putc()</li>
<li>fputc() and fgetc()</li>
<li>fgets()</li>
</div>
</div>
NOTE: when I click on Introduction To File i am not sent to Introduction To File.html page(bad) but, when i insert
<div class="clear"></div>
then i m sent to Introduction To File.html page and the problem is after adding "clear" some unwanted space seems to be added which is bad.
Please help to find where i went wrong?
Your HTML is invalid. <li> elements cannot be child elements of <div>. They must be enclosed within an <ul>
Also, you need to encode the spaces in your URL to %20. That is the character encoding for spaces. Otherwise it will be misinterpreted as you have found.
URL Encoding
After looking at the link you provided in the comment, The issue is simple. You have a div with id container and this div is overlaying on your left menu's. So its like a invisible wrapper above the left menu. So you will never be able to click the anchor tags. Place this CSS rule in your code and it must work
Here you already have this
#header, #topbar, #topnav, #breadcrumb, #container, #footer, #copyright {
position: initial;
margin: 0 auto 0;
display: block;
width: 96%;
}
Add this CSS rule to overwrite the above position:relative rule.
#container {
position: initial;
}
with the above code the overlapping is removed and you are able to click the links.
For a quick check, paste this in your browser console and you can see the links are clickable.
$('#container').css('position','initial');

How to make the navigational bar full width and bring tabs to middle?

My website is this www.bangkokvisitors.com I'm new to css and HTML. I used a child theme and edited the style.css. But the output doesn't look like the way I want.
I added these to css
.menu{
height: 42px;
}
.menu li{
position:relative;
float:left;
left:33%;
margin-top:0px;
}
this seems work for me. But the margin doesn't change after i save the code and reload the webpage. Help me with this please
You have to add your header tag after body tag. You also need to change some class in it.
<header multilinks-noscroll="true" id="header" class="blog-header">
<div multilinks-noscroll="true" class="blog-title container"><a multilinks-noscroll="true" href="http://bangkokvisitors.com/" title="bangkokvisitors.com" rel="home">bangkokvisitors.com</a></div>
<div multilinks-noscroll="true" class="blog-description container">To shop, to hangout and to explore the city of Angels | <a multilinks-noscroll="true" href="http://bangkokvisitors.com/feed/" title="Subscribe to the RSS Feed of this site" id="rss">RSS</a></div>
<nav multilinks-noscroll="true" id="blog-menu" class="menu">
<!--YOUR MENU CODE GOES HERE-->
</nav>
</header>

HTML 5- adding a navigation bar to a page

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!

Why does my external CSS not work in FF or IE, but does in Chrome?

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>.