Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to prevent fixed header from overlapping content when browser resized?

Status
Not open for further replies.
PSchubert

PSchubert

Technical User
Jun 6, 2006
50
AU
Hello Gurus!

This page works just like I want, except for one thing: when the browser window is resized so that the header buttons take up two rows, the now height-expanded header encroaches upon the beginning of the content. What I wish would happen is that the entire content block would adjust down to make room for the height-expanded header. (Can you tell I'm new at this?) Any help greatly appreciated!

HTML:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]

   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

      <meta name="apple-mobile-web-app-capable" content="yes">

      <title>Test page</title>

      <link rel="stylesheet" type="text/css" href="main.css" />
   </head>

   <body>

      <div id="wrapper">

         <div id="header_container">
            <div id="header">
		  <a href="file1.htm" class="button">Button 1</a>
                  <a href="file2.htm" class="button">Button 2</a>
                  <a href="file3.htm" class="button">Button 3</a>
                  <a href="file4.htm" class="button">Button 4</a>
                  <a href="file5.htm" class="button">Button 5</a>
	    </div>		   
         </div>

         <div id="content_container">
            <div id="content">
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
	       Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
	       dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
	       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
               <br>
               Lorem ipsum dolor sit amet:
               <br>
               <br>		 
               <ul class="indent">
                  <li>
                     consectetur adipisicing elit
                     <ul class="indent">
                        <li id="li">
                           Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis 
			   aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><br>
                        </li>
                     </ul>
                  </li>
                  <li>
                     excepteur sint occaecat cupidatat non proident
                     <ul class="indent">
                        <li id="li">
			   Sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet, consectetur adipisicing 
			   elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam quis.<br><br>
                        </li>
                     </ul>
                  </li>
                  <li>
                     nostrud exercitation ullamco
                     <ul class="indent">
                        <li id="li">
                           Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
			   cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa.<br><br>
                        </li>
                     </ul>
                  </li>
                  <li>
                     qui officia deserunt mollit
                     <ul class="indent">
                        <li id="li">
			   Anim id est laborum lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
			   ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.<br><br>
                        </li>
                     </ul>
                  </li>
                  <li>
                     ut aliquip ex ea commodo consequat
                     <ul class="indent">
                        <li id="li">
                           Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
			   sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
                        </li>
                     </ul>
                  </li>
                  <li>
                     lorem ipsum dolor sit amet
                     <ul class="indent">
                        <li id="li">
                           Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim 
			   veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br><br>
                        </li>
                     </ul>
                  </li>
                  <li>
                     duis aute irure dolor in reprehenderit
                     <ul class="indent">
                        <li id="li">
                           In voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
			   sunt in culpa qui officia deserunt mollit anim id est laborum lorem ipsum dolor sit amet.<br><br>
                        </li>
                     </ul>
                  </li>
                  <li>
                     consectetur adipisicing elit
                     <ul class="indent">
                        <li id="li">
                           Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud 
			   exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure.<br><br>
                        </li>
                     </ul>
                  </li>
                  <li>
                     dolor in reprehenderit in voluptate
                     <ul class="indent">
                        <li id="li">
                           Velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa 
			   qui officia deserunt mollit anim id est laborum lorem ipsum dolor sit amet, consectetur adipisicing.<br><br>
                        </li>
                     </ul>
                  </li>
               </ul>
               Elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
	       ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
	       dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.<br><br>		 
            </div>
	    <br>
            Mollit: <a style="text-decoration: underline; color: #FFFFFF;" href="file6.htm">"Lorem ipsum dolor sit amet consectetur adipisicing elit?"</a>		 
         </div>

      </div>
   </body>
</html>

CSS:

Code: 
* { padding: 0; margin: 0; }

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: medium;
	color: #FFFFFF;
	background-color: #000000;
	}

#wrapper { 
	margin-left: 10px;
	margin-right: 10px;
	}



#header_container {
	left:0;
	position:fixed;
	width:100%;
	top:0; 
	} 


#header {
	/* position: absolute; */
	padding: 10px;
	border: none;
	min-height:54px;
	height: auto;
	margin: 0px 0px 5px 0px; /* top right bottom left */
	color: #FFFFFF;
	background-color: #000000;
	}

.button {
	-moz-box-shadow:inset 0px 1px 0px 0px #caefab;
	-webkit-box-shadow:inset 0px 1px 0px 0px #caefab;
	box-shadow:inset 0px 1px 0px 0px #caefab;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #77d42a), color-stop(1, #5cb811) );
	background:-moz-linear-gradient( center top, #77d42a 5%, #5cb811 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77d42a', endColorstr='#5cb811');
	background-color:#77d42a;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #268a16;
	display:inline-block;
	color:#000000;
	font-family:arial;
	font-size:small;
	font-weight:bold;
	/* padding:6px 24px; */
	margin: 0px 0px 5px 5px;
	text-align: center;
	text-decoration:none;
	text-shadow:1px 1px 0px #aade7c;
	height: 44px;
	width: 60px;
	line-height: 43px;
	}

.button:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5cb811), color-stop(1, #77d42a) );
	background:-moz-linear-gradient( center top, #5cb811 5%, #77d42a 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5cb811', endColorstr='#77d42a');
	background-color:#5cb811;
	}

.button:active {
	position:relative;
	top:1px;
	}

#content_container {
	margin:0 auto;
	overflow:auto;
	padding:54px 0px 30px 0;
	}

#content {
	border: none;
	background: #222222;
	margin: 20px 0px 10px 0px;
	padding: 25px;
	}

a:link.txt {
	text-decoration: none;
	color: #FFFFFF;
	}

a:active.txt {
	text-decoration: none;
	color: #FFFFFF;
	}

a:hover.txt {
	text-decoration: none;
	color: #FFFFFF;
	}

a:visited.txt {
	text-decoration: none;
	color: #FFFFFF;
	}

.indent {
	margin-left: 20px;
	}

#li {
	list-style-type:none;
	}
 
Sort by date Sort by votes
Don't used fixed or absolute positioning because it removes the element from the normal flow.



Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum
 
Upvote 0 Downvote
'scuse my "phat phinger" typing on used

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum
 
Upvote 0 Downvote
Hi Chris,

Thank you for your reply. When I remove "position: fixed;" from header_container, undesireable effects are produced: the header doubles in height (?!), and the header scrolls up with the rest of the page. What I'm trying for is to only have the header's height expand when the buttons will no longer fit in one row across the browser window, and have the header stay always at the top of the page, so that the content scrolls up underneath it. There must be a way! I humbly submit for your kind attention.
 
Upvote 0 Downvote
In that case give the fixed positioning on #header and set #header_container to relative, that way it will constrain #header during resizing but allow it to break out when scrolled.

as demonstrated here

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
335
3esolar
3
bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
362
bdwilcox
bdwilcox
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
112
lmcate
lmcate
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
636
Mike Lewis
Mike Lewis
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
709
Chris Miller
Chris Miller

Part and Inventory Search

Sponsor

Back
Top