Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

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

🏑 Atlympic Event: Confluence

Hello Community!  Quick disclaimer: We are running a contest on Community (The Atlympics!) from July 23rd - August 8th of 2021. If you are interested in participating in this contest (prizes! ...

494 views 18 17
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