I have 4 different html web pages. The html code below is for a menubar which I want to apply to all four pages. Is there any way I can do this using CSS instead of copying/pasting this menubar html code on all 4 of my html web pages? Basically the four pages are Home, News, Contact, About. Whenever someone clicks on a menubar item, it will redirect them to one of the 4 pages. And on all 4 of those pages, I want the menubar to be displayed. I want to create a CSS file which I can just link all 4 pages to and then the menubar will be displayed (code below). Thanks in advance!
Is there any way I can create a CSS file which at least takes care of the styling? And I will manually add the menubar buttons to each html page?
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 0 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="page1.html">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<div style="margin-left:25%;padding:1px 16px;height:1000px;">
</div>
</body>
</html>
You shouldn't/can't do this with CSS. You need either:
- For a non-programmatic solution: <link rel="import" href="sidebar.html"> save your sidebar in a sidebar.html file and call it with this snippet. Check out the support tables for this function. (Deprecated)
Use ES modules: Is there a way to use es6 modules to import html template into javascript?
Use a template engine to produce the results you want.
Include it with PHP like so: <?php include 'sidebar.php'; ?>
There are more solutions, but these are the most obvious AFAIK.
You cannot achieve this with HTML and CSS only. If you have PHP server then, I suggest to create a PHP file and put your nav-bar code and then use the following PHP code in the all pages.
<?php include 'nav.php'; ?>
Here is the code for nav.php:
<?php
echo
'<ul>
<li><a class="active" href="page1.html">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>';
?>
There is no way to do that by css, html is in charge of the elements and css only of styling them, you can't create elements by css.
I suggest you to copy and paste the code. Or look for other tools, populate it with js, php or something.
Not with CSS, you have following options:
Use web component and javascript (1) to load it.
Jade template engine which is a language for writing HTML templates, produces HTML and supports dynamic code with the support for reusability (DRY), it gives you the ability to include (2) partial HTML files in .jade with this command
include ./path/to/sidebar.jade
Example from Jade:
//- index.jade
doctype html
html
include ./includes/head.jade
body
h1 My Site
p Welcome to my super lame site.
include ./includes/foot.jade
Server-Side solution like PHP or ASP.NET.
--------------------------------------------------------------------------
(1) http://webcomponents.org/
(2) http://jade-lang.com/reference/includes/
Related
I have created a newsletter template with 1 HTML file and 4 CSS file. But the CSS is not linked when I send the newsletter. So I want to create a single HTML file with the CSS included directly in each tag. For each CSS tag I ha use in the HTML, I want that all the real value of this tag in the CSS file, to directly in the HTML tag. How can I do that?
Old code
CSS code
<style>
.mycss{
width:100px;
color: red;
}
</style>
html code
<html>
<div class="mycss">
//some code
</div>
</html>
I want that to become
CSS code
html code
<html>
<div style="width:100px; color: red;">
//some code
</div>
</html>
Use a CSS Inliner such as Mailchimp's CSS Inliner Tool to accomplish this.
This is the process I use for newsletters that I write:
Copy and then paste the CSS from your various CSS files between the <style></style> tags in your html file
Copy and then paste all the code from that file into Mailchimp's CSS Inliner Tool
Click Convert
Copy and use the resulting code which now has with your CSS inlined.
Would not you be looking for something from that?
console.log(document.styleSheets[0].cssRules[0].cssText )
console.log(document.styleSheets[0].cssRules[1].cssText )
/*
for (let styl of document.styleSheets ) {
for (let rules of styl.cssRules){
console.log( rules.cssText )
}
}
*/
.class01 {
border: 1px solid blue;
width:200px;
height: 50px;
}
.class02 {
border: 1px solid red;
width:300px;
height: 30px;
}
<div class="class01">MyDiv 01</div>
<div class="class02">MyDiv 02</div>
Solution: Followed solution provided by accepted answer.
Excerpt of my code provided below as a clearer solution.
<?php
$active_home = "active";
include('header.php');
?>
<div id="content">
<title>Welcome to the home page.</title>
<p>index</p>
</div>
The $active_home must come before the include in order to affect the header file.
<html>
<head>
<link rel="stylesheet" href="MainStyle.css" type="text/css" media="screen"/>
</head>
<div class="topnav" id="mytopnav">
Home
</div>
</html>
Currently I have a main CSS sheet, which specifies all the styles of my navigation bar.
I want to provide an indication as to what page the user is on, and the tutorial I followed makes use of a ".active" class which changes the background and text colour.
The trouble is that their method has the active page specified on the navbar. This doesn't work, as what the navbar considers to be the active page never changes.
What I am attempting to do, is add a small style sheet at the start of each page which sets the current page on the nav bar to active.
I can do this very easily if I use something like
<style>
#homenav{
background-color: #4CAF50;
}
</style>
To each page, in the above example the home page.
However, this means that if I want to update the style for the active page, I need to change each page individually.
What I'd rather do is something like
<style>
#homenav{
(add the .active class)
}
</style>
Which makes life easier, however at the moment I am having issues referencing.
Is it possible in CSS to add a class to a particular ID? Failing that, is there a way to declare a variable in the main css that can be referred to in other style sheets?
Main CSS:
* {
margin: 0;
}
#body{
margin: 0px;
padding: 0px;
font-family: Calibri;
}
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/*Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #4CAF50;
color: white;
}
In your current case scenario, you have dynamic pages where you want to highlight the menu in navbar related to the active page. It can be simply achieved using the below logic.
In case you have fixed number of dynamic pages
Let's take an example that you have the below navigation bar (menu) items.
Home
About
Services
Contact
In every page, you have dynamic content. What you require will be accomplished with PHP and NOT by HTML/CSS.
Have your Navigation Bar file as a separate file. Name it as you want. For example, nav-items.php and include in your PHP pages.
Now in nav-items.php apply the below logic:
<li id="home" class="<?php echo $active_home; ?>">Home</li>
<li id="about" class="<?php echo $active_about; ?>">About</li>
<li id="services" class="<?php echo $active_services; ?>">Services</li>
<li id="contact" class="<?php echo $active_contact; ?>">Contact</li>
In case you have dynamic pages in terms of count as well and you are not sure about the pages names, use the below code instead.
<?php
$dynamic_page_name = "Page Name" //This is can be fetched from database
?>
<li id="<?php echo $dynamic_page_name; ?>" class="<?php echo ${"active_" . $dynamic_page_name}; ?>"><?php echo $dynamic_page_name; ?></li> //Since it is an example of dynamic page names, so I am only giving one List Item example.
Now in every PHP page, add the below code.
For example, About will have the below code:
<?php
$active_about = "active";
?>
In case you have dynamic pages in terms of count as well and you are not sure about the pages names, use the below code instead.
<?php
$dynamic_page_name = "Page Name" //This is can be fetched from database
${"active_" . $dynamic_page_name} = "active";
?>
This will add active class to each page with their specific PHP variables defined for this purpose only. So once the nav-items.php will be loaded in each page, only the relevant page will have active class added to it.
I'm making a website with a very simple menu bar at the top of each page. I would like to make the menu easy to update, so hard-coding the whole menu into each page is not ideal. Modifying and re-uploading every page would be too cumbersome and since the website will be hosted statically, I cannot use PHP create the menu either.
My current solution uses an iframe and a separate html file with my menu.
This is pasted in the body of each new page:
<iframe src="menu.html" width="100%" height="55x" id="menuframe" style="border:none"></iframe>
I get this, which works nicely:
<!-- This is my `theme.css` -->
#menudiv {
width: 100%;
height: 38px;
}
.menu-item {
height: 20px;
width: 120px;
margin: 0;
display: inline-block;
text-align: center;
padding: 4px;
border-radius: 50px;
background: 000000;
border: 2px solid black;
}
<!-- This is `menu.html`: -->
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
<body>
<div align="center"><div id="menudiv" align="center">
Home
About
</div></div>
</body>
</html>
This works fairly well for a simple menu with only a few buttons, but it doesn't scale up well. If there are enough buttons, then the iframe overflows and half the buttons will be cut in half. If I eventually move on towards a drop down menu with CSS, the menu items will be eaten by overflow and cut off, etc.
How can I make an easily editable menu for my static website?
The menu must be editable from one file, a la menu.html or similar.
I cannot use PHP.
I have never used JavaScript/jQuery but I am open to solutions that use them.
Dont use an Iframe, If you really dont want to get a hosting plan.
Here is how you can still use a single menu template for each page.
1 You can use JQuery's load function.
$(document).ready(function(){
$('#somecontainer').load('path-to-your-html');
});
2 Create a JavaScript file with your menu on each page.
<script src="path-to-your-js"></script>
3 Or you can create an html page an include it on each page with:
<!--#include virtual="path-to-your-html" -->
I want to use an external .CSS file.
When I load a page in chrome I see only the Html part. The CSS part seems to be ignored.
So I go to inspect element and look at the sources tab an there are 2 files. When I open the html and CSS file it looks nice. But the page is still not rendered the way it should be.
Only when a edit something in the CSS file,the page gets re-rendered and everything looks fine.
When I save the html and css file together in a local folder and open the html in a browser everything looks fine too.
this is the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>server</title>
<link href="server.css" rel="Stylesheet" type="text/css">
</head>
<body>
<ul class="navbar">
<li class="navbar">Assignment</li>
<li class="navbar">Solution</li>
<li class="navbar">Logout</li>
</ul>
<H1>server</H1>
</body>
</html>
And this is server.css file:
body {background-color: #efefef;}
ul.navbar {
margin: 0;
padding: 5px;
list-style-type: none;
text-align: center;
background-color: #000;
}
ul.navbar li.navbar {
display: inline;
}
ul.navbar li.navbar a.navbar {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #000;
}
ul.navbar li.navbar a:hover {
color: #000;
background-color: #fff;
}
I tried searching for tornado CSS external files and found tips on using a static directory but while both files do show up as source in the element inspection I do not think anything is wrong with the tornado script.
Edit -- I set aside my stubbornness and tried the "static" approach. This works fine. So I guess that writing out a .css file is different from delivering a static .css file. There seems to be some HTML interpretation going on but I would still like to here what goes wrong and why. -- tidE
These are the handlers I use:
class CSSHandler(BaseHandler):
#tornado.web.authenticated
def get(self):
self.write(file("html/server.css").read())
class MainHandler(BaseHandler):
#tornado.web.authenticated
def get(self):
self.render('html/assignment.html', title="server")
But again this part works. I can GET /assignment and I can GET /server.css. When I include the css part in a style tag inside the header of the html file everything works fine too. But this is not what I want to do. I want to provide some basic css stuff in one file for several html pages.
You need to set an appropriate content-type header for all non-html pages. self.set_header('Content-Type', 'text/css').
Also consider using StaticFileHandler (just set the static_path keyword argument to the Application constructor) instead of serving static js/css files yourself. It will take care of the content-type and other headers for you and improve cacheability.
I originally wanted to include a .css in my HTML doc that loads multiple other .css files in order to divide up some chunks of code for development purposes.
I have created a test 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>
<title>The Recipe Site</title>
<link rel='stylesheet' href='/css/main.css'>
<link rel='stylesheet' href='/css/site_header.css'>
<!-- Let google host jQuery for us, maybeb replace with their api -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/main.js"></script>
</head>
<body>
<div id="site_container">
<div id="site_header"><?php include_once($r->base_dir . "inc/site_header.inc.php"); ?><!-- Include File, Update on ajax request. --></div>
<div id="site_content">
Some main content.
</div>
<div id="site_footer"><?php include_once($r->base_dir . "inc/site_footer.inc.php"); ?><!-- Include File, Update on ajax request. --></div>
</div>
</body>
</html>
File: /css/main.css
/* Reset Default Padding & Margin */
* {
margin: 0;
padding: 0;
border: 0;
}
/* Set Our Float Classes */
.clear { clear: both; }
.right { float: right; }
.left { float: left; }
/* Setup the main body/site container */
body {
background: url(/images/wallpaper.png) repeat;
color: #000000;
text-align: center;
font: 62.5%/1.5 "Lucida Grande", "Lucida Sans", Tahoma, Verdana, sans-serif;
}
#site_container {
background-color: #FFFFFF;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: left;
width: 100%;
}
/* Some style sheet includes */
/* #import "/css/site_header.css"; */
/* Default Font Sizes */
h1 { font-size: 2.2em; }
h2 { font-size: 2.0em; }
h3 { font-size: 1.8em; }
h4 { font-size: 1.6em; }
h5 { font-size: 1.4em; }
p { font-size: 1.2em; }
/* Default Form Layout */
input.text {
padding: 3px;
border: 1px solid #999999;
}
/* Default Table Reset */
table {
border-spacing: 0;
border-collapse: collapse;
}
td{
text-align: left;
font-weight: normal;
}
/* Cause not all browsers know what HTML5 is... */
header { display:block;}
footer { display:block;}
and now the file: /css/site_header.css:
#site_header {
background-color: #c0c0c0;
height: 100px;
position: absolute;
top: 100px;
width: 100%;
}
Problem:
When I use the above code, the site_header div does not have any formatting/background.
When I remove the link line from the HTML doc for site_header.css and instead use an #import url("/css/site_header.css"); in my main.css file, the same results -- nothing gets rendered for for the same div.
Now when I take the CSS markup from site_header.css and add it to main.css, the div gets rendered fine...
So I am wondering if having multiple css files is somehow not working... or maybe having that css markup at the end of my previous css is somehow conflicting, though I cannot find a reason why it would.
The #import directive has to come first in your CSS. As soon as one style is hit by the browser, all other import lines will be ignored.
To quote WC3:
"any #import rules must precede all
other rules (except the #charset rule,
if present)"
See http://www.w3.org/TR/CSS2/cascade.html#at-import
One thing to consider, is that each #import still causes an HTTP request, so it's not any more efficient than using multiple link tags. In fact it may be less efficient as imports may be sequential rather than parallel requests. See this article. IMO it also adds complexity because you end up managing CSS references in two places (head tag of markup plus 1 or more CSS files) vs a simple list of link tags.
I'd also recommend where you can combining CSS files when your site is in production as it will reduce HTTP overhead.
Can I just say, pet peeve here, but place images related to the CSS file in the CSS folder itself, not in /images/.
The point of CSS is the separation of style and content, and only content images should go in /images/. Any images called by the CSS should be placed in the same directory and called pathlessly, e.g.:
body {
background: url(wallpaper.png) repeat;
}
That way at a later date if it comes to changing the style, or making multiple styles it's just a case of updating one link and moving one folder (/css/) rather than having a mess of images scattered all over the filesystem. Plus it's always a bad idea to use absolute paths to files (such as /images/wallpaper.png).
First of all, you have invalid markup. The link tag must be closed...
<link rel="stylesheet" href="/css/main.css" />
Second, why don't you use double-quotes consistently for element attributes (here in the link tag you happen to use single-quote)? This is not part of the problem, but I find it daunting that you would intermingle various syntax conventions like this.
Lastly, I would not recommend using #import because it does not offer a compelling benefit. It must be the first thing in the CSS file. An additional HTTP request still has to be made for each of the additional CSS file(s). And on top of that, IE cokes when you to specify a target media for imports. I stick to the good old classic link tag because it just works (given that you have valid markup!).
Use firebug to inspect the div and see what styles are being applied to it, you might get some more insight.
use #import rule into your main.css file like:
#import url("css/site_header.css");(this code should be on top of your main.css)
the above import snippet will bind your multiple css files into single css
then that main.css file use into your HTML.
For any issues with CSS like this I would recommend using firebug. You will be able to see if your site_header.css is loading properly.
If it is loading you will be able to see which styles are being applied to which elements, perhaps some are being overwritten?