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" -->
Related
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.menu-container {
color: #fff;
background-color: #5995DA; /* Blue */
padding: 20px 0;
display: flex;
justify-content: center;
}
.menu {
border: 1px solid #fff;
width: 900px;
display: flex;
justify-content: space-around;
}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<title>Some Web Page</title>
<link rel='stylesheet' href='/css/style.css'/>
</head>
<body>
<div class='menu-container'>
<div class='menu'>
<div class='date'>Aug 19, 2016</div>
<div class='signup'>Sign Up</div>
<div class='login'>Login</div>
</div>
</div>
</body>
</html>
this is my html it works fine in my browser my biggest issue is my css when i try checking that my code works in my google browser only my html shows up no matter when i do but when i past the code in the stack overflow snippit it works i dont understand it. im still new to coding.
Go the inspect page section and check whether the css file is imported properly.
Right click on the text that is displayed on the web page and click Inspect
Elements Tab
Select the Elements tab as show in the image
On the below Please select the Style Tab. There you can see the CSS style that you used in the css file.(Not the whole will be displayed. Only the HTML used inspect will be displayed.)
Style Tab
Additional note:
style image
If you are seeing like this(check the above image) click that and it will take you the css file. If it's now displaying then check the import of the css file in the tag.
Check the CSS file Name - style.css
and check the page and folder name - **/css/style.css
Please like the answer
You can view the css currently in use by the loaded webpage in the developer tools of your browser by right-click and inspecting the opened page.
You can see what, if any, css file is loaded, experiment with different values, and figure out where to go from there
I'm using page media to define the home page of the web page, but it can't be dynamically adjusted, it can only be adjusted before each rendering, which is very inconvenient
here is the css code：
.test-matter {
page: matter;
}
#page matter{
margin-top: 20mm;
margin-right: 15mm;
margin-bottom: 20mm;
margin-left: 15mm;
}
But it only seems to apply the default page media settings , each side is margin 25mm😔
You can use JavaScript for making this easier. If you use the onresize="myFunction()" your function will be called every time you change window size.Just add the following:
JavScript
<script>
function myFunction() {
// Your code here
}
</script>
HTML
<body onresize="myFunction()">
<!-- HTML here -->
</body>
You can use css in the function, to dynamically change it.
I am having some issues with using Bootstrap for the first time. For some reason no matter what changes I make to my custom css it does not affect the bootstrap css or the regular html of the layout. I am currently trying to build my first website in visual studio and have been advised to work with bootstrap however I cannot seem to get it to work the way I want it to. I have successfully created web elements that I want without the use of bootstrap however when I try to use bootstrap it just does not want to display any of my custom css no matter what I do.
As I stated above, the first thing I tried was editing the bootstrap css directly, which had absolutely no effect on the layout of my webpages. After this, I discovered it was a good idea to create a seperate main.css file and then link it in to bootstrap file, with any changes being made to the main.css file should change the bootstrap css without having to mess up the bootstrap file. However, using this method none of the changes alter the way the webpages are displayed in any way. After this, I decided to follow this tutorial https://websitesetup.org/bootstrap-tutorial-for-beginners/ step by step, even though it is a notepad++ tutorial and not a visual studio tutorial. Even following this tutorial step by step none of the changes made to the css are displayed on the webpage.
When I simply add the html I want to the layout page without linking the bootstrap or main.css to the layout page the features work as intended, but I cannot customize some things with html so I need to get it working with css.
I have done a few google searches for solutions to this issue and tried several, such as moving code from the body of the layout page to the footer, ensuring the file directory for the .css files is correct, including capital letters, but I cannot seem to find where the issue is.
This is how I linked my layout page to the main.css file which contains the css for altering the nav bar of my webpages:
<head>
<link rel="stylesheet" type="text/css" href="Main.css">
this is the link to the Main.css file with my custom .css that I used in the layout view in visual studio
<link rel="stylesheet" href="BSProject/css/bootstrap.min.css">
This is the link to the bootstrap file I used when following the above tutorial and added this to the head of the index.html file
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
This is the stuff I put in my main.css file, while also finding the .nav classes in the bootstrap.css and trying to put this information in the bootstrap file also.
/* The navigation bar */
.navbar {
overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
}
/* Links inside the navbar */
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change background on mouse-over */
.navbar a:hover {
background: #ddd;
color: black;
}
/* Main content */
.main {
margin-top: 30px; /* Add a top margin to avoid content overlay */
}
I am trying to change the colour of the nav bar, the colour of the text, the colour of the text on scroll over, the colour of the text on the nav bar of the page that is currently being viewed, the text type/size/position and I want the nav bar to be fixed at the top of the page so that as you scroll down the page you can still see the nav bar at the top of the window. And I want the nav bar to scale with the size of the window for mobile users, a feature that is included in bootstrap. I understand everything I mentioned is not present in the above css, this is because I wanted to test it was functional before I began typing out all the css I need.
I can already do all of this without using bootstrap but for this project I am required to use it and I just can't seem to display anything other than the default bootstrap nav bar no matter what I change in the css.
First of all move your style Link after Viewport and also move your custom css file Main.css after Bootstrap.min.css. Try this I hope it'll resolve your issue. Thanks
<head>
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- StyleSheet -->
<link rel="stylesheet" href="BSProject/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="Main.css">
</head>
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 adding an accessibility tool of users being able to increase the font-size of all the text on the page, and being able to go back to the default font-size if they wanted to. I have made a second CSS file which holds the css rules for the text to increase. However when I click on the icons I made for the text larger/text smaller it does not work. Can anybody understand why? Thanks for the help.
HTML code on the home page:
<div id="font-size-buttons">
<img src="http://www.me14ch.leedsnewmedia.net/slate/images2/fontmin.png" width="25" height"25" alt="Switch to original text size and colours">
<img src="http://www.me14ch.leedsnewmedia.net/slate/images2/fontmax.png" width="30" height="30" alt="Switch to larger text and improved colour contrast">
</div>
Some of the default CSS stylesheet code:
.body {
height: 100%;
overflow: auto;
padding-bottom: 25px;
font-size: 0.75em;
}
/* accessibility */
#font-size-buttons {
float: right;
clear: both;
margin-right: 5px;
}
And the CSS from the alternative stylesheet:
body {
font-size: 1.5em;
}
And the linking stylesheet code at the top of my index.html page:
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<link href="http://me14ch.leedsnewmedia.net/slate/notaccessible.css" rel=alternate stylesheet" type="text/css" title="access"/>
The website link: www.me14ch.leedsnewmedia.net/slate
That's because changeCSS is not defined.
in onclick="...."> you execute a piece of Javascript, in your case a function called changeCSS with the variables 'notaccessible.css' and 2.
But nowhere in your code you have a function called changeCSS. So you either have to write that function, or change your html.
[edit]
made a little example fiddle