i'm new to web developement and i have a problem .. and a (bad) solution :
i want to navigate in my page. The pages have the same layout. The only difference is an div container.
Sample code :
home.html
<!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" xml:lang="en" lang="en >
<head>
<title>Sample</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<div id="container" >
<div id="outer" >
<div id="inner">
<div id="left" >
<div id="menu3">
<ul>
<li>Home</li>
<li>About</li>
</ul>
</div>
</div>
<div id="content" ><h2>Startseite</h2>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div><!-- end content -->
</div><!-- end inner -->
</div><!-- end outer -->
</div><!-- end container -->
</body>
</html>
about.html:
<!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" xml:lang="en" lang="en >
<head>
<title>Sample</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<div id="container" >
<div id="outer" >
<div id="inner">
<div id="left" >
<div id="menu3">
<ul>
<li>Home</li>
<li>About</li>
</ul>
</div>
</div>
<div id="content" ><h2>Startseite</h2>
<p>
**OTHER CONTENT**
</p>
</div><!-- end content -->
</div><!-- end inner -->
</div><!-- end outer -->
</div><!-- end container -->
</body>
</html>
This works fine.
But there is a lot of code duplication which can get me into trouble when i have 15 pages :D
So.. what is the usual way to do it ?
Maybe some Ajax voodo ?!
Please Help
Use Server Side Includes (SSI)
There is no need to install additional software on your server if you do not need all its functionality. PHP doesn't come standard with any web-server.
Personally, using PHP to reduce HTML-repetition is the equivalent of shooting down a mosquito with a M198 howitzer.
On the other hand, SSI is supported in the two most widely use web-server software (Apache, IIS) and its usage is rather simple.
Simply use the extension .shtml or .shtm for your file. Put your comment contents in separate files, and then, in your page file, use the following to include the different parts:
<!--#include virtual="common/header.part.shtm" -->
<h2>Startseite</h2>
<p>
**OTHER CONTENT**
</p>
<!--#include virtual="common/footer.part.shtm" -->
Again, this is supported by all major web-server software available and requires no additional CGI modules to be installed, unlike PHP.
Note: Apache requires mod_include to be enabled on the web-server. Its binaries are included in every binary Apache distribution.
You definitely do not want to use AJAX for a situation like this for the following reasons:
Your page will be unreadable for people using browsers without JavaScript support (embedded devices, desktop computers in high-security workplaces, etc.)
Search engines cannot (as of yet) interpret JavaScript DOM changes properly and won't be able to crawl your pages properly.
SSI is the simplest way of doing this server-side.
Use PHP
You might what to try using a language that supports includes, like php. Even thought php is slow if your doing a lot of data crunching its great for a beginner.
<?php include('nav.php'); ?>
This will insert the nav.php file into your current page.
The nav.php file doen't need <html> or body just use the include as if it is inserting the code directly. By inserting an include into your file you can edit data from a single location, your include file.
To get php working try this tutorial http://inteldesigner.com/2009/getting-started/setting-up-a-testing-server
Related
I want to put the company header on the front page of our CHM manuals. Because users are able to scale the CHM, the header should scale with the width of the manual. The height should not scale.
The problem is that both the left and right side of the header must remain intact, so only the center of the header should scale. The left side has a cut-off corner of which the angle must not change. The right side contains an image.
Image:
Is it possible to do this with CSS or HTML, with either an image or a table?
EDIT:
I still have 2 issues with it that I cannot fix. Hopefully you can help a bit more. The background color on the header_center also gives a small underline after compiled into a CHM file. It have made it red for visability. Also when I scale the CHM window, white space appears between header_left and header_center and I have no idea why. This is solved if I give all 3 headers a background color, but I do not want a line under header_right because of the image. Any ideas?
These images are the result at this stage:
You know, CHM is like a ZIP format and may contain HTML as well as CSS. Below I have shown one of the possibilities using images. Try it and change for your needs (see HTML below). The background colors in <colgroup> are only used for demonstration purposes. If there is text in the middle, the corresponding color from the company banner has to be set as background color.
The images I used:
Make sure an external CSS file e.g. design.css is inside you project level structure and added to the [FILES] section of your HHP project file. You can open this *.hhp file with e.g. Notepad++ to add files.
If the files are listed in the [FILES] section the compiler includes them to the CHM file.
[FILES]
welcome.htm
design.css
How_to_extend\extend_menu.htm
How_to_extend\power_function.htm
images\gui_screenshot.jpg
HTML and CSS:
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental)" />
<title></title>
<style>
.header {
width: 100%;
border-collapse: collapse;
/*border: 1px solid black;*/
}
.header_left{
width: 81px;
}
.header_center{
/*background-image: url("help-info-de-right-part.png");*/
/*background-color: #ff33cc;*/
background-color: #e0e0e0;
text-align: center;
}
.header_right{
width: 82px;
}
.header td {
padding: 0;
}
</style>
</head>
<body>
<table class="header">
<colgroup>
<col style="background-color:green;" />
<col style="background-color:red;" />
<col style="background-color:yellow;" />
</colgroup>
<tr>
<td class="header_left">
<img src="help-info-de-left-part.png" />
</td>
<td class="header_center">
<img src="help-info-de-center-part.png" />
</td>
<td class="header_right">
<img src="help-info-de-right-part.png" />
</td>
</tr>
</table>
<h1>Heading 1</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.</p>
</body>
</html>
I want to integrate JSON-LD within my websites. Currently I do semantic markup using Microdata:
<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/WebSite">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title itemprop="name">Semantic Markup Sample</title>
<meta name="description" itemprop="description" content="Demonstrate some sample semantic markup."/>
<meta name="keywords" content="HTML, Semantic, Microdata, JSON-LD"/>
<meta name="author" content="burnersk"/>
<meta itemprop="datePublished" content="2017-10-12T09:48:17+02:00">
<meta name="date" itemprop="dateModified" content="2017-10-12T09:51:03+02:00"/>
<link rel="canonical" itemprop="url" href="https://example.com/semantic-markup-sample.html"/>
</head>
<body>
<header>
<h1>Semantic Markup Sample</h1>
</header>
<section>
<article itemscope itemtype="http://schema.org/Article">
<header>
<h2><a itemprop="url" href="https://example.com/second-article.html"><span itemprop="name headline">Second Article</span></a></h2>
</header>
<section itemprop="description">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</section>
<footer>
<p>
<span>Written on </span>
<time datetime="2017-10-12T08:48:17+02:00" itemprop="datePublished" >Thursday, 12th of October 2017 08:48</time>
<span> by </span>
<span itemprop="author" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">burnersk</span>
</span>
<span>.</span>
<span> Edited on </span>
<time datetime="2017-10-12T08:49:17+02:00" itemprop="dateModified" >Thursday, 12th of October 2017 08:49</time>
<span>.</span>
</p>
<meta itemprop="image" content="https://example.com/second-article.png"/>
<div itemprop="publisher" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="burnersk"/>
</div>
</footer>
</article>
<article itemscope itemtype="http://schema.org/Article">
<header>
<h2><a itemprop="url" href="https://example.com/first-article.html"><span itemprop="name headline">First Article</span></a></h2>
</header>
<section itemprop="description">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</section>
<footer>
<p>
<span>Written on </span>
<time datetime="2017-10-12T07:48:17+02:00" itemprop="datePublished" >Thursday, 12th of October 2017 07:48</time>
<span> by </span>
<span itemprop="author" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">burnersk</span>
</span>
<span>.</span>
<span> Edited on </span>
<time datetime="2017-10-12T07:49:17+02:00" itemprop="dateModified" >Thursday, 12th of October 2017 07:49</time>
<span>.</span>
</p>
<meta itemprop="image" content="https://example.com/first-article.png"/>
<div itemprop="publisher" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="burnersk"/>
</div>
</footer>
</article>
</section>
<aside>
<section>
<h2>Sidebar</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</section>
</aside>
<footer>
</footer>
</body>
</html>
Now I want to add JSON-LD markup alongside Microdata for a test run.
However it is a kind of a challenge with the nested JSON-LD markup. I could not find resources for nested JSON-LD. I see no scope feature of JSON-LD to indicate which parts of the HTML are described (like itemscope with Microdata).
My sample website (see code above) is organized into 3 parts:
WebSite object which contains
Article object "Second Article" and
Article object "First Article".
How to implement JSON-LD for such a nested website?
Microdata does not describe the HTML parts, it just makes use of the HTML as transport medium. So after the Microdata is extracted, any connection to the HTML is lost.
The following snippets are semantically different (HTML), but produce the same Microdata:
<div itemscope itemtype="http://schema.org/WebPage">
<p itemprop="name">Hello world</p>
</div>
<div itemscope itemtype="http://schema.org/WebPage">
<p itemprop="name">Hello <b>world</b></p>
</div>
<div itemscope itemtype="http://schema.org/WebPage">
<strong itemprop="name">Hello world</strong>
</div>
<h1>Hello world</h1>
<div itemscope itemtype="http://schema.org/WebPage">
<meta itemprop="name" content="Hello world" />
</div>
JSON-LD works like the last Microdata example: the data gets specified independently of the existing HTML:
<h1>Hello world</h1>
<script type="application/ld+json">
{
"#context": "http://schema.org",
"#type": "WebPage",
"name": "Hello world"
}
</script>
Multiple top-level items in JSON-LD
In your Microdata example, you are specifying three top-level items. To do this in JSON-LD, you can either use multiple script elements (one per item) or use one script element with #graph, e.g.:
<script type="application/ld+json">
{
"#context": "http://schema.org",
"#graph":
[
{
"#type": "WebPage"
},
{
"#type": "Article"
},
{
"#type": "Article"
}
]
}
</script>
(Note that it’s a good practice to connect items with suitable properties, if possible. In typical cases, you’ll only have one top-level item which references/nests the other items.)
I'm using HTML5's Summary/Details tags to hide/show extra text on a documentation page. The extra text is lengthy and the open/close nature of the summary tag is that you have to click on the summary line to make it both open and close the details block. This means that after scrolling down through the length of the long text you must scroll back up to the summary tag in order to click to close it.
I would like to be able to click on the bottom of the details segment to close it. Using CSS, I am able to add a 'close' triangle at the bottom of the detail segment. What can be done (preferably in CSS) to cause a click on the triangle to close the detail block?
details[open]:after {
content:'▲';
}
Below is a CSS only solution, just use ::after on <summary> and absolute positioning.
details.test {
position: relative;
padding: 5px 0;
}
details.test[open]>summary::after {
display: inline-block;
content: "close";
position: absolute;
right: 0;
bottom: 0;
}
<details class="test">
<summary>Example</summary>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
</details>
I don't think it can be done using CSS. But you can use javascript:
<!DOCTYPE html>
<html>
<body>
<script>
function closeDetails() {
document.getElementById("details").removeAttribute("open");
window.location = "#details";
}
</script>
<details id="details">
<summary>Show Details</summary>
<p>yadda yadda</p>
<button onclick="closeDetails()">Close Details</button>
</details>
</body>
</html>
Since there were no other answers I’ll mark Sartoris’ as the correct one.
In case anyone else wants to use to it, I took the liberty of embellishing it a bit so that it would work with more than one ‘details’ element on a page and be a bit more generic. In this way the same function and close button definition can be used for all ‘details’ blocks as long as each has a unique ID.
<!DOCTYPE html>
<html>
<body>
<script>
function closeDetail(detailsElement) {
detailsElement.removeAttribute("open");
window.location = '#' + detailsElement.id;
}
</script>
<details id="details">
<summary>Show Details</summary>
<p>yadda yadda</p>
<button onclick="closeDetail(this.parentElement)">▲</button>
</details>
</body>
</html>
im using the BEM naming convention within a small project and having some slight difficulty in deciding between element and modifier names.
I'm currently working on a hero/splash section of the website. see image below.
Heres my current code -
<div class="hero hero__project">
<div class="grid">
<h1 class="hero__project__title">Final Year Project</h1>
<div class="hero__project__meta">
<p>Published<span>23 Oct 2014</span></p>
<p>Applictions <span>Unity3d, Photoshop, 3ds max</span></p>
</div>
<p class="hero__project__summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in </p>
</div>
</div>
My question is - Do you understand what the piece of markup is doing? and is it in line with them BEM methodology. Thanks
As far as I understand BEM, I would say your naming does not make sense. Your Block (or module) would be your .hero. Your Elements would be your main components of your block (i.e. project-title, project-meta, etc). If you needed a modifier on your block for a different state, you could add one in addition to your block (e.g. class=".hero .hero--isHidden)
<div class="hero">
<div class="grid">
<h1 class="hero__project-title"></h1>
<div class="hero__project-meta"></div>
<p class="hero__project-summary"></p>
</div>
</div>
For more in-depth info checkout http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
To answer your question regarding the other names, I guess I would modify my answer slightly. Again, only using the --project modifier to style the other elements if they are indeed different than a hero on another page.
<div class="hero hero--project">
<div class="grid">
<h1 class="hero__title"></h1>
<div class="hero__meta"></div>
<p class="hero__summary"></p>
</div>
</div>
I'm new to BEM and trying to wrap my head around it all. I read one of the rules for BEM was no nested selectors. So based off the 2nd answer, let's say we style the hero title to be black but style project hero titles to be red. Would the CSS look like this?
.hero__title { color: #000; }
.hero--project .hero__title { color: #cc0000; }
I am trying to obtain this design:
I just have no idea how to start on this. It doesn't make sense in my head on how I can obtain this.
Can someone help me? Maybe do a quick jsFiddle, just with the basics. I want to learn how I can make layouts like this, where the left menu bar's bg (or just height) is the same as "DIV#2"' content.
Update:
I tried #Josh Davies answer like this:
<div class="container">
<div class="row">
<div id="wrapper">
<div class="leftt">left content</div>
<div class="rightt">right content</div>
</div>
</div>
</div><!-- end container -->
#wrapper{background-color:blue;width:100%;}
.leftt{float:left;width:29%;}
.rightt{float:left;width:69%;}
Unfortunately, I only get the left sidebar, and the right content. Not the top bar, nor the little menu at the bottom of the left menu.
Just create a wrapper and give the wrapper a background colour of the left div. Then position the left and right div and give the right div a colour of your choice. That way when the page expands the wrapper will also expand.
Hope this helps!
There's a couple of ways to achieve this. You can use the <table/> tag of course although some frown on that. Google do it in Drive though.
In 'modern' browsers, you can also use the "table-cell" CSS property to make your DIVs act like TABLEs, but that's not widely supported on legacy browsers, and IMHO a worse hack than using a table on balance.
You can do it all in DIVs though, cross browser, in pure CSS which requires forcing it to full screen height. There's an answer here and jsFiddle example that should help you with this;
https://stackoverflow.com/questions/12861847/100-height-div-using-jquery/12862033#12862033 (my answer does NOT require jQuery, despite the title).
Another thing you might want to consider is grabbing a grid library, which will have all the cross browser stuff worked out for you. Twitter bootstrap contains a good grid library, but I prefer this http://responsive.gs/ which is much simpler to configure for your table like layout above. You may need to combine the two in order to get a full-screen height but let the grid do the width layout for you.
Try something like:
demo: http://jsfiddle.net/sEKtU/
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#top {
background: lightblue;
}
#inner-wrapper {
position: relative;
}
#main {
margin-left: 200px;
}
#main-inner {
background: lightsteelblue;
padding: 1px 0;
}
#left {
background: lightSeaGreen;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 200px;
}
#left-menu {
background: lightPink;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="top">
top
</div>
<div id="inner-wrapper">
<div id="left">
<div id="left-content">
left
</div>
<div id="left-menu">
menu
</div>
</div>
<div id="main">
<div id="main-inner">
<h1>Lorem ipsum dolor sit amet,</h1>
<p>consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
</body>
</html>
There is no such thing as max width or max height. At the very most you can get the screen width/height and use it as if that was the max width/height.
On the other site, you're looking for some kind of layout system. Maybe have a look at http://www.bramstein.com/projects/jlayout/
I'd start with this structure:
<div class="containter">
<div class="top-bar">
...
</div>
<div class="div1>
...
<div class="bottom-menu">
...
</div>
</div>
<div class="div2">
...
</div>
</div>
Then you're CSS this would be the starting point:
.container { position: relative; }
.top-bar { position: absolute; top: 0; z-index: 5;}
.div1 { height: 100%; position: relative; }
.bottom-menu { position: absolute; bottom: 0; }
That would be a very basic starting point and you would still have to do the styling for it. Sense it sounds like Div2 is going to set the height by being the bigger element Div1 should inherit the overall height of the parent container div.
Setting the Div position to relative will allow you to set the bottom-menu class to an absolute position of bottom 0 so that it will stay on the bottom of the div no matter the height.