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.
Related
I have a webpage with a table. If a user logs in, they can click on the row headers to enter the edit page. To make the printed version look the same for both logged in and not logged in users, I use CSS to style the link as regular text.
The problem is, that the Save as PDF feature in chrome saves the links with their href, making them open a webpage if clicked on in the saved pdf. Is there any way, to remove this href during this 'print', other than the obvious way of having two elements and showing only the clickable one in #media not print and showing only the non clickable one in #media print?
I prefer not using JavaScript to change the href during printing.
You can use pointer-events, see here the browser compatibility for that http://caniuse.com/#search=pointer-events . It will disable your link.
#media print {
a {
pointer-events: none;
color: #000;
text-decoration: none;
}
}
use like this remove anchor tag and put div...like
<style>
#d:active {
load-url: (http://google.com/
}
</style>
<div class="click" id="d" >
</div>
You can use the onclick attribute to open the edit page:
<th onclick="location.href='?edit=ID'">Item #1</th>
To style it as a link, use the th[onclick] CSS selector:
#media not print {
th[onclick], td[onclick] {
color: #00e;
text-decoration: underline;
cursor: pointer;
}
}
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/
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 have a simple blog on wordpress http://heather.stevenspiel.com/ and I'm trying to make the header title to be a link to the homepage. I went into header.php and rewrote the script for that part, but still can't get a link to work.
This is what I re-wrote:
<h1>
My Spiel
<br/>
</h1>
I know that the href is being registered because of the css color change.
This is what the previous code was:
<h1>
<?php
if ($balloons_option['balloons_site-title_line1'] == '' && $balloons_option['balloons_site-title_line2'] == '') { ?>
This is a<br />
WordPress theme
<?php } else {
echo $balloons_option['balloons_site-title_line1']; ?><br />
<?php echo $balloons_option['balloons_site-title_line2'];
} ?>
</h1>
I originally tried putting the href outside the h1, but still no luck.
Is there some buried Wordpress setting that disables a clickable title? Or is there some javascript that I should be looking out for that is disabling it?
I should also note the css for the header contains a z-index. I read somewhere that it might be effected by that:
#header .content {
line-height: 18px;
margin: 0;
z-index: 4;
}
If the z-index is effecting it, why is that?
Change z-index property on line 37 of layout.css to
#header h1 {
position: relative;
z-index: 10; /* Was 2 */
}
Your .entry (z-index:4) div goes vertically from top to bottom covering your #header with a higher z-index than your h1 z-index (2). So your h1/Anchor wsa unclickable because it was "under" another div.