Jump to content

fixed heading

CNT

By CNT
in CSS

Recommended Posts

CNT Member

CNT

Posted
Posted

..............................ABC Website..............................Home | Stuff | Docs | Contact |Welcome to ABC Website. We have ABC for you to care about.The ABC is 500 years old and will look ugly on your wall. TheABC will last for few months and then will vaporate into yourair, in which you will breathe it in your lungs. It will cause youto cough and cough... well, buy it!The above was just example. I want to have the "ABC Website" centered and fixed on the top. Then a menubar right below the "ABC Website", also fixed. Then the regular "Welcome to..." content. Along with that (two rows of fixed), when the content is long, I want to use the browser up/down scroll. I want the top two rows to remain fixed and when scrolling, I don't want the content to show pass the top two rows.As of now, I have the "ABC Website" scroll with the content and can read the content above the menubar. But then I did something and it's little messed up (the menubar is on the first row, covering the "ABC Website". I tried the <div>, doesn't do anything. I am thinking it's HTML related (the first row), but it may have to be CSS. Google isn't helping me with this. I am not using images, just all text.Chuck

Link to comment
Share on other sites
CNT Member

CNT

Posted
  • Author
Posted

index.php

<!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" ><head>	<title>ABC Website</title>	<link rel="stylesheet" href="Stylesheet.css" type="text/css" /></head><body><div><h1>ABC Website</h1></div><div id="header"><?php include("nav.php"); ?></div><div id="content"><p>Welcome to ABC Website! Hi how are you today!?</p><p>The propose for this website is ...</p></div></body></html>

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

The below code should give you a similar result to what you require, this won't work for IE6 as it does not recognize position: fixed;, even IE7 went a bit crazy, and that is why i inserted a IE7 conditional fix. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css">body {margin: 0 10px 10px;}#wrapper {width:960px; margin:0 auto; min-height: 800px; background-color:#99FFFF; overflow:hidden;}#header {width: 960px; position:fixed; height: 210px; background-color:#CC99FF;}#menu {height:30px; background-color:#CCFF99; margin-top:170px;}#content {margin:220px 10px 10px;}.spacer{ height:10px; background-color:#fff; position:relative;}</style><!--[if IE 7]><style type='text/css'>#header { margin-left:-10px;}</style><![endif]--></head><body><div id="wrapper"><div id="header"><div class="spacer"> <!--required if you require space at top but don't want to see content moving underneath it--></div><div id="menu">menu links</div></div><div id="content">  <p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt excepteur    sint occaecat. Cupidatat non proident, ullamco laboris nisi qui officia deserunt.    Lorem ipsum dolor sit amet, velit esse cillum dolore ut labore et dolore    magna aliqua. Duis aute irure dolor eu fugiat nulla pariatur. Sunt in culpa    cupidatat non proident, ut aliquip ex ea commodo consequat.</p>  <p>Ut labore et dolore magna aliqua. Duis aute irure dolor ullamco laboris    nisi. Duis aute irure dolor velit esse cillum dolore ullamco laboris nisi.</p></div></div></body></html>

Link to comment
Share on other sites
  • 3 weeks later...
CNT Member

CNT

Posted
  • Author
Posted

Still confused and not working... index.php

<!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" ><head><title>Testing Fixed Title and Fixed Horizontal Menubar... Only the Contents Scrolls</title><link rel="stylesheet" href="Stylesheet.css" type="text/css" /></head><body> <div id="title-header">header</div><div id="nav-header"><?php include("nav.php"); ?></div><div><p>Blah blah blah... BLAH 1</p><p>Blah blah blah... BLAH 2</p><p>Blah blah blah... BLAH 3</p><p>Blah blah blah... BLAH 4</p><p>Blah blah blah... BLAH 5</p></div> </body></html>

Stylesheet.css

#title-header {position: fixed;width: 100%;top:0px;text-align: center}#nav-header {position: fixed;width: 100%;top:120px;}

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

Not confused, and does work 

<!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" ><head><title>Testing Fixed Title and Fixed Horizontal Menubar... Only the Contents Scrolls</title><link rel="stylesheet" href="Stylesheet.css" type="text/css" /> <style type="text/css">#title-header {position: fixed;width: 100%;top:0px;text-align: center;background-color:#CC99FF;;}#nav-header {position: fixed;width: 100%;top:20px;background-color:#CCFF99;}#nav-header ul { margin-top:100px;} #content {padding-top: 130px;} </style>  </head><body> <div id="title-header">header</div><div id="nav-header"><?php include("nav.php"); ?></div><div id="content"><p>Blah blah blah... BLAH 1</p><p>Blah blah blah... BLAH 2</p><p>Blah blah blah... BLAH 3</p><p>Blah blah blah... BLAH 4</p><p>Blah blah blah... BLAH 5</p><p>Blah blah blah... BLAH 1</p><p>Blah blah blah... BLAH 2</p><p>Blah blah blah... BLAH 3</p><p>Blah blah blah... BLAH 4</p><p>Blah blah blah... BLAH 5</p><p>Blah blah blah... BLAH 1</p><p>Blah blah blah... BLAH 2</p><p>Blah blah blah... BLAH 3</p><p>Blah blah blah... BLAH 4</p><p>Blah blah blah... BLAH 5</p><p>Blah blah blah... BLAH 1</p><p>Blah blah blah... BLAH 2</p><p>Blah blah blah... BLAH 3</p><p>Blah blah blah... BLAH 4</p><p>Blah blah blah... BLAH 5</p><p>Blah blah blah... BLAH 1</p><p>Blah blah blah... BLAH 2</p><p>Blah blah blah... BLAH 3</p><p>Blah blah blah... BLAH 4</p><p>Blah blah blah... BLAH 5</p><p>Blah blah blah... BLAH 1</p><p>Blah blah blah... BLAH 2</p><p>Blah blah blah... BLAH 3</p><p>Blah blah blah... BLAH 4</p><p>Blah blah blah... BLAH 5</p><p>Blah blah blah... BLAH 1</p><p>Blah blah blah... BLAH 2</p><p>Blah blah blah... BLAH 3</p><p>Blah blah blah... BLAH 4</p><p>Blah blah blah... BLAH 5</p> </div> </body></html>

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...