I want to introduce tabs into my Django web application. I going to see if I could just doo it all in css + html. Now while practising with tabs from http://www.htmldog.com/articles/tabs/, this is what I have done so far.
page1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01// EN" >
<html>
<head>
<link rel="stylesheet" type="text/css" href="base.css" />
</head>
<base>
<div id="header">
<h1>Tabs</h1>
<ul>
<li id="selected">This</li>
<li>That</li>
<li>The Other</li>
<li>Banana</li>
</ul>
</div>
</base>
</html>
page2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01// EN" >
<html>
<head>
<link rel="stylesheet" type="text/css" href="base.css" />
</head>
<base>
<div id="header">
<h1>Tabs</h1>
<ul>
<li>This</li>
<li id="selected">That</li>
<li>The Other</li>
<li>Banana</li>
</ul>
</div>
</base>
</html>
Now page1.html, and page2.html are almost the same. The only thing that is different,
id="selected" part just to indicate which tab has been selected. So what I want to do is remove any code that is redundant. For start, I wonder if it even possible I could even cut it to one index.html page as well.
You can't have one page with two different states using CSS + HTML only. Setting of id="selected" needs to result from come code somewhere, either on the server, or on the client.
You can use a URL hash to set the tab state using JavaScript. For example:
mypage.html#tab1
You can have JavaScript look at the value of document.location.hash and set selected on the appropriate tab.
I wouldn't try to reinvent the wheel. Check out jQuery UI. Has tabs built in. http://jqueryui.com/demos/tabs/
Related
I have a navigation bar that I want to have in a seperate html file and then use in all my other pages. I feel like it will make the code look neater and more organized. However, I'm having some trouble. I started by trying to fix the home page and this is what I have:
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="import" href="navigation.html">
</head>
<body>
<br><br>
<div class="zoom pic">
<center> <img src="images/technology.png" alt="portrait"> <center>
</div>
</body>
</html>
This is the navigation bar in a seperate html file, but in the same exact directory as all my other html files.
This is the navigation.html file if it helps anything:
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<center> <b>World Congress CS-IT Conferences 2016</center>
<div id="horizontalmenu">
<ul>
<li>Home<br/></li>
<ul> <li>General Information <ul>
<li>About</li>
<li> Conference Fee</li>
<li>Hotel</li> </ul>
<li>Keynote Speakers<br/></li>
<li>Call for Papers<br/></li>
<li>Important Dates<br/></li>
<li>Major Areas<br/></li>
<li>Paper Submission<br/></li>
<li>Login<br/></li>
<li>Registration<br/></li>
<li>Conference Program<br/></li>
<li>Guidelines<br/></li>
<li>Comments<br/></li>
</ul>
</nav></b>
My current issue is that I'm not seeing the navigation bar now in my home page! Any ideas on how tackle this? Any help is greatly appreciated!!!!
PHP helps you do this.
Keep your navigation bar code in navbar.php file and include this file in a page you want the navigation bar. For example if you want to include the navigation bar in index.php file, you can just include it like this.
include_once("navbar.php");
You need a server to run php code. You cannot directly include a HTML file in an other HTML file.
This can be done using jQuery also. here, u write nagivation bars html in navigationBar.html and in whichever page u want to include it in, create an empty element with id #nav and in script replace the contents of it.
$.get("navigationBar.html", function(data){
$("#nav").replaceWith(data);
});
this can also be done using html5 imports tag http://blog.teamtreehouse.com/introduction-html-imports
check this link if u want.
I'm putting a simple website (HTML 5 and CSS3) for a friend yet I can't understand why the CSS file is not loading and formatting the page.
Here is the synopsis:
I've coded the page using "liveweave" and there are no call out errors and the page is looking as it should.
The .css file exists on the server (in the same dir as the index.html file - I'm referencing it as you would in the header section of my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
<title>Styleyes Eyewear</title>
<link rel="stylesheet" href="http://styles.herobo.com/styleyes.css">
</head>
<body>
<!-- header area -->
<div class="header_div">
<img src="http://styleyes.herobo.com/img/logo_small.png" alt="Styleyes Eyewear">
<!-- navigation area -->
<nav class="nav">
<ul>
<li>PRODUCTS</li>
<li>OUR CULTURE</li>
<li>STORES</li>
<li>FOLLOW US</li>
</ul>
</nav>
</div>
<!-- content area -->
<div>
<img width="100%" src="http://styleyes.herobo.com/img/homepage_girl.jpg">
</div>
</body>
</html>
Inside "liveweave" you can combine the files (html and css) into the one file. I've done this and uploaded it as a reference and the site, again looks fine - here is a link to that:
liveweave dev page:
http://liveweave.com/XI5QT7
combined code into "source.html" and loaded onto the webserver
http://styleyes.herobo.com/source.html
So Im not sure why when I have my "index.html" seperate to my ".css" its not picking it up? If the .css file exists and I'm calling it from the index.html file as described above, It should in theory format the page.
but this is what I'm getting...
http://styleyes.herobo.com/
Any ideas as to why this is happening? Is it something in my code? I've tried on different browsers and different computers - giving same results.
Thanks!
If your .html and .css are inside of the same directory, you should use relative URI instead of absolute ones (like this):
<link rel="stylesheet" href="styleyes.css">
Also: In your live version, the CSS is actually simply not accessible (Error 404). Is the filename spelled correctly?
I am quite new to using HTML coding. Basically, when i try to link my pages together via . If you can look at my coding, and please try and help me somehow, that would be great.
<html>
<head>
<title> Information about Birmingham </title>
<link rel="stylesheet" type ="text/css" href="style.css" />
<link rel="style" type="text/css" href="stylesheet.css" />
</head>
<body>
<div id="container">
<div id="Header">
<h1> Information|Birmingham </h1>
</div>
<div id="Nav">
<h2>
<ul style="list-style-type:none">
<li>Home</li>
<li>Shopping</li>
<li>Art</li>
<li>Food</li>
<li>Nightlife</li>
</h2>
The href tag to point to the html file you'd like to link to. If you home file is index.html it should be Home
The others would be something like this:
<li>Shopping</li>
<li>Art</li>
<li>Food</li>
<li>Nightlife</li>
Just keep in mind that these need to point to html files that are in your root directory.
Your links must include the full file name "i.e home.html rather than home" and you should also make sure that the files of the other pages are in the same directory as the current page for that to work.
Another problem in your code is that you forgot to close the <ul> tag. You must add </ul> just before </h2>.
Also, it is not recommended that you place your list inside a heading tag <h2> in your case. If you are doing this for styling reasons you should better use csss to style your list.
I've made two identical pages, one calls another by clicking a link.
However, my top menubar changes significantly. What could be the reason?
HTML/CSS are absolutely same
<html> <head>
<link rel="stylesheet" href="css/index.css">
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
</head>
<body> <div class="wrapper">
<div id="topmenu" class="navigator">
<ul class="nav">
<li>(logo)</li>
<li>FAQ</li>
<li>ABOUT</li>
<li class="search">
<input type="text" placeholder="Search...">
</li>
<li class="right">Log In/Sign Up</li>
</ul>
</div>
</div>
</body>
</html>
and my CSS I will put to jfiddle not to overload the page.
http://jsfiddle.net/wg54d8az/
I am using same CSS file for both pages.
I've read some guides, however I was not able to fix the problem. HTML validator shown following mistake:
"Line 4, Column 42: Attribute content not allowed on element meta at this point.
"
However, I cant clearly get what the problem is.
Well the difference is that on FAQ page your links inside topmenu don't have font-size:18 like they do on the index page.
The problem is in the meta tag before css link on the FAQ page. Change
<meta content="text/html; charset="utf-8">
to
<meta content="text/html" charset="utf-8" >
and then page will properly load index.css
I guess they way you specify page content now it doesn't recognize UTF-8 as encoding format. That leads to problems with above attribute font-size:18 (notice you only wrote number without measure unit - pixels). Other way to fix your problem is to use:
font-size:18px;
inside your index.css
It is not linking up and I have no idea why. Is it getting confused with other files? I am not entirely sure what to do as I have been trying for the last hour. Any help would be greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Desktop/task/style.css"/>
<title>It's all about me!</title>
</head>
<body>
<header>
<h1>Welcome to my website</h1>
</header>
<ul>
<li>About me</li>
<li>What I love</li>
</ul>
</body>
</html>
h1 {
color: red;
}
Unless you have a Desktop folder at the same level as the html document, your path to the css file is wrong.
Your path to your css file is likely not correct double check that it is correct. also you have some css outside of a style tag (That should be in the head in the first Place) at the bottom of the page ensure that you delete that before continuing
Looks like your css file is not accessible to your web page. make sure it is in the same root location of your webpage.
example:
webpage location: c:\MyWebPage\mywebpage.htm
css location: c:\MyWebPage\Desktop\task\style.css