Come for the products,
stay for the community

The Atlassian Community can help you and your team get more value out of Atlassian products and practices.

Atlassian Community about banner
4,296,925
Community Members
 
Community Events
165
Community Groups

Header of HTML page getting set as Header of confluence

When i write the HTML code in confluence the header which i used for my html page is getting set to the Confluence as well. Attached image for more clarification.

HTML Code:

 <!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>CSS Menus</title>
		<link rel="stylesheet" type="text/css" href="assets/menus.css">
	</head>
	<body>
		<header>
			<a class="logo" href="#"><span>Everyday Things</span></a>
			<nav>
				<ul>
					<li><a href="#">Calendar</a>
						<ul>
							<li><a href="#">ADAS H & S Calendar</a></li>
							<li><a href="#">Team Calendar</a></li>
						</ul>
					</li>
					<li><a href="#">Our Team</a></li>
					
					<li><a href="#">Work Instructions</a>
						<ul>
							<li><a href="#">Pre - Processing</a>
								<ul>
									<li><a href="#">HERE True</a></li>
									<li><a href="#">First Generation</a></li>
								</ul>
							</li>
							<li><a href="#">Processing</a>
								<ul>
									<li><a href="#">HERE True</a></li>									
									<li><a href="#">First Generation</a></li>
									<li><a href="#">Montly Global DFP Runs</a></li>
								</ul>
							</li>
							<li><a href="#">Post - Processing</a>
								<ul>
									<li><a href="#">Monthly</a></li>
									<li><a href="#">Quarterly</a></li>
								</ul>
							</li>
						</ul>	
					</li>
					<li><a href="#">Python Scripts</a></li>
				</ul>
			</nav>
		</header>		
		<article>
			<div>
				<h1>abc:</h1>
				<p></p>
				<p></p>
				<p></p>
			</div>
		</article>
		<aside>
			<div>
				<h3> </h3>
				<p> </p>
			</div>
		</aside>
		
	</body>
</html>

 

CSS Code : 

body { color: #777; font-size: 16px; font-family: sans-serif; margin: 0; padding: 0; }
h1 { margin: 0px 0px 1em 0px; color: #076d6f; font-size: 1.7em; }
h3 { margin: 0px 0px 1.5em 0px; color: #339999; font-size: 1.1em; font-weight: normal; letter-spacing: 2px; text-transform: uppercase; }
a { color: #00a2ff; text-decoration: none; }

header{ height: 450px; background: #eee url("banner.jpg") no-repeat center; margin-bottom: 50px; background-size: cover; position: relative; }
header a.logo { position: absolute; display: block; width: 154px; height: 57px; background: url("logo.jpg") no-repeat  0; background-size: contain; z-index: 1; top: 15px; left: 20px; }
header a.logo span { display: none; }

article { width: 70%; float: left; margin-bottom: 75px; }
article div { padding: 0px 40px 0px 40px; border-right: 1px solid #555; }
aside { width: 30%; float: left; }
aside div { padding: 0px 40px 0px 40px; }

nav { background-color: rgba(0,0,0,.6); position: relative; padding: 45px 0px 0px 180px; }

nav ul { list-style: none; margin: 0; padding: 0; }


nav ul::after { content: ''; display: block; clear: both; }
nav ul li:hover { background-color: rgba(0,102,102,.8); }
nav ul li:hover > ul { display: block; }

nav ul li a { display: inline-block; color: #fff; padding: 10px 20px; text-decoration:none; width: 125px; }
nav ul li a:hover{ background-color: #339999 }

nav ul ul { display: none; position: absolute; background-color: rgba(0,102,102,.8); }
nav ul ul li { position: relative; }
nav ul ul ul { left:100%; top: 0; }



/* top level*/
nav > ul { padding-left: 35px; }
nav > ul > li { float: left; }
nav > ul > li > a { padding: 10px 20px 15px 20px; width: auto; }


@media screen and (max-width: 750px) 
	
	header a.logo { width: 120px; height: 44px; }
	article { width: 100%; float: none; margin-bottom: 40px; }
	article div { margin: 0px 40px; padding: 0px 0px 30px 0px; border-right: none; border-bottom: 1px solid #555; }
	aside { width: 100%; float: none; }
	
	/*nav { padding: 70px 0px 0px 10px; }
	nav > ul { padding-left: 0px; padding-right: 20px; }
	nav > ul > li > a { padding: 8px 12px 10px 12px; } */

}

0 comments

Comment

Log in or Sign up to comment
TAGS
Community showcase
Published in Confluence

Confluence: Where work and wellness meet

Feeling overwhelmed by the demands of work and life? With a 25% increase in the prevalence of anxiety and depression worldwide during the pandemic, for most of us, it’s a resounding yes . 🙋‍♀️ ...

1,068 views 20 29
Read article

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you