It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

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
Posted in Confluence

What project did you transition or start on Confluence with the shift to remote work?

It’s been great to hear from fellow users over the last few weeks about the best tips and fun moments you’ve had working on Confluence since the transition to working remote. I’d love to keep the c...

33 views 2 4
Join discussion

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