I'm beginner in web programing and I'have small problem with understanding of HTML5 tags. The main tag is for main content but filedset can be in this tag or main tag should be in filedset tag ?
And web site logo how tags I should set for this ? I should insert img in other div or I should set all tags from this div to img ?
https://jsfiddle.net/adriansikora344/5t0Lzs0y/
or
https://jsfiddle.net/adriansikora344/ug3adstu/
Main tag (quoted from w3c):
The content inside the element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.
The fieldset tag is intended to group some form fields, so if you have a form in your web it's fine to get it wrapped by the main tag.
About the logo... This is a very open question. There is not a correct structure, I mean, depending on how you would like to organize contents or views you will need an HTML composition or another. I suggest you to try to create your page. Then, when you get stuck in some concrete problem, you can came back and create a new question with a detailed explanation of your problem and (this is important) an example of what are you tryin to accomplish your target.
Related
I understand that when making a simple website it is better to only use one CSS file but I was wondering how do I do that if I want the layout of each page of my website to look slightly different?
For example, if you go a website such as nhl.com the home page has a different layout than the stats or standings page (other than the nav bar at the top).
There is no right or wrong here.
However, one way is to have some over-arching indication of what page is being shown.
In the case of nhl.com which you cite, in the body tag they have an id which indicates the current page.
For example:
<body id="homepage_index" class="lang-en_US league-nhl" data-app-ads="false">
<body id="scores_index" class="lang-en_US league-nhl" data-app-ads="false">
and so on.
Then for styling that is specific to a page you can add the id at the front of the selector.
For styling that is common to all the pages like the navbar in your case you don't put the id.
Currently I use w3.css to a html page and use it in content editor webpart. The issue here is the CSS is affecting the whole page.How do I get the css to apply only to the content editor webpart.
I used the below link option 4 to add the content editor and the HTML file
http://sharepoint.hannahswain.eu/2014/10/10/adding-a-code-snippet-to-page-content-on-sharepoint-2013/
If you are using the same classes then of course all the elements that have those classes will be affected.
If in your webpart you assign unique css classes to the elements, only they will be affected. The web part is simply hosted on the page thus being a part of the page. If you tale a look at the source code of the page then you'll see that the web part is just another element on the same page.
Is there a way to change the CSS style, according to what page the users clicks? And not load different CSS files every time, to do this?
I have a web mapping site, so in small devices I want to do display : none for the header, so the map's div will appear bigger. I will use media queries for this, but the header also changes in all the other pages. I want it to change only in the map's page.
How can I do this? It would be great if there is a method that you dont have to load different CSS files. Is it?
Thanks in advance.
EDIT
The structure of my files is like
<?php
error_reporting(E_ALL);
include_once('header.php');
//rest of the code of the file starts here....
where header.php contains header, menu bar, metadata.
So I cannot just give an id to the header, cause it will still be the same id visible from all the pages
Thanks again
If your page is static one and you need to make only one change, just create a class with display:none; and apply the same to the header without affecting any other page or page elements.
This way, your header also gets hidden and your purpose also gets resolved.
Other way would be to add an id to your <body> and by using parent child CSS selector, hiding your header subsequently for those pages.
Hope this helps.
ou can check your URL through JavaScript and add style for specific element
example
if (window.location.href.toString().toLowerCase().indexOf("map") != -1) { // If url contains maps
document.getElementById("p2").style.display="none";
}
I've recently started getting familiar with Atlassian Confluence (v. 3.3), but I'm having trouble understanding the best way to use page hierarchies within a space.
Within a space, pages can be located underneath the "Home" page, or one level higher, next to the home page. However, in the "Documentation" theme, the left sidebar page hierarchy is only shown for pages rooted below "Home". This means that the "Home" breadcrumb is always displayed when viewing pages that appear in the sidebar hierarchy.
So, what is the purpose of having pages on this top level? Should it be used specifically to hide pages from the sidebar hierarchy (like meta)?
Is it possible to have the sidebar hierarchy display for pages rooted next to Home (on this top level), instead of below it?
Is it possible to remove the Home breadcrumb?
How many of these questions are made irrelevant by later updates to the software?
The only real purpose I can think of for having a page on the same level as the home page would be to disclude it from a page-tree display starting at the home page. So if you have some pages you use for holding images, documents, testing content, et cetera then you would not want it to show up in the hierarchy viewed by regular users.
When you define a page-tree macro, or the children-display or anything similar, you can specify which page it is displaying the hierarchy from. If you want to use a page other than the home page, just specify it in the page-tree macro.
I don't believe it is possible to remove the breadcrumb, or at least I don't know how.
Software updates will maybe bring some other page-tree-esque options but won't fundamentally change anything else we're talking about here.
So, what is the purpose of having pages on this top level?
Specifically? You'd have to ask Atlassian.
Generally? The default configuration is that only pages from the specified Home page down are shown in the navbar.
Should it be used specifically to hide pages from the sidebar hierarchy (like meta)?
Yes. Any page which is used for navigation, control or configuration is stored at the top of the hierarchy. That way they don't show up in the navbar.
Using the {alias} macro will create a page in the top hierarchy.
If you use a page as input to your navbar then this page can be stored here out of user sight but still publically visible. So, if you had a page with lots of markup for a colourful and exciting navbar named SpaceNavigation then in the Documentation Theme Configuration you would have this code:
{include:SpaceNavigation|nopanel=true}
Is it possible to have the sidebar hierarchy display for pages rooted next to Home (on this top level), instead of below it?
Yes. Use the pagetree macro.
{pagetree:root=#none}
You can edit the space theme to show anything in the left navigation bar.
Browse > Space Admin > Theme > Configure theme
Untick the 'Page Tree' option at the top. Put your code to display content in the navbar in the navigation box.
If you want a pagetree somewhere in your custom navigation use the {pagetree} macro. You can set the root page to a page lower in the hierarchy. {pagetree:root=apple}
The {children} macro is also useful here.
The reporting macros can print a list of all pages in a space. You can build your own macro or import a wiki page to display as the navbar.
Is it possible to remove the Home breadcrumb?
This may need clarification. Are you looking to remove the breadcumbs or just the word 'home'.
Either way, the answer is 'JavaScript or CSS'.
If you are a space administrator you can add CSS styles to the space to disable CSS for the space from the header.
If you have the {html} macro or {style} then you can add styles and JavaScript to the wiki page.
If you are a wiki administrator, or have one on your side, then you can create a macro or plugin to put CSS or JavaScript code on the page.
Here is a code sample to find two classes on a page and after the page has loaded (document.ready) hide them.
{html}
<script type="text/javascript">
AJS.$(document).ready(function() {
AJS.$(".first").hide();
AJS.$(".second").hide();
});
</script>
{html}
This example will remove the word 'Dashboard' as it has the class of 'first'.
Go forth and write the code to find the objects that so draw your ire and vanquish them.
CSS is also an option and sometimes less messy.
Some CSS objects can be removed from the page from within the page. E.g:
{html}
<style type="text/css">
ol.breadcrumbs { visibility:none; !important; }
</style>
{html}
However, to remove objects at the top of the page you need to use javascript or put CSS in the space style sheet.
Browse > Space Admin > Stylesheet
How many of these questions are made irrelevant by later updates to the software?
It's pretty much the same. Some styles have changed. Some things have been moved around. The general look has changed.
Some of the style sheets have changed and they have said that they are looking to deprecate the Documentation Theme. However, given the community support for the Documentation Theme even if they remove it no doubt it will be available as a downloadable theme in V6.
If you are interested in looking at this yourself then you can download Confluence V5 with a trial licence or try their OnDemand free for one month.
I am wondering if there is a way to use custom css for some specific text on my confluence page (not using embedded HTML).
Sorry this is an old question, but for the sake of people who search for an answer to this question: you can use span or div macros and use the custom css to apply whatever style you want to their contents.
If necessary, you could create custom div and span classes to allow for multiple styles to be applied to selections of text.
EDIT: Here is an example of the wikimarkup you could use to do this
{div:class=customCss|style=float:left; margin-right:50px}
Custom text in a div
{div}
So you can either use the div class and apply a style in the custom css for the confluence space, or you can use an inline style for the div.
You can do this ...
{composition-setup}import.css=/download/attachments/123456789/custom.css
{composition-setup}
That's if you've stored a custom.css file as an attachement. You'd obviously need to replace 123456789 with the actual attachment number.
You can also link CSS on an external site (with an absolute URL), but if you have any automatic URL formatting, that tends to mess it up everytime you change the document.
I use a User Macro that renders the $body in HTML. Then I can put whatever HTML tags I want in the wiki page within the user macro tag.
There could be a way to reach what you want to reach, but there is some information missing (from you). What confluence allows is the following:
If you have admin rights to the confluence wiki space, you could add there a custom style sheet that applies to all wiki pages. Else you could follow the answer of Mus.
Then you should analyse the wiki page in source form. So load a wiki page you want to style, and look at the source of that wiki page in your browser. Depending on your browser, this may be CTRL-U or something similar. Here in chrome, the page menu says View page source.
Try to find the defining selector for your wiki text you want to style in some form. A reasonable hack could be:
Find a wiki style that is not used by others. I have experimented with ~subscript~.
Find the HTML tags that are built by using that style. In my example, it was <sub>subscript</sub>.
Use your custom style sheet to style text of that style.
However, this may change the text where the style is used for its original sense :-(
You can specify custom CSS in your Confluence page via the div and span macros.
In recent Confluence versions (4.0 and later), you can do this as follows:
Type {div} or {span}. On typing the closing brace }, auto-complete will convert the text to a macro.
Left-click on the frame of the macro and select the Edit button
Enter the custom CSS into the Style field and close the dialog
Enter your text into the macro frame. It will then have the style you specified.